// Bureau — editorial sections for Head of Design portfolio

const { useState, useEffect, useRef } = React;

function useReveal(opts = { threshold: 0.12 }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } }),
      opts
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return [ref, seen];
}

// Count-up: eases a number from 0 → target once `active` flips true
function useCountUp(target, active, { decimals = 0, dur = 1400 } = {}) {
  const [val, setVal] = useState(0);
  const reduce = typeof window !== "undefined" &&
    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  useEffect(() => {
    if (!active) return;
    if (reduce) { setVal(target); return; }
    let raf, start;
    const ease = (t) => 1 - Math.pow(1 - t, 3); // easeOutCubic
    const tick = (now) => {
      if (start == null) start = now;
      const p = Math.min((now - start) / dur, 1);
      setVal(target * ease(p));
      if (p < 1) raf = requestAnimationFrame(tick);
      else setVal(target);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [active, target]);
  return Number(val).toFixed(decimals);
}

// A single animated statistic — counts up on scroll-into-view.
// pre / suf render in ink; the number animates in accent.
function Stat({ pre, val, suf, supSuf, decimals = 0, caption, source, col = "col-4" }) {
  const [r, isIn] = useReveal({ threshold: 0.45 });
  const display = useCountUp(val, isIn, { decimals });
  return (
    <div className={`nv ${col} ${isIn ? "in" : ""}`} ref={r}>
      <div className="figure">
        {pre}<em className="tick">{display}</em>{suf}
        {supSuf ? <sup>{supSuf}</sup> : null}
      </div>
      <div className="caption">{caption}</div>
      <div className="source">{source}</div>
    </div>
  );
}

// ── I. COVER ──
function Cover() {
  useEffect(() => {
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) return;
    const el = document.getElementById("top");
    if (el) requestAnimationFrame(() => el.classList.add("anim-cover"));
  }, []);
  return (
    <section className="page cover" id="top">
      <div className="cover-mast">
        <span className="vol"><b>The Murugesan Review</b> — A Portfolio in Practice</span>
        <span className="price">VOLUME XIV · MAY 2026 · OPEN TO REMOTE</span>
      </div>

      <h1 className="cover-title">
        <span className="yrs">14<sup>+</sup></span> years of<br/><em>design</em> that<br/>ships.
      </h1>

      <div className="cover-grid">
        <div className="cover-l">
          <p className="cover-lede">
            <span className="dc">A</span> career spent across <em>AI SaaS</em>, <em>XR</em>, and <em>enterprise B2B</em> — from a three-person studio to a forty-designer org. I help teams make sense of ambiguity, build the systems that hold it together, and ship work that moves the numbers leadership actually cares about.
          </p>
          <div className="cover-meta">
            <div className="row"><span className="k">Candidate</span><span className="v">Sathish Kumar M.</span></div>
            <div className="row"><span className="k">Currently</span><span className="v acc">Principal Designer, Umenit</span></div>
            <div className="row"><span className="k">Based</span><span className="v">Chennai, IN · Remote-first</span></div>
            <div className="row"><span className="k">Notice</span><span className="v">Immediate join</span></div>
            <div className="row"><span className="k">Specialism</span><span className="v">AI · XR · Systems · Leadership</span></div>
          </div>
          <div className="cover-cta">
            <a href="#work" className="btn solid">Read the work <span className="ar">↓</span></a>
            <a href="#contact" className="btn">Schedule a call <span className="ar">↗</span></a>
            <a href={window.PROFILE.resume} download className="btn">Resume / CV <span className="ar">↓</span></a>
          </div>
        </div>

        <div className="portrait-plate">
          <div className="portrait-frame">
            <span className="plate-tag"><span className="dot"></span>FIG. 01 — PORTRAIT</span>
            <div className="portrait-img">
              <span className="reg tl"></span>
              <span className="reg tr"></span>
              <span className="reg bl"></span>
              <span className="reg br"></span>
              <img src={window.RES("assets/portrait.jpg")} alt="Sathish Kumar Murugesan" />
            </div>
          </div>
          <div className="plate-caption">
            <span className="figref"><b>Sathish Kumar M.</b> <i>— Principal Designer.</i></span>
            <span className="dotleader"></span>
            <span className="credit">CHENNAI · MAY 2026</span>
          </div>
        </div>
      </div>

      <div className="toc">
        <div className="toc-h">
          <span className="l">In this issue</span>
          <span className="r">Seven chapters · 7-min read</span>
        </div>
        <div className="toc-list">
          {[
            ["I", "Cover · The thesis", "01", "#top"],
            ["II", "Selected case studies", "02", "#work"],
            ["III", "By the numbers", "10", "#numbers"],
            ["IV", "On leadership", "14", "#leadership"],
            ["V", "Track record", "18", "#record"],
            ["VI", "Toolkit", "22", "#toolkit"],
            ["VII", "Contact & colophon", "24", "#contact"],
          ].map(([n, t, pg, href]) => (
            <a className="toc-item" key={n} href={href}>
              <span className="n">{n}.</span>
              <span className="t"><span>{t}</span><span className="dots"></span></span>
              <span className="pg">p. {pg}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── II. CASE STUDIES ──
function CaseStudies({ onOpen }) {
  const featured = window.PROJECTS.filter(p => p.featured);
  return (
    <section className="page sec" id="work">
      <div className="sec-head">
        <div className="sec-head-l">
          <div className="sec-num"><em>§</em> CHAPTER II</div>
          <div className="sec-cat">Selected work, 2023—2025. Each ships into production.</div>
        </div>
        <div className="sec-head-r">
          <h2>Four projects<br/><em>under the loupe.</em></h2>
          <p className="standfirst">Edited for outcomes, not screens. Click any spread for the full case.</p>
        </div>
      </div>

      <div className="case-list">
        {featured.map((p, i) => <CaseRow key={p.id} p={p} idx={i + 1} onOpen={onOpen} />)}
      </div>
    </section>
  );
}

function CaseRow({ p, idx, onOpen }) {
  const [r, isIn] = useReveal();
  return (
    <article className={`cs reveal ${isIn ? "in" : ""}`} ref={r} onClick={() => onOpen(p)}>
      <div className="cs-num">{String(idx).padStart(2,"0")}.</div>
      <div className="cs-body">
        <div className="cs-cat">
          <span>{p.industry}</span><span className="dot">·</span>
          <span>{p.platform}</span><span className="dot">·</span>
          <span>{p.duration}</span><span className="dot">·</span>
          <span>{p.year}</span>
        </div>
        <h3>{p.title.split(" — ")[0]} <em>— {p.title.split(" — ")[1]}</em></h3>
        <p className="standfirst">{p.summary}</p>
        <div className="kpis">
          {(p.kpis || []).slice(0, 3).map((k, i) => (
            <div className="kpi" key={i}>
              <div className="kv">{k.v}</div>
              <div className="kl">{k.l}</div>
            </div>
          ))}
        </div>
        <span className="cs-read">Read the full case</span>
      </div>
      <div className="cs-visual">
        <div className="tag"><span>{p.role}</span><span className="yr">№ {String(idx).padStart(2,"0")} · {p.year}</span></div>
        <div className="device">
          {p.id === "p01" ? (
            <div className="laptop">
              <div className="chrome"><span></span><span></span><span></span></div>
              <div className="screen"><img src={window.RES("assets/thumbs/upfinzo.png")} alt={p.title} /></div>
            </div>
          ) : p.id === "p02" ? (
            <div className="laptop">
              <div className="chrome"><span></span><span></span><span></span></div>
              <div className="screen"><img src={window.RES("assets/thumbs/mcd-dashboard.png")} alt={p.title} /></div>
            </div>
          ) : p.id === "p10" ? (
            <div className="laptop">
              <div className="chrome"><span></span><span></span><span></span></div>
              <div className="screen"><img src={window.RES("assets/thumbs/park-driveway.png")} alt={p.title} /></div>
            </div>
          ) : p.id === "p11" ? (
            <div className="laptop">
              <div className="chrome"><span></span><span></span><span></span></div>
              <div className="screen"><img src={window.RES("assets/thumbs/umenit.png")} alt={p.title} /></div>
            </div>
          ) : (
            <div className="laptop">
              <div className="chrome"><span></span><span></span><span></span></div>
              <div className="screen" style={{background:"linear-gradient(135deg, #ede7d5, #d8d3c4)",display:"flex",alignItems:"center",justifyContent:"center",fontFamily:"Newsreader",fontStyle:"italic",fontSize:"80px",color:"rgba(26,26,23,0.2)"}}>L</div>
            </div>
          )}
        </div>
      </div>
    </article>
  );
}

// ── III. BY THE NUMBERS ──
function Numbers() {
  return (
    <section className="page sec" id="numbers">
      <div className="sec-head">
        <div className="sec-head-l">
          <div className="sec-num"><em>§</em> CHAPTER III</div>
          <div className="sec-cat">A receipt, in figures.</div>
        </div>
        <div className="sec-head-r">
          <h2>What the work <em>added up to.</em></h2>
          <p className="standfirst">Selected outcomes from shipped projects and design-org operations.</p>
        </div>
      </div>

      <div className="nums">
        <Stat col="col-4" pre="+" val={120} supSuf="%"
          caption="Feedback volume growth across multi-location hospitality businesses, over nine months."
          source="— Upfinzo Analytics" />
        <Stat col="col-4" pre="↓" val={40} supSuf="%"
          caption="Unresolved kitchen escalations through real-time stage-by-stage attribution."
          source="— Escalation Timeline" />
        <Stat col="col-4" val={3.2} decimals={1} suf="×"
          caption="Faster root-cause identification — automated stage attribution replacing manual investigation."
          source="— Escalation Timeline" />

        <div className="pullquote">
          <q>Design isn't decoration. It's the operating system of a product team — and the responsibility of the person who runs it.</q>
          <div className="cite">— Working principle, on leading design</div>
        </div>

        <Stat col="col-3" val={14} suf="+"
          caption="Years designing, shipping, and leading across five companies."
          source="— Track record" />
        <Stat col="col-3" val={60} suf="+"
          caption="Products and features shipped across web, mobile, kiosk, and XR."
          source="— Career total" />
        <Stat col="col-3" val={5}
          caption="Industries — AI SaaS, XR, healthcare, QSR, events."
          source="— Domain depth" />
        <Stat col="col-3" val={120}
          caption="Components in the design system I authored — adopted by 4 product teams."
          source="— Design ops" />
      </div>
    </section>
  );
}

// ── IV. ON LEADERSHIP ──
function Leadership() {
  const tenets = [
    { n: "01", h: "Lead with outcomes, ship with craft.",
      d: "I tie every design decision to a measurable product or business outcome. Pretty doesn't ship; outcomes do. The craft is in how we get there." },
    { n: "02", h: "Systems before screens.",
      d: "A great Head builds the systems — tokens, components, rituals, contribution models — that let everyone else ship faster than they could alone." },
    { n: "03", h: "Hire for taste, train for craft.",
      d: "Taste is the hardest thing to teach and the easiest thing to wreck a team without. I hire for it, protect it, and grow craft on top." },
    { n: "04", h: "Design has to be in the room.",
      d: "Design earns its seat by being useful to product, eng, and the business — not by demanding it. I run designers who speak all three languages." },
  ];
  return (
    <section className="page sec" id="leadership">
      <div className="sec-head">
        <div className="sec-head-l">
          <div className="sec-num"><em>§</em> CHAPTER IV</div>
          <div className="sec-cat">Four working principles.</div>
        </div>
        <div className="sec-head-r">
          <h2>On <em>leading</em><br/>design.</h2>
          <p className="standfirst">The convictions I bring to a design org. Refined over fourteen years and five teams.</p>
        </div>
      </div>

      <div className="lead-grid">
        {tenets.map((t, i) => {
          const [r, isIn] = useReveal();
          return (
            <div className={`ldcard reveal ${isIn ? "in" : ""}`} key={i} ref={r}>
              <div className="n">PRINCIPLE — {t.n}</div>
              <h4>{t.h}</h4>
              <p>{t.d}</p>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ── V. TRACK RECORD ──
function TrackRecord() {
  return (
    <section className="page sec" id="record">
      <div className="sec-head">
        <div className="sec-head-l">
          <div className="sec-num"><em>§</em> CHAPTER V</div>
          <div className="sec-cat">Five companies, fourteen years.</div>
        </div>
        <div className="sec-head-r">
          <h2>The <em>track</em><br/>record.</h2>
        </div>
      </div>

      <div className="tr-table">
        {window.EXPERIENCE.map((j, i) => <TrackRow key={i} j={j} />)}
      </div>
    </section>
  );
}

function TrackRow({ j }) {
  const [r, isIn] = useReveal({ threshold: 0.25 });
  return (
    <div className={`tr-row tr-rv ${isIn ? "in" : ""}`} ref={r}>
      <div className="yr">{j.year}</div>
      <div className="logo"><img src={j.logo} alt={j.company} /></div>
      <div className="role">
        <div className="t">{j.role}</div>
        <div className="c">{j.company} · {j.location}</div>
      </div>
      <div className="desc">{j.desc}</div>
    </div>
  );
}

// ── VI. TOOLKIT ──
function Toolkit() {
  const cells = window.TOOLS.flatMap((t, i) => [
    <div className="tool-cell" key={`t-${i}`}>
      {t.iconUrl ? (
        <img src={t.iconUrl} alt={t.nm} />
      ) : t.icon ? (
        <img src={`https://cdn.simpleicons.org/${t.icon}/${t.color || "1a1a17"}`} alt={t.nm} />
      ) : null}
      <span>{t.nm}</span>
    </div>,
    <span className="sep" key={`s-${i}`}>·</span>
  ]);
  return (
    <section className="tools-strip" id="toolkit">
      <div className="head">
        <span className="ll">VI. Toolkit — daily drivers</span>
        <span className="meta">{window.TOOLS.length} tools · Figma is home</span>
      </div>
      <div className="tools-marquee">
        <div className="tools-track">{cells}{cells}</div>
      </div>
    </section>
  );
}

// ── VII. CONTACT ──
function Contact() {
  return (
    <section className="contact" id="contact">
      <div className="page">
        <div className="contact-mast">
          <span className="label"><em>§</em> CHAPTER VII · CONTACT</span>
          <span className="date">CORRESPONDENCE OPEN · MAY 2026</span>
        </div>
        <div className="contact-grid">
          <div className="contact-l">
            <h2>For roles, partnerships, or a <em>thoughtful</em> chat —</h2>
            <p className="lede">I'm open to Head of Design / Design Director roles, design-leadership advisory, and contract engagements. Tell me what you're building.</p>
          </div>
          <div className="contact-r">
            <div className="ccrow">
              <span className="k">E-MAIL</span>
              <span className="v">{window.PROFILE.email}</span>
              <a className="a solid" href={`mailto:${window.PROFILE.email}`}>Compose</a>
            </div>
            <div className="ccrow">
              <span className="k">WHATSAPP</span>
              <span className="v">{window.PROFILE.phone}</span>
              <a className="a solid" href={`https://wa.me/91${window.PROFILE.phone.replace(/[^0-9]/g,"").slice(-10)}`} target="_blank" rel="noopener">Message</a>
            </div>
            <div className="ccrow">
              <span className="k">PHONE</span>
              <span className="v">{window.PROFILE.phone}</span>
              <a className="a" href={`tel:${window.PROFILE.phone}`}>Call</a>
            </div>
            <div className="ccrow">
              <span className="k">LINKEDIN</span>
              <span className="v">/sathishkumar-murugesan</span>
              <a className="a solid" href={window.PROFILE.linkedin} target="_blank" rel="noopener">Connect</a>
            </div>
            <div className="ccrow">
              <span className="k">RESUME</span>
              <span className="v">DOCX · 2026 edition</span>
              <a className="a" href={window.PROFILE.resume} download>Download</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── COLOPHON ──
function Colophon() {
  return (
    <footer className="page colophon">
      <div className="colophon-grid">
        <div className="col-col">
          <h6>The Review</h6>
          <p>An ongoing portfolio of design work in product, systems, and leadership.</p>
          <p>Edited in Chennai · Practised everywhere.</p>
        </div>
        <div className="col-col">
          <h6>Type</h6>
          <p>Display: Newsreader, by Production Type.</p>
          <p>Body: Inter Tight, by Rasmus Andersson.</p>
          <p>Notation: JetBrains Mono.</p>
        </div>
        <div className="col-col">
          <h6>Tools</h6>
          <p>Designed in Figma.<br/>Built with Claude.<br/>Set on warm cream paper.</p>
        </div>
        <div className="col-col">
          <h6>Index</h6>
          <a href="#top">I. Cover</a>
          <a href="#work">II. Work</a>
          <a href="#numbers">III. Numbers</a>
          <a href="#leadership">IV. Leadership</a>
          <a href="#record">V. Record</a>
          <a href="#toolkit">VI. Toolkit</a>
          <a href="#contact">VII. Contact</a>
        </div>
      </div>
      <div className="col-bar">
        <span>© 2026 SATHISH KUMAR MURUGESAN · ALL CASES OWN WORK</span>
        <span><em>Designed with care</em> <span className="heart">●</span> ISSN 26.05.MMXXVI</span>
        <span>VOL. XIV · ISSUE 01 · v2026.05</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Cover, CaseStudies, Numbers, Leadership, TrackRecord, Toolkit, Contact, Colophon, useReveal });