/* global React */
const { useState } = React;

/* ---- masked multi-line headline ---- */
function MaskLines({ lines, className }) {
  return (
    <h1 className={"display " + (className || "")}>
      {lines.map((ln, i) => (
        <span className="line-mask" data-d={i + 1} key={i}>
          <span dangerouslySetInnerHTML={{ __html: ln }} />
        </span>
      ))}
    </h1>
  );
}

const scrollTo = (href) => { const el = document.querySelector(href); if (el) window.scroll({ top: el.offsetTop - 8, behavior: "smooth" }); };

/* ============================ NAV ============================ */
function Nav() {
  const [open, setOpen] = useState(false);
  const scrollLinks = [
    ["How it works", "#how"],
    ["The craft", "#craft"],
  ];
  const go = (e, href) => { e.preventDefault(); setOpen(false); scrollTo(href); };
  return (
    <header className="nav" id="nav">
      <a href="#top" className="wordmark" onClick={(e) => go(e, "#top")}>
        Roast<span className="amp">&amp;</span>Toast
      </a>
      <nav className={"nav-links" + (open ? " open" : "")}>
        {scrollLinks.map(([t, h]) => (
          <a key={h} className="nav-link" href={h} onClick={(e) => go(e, h)}>{t}</a>
        ))}
        <a className="nav-link" href="Stories.html" onClick={() => setOpen(false)}>Stories</a>
        <a className="nav-cta" href="https://roastandtoast.softr.app">Create My Hoodie</a>
      </nav>
      <button className="nav-burger" aria-label="Menu" onClick={() => setOpen(!open)}>
        <span style={{ transform: open ? "translateY(6.5px) rotate(45deg)" : "" }}></span>
        <span style={{ opacity: open ? 0 : 1 }}></span>
        <span style={{ transform: open ? "translateY(-6.5px) rotate(-45deg)" : "" }}></span>
      </button>
    </header>
  );
}

/* ============================ HERO ============================ */
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-grid">
        <div className="hero-copy">
          <div className="hero-eyebrow-row reveal">
            <p className="eyebrow">Custom AI Hoodies</p>
            <span className="line"></span>
            <p className="eyebrow accent">Early Access</p>
          </div>
          <MaskLines lines={["Roast smarter.", "<em>Toast harder.</em>"]} />
          <p className="hero-sub reveal" data-d="2">
            Turn an inside joke, a roast, or a moment you'll never let someone forget into a hoodie made just for them.
          </p>
          <div className="hero-actions reveal" data-d="3">
            <a className="btn" href="https://roastandtoast.softr.app">
              Create My Hoodie <span className="arrow">&rarr;</span>
            </a>
            <a className="link-arrow" href="#how" onClick={(e) => { e.preventDefault(); scrollTo("#how"); }}>
              How it works <span className="arrow">&rarr;</span>
            </a>
          </div>
          <p className="hero-note reveal" data-d="3">Takes about a minute and a half. Worth every second.</p>
        </div>

        <div className="hero-media reveal" data-d="2">
          <image-slot id="rt-hero" fit="cover" src="images/gamermock%20-%20Edited.png"
            placeholder="HERO — the finished hoodie worn · custom AI print front-and-center · soft natural light · warm neutral backdrop"></image-slot>
          <div className="hero-spec">
            <div><p className="k">One-of-<br/>One Design</p></div>
            <div><p className="k">Premium<br/>Heavyweight</p></div>
            <div><p className="k">Made<br/>To Order</p></div>
          </div>
        </div>
      </div>
      <div className="scroll-cue"><span className="bar"></span>Scroll</div>
    </section>
  );
}

/* ============================ HOW IT WORKS ============================ */
function HowItWorks() {
  const steps = [
    {
      src: "images/step1-opt.jpg",
      t: "Answer a few prompts",
      b: "No writing skills needed. We guide you the whole way with just a few questions about the person, the vibe, and the moment.",
      ph: "STEP 01 — guided prompt UI / soft studio still",
    },
    {
      src: "images/step2-opt.png",
      t: "AI that gets the joke",
      b: "We turn your answers into a custom, one-of-a-kind design that actually captures the moment. Never generic, never templated.",
      ph: "STEP 02 — example generated print, close detail",
    },
    {
      src: "images/step3-opt.jpg",
      t: "Preview, then wear it",
      b: "See your design on the hoodie, tweak it until it's right, and order when it feels perfect. As good in real life as in your head.",
      ph: "STEP 03 — preview mockup on hoodie / person wearing it",
    },
  ];
  return (
    <section className="section how" id="how">
      <div className="shell">
        <div className="sec-head reveal">
          <span className="idx">01</span>
          <hr className="rule" />
          <p className="eyebrow">How it works</p>
        </div>
        <h2 className="display reveal" data-d="1">Three steps.<br/>One hoodie that's only yours.</h2>
        <div className="steps">
          {steps.map((s, i) => (
            <div className="step reveal" data-d={i + 1} key={i}>
              <image-slot id={"rt-step-" + (i + 1)} fit="cover" src={s.src} placeholder={s.ph}></image-slot>
              <span className="num">{String(i + 1).padStart(2, "0")}</span>
              <h3>{s.t}</h3>
              <p>{s.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { MaskLines, scrollTo, Nav, Hero, HowItWorks });