// Closet Detox — gratis lead magnet
const TESTIS_DETOX = [
  { q: "Mijn kast voelde overweldigend. Na de detox heb ik weer overzicht en pak ik 's ochtends sneller iets aan.", n: "Juul", r: "Na Closet Detox" },
  { q: "Ik dacht: weer een lijstje. Maar deze 3 stappen werken écht. Ik heb een derde van mijn kast met liefde losgelaten.", n: "Marloes", r: "Na Closet Detox" },
  { q: "Wat ik fijn vond: het oordeelt niet. Het helpt je gewoon kiezen wat nog bij je past en wat niet meer.", n: "Jasmijn", r: "Na Closet Detox" },
];

const FAQ_DETOX = [
  { q: "Hoe lang duurt de Closet Detox?", a: "Reken op 60 tot 90 minuten. Je doorloopt drie heldere stappen in je eigen tempo, op een moment dat je rust in huis hebt." },
  { q: "Moet ik er een hele dag voor uittrekken?", a: "Nee. Je kunt 'm in één keer doen, of de stappen verspreid over een paar avonden. Het werkt beide goed." },
  { q: "Krijg ik na de download nog iets toegestuurd?", a: "Ja — een korte e-mail met praktische tips en de uitnodiging voor een vrijblijvend gesprek. Je kunt je altijd uitschrijven." },
  { q: "Wat als ik nog niets durf weg te doen?", a: "Dat is precies het uitgangspunt. De methode helpt je zachtjes en zonder druk te onderscheiden wat nog klopt en wat niet meer. Niets moet." },
  { q: "Voor wie is dit níet?", a: "Als je geen onrust voelt rondom je kast en kleding, heb je dit waarschijnlijk niet nodig. Het is bedoeld voor wie verlangt naar meer overzicht en rust." },
];

const ClosetDetoxLeadForm = () => {
  const [naam, setNaam] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [instagram, setInstagram] = React.useState("");
  const [status, setStatus] = React.useState("idle"); // idle | sending | sent | error

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus("sending");
    try {
      const res = await fetch("/api/closet-detox", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ naam, email, instagram }),
      });
      setStatus(res.ok ? "sent" : "error");
    } catch {
      setStatus("error");
    }
  };

  if (status === "sent") {
    return (
      <div className="lp-form" style={{textAlign:"center",padding:"40px 28px"}}>
        <div style={{width:56,height:56,borderRadius:999,background:"var(--accent)",color:"var(--paper)",display:"flex",alignItems:"center",justifyContent:"center",margin:"0 auto 20px",fontSize:24}}>✓</div>
        <h4 style={{fontFamily:"var(--serif)",fontWeight:400,fontSize:26,margin:"0 0 12px",letterSpacing:"-0.01em"}}>
          Check je <em style={{fontStyle:"italic",color:"var(--accent)"}}>inbox</em>
        </h4>
        <p style={{fontFamily:"var(--serif)",fontWeight:300,fontSize:16,color:"var(--ink-2)",margin:0,lineHeight:1.5}}>
          De Closet Detox staat klaar in je mail, {naam}. Vergeet je spam niet te checken.
        </p>
      </div>
    );
  }

  return (
    <form className="lp-form" onSubmit={handleSubmit}>
      <div className={`field ${naam ? "filled" : ""}`}>
        <input id="d_naam" type="text" value={naam} onChange={e => setNaam(e.target.value)} required />
        <label htmlFor="d_naam">Voornaam</label>
      </div>
      <div className={`field ${email ? "filled" : ""}`}>
        <input id="d_email" type="email" value={email} onChange={e => setEmail(e.target.value)} required />
        <label htmlFor="d_email">E-mailadres</label>
      </div>
      <div className={`field ${instagram ? "filled" : ""}`}>
        <input id="d_ig" type="text" value={instagram} onChange={e => setInstagram(e.target.value)} />
        <label htmlFor="d_ig">Instagram (optioneel)</label>
      </div>
      {status === "error" && (
        <p style={{color:"var(--accent)",fontSize:13,margin:0}}>
          Er ging iets mis. Probeer het opnieuw of mail naar info@stylistcoach.nl.
        </p>
      )}
      <button className="submit" type="submit" disabled={status === "sending"}>
        {status === "sending" ? "Versturen…" : <><span>Stuur mij de Closet Detox</span><Arrow/></>}
      </button>
      <div className="micro">
        Geen spam. Je ontvangt 'm binnen 1 minuut.<br/>
        Uitschrijven kan altijd met één klik.
      </div>
    </form>
  );
};

const ClosetDetoxApp = () => {
  useReveal();

  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 · Closet Detox</span>
              <span className="pill accent">Gratis download</span>
            </div>
            <h1>
              Een frisse start voor je kledingkast<br/>
              <em>én je hoofd.</em>
            </h1>
            <p className="subhead">
              Download gratis de Closet Detox in 3 stappen en breng rust, overzicht en helderheid terug
              in je kast en in jezelf.
            </p>
            <ul className="lp-hero-bullets">
              <li><Check/> Een eenvoudige methode in 3 stappen</li>
              <li><Check/> Geen ingewikkelde regels, wel duidelijke keuzes</li>
              <li><Check/> Direct te downloaden, doe het in je eigen tempo</li>
            </ul>
            <ClosetDetoxLeadForm/>
          </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">Gratis · 3 stappen</div>
                  <div className="title">Closet <em>Detox</em></div>
                  <div className="sub">Een methode om rust en ruimte terug te brengen in je kast.</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_4.jpg" alt="" style={{width:"100%",height:"100%",objectFit:"cover",aspectRatio:"4/5",borderRadius:2}} />
            <div className="recog-body">
              <span className="lp-eyebrow">Herkenning</span>
              <h2>Vol, maar nooit <em>iets aan</em>.</h2>
              <p>
                Je kast hangt vol met kleding, en toch voelt het rommelig en onrustig.
                Genoeg opties, en toch twijfel je elke ochtend opnieuw.
              </p>
              <p>
                Je schuift opruimen voor je uit, omdat je niet weet waar te beginnen.
                Ondertussen blijft dat <strong>onrustige gevoel</strong> terugkomen.
                Niet alleen in je kast, maar ook in je hoofd.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* WHAT IS IT — 3 STEPS */}
      <section className="lp-section">
        <div className="inner">
          <span className="lp-eyebrow">Wat is de Closet Detox</span>
          <h2>Drie stappen naar <em>helderheid</em>.</h2>
          <p className="lead">
            Geen ingewikkelde regels. Geen perfecte stijl nodig. Wel een eenvoudige methode
            die je helpt duidelijke keuzes maken, zodat er weer rust ontstaat.
          </p>
          <div className="steps-grid">
            <div className="step-card">
              <div className="num">01</div>
              <h3>Loslaten</h3>
              <p>Je gaat eerlijk kijken naar wat er hangt en laat los wat niet meer klopt. Niet weggooien om het weggooien, maar met gevoel.</p>
            </div>
            <div className="step-card">
              <div className="num">02</div>
              <h3>Bewust kiezen</h3>
              <p>Heldere vragen helpen je onderscheiden wat nog bij je past en wat niet meer. Geen twijfel, maar richting.</p>
            </div>
            <div className="step-card">
              <div className="num">03</div>
              <h3>Bouwen</h3>
              <p>Je ordent wat blijft en bouwt een basis die klopt. Resultaat: een kast die voelt als jij.</p>
            </div>
          </div>
        </div>
      </section>

      {/* WHAT YOU'LL DO — bullet grid */}
      <section className="lp-section tinted">
        <div className="inner">
          <span className="lp-eyebrow">Wat je gaat doen</span>
          <h2>In deze gratis <em>Closet Detox</em>:</h2>
          <ul className="bullet-grid" style={{marginTop:32}}>
            <li><span className="ico"><Check size={20}/></span>Ontdek je wat nog écht bij je past</li>
            <li><span className="ico"><Check size={20}/></span>Leer je makkelijker keuzes maken in je kast</li>
            <li><span className="ico"><Check size={20}/></span>Creëer je overzicht en ruimte</li>
            <li><span className="ico"><Check size={20}/></span>Laat je los wat je niet meer draagt</li>
            <li><span className="ico"><Check size={20}/></span>Breng je rust terug in je ochtendroutine</li>
            <li><span className="ico"><Check size={20}/></span>Voel je weer grip op wat je draagt</li>
          </ul>
        </div>
      </section>

      {/* PULL QUOTE */}
      <section className="lp-pull">
        <div className="inner">
          <blockquote>
            Een kast die klopt, maakt ruimte vrij in je hoofd.
          </blockquote>
          <div className="who">— Sanne Claessen, Stylist Coach</div>
        </div>
      </section>

      {/* OUTCOMES */}
      <section className="lp-section">
        <div className="inner">
          <span className="lp-eyebrow">Resultaat</span>
          <h2>Na deze drie <em>stappen</em>:</h2>
          <div className="outcome-ribbon" style={{marginTop:40}}>
            <div className="cell">
              <div className="n">01</div>
              <div className="t">Je kast voelt lichter en overzichtelijker</div>
            </div>
            <div className="cell">
              <div className="n">02</div>
              <div className="t">Je maakt sneller keuzes 's ochtends</div>
            </div>
            <div className="cell">
              <div className="n">03</div>
              <div className="t">Meer rust in je dagelijkse routine</div>
            </div>
            <div className="cell">
              <div className="n">04</div>
              <div className="t">Helderheid over wat wel en niet bij je past</div>
            </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_DETOX}/>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="lp-section">
        <div className="inner">
          <div className="lp-cta">
            <div>
              <span className="lp-eyebrow" style={{color:"var(--accent-2)"}}>Download nu</span>
              <h3>Klaar voor een<br/><em>frisse start?</em></h3>
              <p>
                Download gratis de Closet Detox in 3 stappen en geef jezelf het cadeau
                van een kast die klopt.
              </p>
              <div className="reassure">
                <span><Check/> 100% gratis</span>
                <span><Check/> Direct in je inbox</span>
                <span><Check/> Geen spam</span>
              </div>
            </div>
            <ClosetDetoxLeadForm/>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="lp-section tinted">
        <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_DETOX}/>
        </div>
      </section>

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

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