// Hero section — pig on beach with headphones on a towel

const Hero = ({ pigVariant }) => {
  const [scrollY, setScrollY] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => setScrollY(window.scrollY);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <section className="hero">
      {/* Sky + sun gradient layer */}
      <div className="hero-sky" />
      {/* Sun */}
      <div className="hero-sun" style={{ transform: `translateY(${scrollY * 0.15}px)` }}>
        <Sun size={320} />
      </div>
      {/* Clouds */}
      <div className="hero-cloud hero-cloud-1" style={{ transform: `translateX(${scrollY * -0.3}px)` }} />
      <div className="hero-cloud hero-cloud-2" style={{ transform: `translateX(${scrollY * -0.2}px)` }} />
      {/* Ocean */}
      <div className="hero-ocean">
        <svg viewBox="0 0 1440 180" preserveAspectRatio="none" width="100%" height="100%">
          <path d="M0 60 Q 180 20 360 60 T 720 60 T 1080 60 T 1440 60 L 1440 180 L 0 180 Z" fill="#5FB7E0" />
          <path d="M0 90 Q 180 50 360 90 T 720 90 T 1080 90 T 1440 90 L 1440 180 L 0 180 Z" fill="#3FA3D0" opacity="0.85" />
          <path d="M0 80 Q 180 40 360 80 T 720 80 T 1080 80 T 1440 80" stroke="#FFF" strokeWidth="2" fill="none" opacity="0.5" />
        </svg>
      </div>
      {/* Sand */}
      <div className="hero-sand" />
      {/* Palm frond left */}
      <div className="hero-palm-left">
        <PalmFrond size={420} color="#1F5A3F" style={{ transform: "rotate(-15deg)" }} />
      </div>
      <div className="hero-palm-right">
        <PalmFrond size={340} color="#2D6B4A" style={{ transform: "rotate(195deg)" }} />
      </div>

      {/* Content */}
      <div className="hero-inner">
        <div className="hero-copy">
          <div className="eyebrow">
            <span className="eyebrow-dot" /> Say aloha to KauPua
          </div>
          <h1 className="hero-h1">
            Get what you want<br/>
            from life. <em>Earned,<br/>not owed.</em>
          </h1>
          <p className="hero-lede">
            KauPua is the anti-Klarna. Tell us what you want — a new pair of running shoes, the espresso machine you've been eyeing, a weekend away. We'll find the money hiding in your current spending and help you <strong>earn the thing</strong> in the same time Klarna would have you paying it off.
          </p>
          <p className="hero-tag">
            Same thing. Same timeline. <span className="hl">No debt</span> — and permanent monthly savings that keep working.
          </p>
          <div className="hero-ctas">
            <a href="#waitlist" className="btn btn-primary">Join the waitlist →</a>
            <a href="#how" className="btn btn-ghost">See how it works</a>
          </div>
          <div className="hero-meta">
            <span>🌺 No account linking to start</span>
            <span>🥥 Your money stays in your bank</span>
          </div>
        </div>

        <div className="hero-scene">
          {/* Beach towel */}
          <div className="towel">
            <div className="towel-stripes" />
          </div>
          {/* Headphones on towel */}
          <div className="headphones">
            <svg viewBox="0 0 200 140" width="180" height="126">
              <path d="M30 90 Q 30 20 100 20 Q 170 20 170 90" stroke="#2E2A2A" strokeWidth="10" fill="none" strokeLinecap="round" />
              <rect x="14" y="70" width="34" height="56" rx="10" fill="#2E2A2A" />
              <rect x="152" y="70" width="34" height="56" rx="10" fill="#2E2A2A" />
              <rect x="18" y="80" width="26" height="40" rx="6" fill="#E07A4F" />
              <rect x="156" y="80" width="26" height="40" rx="6" fill="#E07A4F" />
              <circle cx="31" cy="100" r="4" fill="#FFD36B" />
              <circle cx="169" cy="100" r="4" fill="#FFD36B" />
            </svg>
            <div className="price-tag">$449</div>
          </div>
          {/* Pig */}
          <div className="hero-pig">
            <Pig variant={pigVariant} pose="wave" size={340} />
          </div>
          {/* Coconut drink */}
          <div className="coco-drink">
            <svg viewBox="0 0 80 100" width="70" height="88">
              <ellipse cx="40" cy="70" rx="28" ry="26" fill="#6B3A1E" />
              <ellipse cx="40" cy="52" rx="28" ry="10" fill="#3A1F10" />
              <ellipse cx="40" cy="52" rx="22" ry="6" fill="#FFF4C4" />
              <rect x="38" y="10" width="4" height="46" fill="#FF6B4A" transform="rotate(10 40 30)" />
              <path d="M54 12 Q 62 4 58 18 Q 70 14 60 24" fill="#2D6B4A" />
            </svg>
          </div>
          {/* Sand shadow */}
          <div className="pig-shadow" />
        </div>
      </div>

      {/* Wave divider */}
      <div className="hero-wave-divider">
        <svg viewBox="0 0 1440 80" preserveAspectRatio="none" width="100%" height="80">
          <path d="M0 40 Q 180 0 360 40 T 720 40 T 1080 40 T 1440 40 L 1440 80 L 0 80 Z" fill="var(--cream)" />
        </svg>
      </div>
    </section>
  );
};

Object.assign(window, { Hero });