// How it works, What's on your list, Principles, Waitlist, Footer

const HowItWorks = ({ pigVariant }) => {
  const coinsRef = React.useRef(null);
  const [coins, setCoins] = React.useState(0);
  React.useEffect(() => {
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting && coins === 0) {
            let n = 0;
            const t = setInterval(() => {
              n += 1;
              setCoins(n);
              if (n >= 9) clearInterval(t);
            }, 160);
          }
        });
      },
      { threshold: 0.3 }
    );
    if (coinsRef.current) io.observe(coinsRef.current);
    return () => io.disconnect();
  }, []);

  return (
    <section id="how" className="how">
      <div className="section-head">
        <div className="section-eyebrow">How it works</div>
        <h2 className="section-h2">Three steps. <em>One agent on your side.</em></h2>
        <p className="section-lede">KauPua is an agent — it does the work of finding, negotiating, and executing, so you just approve the calls.</p>
      </div>

      <div className="steps">
        <div className="step">
          <div className="step-num">01</div>
          <div className="step-art step-art-1">
            <div className="wishlist">
              <div className="wish-row"><span className="wish-check">✓</span>Sonos headphones</div>
              <div className="wish-row"><span className="wish-check">✓</span>New running shoes</div>
              <div className="wish-row"><span className="wish-check">✓</span>Weekend in Asheville</div>
              <div className="wish-row wish-active"><span className="wish-dot" />Espresso machine</div>
              <div className="wish-row wish-dim">+ add something</div>
            </div>
            <Hibiscus size={56} style={{ position: "absolute", top: -18, right: -10, transform: "rotate(20deg)" }} />
          </div>
          <h3>Tell us what you want</h3>
          <p>Running shoes. A new camera lens. A weekend in Asheville. Anything in the <b>$250–$2,500</b> range that's been on your list. No account linking required to get started — just the goal.</p>
        </div>

        <div className="step">
          <div className="step-num">02</div>
          <div className="step-art step-art-2" ref={coinsRef}>
            <div className="piggy-bank">
              <svg viewBox="0 0 200 160" width="200" height="160">
                <ellipse cx="100" cy="100" rx="80" ry="50" fill="#FF9EC0" />
                <circle cx="155" cy="78" r="20" fill="#FF9EC0" />
                <circle cx="155" cy="74" r="4" fill="#2E2A2A" />
                <rect x="142" y="70" width="26" height="5" rx="2" fill="#2E2A2A" />
                <rect x="62" y="142" width="10" height="16" fill="#FF9EC0" />
                <rect x="86" y="142" width="10" height="16" fill="#FF9EC0" />
                <rect x="110" y="142" width="10" height="16" fill="#FF9EC0" />
                <rect x="134" y="142" width="10" height="16" fill="#FF9EC0" />
                <ellipse cx="80" cy="80" rx="4" ry="5" fill="#2E2A2A" />
                <path d="M30 108 Q 20 114 24 124" stroke="#FF7AA5" strokeWidth="4" fill="none" strokeLinecap="round" />
              </svg>
              {[...Array(coins)].map((_, i) => (
                <div key={i} className="coin" style={{ left: 140 + (i % 3) * 8 + "px", animationDelay: i * 0.05 + "s" }}>$</div>
              ))}
            </div>
            <div className="savings-finds">
              <div className="find find-1"><span className="find-lbl">Auto insurance</span><span className="find-val">-$42/mo</span></div>
              <div className="find find-2"><span className="find-lbl">Unused subs</span><span className="find-val">-$38/mo</span></div>
              <div className="find find-3"><span className="find-lbl">Internet bill</span><span className="find-val">-$32/mo</span></div>
            </div>
          </div>
          <h3>We find the <em>money</em></h3>
          <p>Auto insurance you're overpaying on. Subscriptions you forgot about. Bills that haven't been renegotiated in years. We find the monthly dollars hiding in your spending and show you — task by task, at the access level you're comfortable with.</p>
        </div>

        <div className="step">
          <div className="step-num">03</div>
          <div className="step-art step-art-3">
            <div className="progress-ring">
              <svg viewBox="0 0 160 160" width="160" height="160">
                <circle cx="80" cy="80" r="64" stroke="#F5DDA8" strokeWidth="14" fill="none" />
                <circle cx="80" cy="80" r="64" stroke="#FF6B4A" strokeWidth="14" fill="none" strokeDasharray="402" strokeDashoffset="40" strokeLinecap="round" transform="rotate(-90 80 80)" />
                <text x="80" y="76" textAnchor="middle" fontSize="28" fontWeight="700" fill="#2E2A2A" fontFamily="Fraunces">$405</text>
                <text x="80" y="96" textAnchor="middle" fontSize="12" fill="#7A6E66" fontFamily="Inter">of $449</text>
              </svg>
              <div className="progress-chip">90% earned</div>
            </div>
            <button className="mock-btn">Buy for $449 · one click →</button>
            <Monstera size={70} color="#1F5A3F" style={{ position: "absolute", bottom: -10, left: -20 }} />
          </div>
          <h3>You earn it. Then buy it.</h3>
          <p>Your money stays in your bank. We just help you tag it toward your goal. When you've earned enough, we show you the best price — and help you check out in one click. With permanent monthly savings to show for it.</p>
        </div>
      </div>
    </section>
  );
};

const Wishlist = () => {
  const items = [
    { label: "Premium audio", Icon: IconHeadphones },
    { label: "Running & fitness", Icon: IconShoe },
    { label: "Outdoor gear", Icon: IconTent },
    { label: "Coffee & espresso", Icon: IconCoffee },
    { label: "Cameras & lenses", Icon: IconCamera },
    { label: "Kitchen tools", Icon: IconPan },
    { label: "Gaming setups", Icon: IconGamepad },
    { label: "Watches", Icon: IconWatch },
    { label: "Weekend trips", Icon: IconIsland },
    { label: "Concert tickets", Icon: IconTicket },
    { label: "Quality apparel", Icon: IconShirt },
    { label: "Limited drops", Icon: IconSparkle },
  ];
  return (
    <section className="wishlist-sec">
      <div className="section-head section-head-centered">
        <div className="section-eyebrow">What's on your list?</div>
        <h2 className="section-h2">Everything you've been meaning to <em>treat yourself</em> to.</h2>
        <p className="section-lede">KauPua is built for the things you actually think about — the running shoes, the good kitchen gear, the lens you've been researching for three months, the weekend you keep putting off.</p>
      </div>
      <div className="wish-grid">
        {items.map((it, i) => (
          <div key={i} className="wish-chip">
            <span className="wish-chip-icon"><it.Icon size={28} /></span>
            <span>{it.label}</span>
          </div>
        ))}
        <div className="wish-chip wish-chip-more"><IconHibiscus size={22} /><span>…you name it</span></div>
      </div>
    </section>
  );
};

const Principles = () => {
  const items = [
    { h: "We don't hold your money", p: "Your savings stay in your own bank. KauPua just tags dollars toward your goal. You're always in full control.", Icon: IconVault },
    { h: "We'll never offer BNPL", p: "Debt isn't our product. We exist specifically because BNPL isn't the answer. If you need the thing today, we'll be honest that we're not the right tool.", Icon: IconNoDebt },
    { h: "We ask fresh each time", p: "No \"link everything\" onboarding. Every task has a specific, scoped permission ask — with a clear expiration. You grant what you're comfortable with.", Icon: IconKey },
    { h: "Our fees are visible", p: "When we recommend a switch, you see exactly what we earn from it. No hidden kickbacks. No paid placement. No selling your data.", Icon: IconEye },
  ];
  return (
    <section className="principles">
      <div className="section-head section-head-centered">
        <div className="section-eyebrow">How we work · our ohana values</div>
        <h2 className="section-h2">Your money stays yours.<br/><em>Our incentives stay aligned.</em></h2>
      </div>
      <div className="principles-grid">
        {items.map((it, i) => (
          <div key={i} className="principle-card">
            <div className="principle-icon"><it.Icon size={44} /></div>
            <h3>{it.h}</h3>
            <p>{it.p}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

const Waitlist = ({ pigVariant }) => {
  const [submitted, setSubmitted] = React.useState(false);
  const [email, setEmail] = React.useState("");
  const [want, setWant] = React.useState("");
  return (
    <section id="waitlist" className="waitlist">
      <div className="waitlist-inner">
        <div className="waitlist-pig">
          <Pig variant={pigVariant} pose="wave" size={220} />
        </div>
        <div className="waitlist-copy">
          <div className="section-eyebrow section-eyebrow-light">Be first in line</div>
          <h2 className="section-h2 section-h2-light">Say aloha to <em>getting what you want.</em></h2>
          <p className="section-lede section-lede-light">We're building KauPua now. Join the waitlist and get early access — plus a heads-up before the world finds out about the anti-Klarna.</p>
        </div>
        <form
          className={`waitlist-form ${submitted ? "is-submitted" : ""}`}
          onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}
        >
          {!submitted ? (
            <>
              <label>
                <span className="label-text">Email</span>
                <input type="email" required value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@island.com" />
              </label>
              <label>
                <span className="label-text">What's the first thing you'd love to earn? <span className="muted">(optional)</span></span>
                <input type="text" value={want} onChange={(e) => setWant(e.target.value)} placeholder="e.g. Sonos headphones" />
              </label>
              <button type="submit" className="btn btn-primary btn-full">Join the waitlist →</button>
              <p className="waitlist-micro">We'll never sell your email. No spam. Unsubscribe anytime.</p>
            </>
          ) : (
            <div className="waitlist-mahalo">
              <div className="mahalo-icon"><IconHibiscus size={64} /></div>
              <h3>Mahalo!</h3>
              <p>You're on the list. We'll be in touch with early access and the first KauPua stories before launch.</p>
            </div>
          )}
        </form>
      </div>
    </section>
  );
};

const Footer = () => (
  <footer className="footer">
    <div className="footer-inner">
      <div className="footer-brand">
        <div className="footer-logo">
          <Pig variant="flat" pose="wave" size={50} />
          <span>KauPua</span>
        </div>
        <p>Say aloha to getting what you want. Earned, not owed.</p>
      </div>
      <div className="footer-links">
        <a href="mailto:hello@kaupua.com">hello@kaupua.com</a>
        <a href="#waitlist">Waitlist</a>
        <a href="#how">How it works</a>
      </div>
      <div className="footer-mark">© 2026 KauPua · Made with aloha</div>
    </div>
  </footer>
);

Object.assign(window, { HowItWorks, Wishlist, Principles, Waitlist, Footer });