/* global React */
const { useState, useEffect, useRef } = React;

/* ─────────────────────── Hero ─────────────────────── */
function Hero() {
  const [clock, setClock] = useState("");
  const [dIdx, setDIdx] = useState(0);
  const disciplines = ["Bioinformatics", "Game Design", "Strategic Design", "Design Innovation"];

  useEffect(() => {
    const fmt = () => {
      const now = new Date();
      // Show Sydney-ish label; we just show local time with AU label for flavor
      const t = now.toLocaleTimeString("en-AU", { hour: "2-digit", minute: "2-digit", hour12: false });
      setClock(t);
    };
    fmt(); const t = setInterval(fmt, 30000);
    const d = setInterval(() => setDIdx(i => (i+1) % disciplines.length), 2800);
    return () => { clearInterval(t); clearInterval(d); };
  }, []);

  return (
    <section className="hero" id="top">
      <div className="hero-top">
        <div className="mono">// PORTFOLIO · 2026</div>
        <div className="mono">◆ EMBER — 001 · LOOP</div>
      </div>
      <div className="hero-content">
        <div className="hero-title">
          <div className="lede">designer · researcher · builder · currently in Sydney.</div>
          <h1 className="h1">
            Raghu Mina <em>—</em><br/>
            designing at the intersection of <em>research, play, and systems.</em>
          </h1>
        </div>
        <div className="hero-bottom">
          <div className="left">
            <div className="discipline-rotator">
              <span className="lead">Currently →</span>
              <span className="now" key={dIdx} style={{animation: "fadeUp 500ms var(--ease-out)"}}>
                {disciplines[dIdx]}
              </span>
            </div>
          </div>
          <a href="#thesis" className="center scroll-indicator" data-hover="Scroll">
            <span>Scroll</span>
            <span className="arrow" />
          </a>
          <div className="right mono">
            {clock} · Sydney, AU · UTC+11
          </div>
        </div>
      </div>
      <style>{`
        @keyframes fadeUp {
          from { opacity: 0; transform: translateY(6px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </section>
  );
}

/* ─────────────────────── Thesis ─────────────────────── */
function Thesis() {
  const discs = [
    { key: "bio",        title: "Bioinformatics",    desc: "Systems biology. The grammar of living structure.", meta: "BSc · 2019" },
    { key: "game",       title: "Game Design",        desc: "Rules as a medium. Mechanics that carry learning.", meta: "MS · UCSC 2022" },
    { key: "strategy",   title: "Strategic Design",   desc: "How products and services earn the right to exist.", meta: "MDes · USyd 2026" },
    { key: "innovation", title: "Design Innovation",  desc: "Cross-disciplinary prototyping. The synthesis engine.", meta: "ADP · ongoing" },
  ];
  return (
    <section className="thesis" id="thesis">
      <div className="wrap">
        <Reveal>
          <div className="mono" style={{marginBottom: 40}}>// 00 — THESIS</div>
        </Reveal>
        <Reveal delay={1}>
          <div className="thesis-body">
            <p className="thesis-statement">
              Multidisciplinary by training, specific by practice. <em>Open to new work</em> with teams who treat research, craft, and play as one discipline rather than three.
            </p>
          </div>
        </Reveal>
        <Reveal delay={2}>
          <div className="thesis-grid">
            {discs.map(d => {
              const accent = window.DISCIPLINES[d.key].accent;
              return (
                <div className="discipline-card" key={d.key} style={{"--accent": accent}}>
                  <span className="dot-sm" />
                  <h4>{d.title}</h4>
                  <p>{d.desc}</p>
                  <div className="meta">{d.meta}</div>
                </div>
              );
            })}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ─────────────────────── Work ─────────────────────── */
function Work() {
  const [filter, setFilter] = useState("all");
  const filters = [
    { k: "all",        l: "All" },
    { k: "bio",        l: "Bio" },
    { k: "game",       l: "Game" },
    { k: "strategy",   l: "Strategy" },
    { k: "innovation", l: "Innovation" },
  ];
  const all = window.PROJECTS;
  const visible = filter === "all" ? all : all.filter(p => p.discipline === filter);

  // Layout classes per spec
  const layouts = {
    careconnect:    "span-12 wide",    // full-width cinematic
    "success-ladder":"span-7",
    yasumo:         "span-5",
    vivid:          "span-12 wide",
    chromatin:      "span-7 offset-right"
  };

  return (
    <section id="work">
      <div className="wrap">
        <Reveal>
          <div className="sec-head">
            <div>
              <span className="eyebrow">// 01 — SELECTED WORK</span>
              <h2 className="h2">Five projects, <em>five ways of thinking.</em></h2>
            </div>
            <div className="filter-bar">
              Filter:
              {filters.map(f => (
                <button key={f.k}
                  className={filter === f.k ? "active" : ""}
                  onClick={() => setFilter(f.k)}>{f.l}</button>
              ))}
            </div>
          </div>
        </Reveal>
        <div className="work-grid">
          {visible.map((p, i) => {
            const d = window.DISCIPLINES[p.discipline];
            return (
              <Reveal key={p.id} delay={Math.min(i+1, 4)} className={`p-card ${layouts[p.id] || "span-6"}`}>
                <a href={`projects/${p.id}.html`} data-hover="Open case">
                  <div className="cover" style={{"--accent": d.accent}}>
                    <ProjectCover project={p} />
                    {p.status === "In Progress" && (
                      <span className="in-progress-badge">● IN PROGRESS · Shipping May 2026</span>
                    )}
                    <span className="arrow-link" aria-hidden="true">↗</span>
                  </div>
                  <div className="p-meta" style={{"--accent": d.accent}}>
                    <div className="row1">
                      <span className="p-pill"><span className="pill-dot" /> {d.label}</span>
                      <span className="p-num">{p.num} / 05</span>
                    </div>
                    <h3 className="p-title">{p.title}</h3>
                    <p className="p-sub">{p.subtitle}</p>
                    <div className="p-foot mono-sm">
                      <span>{p.year} · {p.role}</span>
                      <span>{p.status}</span>
                    </div>
                  </div>
                </a>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────── Lab ─────────────────────── */
function Lab() {
  const [items, setItems] = useState(window.LAB);
  const shuffle = () => {
    const next = [...items].sort(() => Math.random() - 0.5);
    setItems(next);
  };
  return (
    <section id="lab" style={{background: "var(--surface)"}}>
      <div className="wrap">
        <Reveal>
          <div className="sec-head">
            <div>
              <span className="eyebrow">// 02 — THE LAB</span>
              <h2 className="h2">Experiments, sketches, <em>and things made for fun.</em></h2>
              <p className="muted" style={{maxWidth: 560, marginTop: 16}}>A living archive of weekend builds. Updated monthly.</p>
            </div>
            <button className="btn" onClick={shuffle} data-hover="Shuffle">↻ Shuffle</button>
          </div>
        </Reveal>
        <div className="lab-grid">
          {items.map((x, i) => {
            const disc = ["bio","game","strategy","innovation"][i % 4];
            const accent = window.DISCIPLINES[disc].accent;
            return (
              <Reveal key={x.title} delay={(i % 4) + 1} className="lab-tile" >
                <div className="thumb" style={{"--accent": accent}}>
                  <div className="thumb-accent" style={{background: accent}} />
                </div>
                <h3 className="title">{x.title}</h3>
                <p className="desc">{x.desc}</p>
                <div className="meta">
                  <span>{x.date}</span>
                  {x.tag && <span className="tag">● {x.tag}</span>}
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────── About ─────────────────────── */
function About() {
  return (
    <section id="about">
      <div className="wrap">
        <Reveal>
          <div className="sec-head">
            <div>
              <span className="eyebrow">// 03 — ABOUT</span>
              <h2 className="h2">A short biography, <em>told briefly.</em></h2>
            </div>
            <div className="mono-sm" style={{textAlign: "right"}}>SYDNEY · 2026</div>
          </div>
        </Reveal>
        <div className="about-grid">
          <Reveal className="about-body">
            <p className="body-lg">
              I design systems. Sometimes biological, sometimes playable, sometimes strategic. Most interested in where they overlap.
            </p>
            <div className="pull-quote zoom-lock">
              "Rigor is a prerequisite, not a flourish."
            </div>
            <p>
              Bioinformatics → game design → strategic design. Three grammars for the same instinct: make complex systems legible, then make them better.
            </p>
            <p>
              Looking for small teams at the intersection of research and craft. Health, education, civic tech — any domain with a strange dataset and a clear problem.
            </p>
          </Reveal>
          <Reveal delay={2}>
            <div className="mono" style={{marginBottom: 24}}>HOW I WORK</div>
            <div className="principles">
              {[
                { n: "01", t: "Start from constraints.", d: "Constraint makes design specific. Freedom makes it generic." },
                { n: "02", t: "Evidence over aesthetics.", d: "Taste alone is a decision the next designer gets to undo." },
                { n: "03", t: "Play is research.", d: "Prototypes are experiments I run on my own assumptions." },
                { n: "04", t: "Leave notes.", d: "Process is product. Undocumented findings aren't findings." },
              ].map(p => (
                <div key={p.n} className="principle">
                  <span className="num">{p.n}</span>
                  <div>
                    <h5>{p.t}</h5>
                    <p>{p.d}</p>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────── CV / Recognition ─────────────────────── */
function CVSection() {
  const { education, experience, recognition, clients } = window.CV;
  return (
    <section id="cv">
      <div className="wrap">
        <Reveal>
          <div className="sec-head">
            <div>
              <span className="eyebrow">// 04 — RECOGNITION & CV</span>
              <h2 className="h2">For the skimmers, <em>and the recruiters.</em></h2>
            </div>
            <a href="uploads/Raghu_Mina_Resume_Canva.pdf" className="btn" data-hover="Download PDF" target="_blank" rel="noreferrer">↓ Download CV</a>
          </div>
        </Reveal>
        <Reveal>
          <div className="cv-rows">
            {[
              { cat: "Education", rows: education },
              { cat: "Experience", rows: experience },
              { cat: "Recognition", rows: recognition },
            ].map(group => (
              <div className="cv-row" key={group.cat}>
                <div className="cat">{group.cat}</div>
                <div>
                  {group.rows.map((r, i) => (
                    <div className="cv-entry" key={i}>
                      <div className="role">{r.role} <span className="org">· {r.org}</span></div>
                      <div className="dates">{r.dates}</div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
            <div className="cv-row">
              <div className="cat">Clients & Collaborators</div>
              <div style={{display:"flex", flexWrap:"wrap", gap:"8px 20px", paddingTop: 6}}>
                {clients.map(c => <span key={c} className="p-pill">{c}</span>)}
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ─────────────────────── Journal ─────────────────────── */
function Journal() {
  return (
    <section id="journal">
      <div className="wrap">
        <Reveal>
          <div className="sec-head">
            <div>
              <span className="eyebrow">// 05 — JOURNAL</span>
              <h2 className="h2">Short essays, <em>half-formed ideas.</em></h2>
            </div>
            <div className="mono-sm">4 ENTRIES · MOSTLY MONTHLY</div>
          </div>
        </Reveal>
        <div className="journal-list">
          {window.JOURNAL.map((j, i) => (
            <Reveal key={i} className="journal-entry" delay={Math.min(i+1, 4)}>
              <span className="date">{j.date}</span>
              <span className="cat">{j.category}</span>
              <a href="#" onClick={e=>e.preventDefault()} className="title" data-hover="Read">
                {j.title}
                <span className="excerpt">{j.excerpt}</span>
              </a>
              <span className="more">READ →</span>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────── Contact ─────────────────────── */
function Contact() {
  return (
    <section id="contact" style={{background: "var(--surface)"}}>
      <div className="wrap contact-wrap">
        <Reveal>
          <div className="mono">// LET'S TALK</div>
        </Reveal>
        <Reveal delay={1}>
          <h2 className="contact-statement">
            Have a problem <em>worth solving?</em> I'd love to hear about it.
          </h2>
        </Reveal>
        <Reveal delay={2}>
          <div className="contact-methods">
            <a href="mailto:minaraghu1@gmail.com" className="contact-method primary" data-hover="Copy email">
              <span className="lbl">Primary</span>
              <span className="val">minaraghu1@gmail.com</span>
              <span className="lbl" style={{marginTop: 'auto'}}>I reply within 24h on weekdays.</span>
            </a>
            <a href="https://www.linkedin.com/in/mina-r" target="_blank" rel="noreferrer" className="contact-method" data-hover="Say hi">
              <span className="lbl">DMs open</span>
              <span className="val">LinkedIn ↗</span>
              <span className="lbl" style={{marginTop: 'auto'}}>Also: Are.na, Twitter</span>
            </a>
          </div>
        </Reveal>
        <Reveal delay={3}>
          <div className="contact-foot">
            <div>
              <span className="mono">AVAILABILITY</span>
              <span><span className="dot" style={{display:'inline-block', verticalAlign:'middle', marginRight:8}} />Currently exploring new engagements</span>
            </div>
            <div>
              <span className="mono">TIMEZONE</span>
              <span>Sydney, AU · UTC+11</span>
            </div>
            <div>
              <span className="mono">RESPONSE</span>
              <span>Within 24h on weekdays</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Thesis, Work, Lab, About, CVSection, Journal, Contact });