// Hero.jsx — full bleed editorial photo + manifesto
const Hero = () => {
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => setT(Math.min(window.scrollY, 800));
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <section id="top" style={{
      position: "relative",
      width: "100%",
      height: "100vh",
      minHeight: 760,
      overflow: "hidden",
      color: "#fff",
      fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
      background: "#0A0A0A",
    }}>
      <img
        src="assets/photo-statue.png"
        alt=""
        style={{
          position: "absolute", inset: 0, width: "100%", height: "110%",
          objectFit: "cover", zIndex: 0,
          transform: `translateY(${t * 0.25}px) scale(1.04)`,
          transition: "transform 80ms linear",
        }}
      />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,.55) 100%)", zIndex: 1 }} />

      {/* main block */}
      <div style={{
        position: "absolute", left: 56, right: 56, bottom: 110, zIndex: 2,
        display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 72, alignItems: "flex-end",
      }}>
        <div>
          <div style={{ fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase", opacity: .75, marginBottom: 36, fontWeight: 700 }}>
            Studio éditorial &amp; créatif · depuis 2019
          </div>
          <h1 style={{
            fontSize: "clamp(64px, 8.4vw, 156px)", lineHeight: .92,
            letterSpacing: "-0.025em", fontWeight: 700, margin: 0,
          }}>
            L'art de rendre<br/>une marque<br/><i style={{ fontWeight: 700 }}>mémorable.</i>
          </h1>
        </div>
        <div style={{ paddingBottom: 12 }}>
          <div style={{ width: 56, height: 1, background: "rgba(255,255,255,.7)", marginBottom: 22 }} />
          <div style={{ fontSize: 19, lineHeight: 1.55, opacity: .92, maxWidth: 420 }}>
            Stratégie de marque, identités visuelles, contenus éditoriaux et social media —
            pour les fondateurs et directions marketing des marques mode, beauté et lifestyle.
          </div>
          <a href="#approche" style={{
            display: "inline-block", marginTop: 36,
            color: "#fff", textDecoration: "none",
            fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase", fontWeight: 700,
            borderBottom: "1px solid rgba(255,255,255,.6)", paddingBottom: 5,
          }}>
            Lire la suite ↓
          </a>
        </div>
      </div>

      {/* bottom scroll cue */}
      <div style={{
        position: "absolute", left: "50%", transform: "translateX(-50%)", bottom: 36, zIndex: 2,
        fontSize: 11, letterSpacing: ".3em", textTransform: "uppercase", opacity: .55, fontWeight: 700,
      }}>
        Scroll
      </div>
    </section>
  );
};
window.Hero = Hero;