// Capsule Wardrobe Starterkit — betaald (17,95 ipv 37,95) — betaling via Mollie

const TESTIS_CAPSULE = [
  { q: "Eindelijk een kast die klopt. Minder kleding, meer combinaties en elke ochtend voel ik me mezelf.", n: "Anna", r: "Capsule Wardrobe" },
  { q: "Ik wist niet hoe ik moest beginnen. De starterkit gaf me precies de structuur die ik zocht. Aanrader.", n: "Lara", r: "Capsule Wardrobe" },
  { q: "De combinatie van praktisch en reflectief is wat dit anders maakt. Geen lijstje regels, een echte basis.", n: "Noor", r: "Capsule Wardrobe" },
];

const FAQ_CAPSULE = [
  { q: "Hoe werkt de Capsule Wardrobe Starterkit?", a: "Je krijgt direct na betaling een digitale starterkit toegestuurd. Daarin neem ik je stap voor stap mee in het opbouwen van een persoonlijke capsule, met werkbladen, voorbeelden en reflectievragen." },
  { q: "Hoe verschilt dit van de gratis Closet Detox?", a: "De Closet Detox helpt je opruimen en loslaten. De Capsule Wardrobe gaat een stap verder: een doordachte basis bouwen die past bij wie je nu bent. Veel vrouwen doen eerst de Detox, dan de Capsule." },
  { q: "Krijg ik er ondersteuning bij?", a: "De starterkit is volledig zelfstandig te doen. Loop je toch vast? Stuur me een mail, ik denk graag mee. Voor diepere begeleiding kun je een 1-op-1 traject overwegen." },
  { q: "Voor welk seizoen werkt dit?", a: "De methode is seizoens-onafhankelijk. Je leert de principes waarmee je voor elk seizoen een eigen capsule kunt bouwen." },
  { q: "Kan ik later nog upgraden naar persoonlijk advies?", a: "Ja. Veel vrouwen starten hiermee en boeken later een persoonlijk stijladvies of coaching-traject. De starterkit is een mooie eerste stap." },
];

const CapsuleCheckout = ({ open, onClose }) => {
  const [naam, setNaam] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [instagram, setInstagram] = React.useState("");
  const [status, setStatus] = React.useState("idle"); // idle | loading | error

  const handlePay = async () => {
    if (!naam || !email) return;
    setStatus("loading");
    try {
      const res = await fetch("/api/create-payment", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ naam, email, instagram }),
      });
      if (!res.ok) throw new Error();
      const { checkoutUrl } = await res.json();
      window.location.href = checkoutUrl;
    } catch {
      setStatus("error");
    }
  };

  if (!open) return null;

  return (
    <div className="checkout-overlay" onClick={(e) => { if (e.target.classList.contains("checkout-overlay")) onClose(); }}>
      <div className="checkout">
        <button className="close" onClick={onClose} aria-label="Sluiten">&#x2715;</button>

        <div className="checkout-summary">
          <div className="ico">CW</div>
          <div className="meta">
            <div className="t">Capsule Wardrobe Starterkit</div>
            <div className="s">Digitale download &middot; direct beschikbaar</div>
          </div>
          <div className="price">&#x20AC;17,95</div>
        </div>

        <h4>Je gegevens</h4>
        <div className="checkout-fields">
          <div className="field">
            <div className="field-label">Voornaam</div>
            <input type="text" value={naam} onChange={e => setNaam(e.target.value)} placeholder="Voornaam" />
          </div>
          <div className="field">
            <div className="field-label">E-mail (voor levering)</div>
            <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="jij@email.nl" />
          </div>
          <div className="field">
            <div className="field-label">Instagram (optioneel)</div>
            <input type="text" value={instagram} onChange={e => setInstagram(e.target.value)} placeholder="@jouwnaam" />
          </div>
        </div>

        <p style={{fontFamily:"var(--serif)",fontWeight:300,fontSize:14,color:"var(--ink-3)",margin:"16px 0 0",lineHeight:1.5}}>
          Je wordt doorgestuurd naar de beveiligde betaalpagina van Mollie.
          Kies zelf je betaalmethode: iDEAL, creditcard of meer.
        </p>

        {status === "error" && (
          <p style={{color:"var(--accent)",fontSize:13,margin:"12px 0 0"}}>
            Er ging iets mis. Probeer het opnieuw of mail naar info@stylistcoach.nl.
          </p>
        )}

        <button
          className="checkout-pay"
          onClick={handlePay}
          disabled={status === "loading" || !naam || !email}
          style={{marginTop:20}}
        >
          {status === "loading" ? "Doorsturen…" : "Ga naar betaling →"}
        </button>

        <div className="checkout-paymeth">
          <span style={{flex:1}}>Betaalmethoden</span>
          <span className="meth">iDEAL</span>
          <span className="meth">VISA</span>
          <span className="meth">MC</span>
        </div>

        <div className="checkout-trust">
          <svg width="12" height="14" viewBox="0 0 12 14" fill="none">
            <path d="M6 1L1 3v4c0 3 2 5 5 6c3-1 5-3 5-6V3L6 1z" stroke="currentColor" strokeWidth="1" fill="none"/>
          </svg>
          SSL-versleuteld &middot; Betalen via Mollie
        </div>
      </div>
    </div>
  );
};

const BetaaldBanner = () => (
  <section style={{
    background:"var(--ink)", color:"var(--paper)",
    padding:"clamp(60px,10vw,100px) var(--gutter)",
    textAlign:"center"
  }}>
    <div style={{maxWidth:560,margin:"0 auto"}}>
      <div style={{
        width:64,height:64,borderRadius:999,
        background:"var(--accent)",color:"var(--paper)",
        display:"flex",alignItems:"center",justifyContent:"center",
        margin:"0 auto 28px",fontSize:28
      }}>&#x2713;</div>
      <div style={{fontSize:11,letterSpacing:"0.22em",textTransform:"uppercase",color:"rgba(251,246,238,0.5)",marginBottom:16}}>
        Betaling ontvangen
      </div>
      <h1 style={{
        fontFamily:"var(--serif)",fontWeight:400,
        fontSize:"clamp(36px,5vw,60px)",lineHeight:1,
        letterSpacing:"-0.02em",margin:"0 0 20px",color:"var(--paper)"
      }}>
        Bedankt voor je<br/><em style={{fontStyle:"italic",color:"var(--accent-2)"}}>bestelling.</em>
      </h1>
      <p style={{
        fontFamily:"var(--serif)",fontWeight:300,fontSize:18,
        color:"rgba(251,246,238,0.75)",lineHeight:1.5,margin:"0 0 32px"
      }}>
        Je Capsule Wardrobe Starterkit staat zo snel mogelijk in je inbox.
        Heb je geen mail ontvangen? Check je spam of mail naar{" "}
        <a href="mailto:info@stylistcoach.nl" style={{color:"var(--accent-2)"}}>info@stylistcoach.nl</a>.
      </p>
      <a href="/" style={{
        display:"inline-flex",alignItems:"center",gap:10,
        padding:"14px 28px",
        border:"1px solid rgba(251,246,238,0.25)",borderRadius:999,
        fontFamily:"var(--sans)",fontSize:11,letterSpacing:"0.2em",
        textTransform:"uppercase",color:"var(--paper)",textDecoration:"none",
        transition:"border-color .2s"
      }}>
        Terug naar de hoofdsite
      </a>
    </div>
  </section>
);

const CapsuleApp = () => {
  useReveal();
  const [checkout, setCheckout] = React.useState(false);
  const betaald = new URLSearchParams(window.location.search).get("betaald") === "1";

  if (betaald) {
    return (
      <>
        <LpNav/>
        <BetaaldBanner/>
        <footer className="lp-footer">
          <span className="mark">Stylist <em>Coach</em></span>
          <p>&#169; 2026 Stylist Coach &middot; Sanne Claessen &middot; <a href="/">Terug naar hoofdsite</a></p>
        </footer>
      </>
    );
  }

  return (
    <>
      <LpNav/>

      {/* HERO */}
      <section className="lp-hero">
        <div className="lp-hero-grid">
          <div>
            <div className="lp-hero-eyebrow">
              <span className="dot"></span>
              <span>Stylist Coach &middot; Capsule Wardrobe</span>
              <span className="pill">&#x20AC;17,95 &middot; was &#x20AC;37,95</span>
            </div>
            <h1>
              Breng balans tussen<br/>
              <em>hoe je je voelt</em><br/>
              en wat je draagt.
            </h1>
            <p className="subhead">
              Van kledingstress naar innerlijke rust. Download de Capsule Wardrobe Starterkit
              en ontdek hoe je rust creëert in je kledingkast én in jezelf.
            </p>
            <ul className="lp-hero-bullets">
              <li><Check/> Een doordachte basis die past bij jou nu</li>
              <li><Check/> Werkbladen, voorbeelden en reflectievragen</li>
              <li><Check/> Direct toegang, beperkte oplage tegen introprijs</li>
            </ul>
            <button className="pricebox-cta" style={{maxWidth:340}} onClick={() => setCheckout(true)}>
              Download nu voor &#x20AC;17,95 <Arrow/>
            </button>
            <div style={{marginTop:14,fontSize:11,color:"var(--ink-3)",letterSpacing:"0.04em"}}>
              Direct beschikbaar &middot; Veilig betalen via Mollie
            </div>
          </div>
          <div className="lp-hero-media">
            <div className="lp-mockup">
              <div className="deco tl"></div>
              <div className="deco br"></div>
              <div className="cover">
                <div className="cover-inner">
                  <div className="badge">Starterkit &middot; Digitaal</div>
                  <div className="title">Capsule<br/><em>Wardrobe</em></div>
                  <div className="sub">Bouw een kast die klopt, met je gevoel, je lichaam en je leven.</div>
                  <div className="author">
                    <span>Sanne Claessen</span>
                    <span>v.01</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* RECOGNITION */}
      <section className="lp-section tinted">
        <div className="inner">
          <div className="recog-grid">
            <img src="../images/content_sc_1.jpeg" alt="" style={{width:"100%",height:"100%",objectFit:"cover",aspectRatio:"4/5",borderRadius:2}} />
            <div className="recog-body">
              <span className="lp-eyebrow">Korte herkenning</span>
              <h2>Je kast hangt vol,<br/><em>en toch voelt niets goed</em>.</h2>
              <p>
                Je trekt iets aan, kijkt in de spiegel en twijfelt.
                Niet omdat je geen kleding hebt, maar omdat het <strong>niet meer voelt als jij</strong>.
              </p>
              <p>
                Wat je draagt en hoe je je voelt zijn sterker verbonden dan je denkt.
                Een doordachte basis brengt rust, vanbinnen en vanbuiten.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* WHAT YOU'LL DISCOVER */}
      <section className="lp-section">
        <div className="inner">
          <span className="lp-eyebrow">Wat je ontdekt</span>
          <h2>In deze starterkit <em>leer je</em>:</h2>
          <ul className="bullet-grid" style={{marginTop:32}}>
            <li><span className="ico"><Check size={20}/></span>Je persoonlijke basis kiezen die meebeweegt</li>
            <li><span className="ico"><Check size={20}/></span>Rust en overzicht creëren in je kast</li>
            <li><span className="ico"><Check size={20}/></span>Kleding kiezen die écht bij je past</li>
            <li><span className="ico"><Check size={20}/></span>Bewuste keuzes maken in wat je draagt</li>
            <li><span className="ico"><Check size={20}/></span>Meer vertrouwen voelen in je uitstraling</li>
            <li><span className="ico"><Check size={20}/></span>Je innerlijk en uiterlijk weer laten kloppen</li>
          </ul>
        </div>
      </section>

      {/* FOR WHO */}
      <section className="lp-section tinted">
        <div className="inner">
          <div className="forwho">
            <div>
              <span className="lp-eyebrow">Voor wie</span>
              <h2>Voor <em>vrouwen</em> die...</h2>
              <ul className="forwho-list">
                <li><span className="check"><Check size={16}/></span>Twijfelen voor hun kledingkast 's ochtends</li>
                <li><span className="check"><Check size={16}/></span>Verlangen naar rust en overzicht</li>
                <li><span className="check"><Check size={16}/></span>Zichzelf weer willen herkennen in wat ze dragen</li>
                <li><span className="check"><Check size={16}/></span>Voelen dat hun uiterlijk en innerlijk weer mogen kloppen</li>
              </ul>
            </div>
            <img src="../images/content_sc_16.jpg" alt="" style={{width:"100%",height:"100%",objectFit:"cover",aspectRatio:"4/5",borderRadius:2}} />
          </div>
        </div>
      </section>

      {/* PRICE BOX */}
      <section className="lp-section">
        <div className="inner" style={{maxWidth:720}}>
          <span className="lp-eyebrow" style={{textAlign:"center",display:"block"}}>Investering</span>
          <h2 style={{textAlign:"center",marginBottom:48}}>Start <em>vandaag</em>.</h2>
          <div className="pricebox">
            <div className="pricebox-head">
              <span className="lbl">Capsule Wardrobe Starterkit</span>
              <span className="scarcity">
                <span className="pulse"></span>
                Beperkte oplage
              </span>
            </div>
            <div className="pricebox-price">
              <span className="now">&#x20AC;17,95</span>
              <span className="was">&#x20AC;37,95</span>
              <span className="save">Bespaar &#x20AC;20</span>
            </div>
            <ul className="pricebox-includes">
              <li><Check size={18}/>Digitale starterkit (PDF, direct beschikbaar)</li>
              <li><Check size={18}/>Stappenplan voor je persoonlijke capsule</li>
              <li><Check size={18}/>Werkbladen + reflectievragen</li>
              <li><Check size={18}/>Voorbeelden en combinatieprincipes</li>
              <li><Check size={18}/>Levenslang toegang, herlees wanneer je wilt</li>
            </ul>
            <button className="pricebox-cta" onClick={() => setCheckout(true)}>
              Download de Starterkit voor &#x20AC;17,95 <Arrow/>
            </button>
            <div className="pricebox-trust">
              <span>&#x2713; Direct toegang</span>
              <span>&#x2713; Veilig via Mollie</span>
              <span>&#x2713; iDEAL &middot; Creditcard</span>
            </div>
          </div>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section className="lp-section tinted">
        <div className="inner">
          <span className="lp-eyebrow">Ervaringen</span>
          <h2 style={{marginBottom:48}}>Wat <em>vrouwen</em> zeggen.</h2>
          <Testimonials items={TESTIS_CAPSULE}/>
        </div>
      </section>

      {/* FAQ */}
      <section className="lp-section">
        <div className="inner" style={{maxWidth:880}}>
          <span className="lp-eyebrow">Veelgestelde vragen</span>
          <h2 style={{marginBottom:40}}>Goed om te <em>weten</em>.</h2>
          <FAQ items={FAQ_CAPSULE}/>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="lp-section tinted">
        <div className="inner">
          <div className="lp-cta" style={{gridTemplateColumns:"1fr"}}>
            <div style={{textAlign:"center",maxWidth:560,margin:"0 auto"}}>
              <span className="lp-eyebrow" style={{color:"var(--accent-2)"}}>Laatste stap</span>
              <h3 style={{textAlign:"center"}}>Klaar voor een kast<br/>die <em>klopt?</em></h3>
              <p style={{margin:"0 auto 28px"}}>
                Beperkte oplage tegen introprijs. Direct toegang na betaling.
              </p>
              <button className="pricebox-cta" style={{maxWidth:340,margin:"0 auto"}} onClick={() => setCheckout(true)}>
                Download voor &#x20AC;17,95 <Arrow/>
              </button>
              <div className="reassure" style={{justifyContent:"center",marginTop:20}}>
                <span><Check/> Direct beschikbaar</span>
                <span><Check/> Veilig via Mollie</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="lp-footer">
        <span className="mark">Stylist <em>Coach</em></span>
        <p>&#169; 2026 Stylist Coach &middot; Sanne Claessen &middot; <a href="/">Terug naar hoofdsite</a></p>
      </footer>

      <CapsuleCheckout open={checkout} onClose={() => setCheckout(false)}/>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<CapsuleApp/>);