/* Hero - TAM-turned-builder. */

function Hero({ heroLayout = "split" }) {
  const headline = (
    <React.Fragment>
      <span className="line">TAM-turned-<em>builder</em>.</span>
      <span className="line">I ship what I <em>needed</em>.</span>
    </React.Fragment>
  );

  const sub = (
    <p className="hero-sub">
      Ten years inside enterprise customer success. Now a founder, full-stack architect, and the
      person who built Quantesic, the synthesis layer I always wished I had on my desk.
    </p>
  );

  const meta = (
    <div className="hero-meta">
      <span className="mono-tag solid">
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--green)" }}></span>
        Available / Founder / Architect / Senior TAM
      </span>
      <span className="mono-tag">Orlando, FL / Remote</span>
    </div>
  );

  const cta = (
    <div className="hero-cta">
      <a href="#quantesic" className="btn btn-primary">
        See the Quantesic case study
        <Icons.arrow className="arrow" />
      </a>
      <a href="assets/Quintin-Christopher-Resume.pdf" download className="btn btn-ghost">
        <Icons.download /> Resume (PDF)
      </a>
    </div>
  );

  if (heroLayout === "centered") {
    return (
      <section className="hero">
        <div className="container" style={{ textAlign: "center" }}>
          <Reveal>
            <span className="eyebrow" style={{ justifyContent: "center" }}>
              Quintin Christopher / Portfolio 2026
            </span>
          </Reveal>
          <Reveal delay={80}>
            <h1 className="display" style={{ margin: "20px auto", maxWidth: "16ch" }}>{headline}</h1>
          </Reveal>
          <Reveal delay={160}>
            <div style={{ maxWidth: 640, margin: "0 auto" }}>{sub}</div>
          </Reveal>
          <Reveal delay={220}>
            <div style={{ display: "flex", justifyContent: "center", marginTop: 28 }}>{meta}</div>
          </Reveal>
          <Reveal delay={280}>
            <div style={{ display: "flex", justifyContent: "center", marginTop: 16 }}>{cta}</div>
          </Reveal>
        </div>
        <HeroMarquee />
      </section>
    );
  }

  if (heroLayout === "stacked") {
    return (
      <section className="hero">
        <div className="container">
          <Reveal>
            <span className="eyebrow">Founder / Quantesic / Solutions Architect</span>
          </Reveal>
          <Reveal delay={80}>
            <h1 className="display" style={{ margin: "24px 0 0", maxWidth: "16ch" }}>{headline}</h1>
          </Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, marginTop: 36, alignItems: "end" }} className="hero-stacked-row">
            <Reveal delay={160}>{sub}</Reveal>
            <Reveal delay={220}>
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                {meta}
                {cta}
              </div>
            </Reveal>
          </div>
        </div>
        <HeroMarquee />
      </section>
    );
  }

  // default: split
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid hero-split">
          <div>
            <Reveal>
              <span className="eyebrow">Quintin Christopher</span>
            </Reveal>
            <Reveal delay={60}>
              <h1 className="display" style={{ margin: "22px 0 0" }}>{headline}</h1>
            </Reveal>
            <Reveal delay={140}>{sub}</Reveal>
            <Reveal delay={200}>{meta}</Reveal>
            <Reveal delay={260}>{cta}</Reveal>
          </div>
          <Reveal delay={120}>
            <HeroPortrait />
          </Reveal>
        </div>
      </div>
      <HeroMarquee />
    </section>
  );
}

function HeroPortrait() {
  return (
    <div className="hero-portrait">
      <div className="hero-portrait-frame has-image">
        <img className="hero-portrait-img" src="assets/headshot.png?v=portrait" alt="Quintin Christopher, Founder of Quantesic" />
        <div className="hero-portrait-namecard">
          <div className="portrait-name">Quintin Christopher</div>
          <div className="portrait-role">Founder, Quantesic</div>
        </div>
        <div className="hero-portrait-meta">
          <div><span>Built</span><strong>101,839</strong><em>lines of code</em></div>
          <div><span>Across</span><strong>336</strong><em>files</em></div>
          <div><span>Connecting</span><strong>13</strong><em>integrations</em></div>
        </div>
      </div>
    </div>
  );
}

function HeroMarquee() {
  // Running ticker of integrations / signals
  const items = [
    "Salesforce", "Zendesk", "Slack", "Jira", "Gainsight", "ServiceNow",
    "Datadog", "HubSpot", "Zoom", "ClickUp", "Microsoft", "Google Calendar", "Gmail",
  ];
  // Duplicate for seamless loop
  const all = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {all.map((item, i) => (
          <span className="marquee-item" key={i}>
            <span className="dot"></span>
            {item}
          </span>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Hero });