// Hero — parallax layers: leaves, cherries, type drift

function Hero(){
  const y = useScrollY();
  const t = (factor) => ({ transform: `translate3d(0, ${y * factor}px, 0)` });

  return (
    <section className="hero paper-bg" id="top">
      {/* Layer 1 — far back: oversize faint type */}
      <div className="layer" style={{ ...t(-0.12), opacity: 0.08 }} aria-hidden="true">
        <div style={{
          position:"absolute", top:"14%", left:"-4%",
          fontFamily:"var(--serif)", fontStyle:"italic", fontWeight:300,
          fontSize:"clamp(220px, 40vw, 640px)", lineHeight:1, color:"var(--copper)",
          letterSpacing:"-0.05em",
          userSelect:"none",
        }}>excelsa</div>
      </div>

      {/* Layer 2 — leaves drifting */}
      <div className="layer" style={t(0.18)} aria-hidden="true">
        <Leaf size={280} style={{ position:"absolute", top:"8%", right:"-4%", transform:"rotate(-18deg)", opacity:0.55 }} />
        <Leaf size={140} style={{ position:"absolute", top:"62%", left:"-2%", transform:"rotate(140deg)", opacity:0.45 }} fill="var(--sage-hi)" />
        <Leaf size={90}  style={{ position:"absolute", top:"20%", left:"12%", transform:"rotate(30deg)", opacity:0.38 }} />
      </div>

      {/* Layer 3 — cherries */}
      <div className="layer" style={t(0.32)} aria-hidden="true">
        <Cherry size={64} style={{ position:"absolute", top:"18%", right:"28%" }} />
        <Cherry size={42} style={{ position:"absolute", top:"70%", right:"8%", transform:"rotate(20deg)" }} />
        <Cherry size={38} style={{ position:"absolute", top:"48%", left:"8%", transform:"rotate(-15deg)" }} color="var(--copper-2)"/>
      </div>

      {/* Layer 4 — botanical plate */}
      <div className="layer" style={{ ...t(0.06), pointerEvents:"none" }} aria-hidden="true">
        <div style={{ position:"absolute", right:"3%", top:"8%", width:"min(42vw, 520px)", opacity: 0.95, mixBlendMode:"multiply" }}>
          <BotanicalPlate height={640}/>
        </div>
      </div>

      {/* Foreground content */}
      <div className="wrap" style={{ position:"relative", zIndex: 2, width:"100%" }}>
        <div className="stack" style={{ gap: 36, maxWidth: 1100 }}>

          <Reveal className="kicker" style={{ display:"flex", alignItems:"center", gap:14 }}>
            <span style={{display:"inline-block", width:24, height:1, background:"var(--ink-3)"}}/>
            FIELD NOTES · VOL. IV · <span style={{color:"var(--copper)"}}>THE THIRD SPECIES</span>
          </Reveal>

          <Reveal delay={1} as="h1">
            The forgotten <br/>
            <em>bean</em> that <br/>
            could save coffee.
          </Reveal>

          <div className="grid g2" style={{ alignItems:"end", gap:40 }}>
            <Reveal delay={2}>
              <p className="lede" style={{ maxWidth:"46ch" }}>
                For 150 years, <b>Excelsa</b> — <i>Coffea&nbsp;excelsa</i>, long folded into Liberica — grew quietly alongside Arabica and Robusta while the world ignored it. A 2025 Nature Plants study restored it to its own species. New genomics, a changing climate, and a generation of farmers hunting resilience are about to change the rest.
              </p>
            </Reveal>

            <Reveal delay={3} style={{ display:"flex", flexDirection:"column", gap:18, alignItems:"flex-start" }}>
              <div className="handnote" style={{ transform:"rotate(-2deg)", maxWidth: 300 }}>
                “A coffee that tolerates heat, pests, and drought — and tastes like nothing else.”
              </div>
              <div style={{ display:"flex", gap:12, flexWrap:"wrap" }}>
                <a className="btn" href="#buyers">Shop the Guide <span className="arrow">→</span></a>
                <a className="btn ghost" href="#science">Read the Science</a>
              </div>
            </Reveal>
          </div>

        </div>
      </div>

      {/* Bottom scroll tick */}
      <div style={{
        position:"absolute", bottom: 24, left: 28, right: 28,
        display:"flex", justifyContent:"space-between", alignItems:"center",
        fontFamily:"var(--mono)", fontSize:10, letterSpacing:"0.24em", textTransform:"uppercase",
        color:"var(--ink-3)", zIndex:2
      }}>
        <span>01 / 14 — Species Profile</span>
        <span style={{ display:"flex", alignItems:"center", gap:10 }}>
          Scroll <span style={{display:"inline-block", width:40, height:1, background:"var(--ink-3)"}}/>
        </span>
        <span>Lat. 5°N · Alt. 800 m</span>
      </div>
    </section>
  );
}

window.Hero = Hero;