/* ============================================================
   Content sections: About, Selected Work, Connect (bento), Footer
   Restrained palette, high-contrast thin type, thick glass,
   project image placeholders (no icons), even bento alignment.
   ============================================================ */

function useReveal(options) {
  const ref = useRef(null);
  const reduced = usePrefersReducedMotion();
  useEffect(function () {
    const el = ref.current;
    if (!el) return;
    if (reduced) { el.classList.add("is-in"); return; }
    const io = new IntersectionObserver(function (entries) {
      entries.forEach(function (e) {
        if (e.isIntersecting) { el.classList.add("is-in"); io.unobserve(e.target); }
      });
    }, Object.assign({ threshold: 0.15, rootMargin: "0px 0px -8% 0px" }, options || {}));
    io.observe(el);
    return function () { io.disconnect(); };
  }, [reduced]);
  return ref;
}

function SectionLabel(props) {
  return (
    <div style={{ display: "flex", alignItems: "baseline", gap: 18, marginBottom: 36 }}>
      <span className="pf-num" style={{ fontSize: 18, color: "var(--accent)" }}>{props.index}</span>
      <span style={{ width: 48, height: 1, background: "var(--pf-hairline)", alignSelf: "center" }} />
      <span className="pf-eyebrow">{props.children}</span>
    </div>
  );
}

/* image placeholder — renders a theme-aware cover image when provided,
   otherwise a grey "Image" box for the user to fill later */
function Placeholder(props) {
  const cover = props.cover;
  const theme = props.theme || (typeof document !== "undefined" && document.documentElement.getAttribute("data-theme")) || "dark";
  const src = cover ? (theme === "light" ? cover.light : cover.dark) : null;
  return (
    <div className={"pf-ph " + (props.className || "")} role="img" aria-label={(props.label || "Project") + (props.liveOrb ? "" : src ? " cover" : " image placeholder")}
      style={Object.assign({ minHeight: props.h || 180, overflow: "hidden", padding: 0 }, (props.coverFrame === "tv" ? { background: "#ffffff", border: "none" } : null), props.style)}>
      {props.live ? (
        <span className="pf-live" aria-label="Live project">
          <span className="pf-live-dot" aria-hidden="true" />
          Live
        </span>
      ) : null}
      {props.liveOrb
        ? <window.NomiOrb theme={theme} minH={props.h || 180} />
        : props.coverEmbed
          ? (props.coverFrame === "tv"
              ? <span style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", background: theme === "light" ? "#ffffff" : "#000000", padding: "14px" }}>
                  <span style={{
                    position: "relative", width: "100%", maxWidth: "calc(100% - 4px)", aspectRatio: "16 / 9", maxHeight: "100%",
                    borderRadius: 12, overflow: "hidden",
                    /* match the tour's own page colour: a contrasting fill would
                       show as edge lines wherever the iframe lands on a subpixel */
                    background: "#faf9f5",
                    /* clip-path on the wrapper is what actually rounds an iframe,
                       and it clips the overscan below too */
                    clipPath: "inset(0 round 12px)",
                    boxShadow: theme === "light" ? "0 0 0 6px #ffffff, 0 0 0 6.5px rgba(20,32,46,0.035)" : "0 0 0 6px #1b1f27, 0 0 0 8px #2a2f3a",
                  }}>
                    <iframe title={(props.label || "Project") + " cover"} src={props.coverEmbed} scrolling="no" tabIndex="-1" style={{
                      /* The tour centres its stage on a navy page and rings it with a
                         100px black glow, so its outermost pixels are dark. Overscan
                         past that band and let the wrapper's clip-path crop it away. */
                      position: "absolute", inset: -7, width: "calc(100% + 14px)", height: "calc(100% + 14px)",
                      border: 0, display: "block", pointerEvents: "none",
                    }} />
                  </span>
                </span>
              : <iframe title={(props.label || "Project") + " cover"} src={props.coverEmbed} scrolling="no" tabIndex="-1" style={{ width: "100%", height: "100%", border: 0, display: "block", pointerEvents: "none", background: "#ffffff" }} />)
          : src
            ? <img src={src} alt={props.label + " cover"} style={{ width: "100%", height: "100%", objectFit: "contain", display: "block", background: (theme === "light" ? (cover.lightBg || "#ffffff") : (cover.darkBg || "#0a0a0b")) }} />
            : "Image"}
    </div>
  );
}

/* ---------- About (bento) ---------- */
/* hover-to-flip credential card: name on the front, the detail behind it */
function FlipCard(props) {
  return (
    <div className={"gv-flip " + (props.className || "")} tabIndex={0} role="group"
      aria-label={props.name + ". " + props.backTitle + ". " + props.backBody}
      style={{ gridColumn: props.col }}>
      <div className="gv-flip-in">
        <div className="gv-face front pf-glass">
          <div className="yr">{props.kicker}</div>
          <div>
            <div className="nm">{props.name}</div>
            <div className="hint" style={{ marginTop: 10 }}>
              <i data-lucide="corner-down-left" style={{ width: 12, height: 12 }} />
              hover
            </div>
          </div>
        </div>
        <div className="gv-face back pf-glass pf-glass--thick">
          <div className="bl">{props.backTitle}</div>
          <div className="bt">{props.backBody}</div>
          {props.backNote ? <div className="bd">{props.backNote}</div> : null}
        </div>
      </div>
    </div>
  );
}

const EDU = [
  { kicker: "Computer Science", name: "UPenn", bt: "M.A.S. Computer Science", bd: "Applied Science, AI concentration. Where the building half comes from: Python, GCP, and the model work behind my AI products." },
  { kicker: "Architecture", name: "USC", bt: "M.Arch I", bd: "Six years of designing systems that must hold up under real constraint. It is still how I think about product architecture." },
  { kicker: "Design", name: "Pratt", bt: "B.F.A. Design", bd: "The craft foundation: type, composition, and the judgment to know when something is actually finished." },
];
const AWARDS = [
  { kicker: "2025", name: "Dentsu NorthStar Award", bt: "Integrated Growth category", bd: "Top 8% of 1,200+ teams, for the MySubaru retention work." },
  { kicker: "2025", name: "Google DeepMind Hackathon", bt: "Search & Scratch", bd: "GenAI commercial: design and coding, built end to end." },
  { kicker: "2021", name: "TCH Healthcare Hackathon", bt: "1st place · Touchless Experience", bd: "Texas Children's Hospital, for the emotional-AI telemedicine concept." },
  { kicker: "2021", name: "USC Game Expo Ruby", bt: "AR Game Design", bd: "The Puzzle Box: spatial interaction, built and shipped as a team." },
];

function AboutSection() {
  const ref = useReveal();
  const focus = ["AI Product Design", "0 → 1 Product Strategy", "Design Systems", "Prototyping & Front-end", "Mixed-Method Research", "Consumer Scale"];
  return (
    <section id="about" aria-labelledby="about-h" className="pf-section">
      <div ref={ref} className="pf-container gv-reveal">
        <SectionLabel index="01">About</SectionLabel>
        <div className="pf-bento" style={{ gridAutoRows: "minmax(120px, auto)" }}>

          <div className="pf-glass" style={Object.assign({}, cellPad, { gridColumn: "span 7", gridRow: "span 2", justifyContent: "center" })}>
            <h2 id="about-h" className="pf-h2" style={{ margin: 0, fontSize: "clamp(26px, 3.1vw, 44px)" }}>
              I pioneer AI products end to end, then turn that practice into results a whole org can ship.
            </h2>
            <p className="pf-lead" style={{ margin: "24px 0 0", maxWidth: 620 }}>
              The loop is the point: what I prove alone becomes what my team gets to ship.
            </p>
          </div>

          <div className="pf-glass" style={Object.assign({}, cellPad, { gridColumn: "span 5", gridRow: "span 1", justifyContent: "center" })}>
            <div className="pf-eyebrow" style={{ marginBottom: 14 }}>Where the practice is proven &middot; ZeyaAI</div>
            <p className="pf-body" style={{ margin: 0 }}>
              One thesis: AI should preserve the different versions of a person, not flatten them into one voice.{" "}
              <strong style={{ fontWeight: 500, color: "var(--label-primary)" }}>nomi</strong> went from concept to live in
              a week, earned its direction across two research rounds (intended-self fit 50% to 69%), and drew 800+
              visitors in its first week of paid traffic: 87% on mobile, which reset the design mobile-first.{" "}
              <strong style={{ fontWeight: 500, color: "var(--label-primary)" }}>Nyla</strong> is what that evidence
              pointed to.
            </p>
          </div>

          <div className="pf-glass" style={Object.assign({}, cellPad, { gridColumn: "span 5", gridRow: "span 1", justifyContent: "center" })}>
            <div className="pf-eyebrow" style={{ marginBottom: 14 }}>Where it pays off &middot; Dentsu &times; Subaru of America</div>
            <p className="pf-body" style={{ margin: 0 }}>
              Embedded at Subaru of America, I own the retention half of MySubaru. The redesign lifted year-end active
              usage 40.6%, daily returning visitors from 97.6K to 149.8K, and account revenue 33%, taking the{" "}
              <strong style={{ fontWeight: 500, color: "var(--label-primary)" }}>Dentsu NorthStar Award</strong> (top 8%
              of 1,200+ teams). I mentor five designers across six teams, so the method travels further than my own files.
            </p>
          </div>

          <div className="pf-glass" style={Object.assign({}, cellPad, { gridColumn: "span 12", gridRow: "span 1", justifyContent: "center" })}>
            <p className="pf-lead" style={{ margin: 0, maxWidth: 1040 }}>
              My training is unusual on purpose: a <strong style={{ fontWeight: 500, color: "var(--label-primary)" }}>B.F.A. in Design from Pratt</strong>,
              an <strong style={{ fontWeight: 500, color: "var(--label-primary)" }}>M.Arch from USC</strong>, and an{" "}
              <strong style={{ fontWeight: 500, color: "var(--label-primary)" }}>M.A.S. in Computer Science with an AI concentration from UPenn</strong>.
              Design gave me the craft, architecture gave me systems thinking under constraint, and computer science
              lets me prototype what I design and reason about models with the engineers who ship them. I work at the
              intersection of AI and product design.
            </p>
          </div>

          <div style={{ gridColumn: "span 12", marginTop: 10 }}>
            <div className="pf-eyebrow" style={{ marginBottom: 18 }}>Education</div>
            <div className="pf-bento" style={{ gridAutoRows: "auto" }}>
              {EDU.map(function (e) {
                return <FlipCard key={e.name} col="span 4" kicker={e.kicker} name={e.name} backTitle={e.bt} backBody={e.bd} />;
              })}
            </div>
          </div>

          <div style={{ gridColumn: "span 12", marginTop: 10 }}>
            <div className="pf-eyebrow" style={{ marginBottom: 18 }}>Recognition</div>
            <div className="pf-bento" style={{ gridAutoRows: "auto" }}>
              {AWARDS.map(function (a) {
                return <FlipCard key={a.name} col="span 3" kicker={a.kicker} name={a.name} backTitle={a.bt} backBody={a.bd} />;
              })}
            </div>
          </div>

          <div className="pf-glass" style={Object.assign({}, cellPad, { gridColumn: "span 12", gridRow: "span 1", justifyContent: "center" })}>
            <div className="pf-eyebrow" style={{ marginBottom: 22 }}>Focus</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 14 }}>
              {focus.map(function (f) { return <span key={f} className="pf-chip">{f}</span>; })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Selected Work (even bento, image placeholders) ---------- */
function FeaturedCard(props) {
  const c = props.case;
  const [hover, setHover] = useState(false);
  return (
    <a href={"#" + c.id} onClick={function (e) { e.preventDefault(); props.onOpen(c.id); }}
      aria-label={"Open case study: " + c.title}
      onMouseEnter={function () { setHover(true); }} onMouseLeave={function () { setHover(false); }}
      onFocus={function () { setHover(true); }} onBlur={function () { setHover(false); }}
      className="pf-glass pf-glass--thick gv-featured"
      style={{ gridColumn: "span 12", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(28px, 3vw, 56px)", alignItems: "center", padding: "clamp(28px, 2.6vw, 44px)", textDecoration: "none", color: "inherit", transform: hover ? "translateY(-4px)" : "none", transition: "transform 420ms var(--glass-spring)" }}>
      <Placeholder label={c.title} h={420} live={!!c.live || c.liveBadge} liveOrb={c.liveOrb} coverEmbed={c.coverEmbed} coverFrame={c.coverFrame} cover={c.cover} theme={props.theme} className="gv-featured-cover" style={{ minHeight: 420, height: "100%" }} />
      <div>
        <div style={caseOrg}>{c.org}</div>
        <h3 className="pf-h3" style={{ margin: "0 0 18px", fontSize: "clamp(28px, 3vw, 40px)" }}>{c.title}</h3>
        <p className="pf-body" style={{ margin: "0 0 20px", maxWidth: 460 }}>{c.desc}</p>
        {c.metrics ? (
          <ul className="gv-outcomes">
            {c.metrics.map(function (m) { return <li key={m}>{m}</li>; })}
          </ul>
        ) : null}
        {c.live ? (
          <span className="gv-livelink">
            <span className="pf-live-dot" aria-hidden="true" />
            {c.live.replace(/^https?:\/\//, "")}
          </span>
        ) : null}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }}>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            {c.tags.map(function (t) { return <span key={t} className="pf-chip">{t}</span>; })}
          </div>
          <span style={{ fontSize: 14, letterSpacing: "0.04em", color: "var(--label-secondary)", opacity: hover ? 1 : 0.75, transition: "opacity 220ms" }}>View case</span>
        </div>
      </div>
    </a>
  );
}

function CaseCard(props) {
  const c = props.case;
  const [hover, setHover] = useState(false);
  return (
    <a href={"#" + c.id} onClick={function (e) { e.preventDefault(); props.onOpen(c.id); }}
      aria-label={"Open case study: " + c.title}
      onMouseEnter={function () { setHover(true); }} onMouseLeave={function () { setHover(false); }}
      onFocus={function () { setHover(true); }} onBlur={function () { setHover(false); }}
      className="pf-glass"
      style={{ gridColumn: "span 6", display: "flex", flexDirection: "column", padding: "clamp(22px, 2vw, 30px)", textDecoration: "none", color: "inherit", transform: hover ? "translateY(-4px)" : "none", transition: "transform 420ms var(--glass-spring)" }}>
      <Placeholder label={c.title} h={390} live={!!c.live || c.liveBadge} liveOrb={c.liveOrb} coverEmbed={c.coverEmbed} coverFrame={c.coverFrame} cover={c.cover} theme={props.theme} style={{ height: 390, flexShrink: 0, marginBottom: 30 }} />
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12, marginBottom: 12 }}>
        <span style={caseOrg}>{c.org}</span>
        <span style={{ fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--label-tertiary)" }}>{c.year}</span>
      </div>
      <h3 className="pf-h3" style={{ margin: "0 0 14px", fontSize: "clamp(20px, 1.7vw, 26px)" }}>{c.title}</h3>
      <p className="pf-body" style={{ margin: "0 0 18px" }}>{c.desc}</p>
      {c.metrics ? (
        <ul className="gv-outcomes" style={{ flex: 1, alignContent: "start" }}>
          {c.metrics.map(function (m) { return <li key={m}>{m}</li>; })}
        </ul>
      ) : <div style={{ flex: 1 }} />}
      {c.live ? (
        <span className="gv-livelink">
          <span className="pf-live-dot" aria-hidden="true" />
          {c.live.replace(/^https?:\/\//, "")}
        </span>
      ) : null}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }}>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          {c.tags.map(function (t) { return <span key={t} style={miniTag}>{t}</span>; })}
        </div>
        <span style={{ fontSize: 13, letterSpacing: "0.04em", color: "var(--label-secondary)", opacity: hover ? 1 : 0.7, transition: "opacity 220ms" }}>View</span>
      </div>
    </a>
  );
}

function WorkSection(props) {
  const ref = useReveal();
  const list = window.CASE_LIST;
  const featured = list[0];
  const rest = list.slice(1);
  return (
    <section id="work" aria-labelledby="work-h" className="pf-section">
      <div ref={ref} className="pf-container gv-reveal">
        <SectionLabel index="02">Selected Work</SectionLabel>
        <h2 id="work-h" className="pf-h2" style={{ margin: "0 0 18px", fontSize: "clamp(28px, 3.4vw, 48px)", maxWidth: 900 }}>
          A few things I have been shaping.
        </h2>
        <p className="pf-lead" style={{ margin: "0 0 52px", maxWidth: 640 }}>
          From founding AI products at ZeyaAI to connected vehicle work with Dentsu and Subaru.
        </p>
        <div className="pf-bento" style={{ gridAutoRows: "auto" }}>
          <FeaturedCard case={featured} onOpen={props.onOpen} theme={props.theme} />
          {rest.map(function (c) { return <CaseCard key={c.id} case={c} onOpen={props.onOpen} theme={props.theme} />; })}
        </div>
      </div>
    </section>
  );
}

/* ---------- Connect (bento) ---------- */
/* A scent on rotation, sandalwood first. */
const SCENTS = [
  { n: "Santal 33", h: "sandalwood, cardamom, leather" },
  { n: "Tam Dao", h: "sandalwood, cedar, cypress" },
  { n: "Bois d'Argent", h: "iris, myrrh, warm woods" },
  { n: "Gypsy Water", h: "juniper, incense, sandalwood" },
];
function ScentCell() {
  const reduced = usePrefersReducedMotion();
  const [i, setI] = useState(0);
  useEffect(function () {
    if (reduced) return;
    const id = setInterval(function () { setI(function (x) { return (x + 1) % SCENTS.length; }); }, 4200);
    return function () { clearInterval(id); };
  }, [reduced]);
  const sc = SCENTS[i];
  return (
    <ConnectCell col="span 4" row="span 1" label="Scent of the moment">
      <div style={{ flex: 1 }} />
      <div key={i} style={{ animation: reduced ? "none" : "nomiFade 0.4s ease" }}>
        <div className="pf-h3" style={{ fontSize: 22 }}>{sc.n}</div>
        <div style={{ fontSize: 14, color: "var(--label-secondary)", marginTop: 8 }}>{sc.h}</div>
      </div>
    </ConnectCell>
  );
}

/* A design maxim, pulled on click. */
const MAXIMS = [
  "Less, but better.",
  "Ship the small thing.",
  "Make it obvious, then make it beautiful.",
  "The empty state is the first impression.",
  "Motion is meaning, never decoration.",
  "If it needs a tooltip, look again.",
  "Defaults are decisions.",
  "Whitespace is doing the talking.",
];
function MaximCell() {
  const [i, setI] = useState(0);
  return (
    <div className="pf-glass gv-lift" role="button" tabIndex={0}
      aria-label="Pull another design maxim"
      onClick={function () { setI(function (x) { return (x + 1) % MAXIMS.length; }); }}
      onKeyDown={function (e) { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setI(function (x) { return (x + 1) % MAXIMS.length; }); } }}
      style={{ gridColumn: "span 5", gridRow: "span 1", padding: "clamp(24px, 2vw, 34px)", display: "flex", flexDirection: "column", justifyContent: "space-between", cursor: "pointer" }}>
      <div className="pf-eyebrow" style={{ marginBottom: 22, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span>Design maxim</span>
        <i data-lucide="sparkles" style={{ width: 15, height: 15, opacity: 0.55 }} />
      </div>
      <div style={{ flex: 1 }} />
      <div key={i} className="pf-h3" style={{ fontSize: 22, animation: "nomiFade 0.4s ease" }}>{MAXIMS[i]}</div>
      <div style={{ fontSize: 14, color: "var(--label-secondary)", marginTop: 8 }}>Tap to pull another</div>
    </div>
  );
}


function LiveClock() {
  const [now, setNow] = useState(new Date());
  useEffect(function () {
    const id = setInterval(function () { setNow(new Date()); }, 1000);
    return function () { clearInterval(id); };
  }, []);
  const time = now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
  const tz = (Intl.DateTimeFormat().resolvedOptions().timeZone || "Local").replace(/_/g, " ");
  return (
    <div>
      <div className="pf-num" style={{ fontSize: "clamp(34px, 3vw, 46px)" }}>{time}</div>
      <div style={{ fontSize: 13, letterSpacing: "0.02em", color: "var(--label-tertiary)", marginTop: 8 }}>My time zone, {tz}</div>
    </div>
  );
}

/* Copy-email button: clipboard API with execCommand fallback + visual confirmation */
function CopyEmailButton() {
  const [ok, setOk] = useState(false);
  function copy() {
    const email = "vi.vignette@gmail.com";
    function done() { setOk(true); setTimeout(function () { setOk(false); }, 1600); }
    function legacy() {
      try {
        const ta = document.createElement("textarea");
        ta.value = email; ta.style.position = "fixed"; ta.style.opacity = "0";
        document.body.appendChild(ta); ta.select();
        document.execCommand("copy");
        document.body.removeChild(ta);
        done();
      } catch (e) {}
    }
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(email).then(done).catch(legacy);
    } else legacy();
  }
  return (
    <button onClick={copy} className="pf-btn" aria-label="Copy email address" aria-live="polite" style={{ padding: ok ? "15px 18px" : 15 }}>
      <i data-lucide={ok ? "check" : "copy"} style={{ width: 18, height: 18, opacity: 0.8 }} />
      {ok ? "Copied" : null}
    </button>
  );
}

function ConnectCell(props) {
  return (
    <div className={"pf-glass " + (props.thick ? "pf-glass--thick" : "")} style={Object.assign({
      gridColumn: props.col, gridRow: props.row,
      padding: "clamp(24px, 2vw, 34px)", overflow: "hidden",
      display: "flex", flexDirection: "column", justifyContent: props.justify || "space-between",
    }, props.style)}>
      {props.label ? <div className="pf-eyebrow" style={{ marginBottom: 22 }}>{props.label}</div> : null}
      {props.children}
    </div>
  );
}

function ConnectSection() {
  const ref = useReveal();
  const socials = [
    { name: "LinkedIn", href: "https://www.linkedin.com/in/genevieve-liu-seas/" },
    { name: "Instagram", href: "https://www.instagram.com/vi__vignette/" },
    { name: "Read.cv", href: "#" },
  ];
  return (
    <section id="contact" aria-labelledby="contact-h" className="pf-section">
      <div ref={ref} className="pf-container gv-reveal">
        <SectionLabel index="03">Connect</SectionLabel>
        <h2 id="contact-h" className="pf-h2" style={{ margin: "0 0 52px", fontSize: "clamp(28px, 3.4vw, 48px)", maxWidth: 760 }}>
          Let us make something considered.
        </h2>

        <div className="pf-bento">
          {/* identity */}
          <ConnectCell col="span 7" row="span 2" thick justify="space-between">
            <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
              <span style={avatar}>G</span>
              <div>
                <div className="pf-h3" style={{ fontSize: 24, marginBottom: 8 }}>Genevieve</div>
                <div style={{ fontSize: 15, color: "var(--label-secondary)" }}>Senior Product Designer</div>
              </div>
            </div>
            <p className="pf-body" style={{ margin: "32px 0 0" }}>
              Working at the intersection of AI and Product Design. Open to select collaborations,
              advisory, and founding design work.
            </p>
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 32 }}>
              <a href="mailto:vi.vignette@gmail.com" className="pf-btn pf-btn--primary">
                <i data-lucide="mail" style={{ width: 18, height: 18, opacity: 0.8 }} />
                vi.vignette@gmail.com
              </a>
              <CopyEmailButton />
            </div>
          </ConnectCell>

          {/* currently */}
          <MaximCell />

          {/* local time */}
          <ConnectCell col="span 5" row="span 1" label="Local time">
            <div style={{ flex: 1 }} />
            <LiveClock />
          </ConnectCell>

          {/* on repeat: the scent, not the playlist */}
          <ScentCell />

          {/* stress level (Oura Ring) */}
          <ConnectCell col="span 4" row="span 1" label="Stress level">
            <div style={{ flex: 1 }} />
            <div className="pf-h3" style={{ fontSize: 22 }}>Calm</div>
            <div style={{ fontSize: 14, color: "var(--label-secondary)", marginTop: 8 }}>Syncing soon from Oura Ring</div>
          </ConnectCell>

          {/* socials */}
          <ConnectCell col="span 4" row="span 1" label="Elsewhere">
            <div style={{ flex: 1 }} />
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              {socials.map(function (s) {
                return (
                  <a key={s.name} href={s.href} target="_blank" rel="noopener noreferrer" className="gv-social" style={socialRow}>
                    <span>{s.name}</span>
                    <i data-lucide="arrow-up-right" style={{ width: 15, height: 15, opacity: 0.55 }} />
                  </a>
                );
              })}
            </div>
          </ConnectCell>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="pf-container" style={{ paddingBlock: "56px 72px", position: "relative", zIndex: 1 }}>
      <hr className="pf-rule" style={{ marginBottom: 32 }} />
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 18 }}>
        <span style={{ fontSize: 13, letterSpacing: "0.02em", color: "var(--label-tertiary)" }}>
          © {new Date().getFullYear()} Genevieve
        </span>
        <span style={{ display: "inline-flex", gap: 28 }}>
          <a href="#home" className="gv-underline" style={footLink}>Top</a>
          <a href="#work" className="gv-underline" style={footLink}>Work</a>
          <a href="#contact" className="gv-underline" style={footLink}>Contact</a>
        </span>
      </div>
    </footer>
  );
}

/* shared inline bits */
const cellPad = { padding: "clamp(26px, 2.2vw, 40px)", display: "flex", flexDirection: "column" };
const caseOrg = { fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--accent)", marginBottom: 0 };
const miniTag = { fontSize: 12, letterSpacing: "0.02em", color: "var(--label-tertiary)", padding: "6px 12px", borderRadius: 999, background: "var(--fill-quaternary)", border: "1px solid var(--pf-hairline)" };
const avatar = { width: 64, height: 64, borderRadius: "50%", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 26, fontWeight: 300, color: "var(--label-primary)", background: "var(--fill-secondary)", border: "1px solid var(--pf-border)" };
const socialRow = { display: "flex", alignItems: "center", justifyContent: "space-between", textDecoration: "none", color: "var(--label-secondary)", fontSize: 15 };
const footLink = { color: "var(--label-tertiary)", textDecoration: "none", fontSize: 13, letterSpacing: "0.02em" };

Object.assign(window, { AboutSection: AboutSection, WorkSection: WorkSection, ConnectSection: ConnectSection, Footer: Footer, useReveal: useReveal });