// Sections A: Hero, Announcement, Experience, Schedule, Pain Points, Testimonials
const { useState, useEffect } = React;

// -------- Primitives --------
const Reveal = ({ children, delay, as: As = 'div', className = '', style }) =>
<As className={`reveal ${className}`} data-delay={delay} style={style}>{children}</As>;


// Splits text into per-word spans for staggered entrance animation.
// Children elements are preserved as single units. Spans get sequential index.
const WordStagger = ({ children, className = '', style }) => {
  let index = 0;
  const split = (node) => {
    if (typeof node === 'string') {
      return node.split(/(\s+)/).map((part, i) => {
        if (/^\s+$/.test(part)) return part;
        if (part === '') return null;
        const k = index++;
        return (
          <span key={`w-${k}-${i}`} className="word-stagger__w" style={{ '--w-i': k, fontFamily: "Lora", fontWeight: "600" }}>{part}</span>);

      });
    }
    if (React.isValidElement(node)) {
      // Recurse into element children, wrapping text nodes only.
      const wrapped = React.Children.map(node.props.children, split);
      return React.cloneElement(node, { key: `el-${index++}` }, wrapped);
    }
    if (Array.isArray(node)) return node.map(split);
    return node;
  };
  return (
    <span className={`word-stagger ${className}`} style={style}>{split(children)}</span>);

};

const Placeholder = ({ label, h = 320, dark = false, radius = 14, style }) =>
<div className={`ph ${dark ? 'ph--dark' : ''}`} style={{ height: h, borderRadius: radius, ...style }}>
    {label}
  </div>;


const CTA = ({ label = 'Get Instant Access — ₹497', variant = 'accent', sub = '100% Secure · Starts 13th May' }) =>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
    <a href="#checkout" className={`btn btn--${variant}`} aria-label={label}>
      <span>{label}</span>
      <span className="arrow" aria-hidden>→</span>
    </a>
    {sub && <div style={{ fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>{sub}</div>}
  </div>;


// -------- Announcement --------
const Announcement = () =>
<div className="annc">
    <div className="annc-inner">
      <span>🎁 <b style={{ color: '#fff', fontWeight: 600 }}>Special Offer:</b> 5-Day Postpartum Pilates Challenge for <b style={{ color: 'var(--accent)' }}>₹497</b></span>
      <span style={{ opacity: 0.4 }}>·</span>
      <span>🔥 Price increases to <b style={{ color: '#fff' }}>₹1,660</b> tomorrow</span>
    </div>
  </div>;


// -------- Nav --------
const Nav = () =>
<nav className="nav">
    <div className="nav-inner" style={{ justifyContent: 'flex-start' }}>
      <div className="brand"><span className="brand-mark" /> Dr. Deepali</div>
    </div>
  </nav>;


// -------- Hero (dense, conversion-focused) --------
const Hero = () => {
  const imgRef = React.useRef(null);
  const cardRef = React.useRef(null);
  React.useEffect(() => {
    const sync = () => {
      if (imgRef.current && cardRef.current) {
        // Only sync heights on desktop layout (side-by-side grid).
        // On mobile the card stacks under the image and must size naturally.
        const isDesktop = window.matchMedia('(min-width: 769px)').matches;
        if (!isDesktop) {
          cardRef.current.style.height = '';
          return;
        }
        const h = imgRef.current.getBoundingClientRect().height;
        if (h > 0) cardRef.current.style.height = h + 'px';
      }
    };
    const img = imgRef.current;
    if (img) {
      if (img.complete) sync();
      img.addEventListener('load', sync);
    }
    window.addEventListener('resize', sync);
    const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(sync) : null;
    if (ro && img) ro.observe(img);
    return () => {
      window.removeEventListener('resize', sync);
      if (img) img.removeEventListener('load', sync);
      if (ro) ro.disconnect();
    };
  }, []);
  return (
    <section className="section" style={{ paddingTop: 36, paddingBottom: 48 }}>
    <div className="wrap">
      {/* Problem banner */}
      <Reveal>
        <div className="hero-problem-banner" style={{
            maxWidth: 1160, margin: '0 auto 22px',
            background: 'var(--ink)', color: 'var(--canvas)',
            textAlign: 'center', padding: '10px 22px', borderRadius: 8,
            fontSize: 13, letterSpacing: '0.02em', fontWeight: 500,
            textTransform: 'uppercase'
          }}>
          For Postpartum Mothers Dealing With a Hanging Belly · Weak Core · Urine Leakage · Poor Posture &amp; Lost Confidence — Even Years After Delivery
        </div>
      </Reveal>

      {/* Eyebrow */}
      <Reveal delay="1">
        <div style={{ textAlign: 'center', marginBottom: 18 }}>
          <span className="eyebrow" style={{ color: 'var(--ink-2)', fontFamily: "\"Inter Tight\"" }}>India's Most Trusted Postpartum Pilates Expert · 20 Years · 10,000+ Women Transformed</span>
        </div>
      </Reveal>

      {/* Main headline — compact */}
      <Reveal delay="2">
        <h1 className="display hero-h1" style={{
            margin: 0, textAlign: 'center',

            maxWidth: 1100, marginInline: 'auto', lineHeight: 1.08,
            fontFamily: "Lora", fontWeight: "600", fontSize: "37.44px"
          }}>
          <WordStagger>
            Feel your belly <span className="highlight">20% tighter</span>, your core reconnected and your confidence restored, in just <em style={{ fontStyle: 'italic' }}>5 days.</em>
          </WordStagger>
        </h1>
      </Reveal>

      <Reveal delay="3">
        <p className="hero-subcopy" style={{
            maxWidth: 720, margin: '18px auto 0', textAlign: 'center',
            fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.55
          }}>
          A live, Pilates-powered challenge by Dr. Deepali — designed to restore your inner core, correct your posture, and give you the condition to stand tall again.
        </p>
      </Reveal>

      {/* Two-column: image + guarantee/CTA card */}
      <Reveal delay="3">
        <div className="hero-grid" style={{
            marginTop: 36, display: 'grid',
            gridTemplateColumns: 'minmax(0, 1.4fr) minmax(280px, 1fr)',
            gap: 24,
            maxWidth: 1160, marginInline: 'auto'
          }}>
          {/* Hero visual — image fills wrap edge-to-edge */}
          <div className="hero-img-wrap" style={{
              borderRadius: 18, overflow: 'hidden',
              background: 'var(--canvas-2)', border: '1px solid var(--hair)',
              boxShadow: '0 24px 60px -30px rgba(30, 50, 35, 0.3)'
            }}>
            <img ref={imgRef} src="assets/hero.png" alt="Dr. Deepali" className="hero-img" />
          </div>

          {/* Guarantee / CTA card — matches image height, never exceeds it */}
          <div ref={cardRef} style={{
              background: 'var(--accent-soft)',
              border: '1px solid color-mix(in oklab, var(--accent) 30%, var(--hair))',
              borderRadius: 18, padding: '24px 22px',
              display: 'flex', flexDirection: 'column', gap: 14,
              justifyContent: 'center',
              minHeight: 0,
              overflow: 'hidden',
              position: 'relative'
            }}>
            {/* Money-back stamp */}
            <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
              <svg width="88" height="88" viewBox="0 0 120 120" style={{ flexShrink: 0, filter: 'drop-shadow(0 6px 12px rgba(0,0,0,0.15))' }} aria-label="100% Money Back Guarantee">
                <defs>
                  <radialGradient id="mbg-grad" cx="35%" cy="35%" r="70%">
                    <stop offset="0%" stopColor="var(--accent)" />
                    <stop offset="100%" stopColor="var(--accent-deep)" />
                  </radialGradient>
                </defs>
                <g fill="url(#mbg-grad)">
                  {Array.from({ length: 20 }).map((_, i) => {
                      const a = i / 20 * Math.PI * 2;
                      return <circle key={i} cx={60 + Math.cos(a) * 56} cy={60 + Math.sin(a) * 56} r="5" />;
                    })}
                </g>
                <circle cx="60" cy="60" r="52" fill="url(#mbg-grad)" />
                <circle cx="60" cy="60" r="44" fill="none" stroke="var(--ink)" strokeWidth="1.2" strokeOpacity="0.45" />
                <circle cx="60" cy="60" r="40" fill="none" stroke="var(--ink)" strokeWidth="0.6" strokeOpacity="0.35" />
                <text x="60" y="56" textAnchor="middle" fontFamily="var(--f-display)" fontSize="22" fontWeight="600" fill="var(--ink)">100%</text>
                <text x="60" y="70" textAnchor="middle" fontFamily="var(--f-mono)" fontSize="6.4" letterSpacing="1" fontWeight="600" fill="var(--ink)">MONEY BACK</text>
                <text x="60" y="80" textAnchor="middle" fontFamily="var(--f-mono)" fontSize="6.4" letterSpacing="1" fontWeight="600" fill="var(--ink)">GUARANTEE</text>
                <circle cx="60" cy="30" r="1.6" fill="var(--ink)" />
                <circle cx="60" cy="90" r="1.6" fill="var(--ink)" />
              </svg>
              <div style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--ink)' }}>
                You'll feel the difference in your core by <b>Day 5</b> — or we refund your ₹497 <b>instantly.</b>
              </div>
            </div>

            {/* What's included — compact 2-col */}
            <div style={{
                paddingTop: 14,
                borderTop: '1px dashed color-mix(in oklab, var(--accent) 40%, var(--hair))',
                display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px 14px'
              }}>
              {[
                'Tighter belly — no crunches',
                'Urine leaks reduce or stop',
                'Stand taller · visible posture fix',
                'Lower back & hip pain ease',
                'Lift your baby without pain',
                'Feel your core switch back on'].
                map((f, i) =>
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '12px 1fr', gap: 6,
                  fontSize: 11.5, color: 'var(--ink-2)', lineHeight: 1.35
                }}>
                  <span style={{ color: 'var(--accent-deep)', fontSize: 10, marginTop: 2 }}>✓</span>
                  <span>{f}</span>
                </div>
                )}
            </div>

            {/* Price */}
            <div style={{
                display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap',
                paddingTop: 14, borderTop: '1px dashed color-mix(in oklab, var(--accent) 40%, var(--hair))'
              }}>
              <span className="strike-draw" style={{ fontFamily: 'var(--f-display)', fontSize: 20, color: 'var(--ink-3)', position: 'relative', display: 'inline-block' }}>₹10,000</span>
              <span className="price-pop" data-countup="497" data-prefix="₹" style={{ fontFamily: 'var(--f-display)', fontSize: 36, color: 'var(--ink)', lineHeight: 1 }}>₹497</span>
              <span style={{ fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--accent-deep)' }}>
                Save ₹9,503
              </span>
            </div>

            {/* CTA */}
            <a href="#checkout" className="btn btn--accent" style={{
                background: 'var(--ink)', color: 'var(--canvas)',
                justifyContent: 'center', fontSize: 15, padding: '16px 20px'
              }}>
              <span>⚡ Get Instant Access — ₹497</span>
              <span className="arrow">→</span>
            </a>

            {/* Trust line — between CTA and payment logos */}
            <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.1em', color: 'var(--ink-3)', textTransform: 'uppercase', textAlign: 'center' }}>
              100% Secure · Starts 13th May · Limited Seats
            </div>

            {/* Payment logos — bottom */}
            <div style={{ display: 'flex', gap: 8, justifyContent: 'center', alignItems: 'center', flexWrap: 'wrap', color: 'var(--ink-3)', fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.08em' }}>
              {['VISA', 'UPI', 'RuPay', 'AmEx', 'MC'].map((p) =>
                <span key={p} style={{
                  padding: '3px 8px', border: '1px solid var(--hair)',
                  borderRadius: 4, background: 'var(--canvas)', color: 'var(--ink-2)'
                }}>{p}</span>
                )}
            </div>
          </div>
        </div>
      </Reveal>

      {/* Trust bar — quiet, premium strip of proof signals */}
      <Reveal delay="4">
        <div className="hero-trust-bar" style={{
            marginTop: 32,
            maxWidth: 1160, marginInline: 'auto',
            borderTop: '1px solid var(--hair)',
            borderBottom: '1px solid var(--hair)',
            padding: '18px 6px',
            display: 'flex', flexWrap: 'wrap',
            justifyContent: 'space-between', alignItems: 'center',
            rowGap: 10, columnGap: 18
          }}>
          {/* Rating — anchor of the bar, slightly more prominent */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span aria-hidden style={{ color: 'var(--accent-deep)', letterSpacing: '1px', fontSize: 13 }}>★★★★★</span>
            <span style={{ fontSize: 13, color: 'var(--ink)' }}>
              <b style={{ fontWeight: 600 }}>4.9</b>
              <span style={{ color: 'var(--ink-3)' }}> · 2,300+ mothers</span>
            </span>
          </div>

          {[
            { icon: 'doctor', label: 'Doctor-Led' },
            { icon: 'pilates', label: 'Pilates-Powered' },
            { icon: 'science', label: 'Science-Backed' },
            { icon: 'live', label: 'Live on Zoom' },
            { icon: 'home', label: 'No Equipment' }].
            map((item, i) =>
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 7,
              fontSize: 12.5, color: 'var(--ink-2)'
            }}>
              <TrustIcon name={item.icon} />
              <span>{item.label}</span>
            </div>
            )}
        </div>
      </Reveal>
    </div>
  </section>);

};

const Sep = () => <span style={{ width: 3, height: 3, borderRadius: '50%', background: 'var(--hair)', display: 'inline-block' }} />;

const TrustIcon = ({ name }) => {
  const base = { width: 14, height: 14, fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round', style: { color: 'var(--ink-3)', flexShrink: 0 } };
  switch (name) {
    case 'doctor': // stethoscope
      return (
        <svg {...base} viewBox="0 0 24 24" aria-hidden>
          <path d="M6 3v5a4 4 0 0 0 8 0V3" />
          <path d="M10 12v3a5 5 0 0 0 10 0v-2" />
          <circle cx="20" cy="11" r="2" />
        </svg>);

    case 'pilates': // flowing figure / mat
      return (
        <svg {...base} viewBox="0 0 24 24" aria-hidden>
          <circle cx="9" cy="5" r="1.6" />
          <path d="M5 20c2-4 4-6 7-6s4 1 7-2" />
          <path d="M9 7c0 3 2 5 5 6" />
        </svg>);

    case 'science': // flask
      return (
        <svg {...base} viewBox="0 0 24 24" aria-hidden>
          <path d="M9 3h6" />
          <path d="M10 3v6l-5 9a2 2 0 0 0 1.8 3h10.4A2 2 0 0 0 19 18l-5-9V3" />
          <path d="M7.5 14h9" />
        </svg>);

    case 'live': // broadcast dot
      return (
        <svg {...base} viewBox="0 0 24 24" aria-hidden>
          <circle cx="12" cy="12" r="2" fill="currentColor" stroke="none" style={{ color: 'var(--accent-deep)' }} />
          <path d="M8 8a5.5 5.5 0 0 0 0 8" />
          <path d="M16 8a5.5 5.5 0 0 1 0 8" />
          <path d="M5 5a10 10 0 0 0 0 14" />
          <path d="M19 5a10 10 0 0 1 0 14" />
        </svg>);

    case 'home': // simple house
      return (
        <svg {...base} viewBox="0 0 24 24" aria-hidden>
          <path d="M4 11l8-7 8 7" />
          <path d="M6 10v9h12v-9" />
          <path d="M10 19v-5h4v5" />
        </svg>);

    default:
      return null;
  }
};

// -------- Section 2: Experience --------
const experienceItems = [
{ k: '01', t: "Live Pilates Sessions", d: "Every day, live on Zoom at 6 AM & 7 PM IST. Structured, expert-led and designed for your postpartum body.", tint: 'rose', icon: 'video' },
{ k: '02', t: "Safe, Home-Based", d: "No equipment, no gym, no babysitter. Gentle, corrective movements from your living room.", tint: 'blue', icon: 'home' },
{ k: '03', t: "Your God-Given Corset", d: "Pregnancy weakened your inner support system. In 5 days, feel it, activate it and take it back.", tint: 'green', icon: 'corset' },
{ k: '04', t: "Posture Corrections", d: "Feeding, lifting, sitting — the daily habits silently undoing your healing, corrected from Day 1.", tint: 'amber', icon: 'posture' },
{ k: '05', t: "Core That Fires Again", d: "Pilates rewires the deep neuromuscular connections pregnancy switched off. Feel it in session one.", tint: 'purple', icon: 'dial' },
{ k: '06', t: "Live Form Corrections", d: "Real-time corrections so every movement heals, not harms. Knowledge you carry long after Day 5.", tint: 'pink', icon: 'check' }];


const iconTints = {
  rose: { bg: 'oklch(0.95 0.04 25)', ink: 'oklch(0.55 0.16 25)' },
  blue: { bg: 'oklch(0.94 0.04 245)', ink: 'oklch(0.52 0.17 245)' },
  green: { bg: 'oklch(0.94 0.05 150)', ink: 'oklch(0.48 0.14 150)' },
  amber: { bg: 'oklch(0.94 0.06 80)', ink: 'oklch(0.55 0.15 70)' },
  purple: { bg: 'oklch(0.94 0.04 295)', ink: 'oklch(0.50 0.17 295)' },
  pink: { bg: 'oklch(0.94 0.04 350)', ink: 'oklch(0.55 0.17 350)' }
};

const XpIcon = ({ name, color }) => {
  const common = { width: 18, height: 18, fill: 'none', stroke: color, strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'video':
      return <svg {...common} viewBox="0 0 24 24"><rect x="3" y="6" width="13" height="12" rx="2" /><path d="M16 10l5-3v10l-5-3z" /><circle cx="8" cy="10" r="0.8" fill={color} stroke="none" /></svg>;
    case 'home':
      return <svg {...common} viewBox="0 0 24 24"><path d="M3 11L12 4l9 7" /><path d="M5 10v10h14V10" /><path d="M10 20v-5h4v5" /></svg>;
    case 'corset':
      return <svg {...common} viewBox="0 0 24 24"><path d="M8 5c0 4-2 7-2 10s2 5 6 5 6-2 6-5-2-6-2-10" /><path d="M8 8h8M8 12h8M8 16h8" strokeDasharray="1 2" /></svg>;
    case 'posture':
      return <svg {...common} viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2" /><path d="M12 7v10" /><path d="M12 11l-3 3M12 11l3 3" /><path d="M10 17l-1 4M14 17l1 4" /></svg>;
    case 'dial':
      return <svg {...common} viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" /><path d="M12 4a8 8 0 0 1 6 13.3" strokeWidth="2.5" /><circle cx="12" cy="12" r="2" fill={color} stroke="none" /></svg>;
    case 'check':
      return <svg {...common} viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><path d="M8 12l3 3 5-6" /></svg>;
    default:return null;
  }
};

const Experience = () =>
<section id="experience" className="section" style={{ background: 'var(--canvas-2)' }}>
    <div className="wrap">
      <div className="section-head">
        <Reveal><span className="eyebrow">THE EXPERIENCE</span></Reveal>
        <Reveal delay="1"><h2 className="display">Here's what you'll experience in <em style={{ fontStyle: 'italic' }}>5 days.</em></h2></Reveal>
        <Reveal delay="2"><p>A live, guided Pilates reset — feel the real difference before committing to anything long-term.</p></Reveal>
      </div>

      <div className="xp-grid" style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(3, 1fr)',
      gap: 16,
      maxWidth: 1160, margin: '0 auto'
    }}>
        {experienceItems.map((it, i) => {
        const tint = iconTints[it.tint];
        return (
          <Reveal key={it.k} delay={i % 4 + 1}>
              <div style={{
              background: 'var(--canvas)',
              border: '1px solid var(--hair)',
              borderRadius: 14,
              padding: '22px 22px 24px',
              height: '100%',
              display: 'flex', flexDirection: 'column', gap: 14
            }}>
                <div style={{
                width: 36, height: 36, borderRadius: 8,
                background: tint.bg,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0
              }}>
                  <XpIcon name={it.icon} color={tint.ink} />
                </div>
                <div>
                  <h3 style={{ margin: '0 0 6px 0', fontFamily: 'var(--f-display)', fontSize: 22, lineHeight: 1.15, fontWeight: 500, letterSpacing: '-0.01em', color: 'var(--ink)' }}>
                    {it.t}
                  </h3>
                  <p style={{ margin: 0, color: 'var(--ink-2)', fontSize: 13, lineHeight: 1.5 }}>{it.d}</p>
                </div>
              </div>
            </Reveal>);

      })}
      </div>
    </div>
  </section>;


// -------- Section 3: Schedule --------
const scheduleDays = [
{ day: 1, t: "Fix Your Breathing & Wear Your Corset", d: "Breathing techniques to reduce mummy tummy + a full body posture check to show you exactly why your belly is still hanging after delivery.", focus: "Breathwork", am: "Diaphragmatic Breathing", pm: "Posture Audit · Stick Test" },
{ day: 2, t: "Start Feeling Your Core & Pelvic Floor Again", d: "Deep core activation + pelvic floor reconnection to reduce urinary leakage, tighten the pouch and feel your muscles again — maybe for the first time since birth.", focus: "Reconnect", am: "Deep Core Activation", pm: "Pelvic Floor Reset" },
{ day: 3, t: "Unlock Your Stiffness & Decode Pilates Secrets", d: "Full body mobility session + the science behind why Pilates heals your postpartum body faster than anything else you've tried.", focus: "Mobility", am: "Full-Body Mobility Flow", pm: "Pilates Science Deep-Dive" },
{ day: 4, t: "Fix Your Pain & Improve Your Posture", d: "Lower back and hip pain relief + posture correction so you can carry your baby, feed and move without hurting by noon.", focus: "Relief", am: "Back & Hip Pain Relief", pm: "Posture Correction Drills" },
{ day: 5, t: "Tighter Belly, Stronger You, Progress Check", d: "Full Pilates integration class + reassess your belly, posture and core control to see your transformation — and what is possible in 30 days.", focus: "Integration", am: "Full Pilates Integration", pm: "Progress Re-Assessment" }];


const dayTints = [
{ bg: 'oklch(0.96 0.03 80)', ink: 'oklch(0.50 0.14 70)', tag: 'oklch(0.68 0.13 70)' }, // Day 1 · amber
{ bg: 'oklch(0.96 0.03 150)', ink: 'oklch(0.42 0.12 150)', tag: 'oklch(0.55 0.13 150)' }, // Day 2 · green
{ bg: 'oklch(0.96 0.03 245)', ink: 'oklch(0.48 0.15 245)', tag: 'oklch(0.60 0.14 245)' }, // Day 3 · blue
{ bg: 'oklch(0.96 0.03 295)', ink: 'oklch(0.48 0.15 295)', tag: 'oklch(0.60 0.14 295)' }, // Day 4 · purple
{ bg: 'oklch(0.96 0.03 25)', ink: 'oklch(0.50 0.16 25)', tag: 'oklch(0.62 0.15 25)' } // Day 5 · rose
];

const Schedule = () =>
<section id="schedule" className="section">
    <div className="wrap">
      <div className="section-head">
        <Reveal><span className="eyebrow">Your 5 Days</span></Reveal>
        <Reveal delay="1"><h2 className="display">Your 5-day schedule.</h2></Reveal>
        <Reveal delay="2"><p>Each day builds on the last — live with Dr. Deepali's team at 6 AM &amp; 7 PM IST on Zoom.</p></Reveal>
      </div>

      {/* Editorial list — one row per day */}
      <Reveal>
        <div className="schedule-list" style={{
        maxWidth: 960, margin: '0 auto',
        borderTop: '1px solid var(--hair)'
      }}>
          {scheduleDays.map((s, i) => {
          const t = dayTints[i];
          return (
            <div key={s.day} className="schedule-row" style={{
              display: 'grid',
              gridTemplateColumns: '110px 1fr',
              gap: 40,
              padding: '28px 8px',
              borderBottom: '1px solid var(--hair)',
              alignItems: 'start',
              '--r-i': i
            }}>
                {/* Left: day number + focus tag */}
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                    <span style={{ fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.14em', color: 'var(--ink-3)', textTransform: 'uppercase' }}>Day</span>
                    <span className="display" style={{ fontSize: 40, color: t.ink, lineHeight: 1, fontWeight: 500, letterSpacing: '-0.01em' }}>{String(s.day).padStart(2, '0')}</span>
                  </div>
                  <span style={{
                  alignSelf: 'flex-start',
                  fontFamily: 'var(--f-mono)', fontSize: 9.5, letterSpacing: '0.12em',
                  textTransform: 'uppercase', color: t.ink,
                  background: t.bg, padding: '3px 8px', borderRadius: 4
                }}>
                    {s.focus}
                  </span>
                </div>

                {/* Right: title + description */}
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8, paddingTop: 2 }}>
                  <h3 style={{
                  margin: 0,
                  fontFamily: 'var(--f-display)', fontSize: 22, lineHeight: 1.25,
                  color: 'var(--ink)', fontWeight: 500, letterSpacing: '-0.005em'
                }}>
                    {s.t}
                  </h3>
                  <p style={{
                  margin: 0,
                  fontSize: 14.5, lineHeight: 1.6, color: 'var(--ink-2)',
                  maxWidth: 620
                }}>
                    {s.d}
                  </p>
                </div>
              </div>);

        })}
        </div>
      </Reveal>

      <Reveal>
        <div style={{ marginTop: 40, textAlign: 'center' }}>
          <div style={{ fontSize: 13, color: 'var(--ink-2)', marginBottom: 16 }}>⏰ Live daily at 6 AM, 12 PM & 7 PM IST on Zoom — pick the batch that works for you.

        </div>
          <CTA />
        </div>
      </Reveal>
    </div>
  </section>;


// -------- Section 4: Pain Points --------
const painPoints = [
"You still look pregnant months — or even years — after delivery, and nothing you've tried has changed that.",
"You've started working out but your belly, leaks, or back pain never actually improved.",
"You feel zero sensation in your core. Like it just… switched off after birth.",
"You laugh, sneeze, or cough and hold your breath hoping nothing leaks.",
"You're waiting for the right time to start — but between the baby, the feeds, the sleep deprivation, that time never comes.",
"You know something is off in your body. You're not in crisis — but you're not okay either.",
"You've tried gym, yoga, random YouTube workouts — but nothing addresses what actually happened to your body during pregnancy.",
"You feel guilty even thinking about yourself when the baby needs everything from you.",
"You want to feel strong, stand tall, and feel like yourself again — but you don't know where to safely start."];


const PainPoints = () =>
<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: 'rgba(255,255,255,0.5)' }}>Read slowly</span></Reveal>
        <Reveal delay="1"><h2 className="display" style={{ color: 'var(--canvas)' }}>Does this sound like <em style={{ fontStyle: 'italic' }}>you?</em></h2></Reveal>
      </div>

      <div className="pain-grid" style={{
      maxWidth: 1060, margin: '0 auto',
      display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '4px 32px',
      gridAutoRows: '132px'
    }}>
        {painPoints.map((p, i) =>
      <Reveal key={i} delay={i % 3 + 1} style={{ height: '100%' }}>
            <div className="pain-row" style={{
          display: 'grid', gridTemplateColumns: '22px 1fr', gap: 10,
          padding: '16px 0',
          borderBottom: '1px solid rgba(255,255,255,0.08)',
          fontSize: 14, lineHeight: 1.5,
          color: 'rgba(255,255,255,0.82)',
          height: '100%',
          alignItems: 'start',
          '--p-i': i % 3
        }}>
              <span className="pain-check" style={{ color: 'var(--accent)', fontFamily: 'var(--f-mono)', fontSize: 12, marginTop: 3 }}>✓</span>
              <span className="pain-text">{p}</span>
            </div>
          </Reveal>
      )}
      </div>

      <Reveal>
        <div style={{ maxWidth: 700, margin: '44px auto 0', textAlign: 'center' }}>
          <p className="display" style={{ fontSize: 22, margin: '0 0 22px', color: 'var(--canvas)', fontStyle: 'italic' }}>
            If you nodded to even one of these — this challenge was built for you.
          </p>
          <CTA />
        </div>
      </Reveal>
    </div>
  </section>;


// -------- Section 5: Testimonials --------
const testimonials = Array.from({ length: 6 }).map((_, i) => ({
  name: ['Priya', 'Ananya', 'Ritika', 'Neha', 'Meera', 'Aisha'][i],
  city: ['Mumbai', 'Bengaluru', 'Delhi', 'Pune', 'Hyderabad', 'Chennai'][i],
  postpartum: ['6 months', '14 months', '2 years', '4 months', '9 months', '3 years'][i]
}));

const Testimonials = () =>
<section id="stories" className="section">
    <div className="wrap">
      <div className="section-head">
        <Reveal><span className="eyebrow">Stories</span></Reveal>
        <Reveal delay="1"><h2 className="display">Real women. Real results. <em style={{ fontStyle: 'italic' }}>Real stories.</em></h2></Reveal>
        <Reveal delay="2"><p>Hear from mothers who felt the difference — some after just one session.</p></Reveal>
      </div>

      <div className="test-grid" style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(3, 1fr)',
      gap: 20
    }}>
        {testimonials.map((t, i) =>
      <Reveal key={i} delay={i % 3 + 1}>
            <div style={{ position: 'relative', cursor: 'pointer' }} className="test-card">
              <Placeholder label={`VIDEO · ${t.name.toUpperCase()}`} h={300} radius={14} />
              <div style={{
            position: 'absolute', inset: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            pointerEvents: 'none'
          }}>
                <span className="test-play" style={{
              width: 52, height: 52, borderRadius: '50%',
              background: 'rgba(255,255,255,0.94)', color: 'var(--ink)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 15, boxShadow: '0 8px 24px -8px rgba(0,0,0,0.3)'
            }}>▶</span>
              </div>
              <div style={{ marginTop: 10 }}>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{t.name}, {t.city}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--f-mono)', marginTop: 2, letterSpacing: '0.04em' }}>
                  {t.postpartum.toUpperCase()} POSTPARTUM
                </div>
              </div>
            </div>
          </Reveal>
      )}
      </div>

      <Reveal>
        <div style={{ textAlign: 'center', marginTop: 40 }}>
          <p style={{ fontFamily: 'var(--f-display)', fontSize: 20, margin: '0 0 20px' }}>
            Join <b>10,000+ women</b> who chose to heal the right way.
          </p>
          <CTA />
        </div>
      </Reveal>
    </div>
  </section>;


Object.assign(window, { Reveal, Placeholder, CTA, Announcement, Nav, Hero, Experience, Schedule, PainPoints, Testimonials, Sep });