/* Traits — a scrolling marquee of keywords + four reveal cards with big ghosted numerals */

function TraitMarquee() {
  const words = ["DYNAMIC", "FIRST-PRINCIPLES", "GENERALIST", "HIGH-AGENCY", "SYSTEMS THINKER", "CURIOUS", "BUILDER", "INTERDISCIPLINARY"];
  const Row = () => (
    <span style={{ display: "inline-flex", alignItems: "center" }}>
      {words.map((w, i) => (
        <span key={i} style={{ display: "inline-flex", alignItems: "center" }}>
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(28px,4.4vw,58px)", letterSpacing: "-0.02em", color: "var(--fg1)", padding: "0 26px" }}>{w}</span>
          <span className="spin" style={{ display: "inline-flex", color: "var(--fg4)", fontSize: 22 }}>✳</span>
        </span>
      ))}
    </span>
  );
  return (
    <div className="marquee" style={{ borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)", padding: "26px 0" }}>
      <div className="marquee__track">
        <Row /><Row />
      </div>
    </div>
  );
}

function TraitCard({ t, i }) {
  const [hover, setHover] = React.useState(false);
  return (
    <Reveal delay={i * 90} dir="up">
      <div
        onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{
          position: "relative", overflow: "hidden", height: "100%",
          border: "1px solid var(--border-subtle)", borderRadius: 6,
          background: hover ? "var(--ink-900)" : "var(--bg-inset)",
          padding: "30px 28px 32px", transition: "background .24s, border-color .24s, transform .24s var(--ease-out)",
          borderColor: hover ? "var(--border-default)" : "var(--border-subtle)",
          transform: hover ? "translateY(-6px)" : "none",
        }}
      >
        {/* big ghosted numeral */}
        <span style={{
          position: "absolute", right: 14, top: -18, fontFamily: "var(--font-mono)",
          fontSize: 130, fontWeight: 400, color: "var(--white)",
          opacity: hover ? .08 : .04, transition: "opacity .24s", lineHeight: 1, pointerEvents: "none",
        }}>{t.n}</span>

        <span className="eyebrow" style={{ display: "block", marginBottom: 18 }}>{t.n} — trait</span>
        <h3 className="ds-h3" style={{ margin: "0 0 6px" }}>{t.title}</h3>
        <p style={{ margin: "0 0 16px", fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--fg3)", letterSpacing: ".02em" }}>{t.line}</p>
        <p className="ds-body" style={{ margin: 0, color: "var(--fg2)" }}>{t.body}</p>
      </div>
    </Reveal>
  );
}

function Traits() {
  return (
    <section id="traits" style={{ padding: "110px 0 30px" }}>
      <TraitMarquee />
      <div className="wrap" style={{ paddingTop: 90 }}>
        <Reveal style={{ marginBottom: 18 }}><span className="eyebrow">01 — how i work</span></Reveal>
        <Reveal>
          <h2 className="ds-h1" style={{ maxWidth: 760, margin: "0 0 14px" }}>
            <WordReveal text="Not one specialty — a way of thinking." />
          </h2>
        </Reveal>
        <Reveal delay={80}>
          <p className="ds-body-lg" style={{ maxWidth: 540, margin: "0 0 50px", color: "var(--fg2)" }}>
            The thread through everything I build: understand it from first principles, then go one layer deeper.
          </p>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(255px, 1fr))", gap: 18 }}>
          {window.TRAITS.map((t, i) => <TraitCard key={t.key} t={t} i={i} />)}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Traits });