// Sections B: Transformations, Value Stack, About, Stats, Method, Two Options, Final CTA, Footer, Tweaks

// -------- Section 6: Transformations --------
const Transformations = () => {
  const items = Array.from({ length: 6 }).map((_, i) => ({
    name: ['Priya', 'Ananya', 'Ritika', 'Neha', 'Meera', 'Aisha'][i],
    weeks: ['12 weeks', '8 weeks', '16 weeks', '10 weeks', '14 weeks', '6 weeks'][i],
  }));

  return (
    <section className="section" style={{ background: 'var(--canvas-2)' }}>
      <div className="wrap">
        <div className="section-head">
          <Reveal><span className="eyebrow">Transformations</span></Reveal>
          <Reveal delay="1"><h2 className="display">Real transformations. <em style={{ fontStyle: 'italic' }}>Earned in real mom life.</em></h2></Reveal>
          <Reveal delay="2"><p>These women didn't have more time or more willpower. They just had the right method.</p></Reveal>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 18 }}>
          {items.map((it, i) => (
            <Reveal key={i} delay={(i % 3) + 1}>
              <div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 3 }}>
                  <div style={{ position: 'relative' }}>
                    <Placeholder label="BEFORE" h={220} radius={10} />
                    <Tag>BEFORE</Tag>
                  </div>
                  <div style={{ position: 'relative' }}>
                    <Placeholder label="AFTER" h={220} radius={10} />
                    <Tag accent>AFTER</Tag>
                  </div>
                </div>
                <div style={{ marginTop: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>{it.name}</div>
                  <div style={{ fontSize: 10, fontFamily: 'var(--f-mono)', color: 'var(--ink-3)', letterSpacing: '0.06em' }}>{it.weeks.toUpperCase()} POSTPARTUM</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal>
          <div style={{ textAlign: 'center', marginTop: 40 }}>
            <p style={{ fontFamily: 'var(--f-display)', fontSize: 20, fontStyle: 'italic', margin: '0 0 18px' }}>Your transformation starts on Day 1 — not someday.</p>
            <CTA />
          </div>
        </Reveal>
      </div>
    </section>
  );
};

const Tag = ({ children, accent }) => (
  <div style={{
    position: 'absolute', top: 12, left: 12,
    padding: '5px 10px', borderRadius: 999,
    background: accent ? 'var(--accent)' : 'rgba(255,255,255,0.9)',
    color: accent ? 'var(--canvas)' : 'var(--ink)',
    fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.14em',
    fontWeight: 500,
    backdropFilter: 'blur(6px)',
  }}>{children}</div>
);

// -------- Section 7: Value Stack --------
const valueStack = [
  { t: '5-Day Live Postpartum Pilates Challenge', v: 3500, d: 'Try the exact Pilates movements that activate your corset, tighten your belly and reconnect your core — live, every day.', img: 'assets/bonus-1.png' },
  { t: 'Full Body Posture & Alignment Check', sub: 'The Stick Test', v: 900, d: 'A simple tool to show you exactly where your posture broke down after pregnancy — and what to fix first.', img: 'assets/bonus-2.png' },
  { t: 'Core & Pelvic Floor Readiness Assessment', v: 900, d: 'Know whether your body is actually ready for exercise — or whether starting now could make things worse.', img: 'assets/bonus-3.png' },
  { t: 'Postpartum Nutrition Mistakes Guide', v: 900, d: 'Identify the food habits quietly slowing your recovery, increasing bloating and draining your energy.', img: 'assets/bonus-4.png' },
  { t: 'The God-Given Corset Method', sub: 'Breathing & Inner Core Activation Guide', v: 1100, d: 'Learn to breathe and activate your inner unit — the foundation everything else is built on.', img: 'assets/bonus-5.png' },
  { t: 'Daily Movement Corrections for Moms', sub: 'Feeding, Lifting & Sitting Right', v: 900, d: 'Fix how you feed, lift and sit — the daily habits that are silently undoing your healing.', img: 'assets/bonus-6.png' },
  { t: 'Safe Return to Exercise Guide', sub: 'When to Start & What to Avoid', v: 900, d: 'Know exactly when to start, what to avoid, and how to progress without worsening leaks or belly gaps.', img: 'assets/bonus-7.png' },
  { t: '20 Things Every Postpartum Mother Needs to Know', v: 900, d: "Critical do's and don'ts most postpartum mothers are never told — but wish they knew from day one.", img: 'assets/bonus-8.png' },
];

const ValueStack = ({ title = "Everything you get for just ₹497.", showSub = true, eyebrow = 'What you get' }) => (
  <section className="section" style={{ background: 'var(--ink)', color: 'var(--canvas)' }}>
    <div className="wrap">
      <div className="section-head" style={{ color: 'var(--canvas)' }}>
        <Reveal><span className="eyebrow" style={{ color: 'var(--accent)' }}>{eyebrow}</span></Reveal>
        <Reveal delay="1"><h2 className="display" style={{ color: 'var(--canvas)' }}>{title}</h2></Reveal>
        {showSub && <Reveal delay="2"><p style={{ color: 'rgba(255,255,255,0.7)' }}>Here's what's included the moment you join — a complete head start on your postpartum recovery.</p></Reveal>}
      </div>

      <div className="vs-grid" style={{
        maxWidth: 1180, margin: '0 auto',
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
        gap: 14
      }}>
        {valueStack.map((v, i) => (
          <Reveal key={i} delay={(i % 4) + 1} style={{ display: 'flex' }}>
            <div style={{
              display: 'flex', flexDirection: 'column',
              padding: 16,
              background: 'rgba(255,255,255,0.03)',
              border: '1px solid rgba(255,255,255,0.08)',
              borderRadius: 12,
              transition: 'all 400ms cubic-bezier(.2,.8,.2,1)',
              width: '100%', height: '100%'
            }} onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.06)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
               onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.03)'; e.currentTarget.style.transform = 'none'; }}>
              <div className="vs-card-imgwrap" style={{
                width: '100%',
                aspectRatio: '4 / 3',
                borderRadius: 10,
                overflow: 'hidden',
                marginBottom: 14,
                position: 'relative',
                background: 'linear-gradient(135deg, color-mix(in oklab, var(--accent) 18%, transparent), color-mix(in oklab, var(--accent) 4%, transparent))'
              }}>
                <div style={{
                  position: 'absolute', inset: 0,
                  borderRadius: 10,
                  padding: 1,
                  background: 'linear-gradient(135deg, color-mix(in oklab, var(--accent) 90%, #fff) 0%, color-mix(in oklab, var(--accent) 40%, transparent) 40%, color-mix(in oklab, var(--accent) 20%, transparent) 70%, color-mix(in oklab, var(--accent) 80%, #fff) 100%)',
                  WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
                  WebkitMaskComposite: 'xor',
                  maskComposite: 'exclude',
                  pointerEvents: 'none'
                }} />
                <img src={v.img} alt={v.t} className="vs-card-img" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
                <div style={{ fontFamily: 'var(--f-mono)', fontSize: 9, letterSpacing: '0.14em', color: 'var(--accent)', marginBottom: 6 }}>BONUS · 0{i + 1}</div>
                <h3 className="display" style={{ margin: '0 0 2px', fontSize: 16, lineHeight: 1.25, color: 'var(--canvas)' }}>{v.t}</h3>
                {v.sub && <div style={{ fontFamily: 'var(--f-display)', fontStyle: 'italic', fontSize: 12, color: 'rgba(255,255,255,0.5)', marginBottom: 6 }}>{v.sub}</div>}
                <p style={{ margin: '6px 0 12px', color: 'rgba(255,255,255,0.72)', fontSize: 12, lineHeight: 1.5 }}>{v.d}</p>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', marginTop: 'auto' }}>
                  <span style={{ padding: '3px 8px', borderRadius: 999, background: 'var(--accent)', color: 'var(--ink)', fontFamily: 'var(--f-mono)', fontSize: 9, letterSpacing: '0.12em', fontWeight: 500 }}>INCLUDED</span>
                  <span style={{ fontFamily: 'var(--f-mono)', fontSize: 11, color: 'rgba(255,255,255,0.55)' }}>₹{v.v.toLocaleString('en-IN')} <span style={{ opacity: 0.6 }}>value</span></span>
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>

      <Reveal>
        <div style={{
          maxWidth: 620, margin: '40px auto 0',
          position: 'relative',
          borderRadius: 16,
          overflow: 'hidden',
          padding: '1.5px',
          background: 'linear-gradient(135deg, color-mix(in oklab, var(--accent) 90%, #fff) 0%, color-mix(in oklab, var(--accent) 40%, transparent) 45%, color-mix(in oklab, var(--accent) 20%, transparent) 70%, color-mix(in oklab, var(--accent) 85%, #fff) 100%)'
        }}>
          <div style={{
            position: 'relative',
            borderRadius: 15,
            background: 'radial-gradient(ellipse at 50% 0%, color-mix(in oklab, var(--accent) 14%, var(--ink)) 0%, var(--ink) 70%)',
            padding: '22px 26px',
            overflow: 'hidden'
          }}>
            {/* shine sweep */}
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(115deg, transparent 35%, color-mix(in oklab, var(--accent) 22%, transparent) 50%, transparent 65%)',
              pointerEvents: 'none'
            }} />

            {/* SAVE badge */}
            <div style={{
              position: 'absolute', top: 14, right: 14,
              background: 'var(--accent)', color: 'var(--ink)',
              padding: '4px 9px', borderRadius: 999,
              fontFamily: 'var(--f-mono)', fontSize: 9, fontWeight: 500, letterSpacing: '0.12em'
            }}>
              SAVE 95%
            </div>

            <div style={{
              position: 'relative',
              display: 'grid', gridTemplateColumns: '1fr auto 1.1fr', gap: 20,
              alignItems: 'center',
              textAlign: 'center'
            }} className="price-grid">
              <div>
                <div style={{ fontFamily: 'var(--f-mono)', fontSize: 9, letterSpacing: '0.14em', color: 'rgba(255,255,255,0.5)', marginBottom: 5, textTransform: 'uppercase' }}>Total value</div>
                <div className="display strike-draw" style={{ fontSize: 24, color: 'rgba(255,255,255,0.5)', lineHeight: 1, position: 'relative', display: 'inline-block' }}>₹10,000</div>
              </div>

              <div style={{
                width: 1, height: 50,
                background: 'linear-gradient(to bottom, transparent, color-mix(in oklab, var(--accent) 55%, transparent), transparent)'
              }} />

              <div>
                <div style={{ fontFamily: 'var(--f-mono)', fontSize: 9, letterSpacing: '0.14em', color: 'var(--accent)', marginBottom: 5, textTransform: 'uppercase', fontWeight: 500 }}>You pay today</div>
                <div className="display price-pop" data-countup="497" data-prefix="₹" style={{
                  fontSize: 'clamp(40px, 4.8vw, 54px)',
                  lineHeight: 0.95,
                  color: 'transparent',
                  background: 'linear-gradient(135deg, color-mix(in oklab, var(--accent) 95%, #fff) 0%, var(--accent) 50%, color-mix(in oklab, var(--accent) 85%, #fff) 100%)',
                  WebkitBackgroundClip: 'text',
                  backgroundClip: 'text',
                  fontWeight: 400,
                  filter: 'drop-shadow(0 3px 14px color-mix(in oklab, var(--accent) 30%, transparent))'
                }}>
                  ₹497
                </div>
                <div style={{ marginTop: 5, fontFamily: 'var(--f-mono)', fontSize: 9, letterSpacing: '0.08em', color: 'rgba(255,255,255,0.5)' }}>
                  One-time · Instant access
                </div>
              </div>
            </div>
          </div>
        </div>
      </Reveal>

      <Reveal>
        <div style={{ textAlign: 'center', marginTop: 28 }}>
          <p style={{ fontFamily: 'var(--f-display)', fontSize: 17, fontStyle: 'italic', margin: '0 0 18px', color: 'rgba(255,255,255,0.75)' }}>
            This is not a discount. This is a decision to finally put yourself first.
          </p>
          <CTA />
        </div>
      </Reveal>
    </div>
  </section>
);

// -------- Section 8: About --------
const credentials = [
  "Asia's Pilates Ambassador — 2023 & 2024",
  "Founder, Ikore Pilates & Ikore Education",
  "500+ Pilates Instructors Certified Globally",
  "MD Homeopathy · PGDHM London · NCPT USA",
  "Balanced Body Master Educator",
  "50 Most Influential Women in Business 2025",
  "FoxStory India's 100 Influential Femmes",
  "ISO 9001:2015 Certified Institute",
];

const About = () => (
  <section id="about" className="section" style={{ background: 'var(--canvas-2)' }}>
    <div className="wrap">
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(280px, 0.85fr) 1.4fr', gap: 56, alignItems: 'start', maxWidth: 1120, margin: '0 auto' }}>
        <Reveal>
          <div style={{ position: 'sticky', top: 96 }}>
            <img src="assets/dr-deepali.jpeg" alt="Dr. Deepali Gupta" style={{ width: '100%', height: 'auto', display: 'block', borderRadius: 16, objectFit: 'cover' }} />
          </div>
        </Reveal>

        <div>
          <Reveal><span className="eyebrow">Who</span></Reveal>
          <Reveal delay="1">
            <h2 className="display" style={{ fontSize: 'clamp(26px, 3.2vw, 40px)', margin: '10px 0 20px' }}>
              Who is Dr. Deepali — and why she doesn't teach <em style={{ fontStyle: 'italic' }}>guesswork.</em>
            </h2>
          </Reveal>
          <Reveal delay="2">
            <p style={{ fontSize: 16, fontStyle: 'italic', color: 'var(--ink-2)', fontFamily: 'var(--f-display)', margin: '0 0 24px', lineHeight: 1.4 }}>
              For 20 years, Dr. Deepali has done one thing: help women understand their bodies and heal them — the right way.
            </p>
          </Reveal>

          {[
            "Dr. Deepali Gupta is Asia's Pilates Ambassador, Founder of Ikore Pilates & Ikore Education, and one of India's most recognised movement therapy experts. She has spent two decades watching postpartum mothers do the wrong things — not out of laziness, but because nobody told them the right ones.",
            "She built the God-Given Corset Method to change that — a science-backed, Pilates-powered approach that works from the inside out. She has trained over 2,000 individuals, certified 500+ Pilates instructors, and helped physiotherapists worldwide integrate movement therapy into clinical practice.",
            "She created this 5-Day Challenge so you can experience the method first — feel what it does to your body before committing to anything more. Once you feel it, you won't need convincing."
          ].map((p, i) => (
            <Reveal key={i} delay={(i % 3) + 1}>
              <p style={{ fontSize: 14, lineHeight: 1.65, color: 'var(--ink-2)', margin: '0 0 14px' }}>{p}</p>
            </Reveal>
          ))}

          <Reveal>
            <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 6 }}>
              {credentials.map((c, i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '16px 1fr', gap: 8, alignItems: 'start',
                  padding: '6px 0', fontSize: 12, color: 'var(--ink-2)',
                }}>
                  <span style={{ color: 'var(--accent-deep)', marginTop: 1 }}>★</span>
                  <span>{c}</span>
                </div>
              ))}
            </div>
          </Reveal>

          <Reveal>
            <div style={{ marginTop: 28 }}>
              <CTA />
            </div>
          </Reveal>
        </div>
      </div>
    </div>
  </section>
);

// -------- Section 9: Stats --------
const stats = [
  { n: 20, suffix: '+', unit: 'Years', l: 'of expertise in movement therapy & Pilates' },
  { n: 10000, suffix: '+', unit: 'Women', l: 'transformed across India and globally', format: 'comma' },
  { n: 500, suffix: '+', unit: 'Instructors', l: 'trained and certified globally' },
  { n: 4.9, suffix: '/5', unit: 'Rating', l: 'average satisfaction from postpartum mothers', decimals: 1 },
];

const Counter = ({ to, suffix = '', decimals = 0, format }) => {
  const ref = React.useRef(null);
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    let started = false;
    const run = () => {
      if (started) return; started = true;
      const duration = 1600;
      const t0 = performance.now();
      const tick = (t) => {
        const p = Math.min(1, (t - t0) / duration);
        const eased = 1 - Math.pow(1 - p, 3);
        setVal(to * eased);
        if (p < 1) requestAnimationFrame(tick);
        else setVal(to);
      };
      requestAnimationFrame(tick);
    };
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) run(); });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [to]);
  const display = decimals > 0
    ? val.toFixed(decimals)
    : format === 'comma' ? Math.round(val).toLocaleString('en-US') : Math.round(val).toString();
  return <span ref={ref}>{display}{suffix}</span>;
};

const Stats = () => (
  <section className="section">
    <div className="wrap">
      <Reveal>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <span className="eyebrow">The numbers speak</span>
          <h2 className="display" style={{ marginTop: 10, fontSize: 'clamp(26px, 3.4vw, 42px)' }}>
            Two decades. <em style={{ fontStyle: 'italic' }}>Ten thousand</em> women. One method.
          </h2>
        </div>
      </Reveal>

      <div className="stats-grid" style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
        gap: 1, background: 'var(--hair)',
        border: '1px solid var(--hair)', borderRadius: 18, overflow: 'hidden',
        maxWidth: 1100, margin: '0 auto',
        boxShadow: '0 30px 70px -40px rgba(20,15,10,0.18)'
      }}>
        {stats.map((s, i) => (
          <Reveal key={i} delay={(i % 4) + 1} style={{ display: 'flex' }}>
            <div style={{
              background: 'var(--canvas)', padding: '36px 24px 32px',
              width: '100%',
              display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center',
              gap: 14,
              position: 'relative'
            }}>
              {/* giant gold gradient number */}
              <div className="display" style={{
                fontSize: 'clamp(44px, 5.2vw, 72px)',
                lineHeight: 0.9,
                fontWeight: 400,
                letterSpacing: '-0.015em',
                color: 'transparent',
                background: 'linear-gradient(180deg, color-mix(in oklab, var(--accent) 92%, #fff) 0%, var(--accent-deep, var(--accent)) 100%)',
                WebkitBackgroundClip: 'text',
                backgroundClip: 'text',
                margin: 0
              }}>
                <Counter to={s.n} suffix={s.suffix} decimals={s.decimals || 0} format={s.format} />
              </div>

              {/* unit label */}
              <div style={{
                fontFamily: 'var(--f-mono)', fontSize: 10.5, letterSpacing: '0.22em',
                textTransform: 'uppercase', color: 'var(--accent-deep, var(--accent))',
                fontWeight: 500, marginTop: 2
              }}>
                {s.unit}
              </div>

              {/* label */}
              <div style={{
                fontSize: 13, lineHeight: 1.55,
                color: 'var(--ink-2)',
                maxWidth: 220
              }}>
                {s.l}
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

// -------- Section 10: Why This Works --------
const methodSteps = [
  { t: 'Breathing & Pressure Control', d: 'Stops the belly from pushing out. Protects your pelvic floor from day one.' },
  { t: 'Core & Pelvic Floor Reconnection', d: "Muscles reconnect before they strengthen. No more guessing if you're doing it right." },
  { t: 'Posture & Alignment Reset', d: 'Your pelvis, spine and ribs return to where they belong — visibly and physically.' },
  { t: 'Functional Movement Reprogramming', d: 'Feeding, lifting, sitting — the daily habits corrected so healing happens around the clock.' },
  { t: 'Progressive Pilates Strengthening', d: 'Now you build — safely, correctly, and with a body that is finally ready for it.' },
];

const resultsList = [
  'Belly feels tighter — without a single crunch',
  'Urine leaks reduce or stop',
  'Posture visibly improves — you stand taller',
  'Lower back discomfort eases',
  'You can lift your baby without pain',
  'Confidence returns — from the inside out',
];

const WhyItWorks = () => (
  <section className="section" style={{ background: 'var(--canvas-2)' }}>
    <div className="wrap">
      <div className="section-head">
        <Reveal><span className="eyebrow">Why it works</span></Reveal>
        <Reveal delay="1"><h2 className="display">Why the God-Given Corset Method works — <em style={{ fontStyle: 'italic' }}>when everything else didn't.</em></h2></Reveal>
        <Reveal delay="2"><p>Most postpartum programs fail because they start with exercise. We start with your body.</p></Reveal>
      </div>

      <Reveal>
        <div style={{
          maxWidth: 820, margin: '0 auto 56px',
          padding: '28px 36px',
          background: 'var(--canvas)',
          border: '1px solid var(--hair)',
          borderLeft: '3px solid var(--accent)',
          borderRadius: 8
        }}>
          <p style={{
            margin: 0,
            fontFamily: 'var(--f-display)',
            fontSize: 'clamp(18px, 1.6vw, 22px)',
            lineHeight: 1.55,
            color: 'var(--ink)',
            fontWeight: 400
          }}>
            Pregnancy doesn't just change your shape. <span style={{ color: 'var(--ink-2)' }}>It changes how your muscles fire, how you breathe, how pressure moves through your body.</span>
            <br /><br />
            <em style={{ fontStyle: 'italic', color: 'var(--accent-deep)' }}>Until those systems are reset — no workout will fix your belly, leaks, or posture.</em>
          </p>
        </div>
      </Reveal>

      <div style={{ maxWidth: 920, margin: '0 auto 56px' }}>
        {methodSteps.map((m, i) => (
          <Reveal key={i} delay={(i % 3) + 1}>
            <div className="method-row" style={{
              display: 'grid',
              gridTemplateColumns: '72px 1fr',
              gap: 28,
              alignItems: 'start',
              padding: '22px 0',
              borderTop: '1px solid var(--hair)',
              borderBottom: i === methodSteps.length - 1 ? '1px solid var(--hair)' : '0'
            }}>
              <div className="display method-numeral" style={{
                fontSize: 42,
                color: 'var(--accent-deep)',
                lineHeight: 1,
                fontWeight: 400,
                paddingTop: 2
              }}>
                {String(i + 1).padStart(2, '0')}
              </div>
              <div className="method-content">
                <h3 className="display" style={{
                  fontSize: 'clamp(18px, 1.5vw, 22px)',
                  margin: '0 0 8px',
                  lineHeight: 1.25,
                  color: 'var(--ink)',
                  fontWeight: 500
                }}>
                  {m.t}
                </h3>
                <p style={{
                  margin: 0,
                  fontSize: 15,
                  lineHeight: 1.6,
                  color: 'var(--ink-2)',
                  maxWidth: 620
                }}>
                  {m.d}
                </p>
              </div>
            </div>
          </Reveal>
        ))}
      </div>

      <Reveal>
        <div style={{ textAlign: 'center', marginBottom: 20 }}>
          <span className="eyebrow">The result</span>
          <p className="display" style={{
            fontSize: 'clamp(22px, 2.2vw, 28px)',
            margin: '10px 0 0',
            color: 'var(--ink)',
            fontStyle: 'italic'
          }}>
            Your body, finally working with you.
          </p>
        </div>
      </Reveal>

      <div style={{ maxWidth: 860, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '6px 32px' }}>
        {resultsList.map((r, i) => (
          <Reveal key={i} delay={(i % 3) + 1}>
            <div style={{
              display: 'grid', gridTemplateColumns: '22px 1fr', gap: 12, alignItems: 'start',
              padding: '12px 0',
              fontSize: 15, lineHeight: 1.5, color: 'var(--ink)',
              borderBottom: '1px solid var(--hair)'
            }}>
              <span style={{
                color: 'var(--accent-deep)',
                marginTop: 2,
                fontSize: 14,
                fontWeight: 500
              }}>✓</span>
              <span>{r}</span>
            </div>
          </Reveal>
        ))}
      </div>

      <Reveal>
        <div style={{ textAlign: 'center', marginTop: 48 }}><CTA /></div>
      </Reveal>
    </div>
  </section>
);

// -------- Section 11: Two Options (Decision moment) --------
const TwoOptions = () => (
  <section className="section" style={{
    background: 'var(--canvas-2)',
    position: 'relative',
    overflow: 'hidden'
  }}>
    {/* ambient accent warmth */}
    <div style={{
      position: 'absolute', top: '10%', left: '50%', transform: 'translateX(-50%)',
      width: '80%', height: '60%',
      background: 'radial-gradient(ellipse, color-mix(in oklab, var(--accent) 16%, transparent) 0%, transparent 65%)',
      pointerEvents: 'none'
    }} />

    <div className="wrap" style={{ position: 'relative' }}>
      <div className="section-head">
        <Reveal><span className="eyebrow" style={{ color: 'var(--accent-deep)' }}>The decision</span></Reveal>
        <Reveal delay="1">
          <h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 52px)' }}>
            Let's be honest. <em style={{ fontStyle: 'italic' }}>You have two options.</em>
          </h2>
        </Reveal>
      </div>

      {/* The cost of waiting — lean, editorial */}
      <Reveal>
        <div style={{
          maxWidth: 820, margin: '0 auto 40px',
          padding: '20px 28px',
          background: 'transparent',
          borderLeft: '2px solid var(--ink-3)',
          display: 'flex', gap: 20, alignItems: 'flex-start'
        }} className="cost-of-waiting">
          <div style={{
            fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.18em',
            color: 'var(--ink-3)', textTransform: 'uppercase',
            flexShrink: 0, paddingTop: 4
          }}>
            Option 01
          </div>
          <div>
            <div style={{
              fontFamily: 'var(--f-display)', fontSize: 18, lineHeight: 1.45,
              color: 'var(--ink-2)', margin: 0
            }}>
              Close this page. Keep guessing. Try another random workout next month. Wait for "the right time."
              <span style={{ display: 'block', marginTop: 6, fontStyle: 'italic', color: 'var(--ink-3)', fontSize: 16 }}>
                — and feel exactly the same, six months from now.
              </span>
            </div>
          </div>
        </div>
      </Reveal>

      {/* THE HERO OFFER CARD */}
      <Reveal delay="1">
        <div className="option-b" style={{
          maxWidth: 940, margin: '0 auto',
          position: 'relative',
          padding: 2,
          borderRadius: 24,
          background: 'linear-gradient(135deg, color-mix(in oklab, var(--accent) 95%, #fff) 0%, color-mix(in oklab, var(--accent) 45%, transparent) 30%, color-mix(in oklab, var(--accent) 20%, transparent) 60%, color-mix(in oklab, var(--accent) 85%, #fff) 100%)',
          boxShadow: '0 40px 80px -30px color-mix(in oklab, var(--accent) 35%, transparent), 0 20px 40px -20px rgba(20,15,10,0.25)'
        }}>
          <div style={{
            position: 'relative',
            borderRadius: 22,
            background: 'radial-gradient(ellipse at 50% 0%, color-mix(in oklab, var(--accent) 14%, var(--ink)) 0%, var(--ink) 70%)',
            color: 'var(--canvas)',
            padding: '44px 48px 40px',
            overflow: 'hidden'
          }} className="decision-card">
            {/* shine sweep */}
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(120deg, transparent 30%, color-mix(in oklab, var(--accent) 14%, transparent) 50%, transparent 70%)',
              pointerEvents: 'none'
            }} />

            {/* Top row: label + recommended badge */}
            <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 22, gap: 12, flexWrap: 'wrap' }}>
              <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10.5, letterSpacing: '0.22em', color: 'var(--accent)', fontWeight: 500 }}>
                OPTION 02 · THE SMART CHOICE
              </div>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '6px 12px', borderRadius: 999,
                background: 'var(--accent)', color: 'var(--ink)',
                fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.14em', fontWeight: 500
              }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--ink)' }} />
                RECOMMENDED
              </div>
            </div>

            {/* Headline */}
            <div style={{ position: 'relative' }}>
              <h3 className="display" style={{
                fontSize: 'clamp(30px, 3.6vw, 48px)',
                lineHeight: 1.1,
                margin: '0 0 16px',
                color: 'var(--canvas)',
                fontWeight: 400,
                maxWidth: 720
              }}>
                Join the 5-Day Challenge. <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>Feel the difference by Day 5.</em>
              </h3>
              <p style={{
                fontSize: 16, lineHeight: 1.6, color: 'rgba(255,255,255,0.78)',
                margin: '0 0 28px', maxWidth: 640
              }}>
                Let Dr. Deepali show you exactly what happened to your body after delivery — and the exact Pilates method to safely fix your belly, leaks, back pain and posture. From home. With your baby right beside you.
              </p>
            </div>

            {/* Inclusion chips */}
            <div style={{
              position: 'relative',
              display: 'flex', flexWrap: 'wrap', gap: 8,
              marginBottom: 32
            }}>
              {[
                '5 live Zoom sessions',
                'Posture & core assessment',
                'All 8 bonuses included',
                'Lifetime access',
                'Money-back guarantee',
              ].map((chip, i) => (
                <span key={i} style={{
                  padding: '6px 12px', borderRadius: 999,
                  background: 'rgba(255,255,255,0.06)',
                  border: '1px solid rgba(255,255,255,0.12)',
                  fontSize: 12, color: 'rgba(255,255,255,0.82)',
                  fontFamily: 'var(--f-body)'
                }}>
                  ✓ {chip}
                </span>
              ))}
            </div>

            {/* Price + CTA row */}
            <div style={{
              position: 'relative',
              display: 'grid', gridTemplateColumns: '1fr auto',
              gap: 24, alignItems: 'center',
              paddingTop: 28,
              borderTop: '1px solid rgba(255,255,255,0.12)'
            }} className="decision-price-row">
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, flexWrap: 'wrap' }}>
                <div>
                  <div style={{ fontFamily: 'var(--f-mono)', fontSize: 9.5, letterSpacing: '0.16em', color: 'rgba(255,255,255,0.5)', marginBottom: 4, textTransform: 'uppercase' }}>
                    Worth ₹10,000
                  </div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                    <span className="display price-pop" data-countup="497" data-prefix="₹" style={{
                      fontSize: 'clamp(52px, 6vw, 72px)',
                      lineHeight: 0.9,
                      color: 'transparent',
                      background: 'linear-gradient(135deg, color-mix(in oklab, var(--accent) 95%, #fff) 0%, var(--accent) 55%, color-mix(in oklab, var(--accent) 85%, #fff) 100%)',
                      WebkitBackgroundClip: 'text',
                      backgroundClip: 'text',
                      fontWeight: 400,
                      filter: 'drop-shadow(0 4px 24px color-mix(in oklab, var(--accent) 35%, transparent))'
                    }}>₹497</span>
                    <span style={{
                      fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.14em',
                      color: 'var(--accent)', fontWeight: 500,
                      padding: '4px 10px',
                      border: '1px solid color-mix(in oklab, var(--accent) 40%, transparent)',
                      borderRadius: 999
                    }}>
                      SAVE 95%
                    </span>
                  </div>
                </div>
              </div>

              <a href="#checkout" className="btn btn--accent" style={{
                padding: '18px 28px',
                fontSize: 15,
                boxShadow: '0 20px 40px -16px color-mix(in oklab, var(--accent) 55%, transparent)'
              }}>
                <span>Secure my spot</span>
                <span className="arrow">→</span>
              </a>
            </div>

            {/* Trust strip */}
            <div style={{
              position: 'relative',
              marginTop: 24,
              paddingTop: 20,
              borderTop: '1px solid rgba(255,255,255,0.08)',
              display: 'flex', gap: 28, flexWrap: 'wrap',
              fontFamily: 'var(--f-mono)', fontSize: 10.5, letterSpacing: '0.12em',
              color: 'rgba(255,255,255,0.55)', textTransform: 'uppercase'
            }}>
              <span>⏰ Starts 13th May</span>
              <span>✦ Live on Zoom</span>
              <span>✓ 10,000+ mothers healed</span>
              <span>⚡ Instant access</span>
            </div>
          </div>
        </div>
      </Reveal>

      {/* Closer */}
      <Reveal delay="2">
        <p style={{
          textAlign: 'center', marginTop: 36, maxWidth: 560, marginLeft: 'auto', marginRight: 'auto',
          fontFamily: 'var(--f-display)', fontStyle: 'italic', fontSize: 16,
          color: 'var(--ink-2)', lineHeight: 1.55
        }}>
          For the price of two coffees, give yourself the five days that change everything.
        </p>
      </Reveal>
    </div>
  </section>
);

// -------- Section 12: Final CTA — "Everything you get" closing sale --------
const FinalCTA = () => {
  const coreDeliverables = [
    { n: '01', t: '5-Day Live Postpartum Pilates Challenge', sub: '5 live Zoom sessions with Dr. Deepali', v: 3500 },
    { n: '02', t: 'The God-Given Corset Method™', sub: 'Breathing & inner core activation guide', v: 1100 },
    { n: '03', t: 'Full-Body Posture & Alignment Check', sub: 'The Stick Test — find exactly what broke down', v: 900 },
    { n: '04', t: 'Core & Pelvic Floor Readiness Assessment', sub: "Know if you're ready — before you lift a weight", v: 900 },
    { n: '05', t: 'Postpartum Nutrition Mistakes Guide', sub: 'The food habits quietly slowing your recovery', v: 900 },
    { n: '06', t: 'Daily Movement Corrections for Moms', sub: 'Feeding · Lifting · Sitting — without undoing your healing', v: 900 },
    { n: '07', t: 'Safe Return to Exercise Guide', sub: 'When to start, what to avoid, how to progress', v: 900 },
    { n: '08', t: '20 Things Every Postpartum Mom Must Know', sub: "Do's and don'ts they never tell you", v: 900 },
  ];

  const perks = [
    { ic: '⏰', t: 'Starts 13th May', s: '5 consecutive days · live' },
    { ic: '✦', t: 'Live on Zoom', s: 'Not recorded sessions · real-time' },
    { ic: '♥', t: 'Lifetime access', s: 'Replays & all bonuses · forever' },
    { ic: '✓', t: 'Money-back guarantee', s: "If you don't feel a change by Day 5" },
    { ic: '☎', t: 'Direct Q&A with Dr. Deepali', s: 'Ask your questions, live' },
    { ic: '✉', t: 'Private WhatsApp group', s: 'Daily check-ins & support' },
  ];

  return (
    <section id="checkout" className="section" style={{
      paddingTop: 'var(--section-pad)',
      paddingBottom: 'calc(var(--section-pad) * 0.7)',
      background: 'var(--ink)',
      color: 'var(--canvas)',
      position: 'relative',
      overflow: 'hidden'
    }}>
      {/* ambient gold glow */}
      <div aria-hidden style={{
        position: 'absolute', top: '-10%', left: '50%', transform: 'translateX(-50%)',
        width: '90%', height: 560, borderRadius: '50%',
        background: 'radial-gradient(ellipse, color-mix(in oklab, var(--accent) 14%, transparent) 0%, transparent 60%)',
        pointerEvents: 'none'
      }} />

      <div className="wrap" style={{ position: 'relative' }}>
        <div className="section-head" style={{ color: 'var(--canvas)' }}>
          <Reveal><span className="eyebrow" style={{ color: 'var(--accent)' }}>Last look · before you decide</span></Reveal>
          <Reveal delay="1">
            <h2 className="display" style={{ color: 'var(--canvas)', fontSize: 'clamp(34px, 4.4vw, 60px)', lineHeight: 1.05 }}>
              Everything you get — <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>for ₹497.</em>
            </h2>
          </Reveal>
          <Reveal delay="2">
            <p style={{ color: 'rgba(255,255,255,0.72)', maxWidth: 620 }}>
              No upsells. No hidden add-ons. Everything below is included — the moment you join.
            </p>
          </Reveal>
        </div>

        {/* The stack — 8 deliverables */}
        <Reveal>
          <div style={{
            maxWidth: 1040, margin: '0 auto',
            border: '1px solid rgba(255,255,255,0.1)',
            borderRadius: 20,
            overflow: 'hidden',
            background: 'linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01))'
          }}>
            {/* header row */}
            <div style={{
              display: 'grid', gridTemplateColumns: '60px 1fr auto',
              gap: 20, padding: '14px 22px',
              borderBottom: '1px solid rgba(255,255,255,0.08)',
              background: 'rgba(255,255,255,0.025)',
              fontFamily: 'var(--f-mono)', fontSize: 9.5, letterSpacing: '0.16em',
              color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase'
            }}>
              <div>#</div>
              <div>What's included</div>
              <div>Value</div>
            </div>

            {coreDeliverables.map((d, i) => (
              <div key={i} className="deliv-row deliverable-row" style={{
                display: 'grid', gridTemplateColumns: '60px 1fr auto',
                gap: 20, padding: '18px 22px',
                alignItems: 'center',
                borderBottom: '1px solid rgba(255,255,255,0.06)',
                transition: 'background 300ms ease',
                '--d-i': i
              }}
              onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.03)'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}
              >
                <div className="deliverable-check" style={{
                  fontFamily: 'var(--f-mono)', fontSize: 11,
                  color: 'var(--accent)', letterSpacing: '0.08em', fontWeight: 500
                }}>{d.n}</div>
                <div>
                  <div style={{ fontSize: 15, fontWeight: 500, color: 'var(--canvas)', lineHeight: 1.3, marginBottom: 3 }}>
                    {d.t}
                  </div>
                  <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.58)', lineHeight: 1.4 }}>
                    {d.sub}
                  </div>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4 }}>
                  <div style={{ fontFamily: 'var(--f-mono)', fontSize: 12, color: 'rgba(255,255,255,0.75)', whiteSpace: 'nowrap' }}>
                    ₹{d.v.toLocaleString('en-IN')}
                  </div>
                  <div style={{
                    padding: '2px 8px', borderRadius: 999,
                    background: 'color-mix(in oklab, var(--accent) 16%, transparent)',
                    color: 'var(--accent)',
                    fontFamily: 'var(--f-mono)', fontSize: 8.5, letterSpacing: '0.14em', fontWeight: 500
                  }}>
                    INCLUDED
                  </div>
                </div>
              </div>
            ))}

            {/* PLUS perks row */}
            <div style={{
              padding: '22px 22px 18px',
              borderBottom: '1px solid rgba(255,255,255,0.06)',
              background: 'rgba(255,255,255,0.015)'
            }}>
              <div style={{
                fontFamily: 'var(--f-mono)', fontSize: 9.5, letterSpacing: '0.18em',
                color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 14, fontWeight: 500
              }}>
                Plus — every spot includes
              </div>
              <div className="perks-grid" style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
                gap: 12
              }}>
                {perks.map((p, i) => (
                  <div key={i} className="perk-item" style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                    <div style={{
                      width: 28, height: 28, borderRadius: 8,
                      background: 'color-mix(in oklab, var(--accent) 20%, transparent)',
                      color: 'var(--accent)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 14, flexShrink: 0
                    }}>{p.ic}</div>
                    <div>
                      <div style={{ fontSize: 13.5, color: 'var(--canvas)', fontWeight: 500, lineHeight: 1.3 }}>{p.t}</div>
                      <div style={{ fontSize: 11.5, color: 'rgba(255,255,255,0.52)', lineHeight: 1.4, marginTop: 2 }}>{p.s}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* TOTAL value row */}
            <div style={{
              display: 'grid', gridTemplateColumns: '1fr auto',
              gap: 16, padding: '16px 22px',
              borderBottom: '1px solid rgba(255,255,255,0.08)',
              alignItems: 'center'
            }}>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.75)', fontFamily: 'var(--f-mono)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>
                Total value
              </div>
              <div className="display strike-draw" style={{
                fontSize: 22, color: 'rgba(255,255,255,0.5)',
                position: 'relative', display: 'inline-block'
              }}>₹10,000</div>
            </div>

            {/* YOU PAY row — the money shot */}
            <div className="you-pay-row" style={{
              display: 'grid', gridTemplateColumns: '1fr auto',
              gap: 16, padding: '26px 22px',
              alignItems: 'center',
              background: 'linear-gradient(90deg, color-mix(in oklab, var(--accent) 12%, transparent), color-mix(in oklab, var(--accent) 22%, transparent))',
              position: 'relative'
            }}>
              <div>
                <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10.5, letterSpacing: '0.16em', color: 'var(--accent)', fontWeight: 500, textTransform: 'uppercase', marginBottom: 4 }}>
                  You pay today
                </div>
                <div style={{ fontSize: 13.5, color: 'rgba(255,255,255,0.78)' }}>
                  One-time · Instant access · Lifetime replays
                </div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <div className="display price-pop" data-countup="497" data-prefix="₹" style={{
                  fontSize: 'clamp(42px, 4.8vw, 58px)',
                  lineHeight: 0.95,
                  color: 'transparent',
                  background: 'linear-gradient(135deg, color-mix(in oklab, var(--accent) 95%, #fff) 0%, var(--accent) 55%, color-mix(in oklab, var(--accent) 85%, #fff) 100%)',
                  WebkitBackgroundClip: 'text',
                  backgroundClip: 'text',
                  fontWeight: 400,
                  filter: 'drop-shadow(0 4px 20px color-mix(in oklab, var(--accent) 40%, transparent))'
                }}>₹497</div>
                <span style={{
                  padding: '5px 10px', borderRadius: 999,
                  background: 'var(--accent)', color: 'var(--ink)',
                  fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.14em', fontWeight: 500
                }}>SAVE 95%</span>
              </div>
            </div>
          </div>
        </Reveal>

        {/* Guarantee strip */}
        <Reveal delay="1">
          <div style={{
            maxWidth: 1040, margin: '18px auto 0',
            padding: '20px 26px',
            borderRadius: 14,
            border: '1px solid color-mix(in oklab, var(--accent) 28%, transparent)',
            background: 'color-mix(in oklab, var(--accent) 6%, transparent)',
            display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap'
          }}>
            <div className="guarantee-seal" style={{
              width: 54, height: 54, borderRadius: '50%',
              background: 'color-mix(in oklab, var(--accent) 22%, transparent)',
              border: '1.5px solid var(--accent)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
              fontSize: 22, color: 'var(--accent)'
            }}>✓</div>
            <div style={{ flex: 1, minWidth: 280 }}>
              <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.16em', color: 'var(--accent)', fontWeight: 500, textTransform: 'uppercase', marginBottom: 4 }}>
                Our guarantee
              </div>
              <div style={{ fontFamily: 'var(--f-display)', fontSize: 17, fontStyle: 'italic', color: 'var(--canvas)', lineHeight: 1.45 }}>
                "Feel the difference in your core by Day 5 — or we refund your ₹497. No questions. No hoops."
              </div>
            </div>
          </div>
        </Reveal>

        {/* Final CTA — oversized */}
        <Reveal delay="2">
          <div style={{ maxWidth: 1040, margin: '36px auto 0', textAlign: 'center' }}>
            <a href="#" className="btn btn--accent" style={{
              fontSize: 17,
              padding: '22px 40px',
              boxShadow: '0 24px 50px -18px color-mix(in oklab, var(--accent) 65%, transparent)'
            }}>
              <span>Yes — secure my spot for ₹497</span>
              <span className="arrow">→</span>
            </a>

            <div style={{
              marginTop: 18,
              display: 'flex', justifyContent: 'center', gap: 24, flexWrap: 'wrap',
              fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.14em',
              color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase'
            }}>
              <span>🔒 100% Secure checkout</span>
              <span>⚡ Instant access</span>
              <span>⏰ Starts 13th May</span>
              <span>★ 10,000+ mothers healed</span>
            </div>

            <p style={{
              marginTop: 30, maxWidth: 520, marginLeft: 'auto', marginRight: 'auto',
              fontFamily: 'var(--f-display)', fontStyle: 'italic', fontSize: 16,
              color: 'rgba(255,255,255,0.6)', lineHeight: 1.5
            }}>
              Your body has been waiting patiently. <br />
              <span style={{ color: 'var(--accent)' }}>Today is the day you finally answer.</span>
            </p>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// -------- Footer --------
const Footer = () => (
  <footer>
    <div className="brand"><span className="brand-mark" /> Dr. Deepali</div>
    <div style={{ maxWidth: 540, margin: '0 auto', lineHeight: 1.6 }}>
      Ikore Pilates &amp; Ikore Education · Asia's Pilates Ambassador
      <br />
      © 2026 · This program is not a substitute for medical advice.
    </div>
  </footer>
);

// -------- Tweaks Panel --------
const TweaksPanel = () => {
  const [, setT] = React.useState(0);
  const tweaks = window.__TWEAKS;
  const set = (k, v) => { window.__setTweak(k, v); setT(x => x + 1); };

  return (
    <div className="tweaks-panel">
      <h4>Tweaks · Accent</h4>
      <div className="tweaks-row">
        {['gold', 'emerald', 'clay', 'ivory'].map(a => (
          <button key={a} className={`opt ${tweaks.accent === a ? 'active' : ''}`} onClick={() => set('accent', a)}>
            {a}
          </button>
        ))}
      </div>
      <h4>Headline font</h4>
      <div className="tweaks-row">
        {[
          { k: 'lora',       label: 'Lora' },
          { k: 'source',     label: 'Source Serif' },
          { k: 'instrument', label: 'Instrument' },
          { k: 'inter',      label: 'Inter (sans)' },
        ].map(f => (
          <button key={f.k} className={`opt ${tweaks.display === f.k ? 'active' : ''}`} onClick={() => set('display', f.k)}>{f.label}</button>
        ))}
      </div>
      <h4>Italic in headlines</h4>
      <div className="tweaks-row">
        {[
          { k: 'on',     label: 'Italic' },
          { k: 'accent', label: 'No italic' },
        ].map(f => (
          <button key={f.k} className={`opt ${tweaks.italic === f.k ? 'active' : ''}`} onClick={() => set('italic', f.k)}>{f.label}</button>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { Transformations, Tag, ValueStack, About, Stats, WhyItWorks, TwoOptions, FinalCTA, Footer, TweaksPanel });

// -------- Sticky CTA Bar --------
// Full-width bar fixed at bottom. Desktop: appears after scrolling past
// hero. Mobile: always visible from page load.
const StickyCTA = () => {
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const mq = window.matchMedia('(max-width: 768px)');
    const onScroll = () => {
      if (mq.matches) {
        setVisible(true);
      } else {
        setVisible(window.scrollY > window.innerHeight * 0.6);
      }
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    mq.addEventListener?.('change', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      mq.removeEventListener?.('change', onScroll);
    };
  }, []);

  return (
    <div className={`sticky-cta ${visible ? 'is-visible' : ''}`} role="region" aria-label="Get access">
      <div className="sticky-cta__inner">
        <div className="sticky-cta__copy">
          <div className="sticky-cta__kicker">First 100 Members Only</div>
          <div className="sticky-cta__price-row">
            <span className="sticky-cta__strike">₹10,000</span>
            <span className="sticky-cta__price">₹497</span>
            <span className="sticky-cta__guarantee">· 100% money-back guarantee</span>
          </div>
        </div>
        <a href="#checkout" className="sticky-cta__btn">
          <span>Get Access</span>
          <span className="sticky-cta__arrow" aria-hidden>→</span>
        </a>
      </div>
    </div>
  );
};

Object.assign(window, { StickyCTA });