// vault.jsx — PAGE 1: The Vault Door (sales / opt-in)
const { useState: useStateV } = React;

const HERO_VARIANTS = {
  "Default": {
    eyebrow: "The 70-Day Hyro Challenge",
    title: <>Give Hyro 70 days.<br />Feel the difference.<br /><span className="accent">Get $50 back.</span></>,
    sub: <>You drink water all day and still hit a wall at 3pm. Water is not the fix, electrolytes are. Drink Hyro every day for 70 days and we put $50 back in your pocket. <em>70 days is how long it takes to build a habit that sticks.</em></>
  },
  "Problem-led": {
    eyebrow: "The 70-Day Hyro Challenge",
    title: <>You drink water<br />all day and still<br /><span className="accent">feel flat.</span><br />Give Hyro 70 days.</>,
    sub: <>Water alone runs straight through you. Electrolytes are what pull it into your cells. Take the challenge, drink Hyro daily for 70 days, build the habit, and we put $50 back in your pocket.</>
  },
  "Offer-led": {
    eyebrow: "The 70-Day Hyro Challenge",
    title: <>Finish the 70-Day Challenge,<br />get <span className="accent">$50</span> in Hyro credit.</>,
    sub: <>One stick a day for 70 days. Build the habit, feel the difference, and we drop <em>$50 in Hyro credit</em> into your account.</>
  },
  "Returning subscriber": {
    eyebrow: "For the crew already in",
    title: <>You already<br />drink Hyro daily.<br /><span className="accent">Now get paid<br />for it.</span></>,
    sub: <>No new habit to build, you already rip in a stick a day. Take the 70-Day Challenge, keep your streak going for 70 days, and we put $50 in credit back in your pocket.</>
  }
};

const OUTCOMES = ["Steady energy", "Real absorption", "Faster recovery"];

const MILESTONES = [
{ day: 1, frac: 1 / 70, title: "The Switch", body: "You rip in with your first stick. The switch from plain water to proper hydration starts here." },
{ day: 21, frac: 21 / 70, title: "Habit Locked", body: "Reaching for Hyro is now automatic. This is the point most people say they stop hitting the afternoon wall." },
{ day: 45, frac: 45 / 70, title: "Past the Hard Part", body: "The novelty is gone and you are still going. Daily hydration is not a decision anymore, it is just how you operate." },
{ day: 70, frac: 1, title: "Hyro 70", body: "You made it. The habit is locked for good and there is $50 in credit waiting. Hit claim and we'll credit your account." }];


const STEPS = [
{ ic: "userplus", t: "Sign up and access your tracker", d: "First name and email. Takes 30 seconds\nand sends you straight to your tracker." },
{ ic: "drop", t: "Drink Hyro daily for 70 days", d: "One stick into 500 to 750ml of water.\nMix, shake, sip, then tick off the day." },
{ ic: "gift", t: "Finish your 70 and claim $50", d: "Hit day 70 with your habit locked in, then claim and we drop $50 in Hyro credit into your account." }];


const WHY = [
{ ic: "sun", t: "All-day energy", d: "Electrolytes carry water into your cells instead of straight through you. That is steady energy rather than the flat feeling water alone leaves behind." },
{ ic: "refresh", t: "Faster recovery", d: "Sodium, potassium and magnesium are what you lose through sweat. Put them back and you bounce back quicker after training." },
{ ic: "bolt", t: "No 3pm crash", d: "Most afternoon slumps are mild dehydration, not a coffee problem. Stay topped up and the 3pm wall stops turning up." }];


const FAQS = [
{ q: "Why 70 days?", a: "Habits take time to set. 70 days is long enough for daily hydration to stop being a decision and start being who you are. It is also long enough to genuinely feel the difference." },
{ q: "Do I have to drink every day?", a: "That is the idea. One stick a day, every day. The tracker makes it easy to keep the streak going and see how far you have come." },
{ q: "What if I miss a day?", a: "You will not lose your spot. Missed days show up as recoverable, never as a fail. Just check back in the next day and keep going. Consistency matters more than perfection." },
{ q: "How do I get my $50?", a: "Drink Hyro daily for 70 days and check off your boxes. Your $50 unlocks in stages as the habit builds, $10 at day 21, $15 at day 45 and the last $25 at day 70. Hit Claim my reward, confirm your name and email, and we drop the credit into your account." }];


function Eyebrow({ children, onRed }) {
  return <span className={"eyebrow" + (onRed ? " on-red" : "")}>{children}</span>;
}

function FaqItem({ q, a }) {
  const [open, setOpen] = useStateV(false);
  return (
    <div className={"faq-item" + (open ? " open" : "")}>
      <button className="faq-q" onClick={() => setOpen((o) => !o)} aria-expanded={open}>
        <h4>{q}</h4>
        <span className="faq-ic">+</span>
      </button>
      <div className="faq-a" style={{ maxHeight: open ? 240 : 0 }}>
        <div className="faq-a-inner">{a}</div>
      </div>
    </div>);

}

function VaultDoor({ onCta, t, heroRef }) {
  const hero = HERO_VARIANTS[t.heroCopy] || HERO_VARIANTS["Default"];
  const teaserDone = 12;

  return (
    <div className="vault-page">
      {/* 01 — HERO (full-bleed image, text overlay) */}
      <section className="sec hero-full" data-screen-label="Hero" ref={heroRef}>
        <div className="hero-scrim"></div>
        <div className="wrap hero-content">
          <div className="hero-inner">
            <h1 className="h-hero">{hero.title}</h1>
            <p className="subhead">{hero.sub}</p>
            <div className="chip-row one-line" style={{ marginBottom: 26, maxWidth: 460 }}>
              {OUTCOMES.map((o) =>
              <span className="chip" key={o}><span className="tick">{Icon.check({})}</span><span>{o}</span></span>
              )}
            </div>
            <button className="cta big" onClick={() => onCta("hero")}>START MY 70-DAY CHALLENGE</button>
          </div>
        </div>
        <div className="hero-wave"><Wave fill="var(--hyro-white)" /></div>
      </section>

      {/* 02 — WHAT 70 DAYS DOES */}
      <section className="sec surface-white sec-pad" data-screen-label="What 70 days does">
        <div className="wrap">
          <div className="center" style={{ maxWidth: 640, margin: "0 auto 40px" }}>
            <Eyebrow>What 70 days of Hyro does</Eyebrow>
            <h2 className="h-sec">Hydration <span className="accent">compounds</span></h2>
            <p className="subhead" style={{ margin: "0 auto" }}>Here is what changes when you stay consistent.</p>
          </div>
          <div className="arc-track">
            <div className="arc-grid">
              {MILESTONES.map((m) =>
              <div className="ms-card" key={m.day}>
                  <MilestoneRing day={m.day} frac={m.frac} />
                  <div>
                    <h4>{m.title}</h4>
                    <p>{m.body}</p>
                  </div>
                </div>
              )}
            </div>
          </div>
          <div className="center mt-l">
            <button className="cta" onClick={() => onCta("milestones")}>START MY CHALLENGE</button>
          </div>
        </div>
      </section>

      {/* 03 — HOW TO ENTER */}
      <section className="sec surface-cream sec-pad" data-screen-label="How to enter">
        <div className="wrap">
          <div className="center" style={{ maxWidth: 620, margin: "0 auto 40px" }}>
            <Eyebrow>How to enter</Eyebrow>
            <h2 className="h-sec">Simple. Drink daily,<br />track it, stay <span className="accent">active</span></h2>
          </div>
          <div className="steps">
            {STEPS.map((s, i) =>
            <div className="step" key={i}>
                <span className="num">{i + 1}</span>
                <div className="step-ic">{Icon[s.ic]({})}</div>
                <h4>{s.t}</h4>
                <p>{s.d}</p>
              </div>
            )}
          </div>

          {/* CTA acts as the divider between How-to and Habit/Reward */}
          <div className="center" style={{ margin: "60px 0" }}>
            <button className="cta big" onClick={() => onCta("steps")}>Start my 70-day challenge</button>
          </div>

          {/* Habit + Reward, below the steps */}
          <div className="hr-grid">
            {/* The Habit */}
            <div className="hr-card">
              <Eyebrow>The habit</Eyebrow>
              <h3 className="hr-h">Drink Hyro <span className="accent">daily</span></h3>
              <p>One stick a day. Check off a box for 70 days straight and the streak does the work.</p>
              <div className="teaser-frame">
                <div className="teaser-grid">
                  {Array.from({ length: 12 }).map((_, i) =>
                  <div className={"tbox" + (i < 8 ? " done" : "")} key={i}>
                      {i < 8 ? Icon.check({ style: { width: "46%", height: "46%", stroke: "var(--hyro-red)", strokeWidth: 3, fill: "none" } }) : i + 1}
                    </div>
                  )}
                </div>
              </div>
            </div>
            {/* The Reward */}
            <div className="hr-card">
              <Eyebrow>The reward</Eyebrow>
              <h3 className="hr-h">Finish and get $50</h3>
              <p><em>Everyone</em> who finishes gets $50 in Hyro credit, unlocked in stages as the habit builds: $10 at day 21, $15 at day 45, then $25 at day 70.</p>
              <div className="coupon">
                <span className="coupon-amt lemon">$50</span>
                <div className="coupon-divider"></div>
                <div className="coupon-meta">
                  <span className="coupon-label">Hyro credit</span>
                  <span className="coupon-sub">$10 · $15 · $25 across 70 days</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="sec surface-red" style={{ padding: "72px 0 104px", position: "relative" }} data-screen-label="Final CTA">
        <div className="wrap final-cta">
          <Eyebrow onRed>Try the 70-Day Hyro Challenge</Eyebrow>
          <h2 className="h-sec" style={{ color: "#fff" }}>GIVE YOUR BODY 70 DAYS TO FEEL HYDRATED</h2>
          <p className="subhead" style={{ margin: "0 auto 28px", color: "rgba(255,255,255,0.92)" }}>Small habit. Real difference. And $50 back when you finish.</p>
          <button className="cta on-red big" onClick={() => onCta("final")}>START MY 70-DAY CHALLENGE</button>
          <p className="friction">Free to join. Takes 30 seconds. You're already in it.</p>
        </div>
        <div className="sec-wave"><Wave fill="var(--hyro-ink)" /></div>
      </section>

      {/* FAQ (last section) */}
      <section className="sec surface-dark faq-dark sec-pad" data-screen-label="FAQ">
        <div className="wrap">
          <div className="center" style={{ marginBottom: 36 }}>
            <Eyebrow>Got questions?</Eyebrow>
            <h2 className="h-sec">Great, we've got answers...</h2>
          </div>
          <div className="faq-list">
            {FAQS.map((f) => <FaqItem key={f.q} q={f.q} a={f.a} />)}
          </div>
        </div>
      </section>
    </div>);

}

window.VaultDoor = VaultDoor;