/* Hero.jsx — big editorial hero with mascot + orbiting sticker discs */

function AnimatedLine({ text, startDelay = 0, className = "" }){
  const words = text.split(/\s+/).filter(Boolean);
  return (
    <span className={"hero-line " + className}>
      {words.map((w, i)=>(
        <span
          key={i}
          className="w"
          style={{ animationDelay: `${startDelay + i * 0.07}s` }}
        >{w}{i < words.length - 1 ? "\u00A0" : ""}</span>
      ))}
    </span>
  );
}

function Hero({ accent }){
  return (
    <section id="top" className="hero">
      <div className="shell hero-grid">
        <div className="hero-copy">
          <span className="hero-eyebrow eyebrow">
            <span className="pulse" /> Now on iOS · v1.0
          </span>

          <h1 className="display hero-title" aria-label="The world has too many cooking apps — and only one for potatoes.">
            <AnimatedLine text="The world has" startDelay={0} />
            <AnimatedLine text="too many cooking" startDelay={0.18} />
            <AnimatedLine text="apps —" startDelay={0.42} />
            <AnimatedLine text="and only one for potatoes." startDelay={0.95} className="swap" />
          </h1>

          <p className="lede reveal reveal-d-3">
            All Things Potato is an iOS cooking app for people who think potatoes are an entire food group. Two-hundred-plus recipes. Twelve potato worlds. Six tiers of cook.
          </p>

          <div className="hero-actions">
            <a href="#download" className="btn btn-primary" onClick={(e)=>{e.preventDefault();scrollToId("download")}}>
              Get it on the App Store
            </a>
            <a href="#worlds" className="btn btn-ghost" onClick={(e)=>{e.preventDefault();scrollToId("worlds")}}>
              Enter the worlds
            </a>
          </div>
        </div>

        <div className="hero-stage" aria-hidden="true">
          <div className="orbit o1" />
          <div className="orbit o2" />
          <div className="orbit o3" />

          <div className="sticker-disc d1"><img src="assets/stickers/s05_crispy_energy.webp" alt="" /></div>
          <div className="sticker-disc d2"><img src="assets/stickers/s08_cheese_please.webp" alt="" /></div>
          <div className="sticker-disc d3"><img src="assets/stickers/s07_spicy_mood.webp" alt="" /></div>

          <img className="hero-mascot" src="assets/mascot.webp" alt="A friendly potato chef" />

          <div className="hero-stamp" aria-hidden="true">
            <span className="hs-line">A cooking app</span>
            <span className="hs-big">EST. 2026</span>
            <span className="hs-line">For people who really like potatoes</span>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });