// ============================================================
// pages-main.jsx — Home, Vata/Pitta/Kapha, Waitlist, Approach
// ============================================================

const DOSHA_DATA = {
  vata: {
    name: 'Vata',
    color: 'var(--vata)',
    qualities: ['Dry', 'Light', 'Cold', 'Mobile', 'Rough'],
    tag: 'Air constitution — dry, light, always moving.',
    desc: 'If your Prakriti is Vata, your hair is naturally fine, dry, and prone to roughness. Scalp itchiness and flaking are common, especially in cold weather. Your mind rarely switches off — and that stress lands directly on your hair.',
    problems: [
      ['Dry, flaky scalp', 'Reduced sebum production leaves the scalp prone to cracking, tightness, and persistent itching.'],
      ['White dandruff', 'Small, dry flakes that fall onto clothing — a classic sign of Vata-aggravated scalp dryness.'],
      ['Rough, brittle hair', 'Open cuticles and low moisture cause hair to snap during combing or styling.'],
      ['Stress-driven hair fall', 'Vata imbalance elevates cortisol, triggering follicle shutdown and accelerated shedding.'],
    ],
    rootCause: '"Vayu prakopa" — when Vata dosha is aggravated, nourishment to the scalp is disrupted. A dry body produces dry hair. Disturbed sleep leaves hair follicles depleted.',
    timeline: [
      ['Week 2', 'Itching subsides', 'The scalp\'s moisture barrier begins to rebuild with consistent oiling.'],
      ['Week 4', 'Dandruff clears', 'Neem and Bhringraj bring Malassezia fungus under control.'],
      ['Week 8', 'Visible density', 'Follicle-level nourishment takes effect — 60% density improvement reported. [citation needed]'],
    ],
    herbs: [
      ['Amla', 20, 'Rasayana · Vitamin C', '#6b7d3a'],
      ['Bhringraj', 18, 'King of hair · antifungal', '#3d4a2b'],
      ['Methi', 15, 'Lecithin · smoothness', '#b8862f'],
      ['Brahmi', 12, 'Nervine tonic · calms Vata', '#5a6b2b'],
      ['Hibiscus', 10, 'Snigdha · conditioner', '#a04a2a'],
      ['Bibhitaki', 8, 'Triphala · detox', '#6e5a3a'],
      ['Jatamansi', 7, 'Nervous system · anti-stress', '#3d4a6b'],
      ['Rose/Lavender', 5, 'Snigdha · soothing', '#c27c8c'],
      ['Neem', 4, 'Antifungal', '#5a8b4a'],
    ],
    available: true,
  },
  pitta: {
    name: 'Pitta',
    color: 'var(--pitta)',
    qualities: ['Hot', 'Sharp', 'Light', 'Oily', 'Spreading'],
    tag: 'Fire constitution — hot, intense, inflammatory.',
    desc: 'Pitta types are sharp, focused, and driven — but the other side of that intensity is internal heat, inflammation, and early greying. A sensitive scalp, visible flushing, and crown thinning are classic Pitta signatures.',
    problems: [
      ['Premature greying', 'Excess Pitta in the blood tissue overworks pigment-producing cells, accelerating greying.'],
      ['Scalp inflammation', 'Red patches, a burning sensation, or heightened scalp sensitivity — all signs of Pitta aggravation.'],
      ['Crown thinning', 'Gradual thinning concentrated at the crown, driven by internal heat and inflammation.'],
      ['Heat sensitivity', 'Symptoms worsen in hot weather; sweat and heat trigger scalp flare-ups.'],
    ],
    rootCause: '"Pitta prakopa" — the body\'s internal heat reaches the scalp. Chronic stress, spicy food, and late-night screen time all aggravate Pitta over time.',
    timeline: [
      ['Week 4', 'Inflammation settles', 'Scalp redness and burning reduce as cooling herbs take effect.'],
      ['Week 8', 'Greying slows', 'Pigment return becomes visible in new hair growth.'],
      ['Week 16', 'Recovery', 'The two-phase mask and oil system works at a deeper follicular level.'],
    ],
    herbs: [
      ['Neel', 0, 'Natural pigment support', '#3d4a6b'],
      ['Henna', 0, 'Cooling · conditioning', '#8b3a1a'],
      ['Amla', 0, 'Anti-inflammatory', '#6b7d3a'],
      ['Brahmi', 0, 'Cooling nervine', '#5a6b2b'],
      ['Rose', 0, 'Soothing · cooling', '#c27c8c'],
      ['Sandalwood', 0, 'Cooling · anti-inflammatory', '#c8a882'],
    ],
    available: false,
    launch: 'Diwali 2027',
  },
  kapha: {
    name: 'Kapha',
    color: 'var(--kapha)',
    qualities: ['Heavy', 'Slow', 'Oily', 'Cold', 'Stable'],
    tag: 'Earth constitution — heavy, oily, slow to move.',
    desc: 'Kapha types naturally have thick, strong hair — but excess sebum, sluggish circulation, and slow follicle turnover create their own set of problems. By evening, your scalp feels heavy and coated.',
    problems: [
      ['Oily scalp', 'Overactive sebaceous glands leave the scalp feeling greasy and weighed down by midday.'],
      ['Heavy, sticky dandruff', 'Yellowish flakes that cling to the scalp — distinct from the dry, falling flakes of Vata types.'],
      ['Slow hair growth', 'Sluggish follicle turnover means length gain is slow and density feels stagnant.'],
      ['Congested scalp', 'Poor circulation limits the nourishment reaching each follicle, compounding the problem.'],
    ],
    rootCause: '"Kapha prakopa" — excess earth and water elements in the body slow metabolism, weigh down digestion, and create sticky buildup on the scalp.',
    timeline: [
      ['Week 2', 'Oil balances', 'Sebum production begins to regulate with stimulating herbs.'],
      ['Week 6', 'Growth accelerates', 'Improved circulation activates dormant follicles.'],
      ['Week 12', 'Density returns', 'Hair grows consistently thicker and with natural shine.'],
    ],
    herbs: [
      ['Triphala', 0, 'Detox · cleansing', '#6b5a2b'],
      ['Shikakai', 0, 'Natural cleanser', '#8b6b3a'],
      ['Reetha', 0, 'Deep cleanse', '#b8862f'],
      ['Tulsi', 0, 'Stimulating · warming', '#5a6b2b'],
      ['Ginger', 0, 'Circulation', '#c27c3a'],
      ['Black Pepper', 0, 'Warming · stimulating', '#3a2b1a'],
    ],
    available: false,
    launch: '2028',
  },
};

// =============== HOME ===============
function HomePage({ onNav }) {
  const { t } = useLang();
  return (
    <>
      {/* SECTION 1: HERO */}
      <section id="home" style={{
        position: 'relative',
        minHeight: '92vh',
        display: 'flex',
        flexDirection: 'column',
        background: '#0f0d0b',
        overflow: 'hidden',
        scrollMarginTop: 80,
      }}>
        {/* Background hero image — right half */}
        <div style={{
          position: 'absolute',
          inset: 0,
          backgroundImage: 'url(../assets/background-hero.jpg)',
          backgroundSize: 'cover',
          backgroundPosition: 'center right',
          backgroundRepeat: 'no-repeat',
          opacity: 0.85,
        }} />
        {/* Left gradient fade so text stays readable */}
        <div style={{
          position: 'absolute',
          inset: 0,
          background: 'linear-gradient(90deg, #0f0d0b 38%, rgba(15,13,11,0.7) 60%, rgba(15,13,11,0.1) 100%)',
        }} />

        {/* Content */}
        <div style={{ position: 'relative', flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '80px 0 40px' }}>
          <div className="page">
            <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 48, alignItems: 'center' }}>

              {/* LEFT: copy */}
              <div>
                {/* Eyebrow with line + leaf */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
                  <span style={{ fontFamily: 'var(--f-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.18em', color: '#c97b4b' }}>
                    {t('hero_eyebrow')}
                  </span>
                  <div style={{ height: 1, width: 36, background: '#c97b4b', flexShrink: 0 }} />
                  <svg width="18" height="18" viewBox="0 0 22 22" fill="none" style={{ flexShrink: 0 }}>
                    <path d="M11 2 C11 2 7 6 7 11 C7 14.3 9 16.5 11 17 C13 16.5 15 14.3 15 11 C15 6 11 2 11 2Z" stroke="#c97b4b" strokeWidth="1.2" fill="none"/>
                    <path d="M11 17 L11 20" stroke="#c97b4b" strokeWidth="1.2"/>
                    <path d="M7 9 C5 8 3 9 2 11" stroke="#c97b4b" strokeWidth="1.2" fill="none"/>
                    <path d="M15 9 C17 8 19 9 20 11" stroke="#c97b4b" strokeWidth="1.2" fill="none"/>
                  </svg>
                </div>

                <h1 className="h-display" style={{ fontSize: 'clamp(48px, 6.5vw, 96px)', color: '#f5efe3', margin: '0 0 24px', lineHeight: 1.0 }}>
                  {t('hero_h1_1')}<br />
                  {t('hero_h1_2')} <em style={{ color: '#c97b4b', fontStyle: 'italic' }}>{t('hero_h1_em')}</em>
                </h1>

                <p style={{ fontSize: 18, color: 'rgba(245,239,227,0.82)', margin: '0 0 32px', lineHeight: 1.6, maxWidth: '46ch' }}>
                  {t('hero_desc_1')}<br />
                  {t('hero_desc_2')}
                </p>

                {/* Trust pillars */}
                <div style={{ display: 'flex', gap: 0, marginBottom: 36 }}>
                  {[
                    { icon: '🌿', label: t('hero_pillar1_label'), sub: t('hero_pillar1_sub') },
                    { icon: '🌱', label: t('hero_pillar2_label'), sub: t('hero_pillar2_sub') },
                    { icon: '⚖️', label: t('hero_pillar3_label'), sub: t('hero_pillar3_sub') },
                  ].map((p, i) => (
                    <div key={i} style={{
                      display: 'flex', alignItems: 'center', gap: 10,
                      paddingRight: 20, marginRight: 20,
                      borderRight: i < 2 ? '1px solid rgba(255,255,255,0.15)' : 'none',
                    }}>
                      <div style={{
                        width: 36, height: 36, borderRadius: '50%',
                        border: '1px solid rgba(201,123,75,0.5)',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 16, flexShrink: 0,
                      }}>{p.icon}</div>
                      <div>
                        <div style={{ fontSize: 11, color: 'rgba(245,239,227,0.5)', lineHeight: 1.2 }}>{p.label}</div>
                        <div style={{ fontSize: 13, color: 'rgba(245,239,227,0.9)', fontWeight: 500 }}>{p.sub}</div>
                      </div>
                    </div>
                  ))}
                </div>

                <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', marginBottom: 20 }}>
                  <button className="btn accent" onClick={() => onNav('quiz')}>
                    {t('hero_cta_primary')} <span className="arrow">→</span>
                  </button>
                  <button className="btn ghost" style={{ borderColor: 'rgba(245,239,227,0.5)', color: 'var(--paper)' }} onClick={() => onNav('approach')}>
                    {t('hero_cta_secondary')}
                  </button>
                </div>

                <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'rgba(245,239,227,0.4)', fontSize: 12, fontFamily: 'var(--f-mono)', letterSpacing: '0.06em' }}>
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="6" stroke="currentColor" strokeWidth="1"/><path d="M7 4v3.5L9 9" stroke="currentColor" strokeWidth="1" strokeLinecap="round"/></svg>
                  {t('hero_badge')}
                </div>
              </div>

              <div />

            </div>
          </div>
        </div>

        {/* Bottom bar */}
        <div style={{ position: 'relative', borderTop: '1px solid rgba(255,255,255,0.08)', padding: '20px 0' }}>
          <div className="page">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
              {[
                { icon: '🌿', title: t('hero_trust1_title'), sub: t('hero_trust1_sub') },
                { icon: '🔬', title: t('hero_trust2_title'), sub: t('hero_trust2_sub') },
                { icon: '💚', title: t('hero_trust3_title'), sub: t('hero_trust3_sub') },
                { icon: '🇮🇳', title: t('hero_trust4_title'), sub: t('hero_trust4_sub') },
              ].map((item, i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'flex-start', gap: 14,
                  paddingRight: 20,
                  borderRight: i < 3 ? '1px solid rgba(255,255,255,0.08)' : 'none',
                  paddingLeft: i > 0 ? 20 : 0,
                }}>
                  <div style={{
                    width: 36, height: 36, borderRadius: '50%',
                    border: '1px solid rgba(201,123,75,0.3)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 16, flexShrink: 0,
                  }}>{item.icon}</div>
                  <div>
                    <div style={{ fontSize: 14, color: 'rgba(245,239,227,0.9)', fontWeight: 500, marginBottom: 2 }}>{item.title}</div>
                    <div style={{ fontSize: 12, color: 'rgba(245,239,227,0.45)', fontFamily: 'var(--f-mono)', letterSpacing: '0.02em' }}>{item.sub}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* SECTION 2: THE PROBLEM */}
      <section className="section tint" id="problem" style={{ scrollMarginTop: 80 }}>
        <div className="page">
          <div className="problem-hero">
            <div className="problem-hero__image">
              <div className="problem-bowl-circle">
                <img src="../assets/bowl.png" alt="Ayurvedic bowl with herbs" />
              </div>
            </div>
            <div className="problem-hero__text">
              <div className="eyebrow" style={{ color: '#c97b4b', letterSpacing: '0.12em', fontSize: 12, fontWeight: 600, marginBottom: 24 }}>{t('problem_eyebrow')}</div>
              <h2 style={{ fontSize: 'clamp(22px, 2.6vw, 40px)', lineHeight: 1.15, fontFamily: 'var(--serif)', fontWeight: 400, margin: '0 0 20px', whiteSpace: 'nowrap' }}>
                {t('problem_h2').split('\n').map((line, i) => <React.Fragment key={i}>{line}{i === 0 && <br />}</React.Fragment>)}
              </h2>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
                <div style={{ height: 1, width: 48, background: '#c97b4b' }} />
                <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
                  <path d="M11 2 C11 2 7 6 7 11 C7 14.3 9 16.5 11 17 C13 16.5 15 14.3 15 11 C15 6 11 2 11 2Z" stroke="#c97b4b" strokeWidth="1" fill="none"/>
                  <path d="M11 17 L11 20" stroke="#c97b4b" strokeWidth="1"/>
                  <path d="M7 9 C5 8 3 9 2 11" stroke="#c97b4b" strokeWidth="1" fill="none"/>
                  <path d="M15 9 C17 8 19 9 20 11" stroke="#c97b4b" strokeWidth="1" fill="none"/>
                </svg>
                <div style={{ height: 1, width: 48, background: '#c97b4b' }} />
              </div>
              <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--ink-2)', margin: '0 0 16px', maxWidth: 520 }}>
                {t('problem_p1')}
              </p>
              <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--ink-2)', margin: 0, maxWidth: 520 }}>
                {t('problem_p2')} <span style={{ color: '#c97b4b', fontWeight: 500 }}>Prakriti</span>.
              </p>
            </div>
          </div>

          <div className="grid-3" style={{ marginTop: 40 }}>
            {[
              {
                cls: 'card-fail--gender',
                leaf: '../assets/leaf-yellow.png',
                iconBg: '#c97b4b',
                icon: (
                  <svg width="26" height="26" viewBox="0 0 26 26" fill="none">
                    <circle cx="13" cy="9" r="5" stroke="white" strokeWidth="1.5"/>
                    <path d="M6 22 C6 18 9 16 13 16 C17 16 20 18 20 22" stroke="white" strokeWidth="1.5" strokeLinecap="round"/>
                    <circle cx="19" cy="9" r="4" stroke="white" strokeWidth="1.5" opacity="0.6"/>
                  </svg>
                ),
                h: t('problem_card1_h'),
                p: <>{t('problem_card1_p')} <span style={{ color: '#c97b4b', fontWeight: 600 }}>{t('problem_card1_em')}</span></>,
              },
              {
                cls: 'card-fail--symptom',
                leaf: '../assets/leaf-green.png',
                iconBg: '#4a7a3a',
                icon: (
                  <svg width="26" height="26" viewBox="0 0 26 26" fill="none">
                    <circle cx="13" cy="13" r="9" stroke="white" strokeWidth="1.5"/>
                    <path d="M13 7 L13 13 L17 16" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                    <circle cx="13" cy="13" r="1.5" fill="white"/>
                  </svg>
                ),
                h: t('problem_card2_h'),
                p: <>{t('problem_card2_p')} <span style={{ color: '#4a7a3a', fontWeight: 600 }}>{t('problem_card2_em')}</span></>,
              },
              {
                cls: 'card-fail--constitution',
                leaf: '../assets/leaf-blue.png',
                iconBg: '#4a5e8a',
                icon: (
                  <svg width="26" height="26" viewBox="0 0 26 26" fill="none">
                    <path d="M13 4 L10 10 L4 10 L9 14 L7 20 L13 16 L19 20 L17 14 L22 10 L16 10 Z" stroke="white" strokeWidth="1.5" strokeLinejoin="round" fill="none"/>
                  </svg>
                ),
                h: t('problem_card3_h'),
                p: <>{t('problem_card3_p')} <span style={{ color: '#4a5e8a', fontWeight: 600 }}>{t('problem_card3_em')}</span></>,
              },
            ].map(({ cls, iconBg, icon, h, p, leaf }) => (
              <div key={h} className={`card card-fail ${cls}`} style={{ padding: '24px 24px 28px', borderTop: 'none', borderBottom: `3px solid ${iconBg}`, position: 'relative', overflow: 'hidden' }}>
                {leaf && <img src={leaf} alt="" style={{ position: 'absolute', bottom: 0, right: 0, width: 100, opacity: 0.35, pointerEvents: 'none', userSelect: 'none' }} />}
                <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 14 }}>
                  <div style={{ width: 64, height: 64, borderRadius: '50%', background: iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    {icon}
                  </div>
                  <div>
                    <div className="h" style={{ marginBottom: 8 }}>{h}</div>
                    <div style={{ height: 1, width: 48, background: iconBg, opacity: 0.5 }} />
                  </div>
                </div>
                <p style={{ margin: 0 }}>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SECTION 3: THE PRAKRITI PRINCIPLE */}
      <section className="section dark" id="prakriti-principle" style={{ scrollMarginTop: 80, position: 'relative', overflow: 'hidden' }}>
        {/* Botanical decoration */}
        <svg style={{ position: 'absolute', bottom: 60, left: 0, width: 160, opacity: 0.18, pointerEvents: 'none' }} viewBox="0 0 160 260" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M80 260 C80 200 40 160 20 100" stroke="#8b6b3a" strokeWidth="2" fill="none"/>
          <path d="M80 200 C60 180 30 175 10 155" stroke="#8b6b3a" strokeWidth="1.5" fill="none"/>
          <path d="M80 230 C100 210 120 200 140 180" stroke="#8b6b3a" strokeWidth="1.5" fill="none"/>
          <ellipse cx="15" cy="148" rx="18" ry="10" fill="#5a6b4a" transform="rotate(-30 15 148)"/>
          <ellipse cx="8" cy="160" rx="14" ry="8" fill="#5a6b4a" transform="rotate(-45 8 160)"/>
          <ellipse cx="135" cy="175" rx="18" ry="10" fill="#5a6b4a" transform="rotate(20 135 175)"/>
          <ellipse cx="145" cy="188" rx="14" ry="8" fill="#5a6b4a" transform="rotate(35 145 188)"/>
          <ellipse cx="55" cy="170" rx="16" ry="9" fill="#5a6b4a" transform="rotate(-50 55 170)"/>
          <ellipse cx="42" cy="182" rx="12" ry="7" fill="#5a6b4a" transform="rotate(-60 42 182)"/>
        </svg>

        <div className="page" style={{ position: 'relative', zIndex: 1 }}>
          {/* Two-column: headline left, cards right */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 64, alignItems: 'center', minHeight: 500 }}>
            {/* Left: headline */}
            <div>
              <div className="k" style={{ color: 'var(--vata)', letterSpacing: '0.12em', marginBottom: 20 }}>{t('principle_eyebrow')}</div>
              <h2 style={{ fontFamily: 'var(--f-display)', fontSize: 'clamp(32px, 4vw, 56px)', fontWeight: 400, color: 'var(--paper)', lineHeight: 1.15, margin: 0 }}>
                {t('principle_h2').split('\n').map((line, i) => <React.Fragment key={i}>{line}{i < 2 && <br/>}</React.Fragment>)}
              </h2>
              <p style={{ fontFamily: 'var(--f-display)', fontSize: 'clamp(22px, 2.8vw, 38px)', fontStyle: 'italic', color: 'var(--vata)', margin: '12px 0 0', lineHeight: 1.2 }}>
                {t('principle_italic').split('\n').map((line, i) => <React.Fragment key={i}>{line}{i === 0 && <br/>}</React.Fragment>)}
              </p>
              <div style={{ width: 48, height: 2, background: 'var(--vata)', marginTop: 16, borderRadius: 2 }} />
              <p style={{ marginTop: 28, color: 'rgba(255,255,255,0.85)', fontSize: 15, lineHeight: 1.6 }}>
                {t('principle_p1')} <strong style={{ color: 'var(--paper)' }}>Prakriti.</strong>
              </p>
              <p style={{ marginTop: 8, color: 'rgba(255,255,255,0.6)', fontSize: 14, lineHeight: 1.7, maxWidth: '32ch' }}>
                {t('principle_p2')}
              </p>
            </div>

            {/* Right: fanned dosha cards */}
            <div style={{ position: 'relative', height: 500, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              {[
                {
                  key: 'vata', label: 'VATA', color: '#8b6b3a', bgGradient: 'linear-gradient(180deg, #f6f1e7 55%, #c4864a 100%)',
                  element: t('vata_element'), personality: t('vata_personality'),
                  body: t('vata_body'),
                  hair: t('vata_hair'),
                  rotate: -6, translateX: 0, zIndex: 1, leftOffset: -260,
                  icon: (
                    <svg viewBox="0 0 56 56" width="56" height="56"><circle cx="28" cy="28" r="27" fill="#8b6b3a" stroke="none"/><path d="M28 14 C22 18 16 24 18 30 C20 36 26 38 28 42 C30 38 36 36 38 30 C40 24 34 18 28 14Z" fill="none" stroke="#f6f1e7" strokeWidth="1.5"/><circle cx="28" cy="28" r="5" fill="none" stroke="#f6f1e7" strokeWidth="1.2"/><path d="M20 20 Q28 26 36 20" fill="none" stroke="#f6f1e7" strokeWidth="1"/></svg>
                  )
                },
                {
                  key: 'pitta', label: 'PITTA', color: '#a04a2a', bgGradient: 'linear-gradient(180deg, #f6f1e7 55%, #d4843a 100%)',
                  element: t('pitta_element'), personality: t('pitta_personality'),
                  body: t('pitta_body'),
                  hair: t('pitta_hair'),
                  rotate: 0, translateX: 0, zIndex: 2, leftOffset: 0,
                  icon: (
                    <svg viewBox="0 0 56 56" width="56" height="56"><circle cx="28" cy="28" r="27" fill="none" stroke="#a04a2a" strokeWidth="2"/><path d="M28 40 C20 34 16 26 22 20 C22 26 26 28 28 22 C30 28 34 26 34 20 C40 26 36 34 28 40Z" fill="#a04a2a"/></svg>
                  )
                },
                {
                  key: 'kapha', label: 'KAPHA', color: '#5a6b4a', bgGradient: 'linear-gradient(180deg, #f6f1e7 55%, #7a8c5a 100%)',
                  element: t('kapha_element'), personality: t('kapha_personality'),
                  body: t('kapha_body'),
                  hair: t('kapha_hair'),
                  rotate: 6, translateX: 0, zIndex: 1, leftOffset: 260,
                  icon: (
                    <svg viewBox="0 0 56 56" width="56" height="56"><circle cx="28" cy="28" r="27" fill="#5a6b4a" stroke="none"/><path d="M28 18 C28 18 18 28 18 34 C18 40 22 44 28 44 C34 44 38 40 38 34 C38 28 28 18 28 18Z" fill="none" stroke="#f6f1e7" strokeWidth="1.5"/><path d="M22 36 Q28 32 34 36" fill="none" stroke="#f6f1e7" strokeWidth="1.2"/></svg>
                  )
                },
              ].map((d, i) => (
                <div
                  key={d.key}
                  onClick={() => onNav(d.key)}
                  style={{
                    position: 'absolute',
                    width: 220,
                    background: d.bgGradient,
                    borderRadius: 20,
                    padding: '28px 24px 32px',
                    cursor: 'pointer',
                    transform: `rotate(${d.rotate}deg)`,
                    zIndex: d.zIndex,
                    boxShadow: '0 12px 40px rgba(0,0,0,0.35)',
                    transition: 'transform 0.25s ease, z-index 0.1s',
                    textAlign: 'center',
                    left: `calc(50% + ${d.leftOffset}px)`,
                    marginLeft: -110,
                  }}
                  onMouseEnter={e => { e.currentTarget.style.transform = `rotate(0deg) translateY(-8px)`; e.currentTarget.style.zIndex = 10; }}
                  onMouseLeave={e => { e.currentTarget.style.transform = `rotate(${d.rotate}deg)`; e.currentTarget.style.zIndex = d.zIndex; }}
                >
                  <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 14 }}>{d.icon}</div>
                  <div style={{ fontFamily: 'var(--f-display)', fontSize: 26, fontWeight: 700, color: d.color, letterSpacing: '0.08em' }}>{d.label}</div>
                  <div style={{ fontSize: 12, color: d.color, fontWeight: 600, marginTop: 4, letterSpacing: '0.04em' }}>{d.element}</div>
                  <div style={{ width: 30, height: 1.5, background: d.color, margin: '14px auto', opacity: 0.4 }} />
                  <p style={{ fontSize: 13, color: '#3a3020', lineHeight: 1.55, margin: '0 0 12px' }}>{d.personality}</p>
                  <div style={{ width: 30, height: 1.5, background: d.color, margin: '0 auto 12px', opacity: 0.4 }} />
                  <p style={{ fontSize: 13, color: '#3a3020', lineHeight: 1.55, margin: '0 0 10px' }}>{d.body}</p>
                  <div style={{ fontSize: 13, color: '#1f1a14', fontWeight: 700, lineHeight: 1.5 }}>↓<br/>{d.hair}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Bottom bar */}
          <div style={{ marginTop: 56, paddingTop: 28, borderTop: '1px solid rgba(255,255,255,0.1)', display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center' }}>
            <div>
              <p style={{ fontFamily: 'var(--f-display)', fontSize: 'clamp(20px, 2.5vw, 32px)', color: 'var(--paper)', margin: 0, lineHeight: 1.3 }}>
                {t('principle_bottom1')}
              </p>
              <p style={{ fontFamily: 'var(--f-display)', fontSize: 'clamp(20px, 2.5vw, 32px)', fontStyle: 'italic', color: 'var(--vata)', margin: '4px 0 0', lineHeight: 1.3 }}>
                {t('principle_bottom2')}
              </p>
            </div>
            <div style={{ textAlign: 'right' }}>
              <button className="btn primary" style={{ background: 'var(--pitta)', borderColor: 'var(--pitta)', color: 'var(--paper)', borderRadius: 40, padding: '14px 28px', fontSize: 15 }} onClick={() => onNav('quiz')}>
                {t('principle_cta')}
              </button>
              <p style={{ marginTop: 10, fontSize: 12, color: 'rgba(255,255,255,0.45)', letterSpacing: '0.04em' }}>
                {t('principle_badge')}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* SECTION 5: QUIZ CTA */}
      <section id="quiz-cta" style={{ scrollMarginTop: 80, position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column', alignItems: 'center', paddingBottom: 56 }}>

        {/* Background texture */}
        <img src="/assets/take-quiz-elements/background.jpg" alt="" aria-hidden="true" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', zIndex: 0 }} />

        {/* Right leafs — anchored to bottom-right */}
        <img src="/assets/take-quiz-elements/right-leafs.png" alt="" aria-hidden="true" style={{ position: 'absolute', bottom: 0, right: 0, height: '90%', zIndex: 1, pointerEvents: 'none' }} />

        {/* Content */}
        <div style={{ position: 'relative', zIndex: 2, display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '48px 24px 0' }}>

          {/* 4 circles diagram */}
          <img src="/assets/take-quiz-elements/4-circles.png" alt="Vata, Pitta and Kapha dosha diagram" style={{ width: '100%', maxWidth: 520, display: 'block' }} />

          {/* CTA button */}
          <button className="btn accent" onClick={() => onNav('quiz')} style={{ fontSize: 18, padding: '16px 56px', borderRadius: 50, marginTop: 32 }}>
            {t('quiz_cta_discover')}
          </button>

          {/* Trust badges */}
          <div style={{ display: 'flex', gap: 40, marginTop: 24, flexWrap: 'wrap', justifyContent: 'center' }}>
            {[
              { icon: '⏱', label: t('quiz_trust1_label'), sub: t('quiz_trust1_sub') },
              { icon: '🌿', label: t('quiz_trust2_label'), sub: t('quiz_trust2_sub') },
              { icon: '🛡', label: t('quiz_trust3_label'), sub: t('quiz_trust3_sub') },
            ].map(({ icon, label, sub }) => (
              <div key={label} style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--ink-2)', fontSize: 13 }}>
                <span style={{ fontSize: 18, opacity: 0.7 }}>{icon}</span>
                <span>{label}<br />{sub}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SECTION 6: RESEARCH & VALIDATION */}
      {/* <section className="section dark" id="research" style={{ scrollMarginTop: 80 }}>
        <div className="page">
          <div className="grid-2" style={{ alignItems: 'center', gap: 64 }}>
            <div>
              <div className="eyebrow" style={{ color: 'var(--clay-soft)', marginBottom: 24 }}>THE RESEARCH</div>
              <h2 style={{ fontFamily: 'var(--f-display)', fontSize: 'clamp(40px, 5vw, 72px)', lineHeight: 1.1, color: 'var(--paper)', margin: 0 }}>
                Not trends.<br />
                <em style={{ color: 'var(--clay-soft)', fontStyle: 'italic' }}>Classical<br />texts.</em><br />
                Modern validation.
              </h2>
            </div>
            <div>
              <p style={{ color: 'rgba(255,255,255,0.65)', fontSize: 'clamp(15px, 1.4vw, 17px)', lineHeight: 1.7, marginBottom: 16 }}>
                Every ingredient traces back to <strong style={{ color: 'var(--paper)' }}>Charaka Samhita</strong> or <strong style={{ color: 'var(--paper)' }}>Ashtanga Hridayam</strong> — then cross-referenced with peer-reviewed clinical literature before entering any formulation.
              </p>
              <p style={{ color: 'rgba(255,255,255,0.65)', fontSize: 'clamp(15px, 1.4vw, 17px)', lineHeight: 1.7, marginBottom: 36 }}>
                This is not wellness marketing. This is how Ayurveda was always meant to be practiced.
              </p>
              <button className="btn ghost" style={{ borderColor: 'var(--paper)', color: 'var(--paper)' }} onClick={() => onNav('approach')}>
                Read our research →
              </button>
            </div>
          </div>
        </div>
      </section> */}

      {/* SECTION 7: FOUNDER STORY */}
      {/* <section className="section tint" id="founder" style={{ scrollMarginTop: 80 }}>
        <div className="page">
          <div className="grid-2" style={{ alignItems: 'center', gap: 48 }}>
            <div>
              <div className="eyebrow">THE FOUNDER</div>
              <h2 className="h-section" style={{ marginTop: 12 }}>Built by someone who needed it first.</h2>
              <p style={{ marginTop: 20, color: 'var(--ink-2)' }}>
                Years of trying generic products for dry, thinning hair. Nothing worked. Every shampoo, every oil — built for a gender, not a body type.
              </p>
              <p style={{ marginTop: 16, color: 'var(--ink-2)' }}>
                Ayurveda had the answer. But no brand was actually building from Prakriti up. Just labels. No real science.
              </p>
              <p style={{ marginTop: 16, color: 'var(--ink-2)' }}>
                Months of personal formula testing. Validated by experienced Ayurvedic practitioners and doctors. Only launched when results were real.
              </p>
              <p style={{ marginTop: 28, fontFamily: 'var(--f-display)', fontSize: 'clamp(18px, 2.5vw, 24px)', fontStyle: 'italic', color: 'var(--ink)', maxWidth: '46ch' }}>
                "I didn't build this for a market. I built it because nothing else worked for my Prakriti."
              </p>
            </div>
            <Placeholder label="Hands mixing herbs on white marble" className="hero" />
          </div>
        </div>
      </section> */}

      {/* SECTION 8: HOW ACCESS WORKS */}
      {/* <section className="section" id="access" style={{ scrollMarginTop: 80 }}>
        <div className="page">
          <SectionHead eyebrow="THE PROCESS" title="We don't give products. We give a system.">
            Our products are Prakriti-based. Know your Prakriti first — then get access.
          </SectionHead>
          <div className="timeline" style={{ border: '1px solid var(--bd)', borderRadius: 'var(--r-lg)', background: 'var(--paper)' }}>
            {[
              ['01', 'Discover your Prakriti', 'Take the free quiz. Know your body type — Vata, Pitta, or Kapha.'],
              ['02', 'Apply for Access', 'Fill a short form. We confirm your Prakriti match before sending anything.'],
              ['03', 'Receive your System', 'Your Prakriti-specific products. Dispatched in limited batches only.'],
            ].map(([n, t, p]) => (
              <div key={n} className="step">
                <div className="eyebrow">Step {n}</div>
                <div className="t">{t}</div>
                <p style={{ color: 'var(--ink-2)', margin: 0 }}>{p}</p>
              </div>
            ))}
          </div>
          <div className="mono" style={{ marginTop: 20 }}>Currently accepting Vata Prakriti applications only.</div>
          <div style={{ marginTop: 20 }}>
            <button className="btn accent" onClick={() => onNav('waitlist')}>
              Apply for Access <span className="arrow">→</span>
            </button>
          </div>
        </div>
      </section> */}

      {/* SECTION 9: APPLY FOR ACCESS */}
      {/* <section className="section dark" id="apply" style={{ scrollMarginTop: 80 }}>
        <div className="page" style={{ textAlign: 'center' }}>
          <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.6)' }}>JOIN THE WAITLIST</div>
          <h2 className="h-section" style={{ color: 'var(--paper)', marginTop: 12 }}>Apply for Access.</h2>
          <p style={{ color: 'rgba(255,255,255,0.75)', marginTop: 16, maxWidth: '52ch', margin: '16px auto 0' }}>
            Currently accepting Vata Prakriti applications only. Limited batches. No exceptions.
          </p>
          <div style={{ marginTop: 32 }}>
            <button className="btn accent" style={{ fontSize: 18, padding: '16px 36px' }} onClick={() => onNav('waitlist')}>
              Apply for Access <span className="arrow">→</span>
            </button>
          </div>
          <div className="mono" style={{ marginTop: 18, color: 'rgba(255,255,255,0.5)' }}>
            No payment now. No spam. We'll reach out only when your batch is ready.
          </div>
        </div>
      </section> */}

      {/* SECTION 10: FAQ */}
      <section className="section dark" id="faq" style={{ scrollMarginTop: 80 }}>
        <div className="page">
          <SectionHead eyebrow="QUESTIONS" title="You'll probably ask these." />
          {[
            {
              title: 'About Prakriti',
              items: [
                ['What is Prakriti?', 'Prakriti is your unique body constitution determined at birth, according to Ayurveda. It is defined by a combination of three doshas — Vata (air), Pitta (fire), and Kapha (earth and water). Your Prakriti governs everything: your hair type, skin texture, digestion, energy levels, and how you respond to stress. It does not change — unlike your mood, diet, or season, your Prakriti is fixed.'],
                ['How do I know my Prakriti?', 'Take our free diagnostic quiz — 9 questions across your hair, body, and lifestyle patterns. It takes under 3 minutes and identifies your dominant dosha. For edge cases or dual-dosha types, we offer a personal consultation.'],
                ['Can my Prakriti change over time?', 'Your Prakriti itself does not change — it is your baseline constitution. However, your Vikriti (current imbalance state) can shift due to diet, stress, season, and lifestyle. Ayurvedic treatment targets restoring balance between your Prakriti and Vikriti.'],
              ],
            },
            {
              title: 'About Products',
              items: [
                ['What is Kesh Wash?', 'Vata Kesh Wash is a soap-free herbal hair wash powder formulated specifically for Vata Prakriti. It contains 6 classical Ayurvedic herbs — Shikakai, Reetha, Amla, Methi Dana, Hibiscus, and Neem. It replaces shampoo entirely — mixed with water and aloe, applied to the scalp, and rinsed. Cleanses at pH 4.5–5.5. No SLS. No synthetic ingredients.'],
                ['What is Body Amrit?', 'Vata Body Amrit is a soap-free daily bath powder for Vata skin. It replaces soap completely. Formulated with herbs that nourish dry, sensitive Vata skin — zero synthetic ingredients. Mixed with water, applied during bath, rinsed off. Leaves skin moisturised without any chemical residue.'],
                ['Are your products safe for daily use?', 'Yes. Kesh Wash can be used daily as a complete hair wash — 150g pack lasts approximately 30 washes. Body Amrit is designed for daily use. All ingredients are classical Ayurvedic herbs — no sulfates, silicones, parabens, synthetic fragrance, or preservatives.'],
                ['What ingredients do you use?', 'Kesh Wash: Shikakai, Reetha, Amla, Methi Dana, Hibiscus, Neem — 6 herbs chosen for their specific cleansing role for Vata constitution. Body Amrit: 8 active Ayurvedic ingredients including Triphala, Sandalwood, and Neem. All sourced from classical formulations and validated against Charaka Samhita.'],
                ['Are your products tested?', 'Yes. All formulas were personally tested by the founder for 4+ months on Vata Prakriti before any external distribution. Formulations are reviewed and approved by an experienced Ayurvedic doctor on our formulation board. No product was released without documented results.'],
              ],
            },
            {
              title: 'About Access',
              items: [
                ['Why can\'t I directly buy your products?', 'Because giving the wrong Prakriti product to the wrong person produces zero results — or worse, makes things worse. Shikakai, for example, is deeply drying; perfect for Kapha, harmful for Vata. We confirm your Prakriti first. This is not gatekeeping — it is the only honest way to do Ayurveda.'],
                ['How does the waitlist work?', 'Take the Prakriti quiz → Apply via a short form → A real person reviews your application → We confirm your Prakriti match → You receive your batch details on WhatsApp. No automated responses. No bulk dispatching. Personal attention at every step.'],
                // ['When will Pitta and Kapha products launch?', 'Pitta formulations are currently in development — estimated launch Diwali 2027. Kapha formulations follow in 2028. We are building one Prakriti at a time to ensure the same depth of testing and doctor validation that went into the Vata products.'],
                // ['How long does it take to receive my order?', 'After approval, orders are dispatched in the next available batch. We operate in limited monthly batches — currently 150 units per month. Dispatch typically happens within 7–14 days of approval. You will receive personal communication on WhatsApp at every stage.'],
                // ['Are you different from Vedix?', 'Fundamentally yes. Vedix customises ingredient ratios within a standard shampoo format — it is still a surfactant-based product, still gender-segmented at the brand level. We build soap-free, Prakriti-first formulations from the ground up: different product format, different diagnostic system, different philosophy. We do not sell to everyone.'],
                // ['Who formulated these products?', 'Formulas were developed by the founder through personal research into classical Ayurvedic texts — primarily Charaka Samhita and Ashtanga Hridayam — and refined through months of personal testing. Final formulations were reviewed and validated by an Ayurvedic doctor on our formulation board before any external release.'],
                // ['Are your products Ayurvedic doctor validated?', 'Yes. We have an Ayurvedic doctor on our formulation board who reviewed and approved the final formulas. This is not a endorsement deal — it is an active working relationship. The doctor validated ingredient selection, ratios, and contraindications against classical literature and modern safety standards.'],
              ],
            },
          ].map(g => (
            <div key={g.title} style={{ marginBottom: 40 }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>{g.title}</div>
              <div>
                {g.items.map(([q, a]) => <FaqItem key={q} q={q} a={a} />)}
              </div>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}

function FaqItem({ q, a }) {
  const [open, setOpen] = useState(false);
  return (
    <div className={`faq-item ${open ? 'open' : ''}`} onClick={() => setOpen(!open)}>
      <div className="q">
        <span>{q}</span>
        <span className="plus">+</span>
      </div>
      <div className="a">{a}</div>
    </div>
  );
}

// =============== DOSHA PAGE ===============
function DoshaPage({ dosha, onNav }) {
  const d = DOSHA_DATA[dosha];
  return (
    <>
      <section className="page dosha-hero">
        <div>
          <div className="flex" style={{ marginBottom: 0 }}>
            <Pill>{d.available ? '₹999 · Members · Available' : 'Launches ' + d.launch}</Pill>
            <Pill>{d.qualities.join(' · ')}</Pill>
          </div>
          <h1 className="h-display" style={{ color: d.color }}>
            Who is a <em style={{ fontStyle: 'italic' }}>{d.name}</em>?
          </h1>
          <p className="deck" style={{ marginTop: 20, maxWidth: '48ch' }}>{d.desc}</p>
          <div className="flex" style={{ marginTop: 28 }}>
            <button className="btn accent" onClick={() => onNav('waitlist')}>
              {d.available ? 'Apply for Access' : 'Notify me at launch'} <span className="arrow">→</span>
            </button>
            <button className="btn ghost" onClick={() => onNav('quiz')}>Re-take quiz</button>
          </div>
        </div>
        <Placeholder label={`${d.name} editorial · person + herbs`} className="hero" />
      </section>

      {/* Problems */}
      <section className="section page">
        <SectionHead eyebrow="01 · Common problems" title={<>Classic signs of {d.name} imbalance.</>}>
          These patterns repeat consistently in {d.name} types. If more than one resonates, this system was built for you.
        </SectionHead>
        <div className="grid-2">
          {d.problems.map(([h, p]) => (
            <div key={h} className="card">
              <div className="k" style={{ color: d.color }}>Problem</div>
              <div className="h">{h}</div>
              <p>{p}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Root cause */}
      <section className="section tint page">
        <div className="grid-2" style={{ alignItems: 'center' }}>
          <div>
            <Pill>02 · Root cause</Pill>
            <h2 className="h-section" style={{ fontSize: 'clamp(32px, 4vw, 52px)', marginTop: 16 }}>
              {d.rootCause.split('—')[0]}<br/><em className="accent" style={{ color: d.color }}>— {d.rootCause.split('—')[1]?.trim()}</em>
            </h2>
          </div>
          {dosha === 'vata'
            ? <img src="assets/vata-dosha-flow.png" alt="Vata imbalance flow diagram" style={{ width: '100%', minHeight: 420, objectFit: 'cover', borderRadius: 'var(--radius, 8px)', display: 'block' }} />
            : dosha === 'pitta'
            ? <img src="assets/pitta-dosha-flow.png" alt="Pitta imbalance flow diagram" style={{ width: '100%', minHeight: 420, objectFit: 'cover', borderRadius: 'var(--radius, 8px)', display: 'block' }} />
            : <img src="assets/kapha-dosha-flow.png" alt="Kapha imbalance flow diagram" style={{ width: '100%', minHeight: 420, objectFit: 'cover', borderRadius: 'var(--radius, 8px)', display: 'block' }} />}
        </div>
      </section>

      {/* Why generic fails */}
      <section className="section page">
        <SectionHead eyebrow="03 · Why generic fails" title={<>Generic products work <em className="accent" style={{ color: d.color }}>against {d.name} types.</em></>}>
        </SectionHead>
        <div className="grid-3">
          {(dosha === 'vata' ? [
            ['Shikakai dries further', 'Classical texts classify Shikakai as Ruksha — drying by nature. For a Vata type who is already dry, it worsens the condition.'],
            ['No internal support', 'External treatment alone is not enough. As long as cortisol remains elevated internally, the follicle stays suppressed.'],
            ['Wrong base oil', 'Vata requires sesame oil (per Charaka Samhita). Coconut oil is too cold and heavy for Vata constitutions.'],
          ] : dosha === 'pitta' ? [
            ['Heating oils aggravate', 'Almond and mustard oils generate internal heat — exactly what Pitta types do not need. They trigger further scalp flare-ups.'],
            ['Chemical dyes inflame', 'Using synthetic colour to mask premature greying adds more inflammation to an already heat-aggravated scalp.'],
            ['Missing cooling herbs', 'Pitta requires cooling ingredients — Neel, Henna, Brahmi, Rose. Generic formulations rarely include them.'],
          ] : [
            ['Heavy oils clog further', 'Kapha scalps are already oily. Coconut and mustard oils are heavy by nature and compound the congestion.'],
            ['Gentle cleansers under-clean', 'Kapha types need deep, stimulating cleansing. Mild or baby-formula shampoos are insufficient for this constitution.'],
            ['Cooling ingredients slow things down', 'Kapha already has sluggish circulation. Cooling herbs further reduce the stimulation the scalp needs.'],
          ]).map(([h, p]) => (
            <div key={h} className="card">
              <div className="k">Why it fails</div>
              <div className="h">{h}</div>
              <p>{p}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Our solution */}
      <section className="section dark">
        <div className="page">
          <SectionHead eyebrow="04 · Our system">
            <span style={{ color: 'var(--paper)' }}>Internal + external.<br/>Three steps. No added overhead.</span>
          </SectionHead>
          <div className="grid-2" style={{ alignItems: 'center' }}>
            <Placeholder label={`${d.name} kit contents flatlay`} className="hero" />
            <div className="stack-lg">
              {[
                ['Medicated scalp oil', 'Prepared using the Kashaya method — sesame oil infused with Bhringraj, Neem, and Amla to address dandruff and scalp health at the root.'],
                ['Growth oil (post-bath)', 'Sesame base with Bhringraj, Amla, Brahmi, and Jatamansi — works at the follicle level to support density and reduce stress-related shedding.'],
                ['Herbal powder wash', 'Nine Prakriti-specific herbs in an Aloe base. Used 2–3 times weekly as a complete scalp cleanser.'],
                ['Ashwagandha KSM-66', 'Daily internal support — clinically studied for cortisol reduction (p<0.0001) and systemic balance.'],
              ].map(([h, p]) => (
                <div key={h}>
                  <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.5)' }}>Component</div>
                  <h3 className="h-section" style={{ fontSize: 26, color: 'var(--paper)', margin: '6px 0' }}>{h}</h3>
                  <p style={{ color: 'rgba(255,255,255,0.75)', margin: 0 }}>{p}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="section page">
        <SectionHead eyebrow="05 · Expected timeline" title="A clear recovery roadmap.">
          Based on founder testing and clinical research. Individual results may vary.
        </SectionHead>
        <div className="timeline" style={{ border: '1px solid var(--bd)', borderRadius: 'var(--r-lg)', background: 'var(--paper)' }}>
          {d.timeline.map(([w, t, p]) => (
            <div key={w} className="step">
              <div className="w" style={{ color: d.color }}>{w}</div>
              <div className="t">{t}</div>
              <p className="muted" style={{ margin: 0 }}>{p}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Ingredients */}
      <section className="section tint page">
        <SectionHead eyebrow="06 · Ingredients" title={<>Nine herbs. Every one chosen for {d.name}.</>}>
          Exact ratios are proprietary. The ingredient names are public — but the formulation cannot be replicated without the proportions.
        </SectionHead>
        <div className="grid-4">
          {d.herbs.map(([n, pct, role, color]) => (
            <div key={n} className="herb">
              <div className="swatch" style={{ '--swatch': color }} />
              <div>
                <div className="name">{n}</div>
                <div className="role">{role}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Final CTA */}
      <section className="section page">
        <div style={{ background: d.color, color: 'var(--paper)', borderRadius: 16, padding: 'clamp(32px, 5vw, 72px)' }}>
          <div className="flex-between">
            <div>
              <Pill variant="dark">{d.available ? 'Accepting applications' : 'Coming ' + d.launch}</Pill>
              <h2 className="h-section" style={{ fontSize: 'clamp(36px, 5vw, 60px)', color: 'var(--paper)', marginTop: 16 }}>
                {d.available ? `Apply for the ${d.name} Kit.` : `${d.name} Kit launches ${d.launch}.`}
              </h2>
              <p style={{ color: 'rgba(255,255,255,0.85)', maxWidth: '48ch', marginTop: 12 }}>
                {d.available ? 'Only 150 members are accepted each month. Confirmed Vata Prakriti types receive priority consideration.' : 'Join the waitlist — you will be personally notified when it launches.'}
              </p>
              <button className="btn" style={{ background: 'var(--paper)', color: 'var(--ink)', marginTop: 22 }} onClick={() => onNav('waitlist')}>
                {d.available ? 'Apply for access' : 'Join the waitlist'} <span className="arrow">→</span>
              </button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

// =============== WAITLIST ===============
function WaitlistPage({ onNav, presetDosha }) {
  const [form, setForm] = useState({
    name: '', age: '', phone: '', problem: '', prakriti: presetDosha || '', why: '',
  });
  const [submitted, setSubmitted] = useState(false);
  const [sending, setSending] = useState(false);
  const [errors, setErrors] = useState({});
  const update = (k) => (e) => { setForm(f => ({ ...f, [k]: e.target.value })); setErrors(er => ({ ...er, [k]: '' })); };

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = 'Name is required';
    if (!form.age || form.age < 10 || form.age > 100) e.age = 'Enter a valid age';
    if (!form.phone.trim() || !/^[+\d\s\-()]{7,15}$/.test(form.phone.trim())) e.phone = 'Enter a valid WhatsApp number';
    if (!form.problem) e.problem = 'Please select your main hair problem';
    return e;
  };

  if (submitted) {
    return (
      <section className="page section">
        <div style={{ maxWidth: 640, margin: '0 auto', textAlign: 'center' }}>
          <Pill variant="accent">Application received</Pill>
          <h1 className="h-display" style={{ fontSize: 'clamp(40px, 6vw, 80px)', marginTop: 16 }}>
            Thank you, {form.name || 'for applying'}.
          </h1>
          <p style={{ fontSize: 18, color: 'var(--ink-2)', marginTop: 16 }}>
            We will get back to you.
          </p>
          <p className="mono" style={{ marginTop: 24 }}>Our work speaks. Your hair will too.</p>
        </div>
      </section>
    );
  }

  return (
    <>

      {/* <section className="section page">
        <div className="grid-3">
          {[
            ['Limited batch', '150 kits per month — handmade using the Kashaya method. Not designed to scale.'],
            ['Prakriti-selected', 'The current batch accepts Vata Prakriti types only.'],
            ['Personal response', 'A real person will respond to your application on WhatsApp within 7 days. Not automated.'],
          ].map(([h, p]) => (
            <div key={h} className="card">
              <div className="k">How it works</div>
              <div className="h">{h}</div>
              <p>{p}</p>
            </div>
          ))}
        </div>
      </section> */}

      <section className="section tint page">
        <div style={{ maxWidth: 600, margin: '0 auto' }}>
          <div>
            <SectionHead eyebrow="Application" title="Tell us about yourself.">
              This form is for screening only. Payment comes after approval.
            </SectionHead>
            <form className="form-grid" onSubmit={(e) => {
              e.preventDefault();
              const errs = validate();
              if (Object.keys(errs).length) { setErrors(errs); return; }
              setSending(true);
              emailjs.send('service_tz3fb2h', 'template_1xv3bqj', {
                from_name: form.name,
                from_email: '',
                phone: form.phone,
                dosha: form.prakriti || 'Not specified',
                vata_pct: '',
                pitta_pct: '',
                kapha_pct: '',
                message: `Age: ${form.age} | Problem: ${form.problem} | Why: ${form.why}`,
              }).finally(() => { setSending(false); setSubmitted(true); });
            }}>
              <div className="field">
                <label>Full name <span style={{ color: 'var(--pitta)' }}>*</span></label>
                <input type="text" value={form.name} onChange={update('name')} placeholder="Your name" style={errors.name ? { borderColor: 'var(--pitta)' } : {}} />
                {errors.name && <div style={{ color: 'var(--pitta)', fontSize: 13, marginTop: 4 }}>{errors.name}</div>}
              </div>
              <div className="grid-2" style={{ gap: 16 }}>
                <div className="field">
                  <label>Age <span style={{ color: 'var(--pitta)' }}>*</span></label>
                  <input type="number" value={form.age} onChange={update('age')} placeholder="25" min="10" max="100" style={errors.age ? { borderColor: 'var(--pitta)' } : {}} />
                  {errors.age && <div style={{ color: 'var(--pitta)', fontSize: 13, marginTop: 4 }}>{errors.age}</div>}
                </div>
                <div className="field">
                  <label>WhatsApp <span style={{ color: 'var(--pitta)' }}>*</span></label>
                  <input type="tel" value={form.phone} onChange={update('phone')} placeholder="+91 ..." style={errors.phone ? { borderColor: 'var(--pitta)' } : {}} />
                  {errors.phone && <div style={{ color: 'var(--pitta)', fontSize: 13, marginTop: 4 }}>{errors.phone}</div>}
                </div>
              </div>
              <div className="field">
                <label>Main hair problem <span style={{ color: 'var(--pitta)' }}>*</span></label>
                <div className="chips">
                  {['Dandruff','Hair fall','Dryness','Greying','Oily scalp'].map(x => (
                    <button type="button" key={x} className={`chip ${form.problem === x ? 'on' : ''}`} onClick={() => { setForm(f => ({ ...f, problem: x })); setErrors(er => ({ ...er, problem: '' })); }}>{x}</button>
                  ))}
                </div>
                {errors.problem && <div style={{ color: 'var(--pitta)', fontSize: 13, marginTop: 4 }}>{errors.problem}</div>}
              </div>
              <div className="field">
                <label>Your Prakriti <span style={{ color: 'var(--ink-2)', fontSize: 12 }}>(optional)</span></label>
                <div className="chips">
                  {['Vata','Pitta','Kapha','Not sure'].map(x => (
                    <button type="button" key={x} className={`chip ${form.prakriti === x ? 'on' : ''}`} onClick={() => x === 'Not sure' ? onNav('quiz') : setForm(f => ({ ...f, prakriti: x }))}>{x}</button>
                  ))}
                </div>
                <div className="mono" style={{ marginTop: 6 }}>"Not sure" = take the quiz</div>
              </div>
              <div className="field">
                <label>Why are you applying? <span style={{ color: 'var(--ink-2)', fontSize: 12 }}>(optional)</span></label>
                <textarea value={form.why} onChange={update('why')} placeholder="Tell us briefly about your hair journey..." />
              </div>
              <div className="flex" style={{ marginTop: 8 }}>
                <button type="submit" className="btn accent" disabled={sending}>{sending ? 'Sending…' : 'Submit'} <span className="arrow">→</span></button>
                <span className="mono">We will get back to you</span>
              </div>
            </form>
          </div>

          {/* <div className="stack-lg" style={{ position: 'sticky', top: 100 }}>
            <div className="card">
              <div className="k">This month's batch</div>
              <div className="bigstat" style={{ marginTop: 6 }}>87<span className="muted">/150</span></div>
              <div className="meter" style={{ marginTop: 14 }}><div style={{ width: '58%' }}/></div>
              <p className="muted" style={{ marginTop: 12, margin: 0 }}>Closes Diwali 2026. 63 spots remaining.</p>
            </div>
            <div className="card">
              <div className="k">Currently accepting</div>
              <div className="h">Vata Prakriti only</div>
              <p>For Pitta and Kapha we will launch soon. Join the waitlist to be notified at launch.</p>
            </div>
            <div className="card" style={{ background: 'var(--paper-2)' }}>
              <div className="k">From the Prakriti Circle</div>
              <p style={{ fontFamily: 'var(--f-display)', fontSize: 22, lineHeight: 1.3, color: 'var(--ink)' }}>
                "Dandruff gone in 8 weeks. And a smoothness I never got from any shampoo."
              </p>
              <div className="mono" style={{ marginTop: 8 }}>— R. · Bareilly · 8-week user</div>
            </div>
          </div> */}
        </div>
      </section>

      {/* <section className="section dark">
        <div className="page">
          <h2 className="h-section" style={{ fontSize: 'clamp(40px, 6vw, 72px)', color: 'var(--paper)', maxWidth: '18ch' }}>
            "Our work speaks.<br/><em className="accent" style={{ color: 'var(--clay-soft)' }}>Your hair will too."</em>
          </h2>
          <div className="mono" style={{ color: 'rgba(255,255,255,0.5)', marginTop: 20 }}>— Founder note · 2026</div>
        </div>
      </section> */}
    </>
  );
}

// =============== APPROACH ===============
function ApproachPage({ onNav }) {
  return (
    <>
      {/* Section 1 — Hero */}
      <section className="page hero" style={{ textAlign: 'center', padding: '80px 0 120px' }}>
        <div className="eyebrow">Our Approach</div>
        <h1 className="h-display" style={{ fontSize: 'clamp(36px, 5.5vw, 80px)', maxWidth: '20ch', margin: '16px auto 0' }}>
          We don't sell products.<br/><em className="accent">We create systems.</em>
        </h1>
        <p className="deck" style={{ marginTop: 28, maxWidth: '46ch', margin: '28px auto 0' }}>
          A product fixes one symptom. A system addresses the root — your body's constitution. Everything we make is built around your Prakriti, not your gender, not your symptom.
        </p>
      </section>

      {/* Section 2 — Philosophy */}
      <section className="section tint">
        <div className="page">
          <div className="eyebrow" style={{ marginBottom: 48 }}>Philosophy</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'start' }}>
            {/* Left column */}
            <div>
              <h2 className="h-section" style={{ fontSize: 'clamp(28px, 3.5vw, 42px)', marginBottom: 24 }}>
                Prakriti determines everything. <em className="accent">Not gender.</em>
              </h2>
              <p style={{ color: 'var(--ink-2)', marginBottom: 16, maxWidth: '56ch' }}>
                The wellness industry sorts people by gender. Ayurveda never has. Your hair type, skin type, digestion, energy — all of it is determined by your Prakriti: a body constitution made of three doshas.
              </p>
              <p style={{ color: 'var(--ink-2)', marginBottom: 32, maxWidth: '56ch' }}>
                A Vata man and a Vata woman have more in common than a Vata woman and a Pitta woman. Yet every brand puts them in different aisles. That distinction does not exist in Ayurveda.
              </p>
            </div>

            {/* Right column — 2×2 comparison box */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', borderRadius: 'var(--r-lg)', overflow: 'hidden', border: '1px solid var(--bd-strong)' }}>
              {/* Top-left: How brands think */}
              <div style={{ background: 'var(--paper-2)', padding: 24 }}>
                <div className="eyebrow" style={{ marginBottom: 10 }}>How Brands Think</div>
                <p style={{ fontSize: 14, color: 'var(--ink-2)', margin: 0, lineHeight: 1.6 }}>
                  Men's hair oil. Women's shampoo. Oily hair formula. Dry hair formula. One size fits a gender.
                </p>
              </div>
              {/* Top-right: How Ayurveda works */}
              <div style={{ background: 'var(--ink)', padding: 24 }}>
                <div className="eyebrow" style={{ marginBottom: 10, color: 'rgba(255,255,255,0.5)' }}>How Ayurveda Works</div>
                <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.85)', margin: 0, lineHeight: 1.6 }}>
                  Pitta skin care. Kapha body care. One system per constitution.
                </p>
              </div>
              {/* Bottom-left: What products do */}
              <div style={{ background: 'var(--paper-2)', padding: 24, borderTop: '1px solid var(--bd)' }}>
                <div className="eyebrow" style={{ marginBottom: 10 }}>What Products Do</div>
                <p style={{ fontSize: 14, color: 'var(--ink-2)', margin: 0, lineHeight: 1.6 }}>
                  Treat the symptom. Dandruff shampoo for dandruff. Dry skin cream for dry skin. Temporary relief.
                </p>
              </div>
              {/* Bottom-right: What systems do */}
              <div style={{ background: 'var(--ink)', padding: 24, borderTop: '1px solid rgba(255,255,255,0.1)' }}>
                <div className="eyebrow" style={{ marginBottom: 10, color: 'rgba(255,255,255,0.5)' }}>What Systems Do</div>
                <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.85)', margin: 0, lineHeight: 1.6 }}>
                  Treat the constitution. If your body is in balance, dandruff resolves. Dry skin resolves. Permanently.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Section 3 — The System */}
      <section className="section dark">
        <div className="page">
          <div className="eyebrow" style={{ marginBottom: 40 }}>The System</div>

          {/* Heading row */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, marginBottom: 56, alignItems: 'start' }}>
            <h2 className="h-section" style={{ fontSize: 'clamp(32px, 4vw, 52px)', color: 'var(--paper)', margin: 0 }}>
              Internal and external. <em className="accent" style={{ color: 'var(--clay-soft)' }}>Simultaneously.</em>
            </h2>
            <p style={{ color: 'rgba(255,255,255,0.75)', fontSize: 18, margin: 0, alignSelf: 'center' }}>
              Hair and skin problems are body problems. Any external treatment applied to an internally imbalanced body will only work temporarily. Our system works both layers at once — calibrated to your Prakriti.
            </p>
          </div>

          {/* Product vs System comparison list */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, marginBottom: 64, border: '1px solid rgba(255,255,255,0.12)', borderRadius: 'var(--r-lg)', overflow: 'hidden' }}>
            <div style={{ padding: '20px 24px', borderBottom: '1px solid rgba(255,255,255,0.12)' }}>
              <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.45)' }}>A Product</div>
            </div>
            <div style={{ padding: '20px 24px', borderBottom: '1px solid rgba(255,255,255,0.12)', borderLeft: '1px solid rgba(255,255,255,0.12)' }}>
              <div className="eyebrow" style={{ color: 'var(--clay-soft)' }}>A System</div>
            </div>
            {[
              ['Targets one symptom at a time', 'Addresses the root constitution'],
              ['Works only while you use it', 'Builds cumulative balance over time'],
              ['External application only', 'Internal + external simultaneously'],
              ['Designed for average hair or skin', <>Designed for your specific <em className="accent" style={{ color: 'var(--clay-soft)' }}>Prakriti</em></>],
            ].map(([left, right], i) => (
              [
                <div key={`l${i}`} style={{ padding: '16px 24px', borderBottom: i < 3 ? '1px solid rgba(255,255,255,0.08)' : 'none', color: 'rgba(255,255,255,0.55)', fontSize: 15 }}>{left}</div>,
                <div key={`r${i}`} style={{ padding: '16px 24px', borderBottom: i < 3 ? '1px solid rgba(255,255,255,0.08)' : 'none', borderLeft: '1px solid rgba(255,255,255,0.12)', color: 'rgba(255,255,255,0.9)', fontSize: 15 }}>{right}</div>,
              ]
            ))}
          </div>

          {/* Daily ritual steps */}
          <div className="eyebrow" style={{ marginBottom: 24 }}>How the Daily Ritual Works</div>
          <div className="grid-4" style={{ marginBottom: 48 }}>
            {[
              ['On Waking', 'Oil to scalp', 'Sesame oil applied immediately on waking — not before leaving. Works with morning circulation and body heat.'],
              ['With Breakfast', 'Internal support', 'One capsule with food. Manages the internal imbalance that directly shows up on your scalp and skin.'],
              ['At Bath Time', 'Powder wash', 'Herbal powder removes the oil naturally. No shampoo, no soap, no extra steps. Zero overhead.'],
              ['After Bath', 'Post-bath oil', 'For Vata types only — restores surface moisture the constitution naturally loses after cleansing.'],
            ].map(([eyebrow, title, body]) => (
              <div key={eyebrow} className="card" style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)' }}>
                <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.45)' }}>{eyebrow}</div>
                <div style={{ fontFamily: 'var(--f-display)', fontSize: 22, color: 'var(--paper)', lineHeight: 1.15 }}>{title}</div>
                <p style={{ color: 'rgba(255,255,255,0.65)', fontSize: 14, margin: 0 }}>{body}</p>
              </div>
            ))}
          </div>

          {/* CTA row */}
          <div className="flex">
            <button className="btn accent" onClick={() => onNav('quiz')}>Discover your Prakriti →</button>
            {/* <button className="btn ghost" style={{ borderColor: 'rgba(255,255,255,0.4)', color: 'var(--paper)' }} onClick={() => onNav('waitlist')}>Apply for access</button> */}
          </div>
        </div>
      </section>
    </>
  );
}

// =============== VATA BATHAMRIT PRODUCT PAGE ===============
function VataBathamritPage({ onNav }) {
  const [openFaq, setOpenFaq] = useState(null);
  const IMG = 'assets/vata-bathamrit-powder/';

  const ingredients = [
    ['Besan (Chickpea Flour)', 'Gentle cleansing via saponins — no barrier stripping'],
    ['Ashwagandha Root', 'Classical Vata Rasayana — strengthens, anti-aging, adaptogenic'],
    ['Coconut Milk Powder', 'Snehana — deep nourishment, texture, smoothness'],
    ['Mulethi (Yashtimadhu)', 'Brightening via glabridin — barrier repair, moisture lock'],
    ['Neem Powder', 'Antibacterial — body odor control, microbiome protection'],
    ['Haldi (Turmeric)', 'Antibacterial, skin glow, anti-inflammatory'],
  ];

  const comparisonRows = [
    ['pH Balance', 'Disrupts acid mantle (pH 9–11)', 'Maintains skin pH 4.5–5.5'],
    ['Skin Barrier', 'Strips lipid barrier every wash', 'Strengthens barrier with each use'],
    ['Microbiome', 'Kills beneficial bacteria', 'Microbiome-protective herbs'],
    ['Active Ingredients', 'Surfactants only — no actives', '6 Ayurvedic herbs with proven action'],
    ['Moisture', 'Removes natural oils', 'Locks moisture via Mulethi'],
    ['Aging', 'Accelerates dryness-linked aging', 'Anti-aging via Ashwagandha + Mulethi'],
    ['Dosha Specificity', 'One-size-fits-all', 'Formulated for Vata constitution'],
    ['Synthetic Ingredients', 'Multiple synthetics', 'Zero synthetics'],
    ['Preservatives', 'Required (liquid formula)', 'None needed (dry powder)'],
    ['Shelf Life', 'Preservative-dependent', '3–4 months dry, zero degradation'],
    ['Skin Type Compatibility', 'Suited for oily/Pitta types', 'Optimised for dry Vata skin'],
    ['Verdict', 'Cleans. Also damages.', 'Cleanses. Heals simultaneously.'],
  ];

  const faqSections = [
    {
      section: 'WHAT IT IS',
      items: [
        ['What is the Vata Body Amrit Herbal Bath Powder?', 'It is a soap-free, dry herbal bath powder formulated specifically for Vata Prakriti skin. You mix it fresh before each use into a slurry and apply it on your body. It cleanses, nourishes, and strengthens your skin barrier — without a single synthetic ingredient.'],
        ['Is this a replacement for soap or body wash?', 'Yes. This is designed as your complete daily cleansing ritual — for body and face both. Unlike soap, it does not strip your skin\'s acid mantle or disrupt your skin microbiome. For Vata skin specifically, soap is one of the primary long-term aggravators. This formula works differently — it cleanses with Besan saponins while simultaneously repairing what years of soap use may have damaged.'],
        ['Is this an ubtan?', 'It shares the same Ayurvedic roots as ubtan, but it is not a generic ubtan. Every ingredient here is selected specifically for Vata Prakriti — dry, thin, reactive skin prone to premature aging. A standard ubtan is a general formulation. This is a targeted Prakriti-specific system.'],
        ['Does it lather or foam?', 'No — and that is intentional. Foam is produced by synthetic surfactants like SLS, which damage your skin barrier over time. Besan contains natural saponins that cleanse effectively without foam. The absence of lather is not a flaw — it is proof that your acid mantle is being protected.'],
      ],
    },
    {
      section: 'HOW TO USE',
      items: [
        ['How do I prepare the slurry?', 'Take 1.5–2 tsp of the dry powder in a clean bowl or katori. Add rose water or plain lukewarm water gradually, mixing while adding. Target a slurry consistency — pourable but not watery. Thinner than paste, thicker than milk. Apply immediately — do not store the mixed slurry.'],
        ['Can I use plain water instead of rose water?', 'You can. The formula will still cleanse and nourish. However, rose water is the recommended liquid base for Vata Prakriti — it acts as a humectant and has a calming, Vata-pacifying effect that plain water cannot replicate. If rose water is unavailable, substitute with plain lukewarm water and proceed.'],
        ['How do I apply it?', 'Pour or apply the slurry over your entire body — let it spread naturally, no rubbing needed. Let the first layer sit for 30–60 seconds. Then apply a second layer over the first. The gentle friction from the second application lifts sebum and dead cells — natural exfoliation without scrubbing. Leave for 2–3 minutes, then rinse with lukewarm water.'],
        ['Is 1.5–2 tsp enough for my full body?', 'Yes — the slurry format covers more surface area per gram than a paste. At 15–20g per use, a 500g pack gives approximately 25–33 full-body applications — roughly one month of daily use.'],
        ['Can I prepare the slurry in advance and store it?', 'No. The slurry must be freshly mixed before each use and used immediately. Once water is introduced, microbial activity begins within hours. There are no synthetic preservatives in this formula — storing the mixed slurry creates contamination risk.'],
        ['What if I want to add sesame oil?', 'The protocol includes an optional 2 drops of sesame oil in the slurry — this is the classical Vata nourishment addition. If your skin is extremely dry, add it. If you are already following a morning sesame oil ritual, you may not need it here.'],
      ],
    },
    {
      section: 'RESULTS & PERFORMANCE',
      items: [
        ['When will I see results?', 'Softness and smoothness are typically noticeable from the first 1–2 uses — this is the immediate effect of replacing a barrier-stripping soap with a barrier-preserving paste. Visible glow and texture improvement generally begin around 7–10 days of consistent use. Deeper skin barrier repair — particularly relevant if you have used soap for years — takes 21–30 days of daily use.'],
        ['Will it help with body odor?', 'Yes. Neem powder (Azadirachtin) inhibits the bacteria primarily responsible for body odor — Corynebacterium and Staphylococcus species. Unlike soap, which kills bacteria temporarily and lets them return quickly, this formula creates a less hospitable environment for odor-causing bacteria over time.'],
        ['Will it brighten or even my skin tone?', 'Mulethi (Yashtimadhu) contains Glabridin — a clinically studied compound that inhibits tyrosinase, the enzyme responsible for melanin overproduction. Haldi reduces pigmentation and adds a natural glow. Brightening is gradual — expect visible improvement from 2–3 weeks of consistent daily use.'],
        ['How does it address aging for Vata skin?', 'Vata skin ages faster due to chronic dryness, poor circulation, and thin skin structure. This formula addresses all three vectors: Ashwagandha (Withanolides) reduces oxidative stress and supports collagen; Mulethi repairs the skin barrier and reduces UV damage effects; Haldi provides antioxidant protection that improves complexion over time. This is not anti-aging in the cosmetic sense — it is Vata-specific skin strengthening.'],
        ['My skin is very dry and flaky. Will this help?', 'Dry, flaky skin in Vata types is caused by a compromised skin barrier and excess Transepidermal Water Loss (TEWL). Ashwagandha and Mulethi together reduce TEWL and support ceramide production — the structural proteins that keep skin moisture locked in. This formula addresses the root cause, not just the surface symptom. Consistent daily use during winter — when Vata is most aggravated — is critical.'],
      ],
    },
    {
      section: 'SUITABILITY & SAFETY',
      items: [
        ['Is this only for women?', 'No. Prakriti Wellness products are not designed around gender — they are designed around Prakriti. If you have Vata Prakriti, this formula is for you — regardless of gender. Men with Vata constitution will experience the same benefits: dry skin, body odor control, texture improvement, and barrier strengthening.'],
        ['Can I use this on my face?', 'Yes — this is a face and body formula. Apply on your face first, using gentle circular motion. The ingredients are selected to be effective yet non-abrasive. Besan is a fine-grind powder — it provides mild physical exfoliation without the micro-tear risk of harsh scrubs. If you have active acne or broken skin, do a patch test first.'],
        ['I have sensitive skin. Is it safe?', 'This formula is specifically designed for Vata skin, which is inherently sensitive and reactive. Ashwagandha and Mulethi are included partly for their anti-inflammatory and barrier-repair action. That said, every skin is individual — do a patch test (inner arm, 24 hours) before full use, especially if you have a known sensitivity to any listed ingredient.'],
        ['Can I use this if I have eczema or a diagnosed skin condition?', 'Consult your dermatologist before use. While this formula avoids all synthetic irritants, certain Ayurvedic ingredients — including Neem — can interact with compromised skin barriers in unpredictable ways. This is a wellness formulation, not a medical treatment.'],
        ['Is it safe during pregnancy?', 'The dry herbal base is generally considered safe. However, we recommend consulting your gynaecologist or Ayurvedic physician before use during pregnancy. Use as directed — without any additional oil additions — unless cleared by your physician.'],
        ['Can children use it?', 'For children aged 12 and above, the formula is generally safe with a patch test. For children under 12, we recommend avoiding use — Neem is not recommended for young skin without medical guidance.'],
      ],
    },
    {
      section: 'INGREDIENTS & FORMULATION',
      items: [
        ['What are the ingredients?', 'Besan (Chickpea Flour), Ashwagandha Root Powder, Coconut Milk Powder, Mulethi (Yashtimadhu), Neem Powder, Haldi (Turmeric). Used with rose water at the time of application. Sesame oil optional for additional Vata nourishment.'],
        ['Are the ingredient percentages listed?', 'Ingredient percentages are proprietary formulation information and are not disclosed. What we share is the complete ingredient list, the function of each ingredient, and the clinical basis for every inclusion.'],
        ['Why Ashwagandha in a bath powder?', 'Ashwagandha is a classical Vata Rasayana — one of Ayurveda\'s most well-researched herbs for Vata constitution. Topically, its active compounds (Withanolides) have demonstrated anti-inflammatory, antioxidant, and skin-strengthening effects. For Vata skin specifically, Ashwagandha is not an unusual inclusion — it is the most logically aligned herb for this Prakriti type.'],
        ['Why no soap base, surfactants, or preservatives?', 'Synthetic surfactants (SLS, SLES) disrupt your skin\'s acid mantle — the protective pH barrier between 4.5 and 5.5. Long-term soap use progressively damages this barrier, which is particularly harmful for Vata skin. This formula uses no synthetic anything. Shelf stability is maintained through dry powder form — water is introduced only at the point of use, eliminating the need for preservatives.'],
        ['Does it contain any fragrance or artificial color?', 'No artificial fragrance and no synthetic color. The mild natural scent comes from Ashwagandha, Coconut Milk Powder, and Neem. The color (earthy beige) is the natural color of the herb blend.'],
      ],
    },
    {
      section: 'STORAGE & SHELF LIFE',
      items: [
        ['How should I store it?', 'Store in an airtight glass jar in a cool, dry place away from direct sunlight. Always use a dry spoon — any moisture contact degrades the powder and shortens shelf life. Do not store in the bathroom long-term due to humidity exposure.'],
        ['What is the shelf life?', 'The dry powder stays stable for 3–4 months under correct storage conditions. The mixed paste must be used immediately and cannot be stored.'],
        ['How many uses does one pack give?', 'A 500g pack provides approximately 25–33 full-body applications at 15–20g per use — roughly one month of daily use.'],
      ],
    },
  ];

  return (
    <>
      {/* 1. HERO */}
      <section id="hero" style={{
        position: 'relative', minHeight: '92vh', display: 'flex', alignItems: 'center',
        background: 'var(--ink)', overflow: 'hidden', borderBottom: '1px solid rgba(255,255,255,0.08)', scrollMarginTop: 80,
      }}>
        <div className="page" style={{ position: 'relative', zIndex: 2, paddingBottom: 80, paddingTop: 80, width: '100%', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'flex-start' }}>
          {/* left: text */}
          <div>
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.55)', marginBottom: 20 }}>
              VATA DOSHA · FACE &amp; BODY · SOAP-FREE
            </div>
            <h1 className="h-display" style={{ color: 'var(--paper)', fontSize: 'clamp(24px, 3.2vw, 56px)', margin: '0 0 24px' }}>
              Your skin is dry because<br />your soap doesn't know your Prakriti.
            </h1>
            <p className="deck" style={{ color: 'rgba(255,255,255,0.8)', maxWidth: '52ch', marginTop: 0, marginBottom: 32 }}>
              6 classical Ayurvedic herbs. Zero synthetic ingredients. Formulated specifically for Vata constitution — not your gender.
            </p>
            <div className="flex" style={{ gap: 12, flexWrap: 'wrap' }}>
              <button className="btn accent" onClick={() => onNav('waitlist')}>Apply for Access <span className="arrow">→</span></button>
              <button className="btn ghost" style={{ borderColor: 'rgba(255,255,255,0.5)', color: 'var(--paper)' }}
                onClick={() => document.getElementById('formula')?.scrollIntoView({ behavior: 'smooth' })}>
                Learn the Formula
              </button>
            </div>
            {/* stat strip */}
            {/* <div style={{
              display: 'flex', gap: 0, flexWrap: 'wrap', marginTop: 56,
              borderTop: '1px solid rgba(255,255,255,0.15)', paddingTop: 24,
            }}>
              {['4+ Months Founder-Tested', '8 Ayurvedic Herbs', 'Zero Synthetics', 'Soap-Free'].map((s, i) => (
                <div key={s} style={{
                  padding: '0 28px 0 0', marginRight: 28,
                  borderRight: i < 3 ? '1px solid rgba(255,255,255,0.18)' : 'none',
                }}>
                  <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.5)', marginBottom: 4 }}>·</div>
                  <div style={{ color: 'var(--paper)', fontSize: 13, fontFamily: 'var(--f-mono)', letterSpacing: '0.06em' }}>{s}</div>
                </div>
              ))}
            </div> */}
          </div>
          {/* right: product jar */}
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-start', paddingTop: 0, alignSelf: 'flex-start', marginTop: 0 }}>
            <div style={{
              border: '1px solid rgba(255,255,255,0.12)',
              borderRadius: 24,
              padding: 24,
              background: 'rgba(255,255,255,0.04)',
            }}>
              <img
                src={IMG + 'ChatGPT Image Apr 26, 2026, 07_00_41 PM.png'}
                alt="Vata Body Amrit — Herbal Bath Powder"
                style={{ width: '100%', maxWidth: 320, height: 'auto', display: 'block', borderRadius: 12 }}
              />
            </div>
          </div>
        </div>
      </section>

      {/* 2. PROBLEM SECTION */}
      <section id="problem" className="section tint" style={{ scrollMarginTop: 80 }}>
        <div className="page">
          <div className="sec-head">
            <div className="eyebrow">WHY YOUR SKIN ISN'T HEALING</div>
            <h2 className="h-section" style={{ fontSize: 'clamp(32px, 4.5vw, 56px)', margin: '10px 0 0' }}>
              Commercial soap was never made for Vata skin.
            </h2>
          </div>
          <div className="grid-3" style={{ marginTop: 40 }}>
            {[
              ['Strips Acid Mantle', 'pH 4.5–5.5 disrupted. Skin barrier destroyed every single wash.', 'card-fail--gender'],
              ['Kills Microbiome', 'Good bacteria eliminated. Bad bacteria return faster.', 'card-fail--symptom'],
              ['Zero Active Ingredients', 'Surfactants clean. Nothing heals. Dryness compounds daily.', 'card-fail--constitution'],
            ].map(([h, p, cls]) => (
              <div key={h} className={`card card-fail ${cls}`}>
                <div className="k">Why soap fails Vata</div>
                <div className="h">{h}</div>
                <p>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 3. PRODUCT INTRODUCTION */}
      <section id="formula" className="section" style={{ scrollMarginTop: 80 }}>
        <div className="page">
          <div className="grid-2" style={{ alignItems: 'center', gap: 56 }}>
            <img
              src={IMG + 'vata-bathamrit-herbal-bath-powder.png'}
              alt="Vata Body Amrit Herbal Bath Powder"
              style={{ width: '100%', borderRadius: 'var(--r-lg)', objectFit: 'cover', background: 'var(--paper-2)' }}
            />
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>INTRODUCING</div>
              <h2 className="h-section" style={{ fontSize: 'clamp(28px, 3.5vw, 48px)', margin: '0 0 20px' }}>
                Vata Body Amrit<br/>Herbal Bath Powder
              </h2>
              <p style={{ color: 'var(--ink-2)', fontSize: 17, lineHeight: 1.65, maxWidth: '52ch' }}>
                Not an ubtan. Not a scrub. A complete soap-free daily cleansing ritual — formulated on classical Ayurvedic principles for Vata Prakriti skin that is dry, thin, dull, and prone to premature aging.
              </p>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 28 }}>
                {['Zero Synthetic Ingredients', 'Classical Ayurvedic Formula'].map(b => (
                  <span key={b} className="pill">{b}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 4. INGREDIENTS */}
      <section id="ingredients" style={{
        position: 'relative', padding: '96px 0', scrollMarginTop: 80,
        background: 'var(--ink)', overflow: 'hidden',
      }}>
        <img
          src={IMG + 'ChatGPT Image Apr 26, 2026, 06_54_07 PM.png'}
          alt="Ingredient bowls"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.22 }}
        />
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(26,23,20,0.72)' }} />
        <div className="page" style={{ position: 'relative', zIndex: 2 }}>
          <div className="sec-head" style={{ marginBottom: 44 }}>
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.5)' }}>WHAT'S INSIDE</div>
            <h2 className="h-section" style={{ color: 'var(--paper)', fontSize: 'clamp(30px, 4vw, 52px)', margin: '10px 0 0' }}>
              6 herbs. Each chosen for Vata Prakriti.
            </h2>
          </div>
          <div className="grid-4" style={{ gap: 16 }}>
            {ingredients.map(([name, action]) => (
              <div key={name} style={{
                background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)',
                borderRadius: 'var(--r-lg)', padding: '20px 18px',
                transition: 'background 0.2s, border-color 0.2s',
              }}
                onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.1)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.25)'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.06)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.12)'; }}
              >
                <div style={{ fontFamily: 'var(--f-display)', fontSize: 20, color: 'var(--paper)', lineHeight: 1.15, marginBottom: 10 }}>{name}</div>
                <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', lineHeight: 1.5 }}>{action}</div>
              </div>
            ))}
          </div>
          {/* <p className="mono" style={{ color: 'rgba(255,255,255,0.38)', marginTop: 28 }}>
            Exact percentages are proprietary. No ingredient list on packaging by percentage — by design.
          </p> */}
        </div>
      </section>

      {/* 5. HOW TO USE */}
      <section id="ritual" className="section" style={{ scrollMarginTop: 80 }}>
        <div className="page">
          <div className="grid-2" style={{ alignItems: 'center', gap: 56 }}>
            <img
              src={IMG + 'ChatGPT Image Apr 26, 2026, 06_57_46 PM.png'}
              alt="How to use Vata Body Amrit"
              style={{ width: '100%', borderRadius: 'var(--r-lg)', objectFit: 'cover' }}
            />
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>THE RITUAL</div>
              <h2 className="h-section" style={{ fontSize: 'clamp(28px, 3.5vw, 48px)', margin: '0 0 28px' }}>
                The 2-layer ritual.
              </h2>
              <ol style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 14 }}>
                {[
                  'Take 1.5–2 tsp dry powder in a clean bowl',
                  'Add rose water gradually — mix while adding',
                  'Target: slurry consistency — pourable, not paste',
                  'Apply 1st layer over body — let spread naturally, no rubbing',
                  'Wait 30–60 seconds — let it partially absorb',
                  'Apply 2nd layer — gentle friction lifts sebum + dead cells',
                  'Leave 2–3 minutes, then rinse with lukewarm water',
                  'Add 2 drops sesame oil to slurry for extra Vata nourishment (optional)',
                ].map((step, i) => (
                  <li key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                    <span style={{
                      fontFamily: 'var(--f-mono)', fontSize: 11, color: 'var(--clay)', letterSpacing: '0.08em',
                      background: 'rgba(160,74,42,0.1)', borderRadius: 999, padding: '3px 9px', flexShrink: 0, marginTop: 2,
                    }}>0{i + 1}</span>
                    <span style={{ color: 'var(--ink-2)', fontSize: 15 }}>{step}</span>
                  </li>
                ))}
              </ol>
              {/* <div style={{
                marginTop: 28, background: 'var(--paper-2)', border: '1px solid var(--bd)',
                borderRadius: 'var(--r-lg)', padding: '14px 18px',
              }}>
                <div className="eyebrow" style={{ marginBottom: 6 }}>FREQUENCY</div>
                <p style={{ margin: 0, fontSize: 14, color: 'var(--ink-2)' }}>
                  Garmi / Monsoon = alternate days · Sardi = daily (Vata most aggravated)
                </p>
              </div> */}
            </div>
          </div>
        </div>
      </section>

      {/* 6. COMPARISON TABLE */}
      <section id="difference" className="section tint" style={{ scrollMarginTop: 80 }}>
        <div className="page">
          <div className="grid-2" style={{ alignItems: 'start', gap: 48 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>THE DIFFERENCE</div>
              <h2 className="h-section" style={{ fontSize: 'clamp(28px, 3.5vw, 48px)', margin: '0 0 28px' }}>
                Soap vs Vata Body Amrit.
              </h2>
              <div style={{ background: 'var(--paper)', border: '1px solid var(--bd)', borderRadius: 'var(--r-lg)', overflow: 'hidden' }}>
                <table className="table" style={{ fontSize: 14 }}>
                  <thead>
                    <tr>
                      <th style={{ width: '32%' }}>Parameter</th>
                      <th>Commercial Soap</th>
                      <th>Vata Body Amrit</th>
                    </tr>
                  </thead>
                  <tbody>
                    {comparisonRows.map(([param, soap, amrit], i) => (
                      <tr key={param} style={i === comparisonRows.length - 1 ? { background: 'rgba(160,74,42,0.06)' } : {}}>
                        <td style={{ fontFamily: 'var(--f-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--ink-3)' }}>{param}</td>
                        <td style={{ color: 'var(--ink-3)' }}>{soap}</td>
                        <td style={{ color: i === comparisonRows.length - 1 ? 'var(--clay)' : 'var(--ink)', fontWeight: i === comparisonRows.length - 1 ? 600 : 400 }}>{amrit}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
            <div style={{ position: 'sticky', top: 100 }}>
              <img
                src={IMG + 'vata-bathamrit-herbal-bath-powder-front.png'}
                alt="Vata Body Amrit front label"
                style={{ width: '100%', borderRadius: 'var(--r-lg)', objectFit: 'contain', background: 'var(--paper)' }}
              />
            </div>
          </div>
        </div>
      </section>

      {/* 7. STATS BAND */}
      <section id="stats" className="section dark" style={{ scrollMarginTop: 80 }}>
        <div className="page">
          <div className="grid-4" style={{ gap: 0 }}>
            {[
              ['6', 'Classical Ayurvedic herbs'],
              ['4+', 'Months founder-tested'],
              ['0', 'Synthetic ingredients'],
              ['12', 'Parameters where it outperforms soap'],
            ].map(([num, label], i) => (
              <div key={num + label} style={{
                padding: '0 32px',
                borderRight: i < 3 ? '1px solid rgba(255,255,255,0.12)' : 'none',
              }}>
                <div className="bigstat" style={{ color: 'var(--clay-soft)' }}>{num}</div>
                <p style={{ color: 'rgba(255,255,255,0.65)', marginTop: 12, fontSize: 14 }}>{label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 8. STORAGE */}
      {/* <section id="storage" className="section" style={{ scrollMarginTop: 80 }}>
        <div className="page">
          <div className="sec-head">
            <div className="eyebrow">STORAGE</div>
            <h2 className="h-section" style={{ fontSize: 'clamp(28px, 3.5vw, 48px)', margin: '10px 0 0' }}>
              Treat it like an Ayurvedic preparation.
            </h2>
          </div>
          <div className="grid-4" style={{ marginTop: 40 }}>
            {[
              ['🫙', 'Airtight glass jar', 'Dark, dry place'],
              ['☀️', 'No direct sunlight', 'Keep away from light'],
              ['🥄', 'Always use dry spoon', 'Zero moisture contact'],
              ['📅', 'Shelf life', '3–4 months dry · Use mixed paste immediately'],
            ].map(([icon, h, p]) => (
              <div key={h} className="card">
                <div style={{ fontSize: 32 }}>{icon}</div>
                <div className="h" style={{ fontSize: 20 }}>{h}</div>
                <p style={{ fontSize: 14 }}>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section> */}

      {/* 10. FAQ */}
      <section id="faq" className="section tint" style={{ scrollMarginTop: 80 }}>
        <div className="page">
          <div className="sec-head">
            <div className="eyebrow">QUESTIONS</div>
            <h2 className="h-section" style={{ fontSize: 'clamp(28px, 3.5vw, 48px)', margin: '10px 0 0' }}>
              You'll probably ask these.
            </h2>
          </div>
          <div style={{ marginTop: 36 }}>
            {faqSections.map((sec, si) => (
              <FaqSection key={si} section={sec.section} items={sec.items} openFaq={openFaq} setOpenFaq={setOpenFaq} sectionIndex={si} />
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

function FaqSection({ section, items, openFaq, setOpenFaq, sectionIndex }) {
  const [sectionOpen, setSectionOpen] = useState(false);
  return (
    <div style={{ marginBottom: 8 }}>
      <div
        onClick={() => setSectionOpen(!sectionOpen)}
        style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '16px 0', cursor: 'pointer', borderTop: '2px solid var(--bd)',
        }}
      >
        <span style={{ fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--clay)', fontWeight: 600 }}>{section}</span>
        <span style={{
          fontFamily: 'var(--f-mono)', fontSize: 16, color: 'var(--ink-3)',
          transition: 'transform 200ms',
          transform: sectionOpen ? 'rotate(45deg)' : 'none',
          flexShrink: 0,
        }}>+</span>
      </div>
      {sectionOpen && items.map(([q, a], i) => {
        const key = `${sectionIndex}-${i}`;
        const isOpen = openFaq === key;
        return (
          <div key={i}
            style={{ borderTop: '1px solid var(--bd)', padding: '18px 0 18px 16px', cursor: 'pointer' }}
            onClick={() => setOpenFaq(isOpen ? null : key)}
          >
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20 }}>
              <span style={{ fontFamily: 'var(--f-display)', fontSize: 20, letterSpacing: '-0.01em' }}>{q}</span>
              <span style={{
                fontFamily: 'var(--f-mono)', fontSize: 16, color: isOpen ? 'var(--clay)' : 'var(--ink-3)',
                transition: 'transform 200ms, color 200ms',
                transform: isOpen ? 'rotate(45deg)' : 'none',
                flexShrink: 0,
              }}>+</span>
            </div>
            {isOpen && (
              <div style={{ marginTop: 12, color: 'var(--ink-2)', maxWidth: '64ch', lineHeight: 1.65, fontSize: 15 }}>{a}</div>
            )}
          </div>
        );
      })}
    </div>
  );
}

// =============== VATA KESHAMRIT PRODUCT PAGE ===============
function VataKeshamritPage({ onNav }) {
  const [openFaq, setOpenFaq] = useState(null);
  const IMG = 'assets/vata keshamrit powder/';

  const ingredients = [
    ['Shikakai', 'PRIMARY SURFACTANT — Gentle saponins, pH 4.5–5.5 matches your scalp acid mantle. Heavy in Vata formula — Reetha alone is too drying.'],
    ['Reetha', 'SECONDARY SURFACTANT — 15–20% triterpenoid saponins. Strong oil lift. Dosed lower than Shikakai to prevent dryness on Vata scalp.'],
    ['Amla', 'pH 4.5 — reinforces acid mantle damaged by years of alkaline shampoo (pH 6–7). Antioxidant protection during every wash. Rasayana action.'],
    ['Methi Dana', 'FROTHING AGENT — Galactomannan fiber creates natural foam without SLS. Mucilaginous coating protects scalp barrier during wash.'],
    ['Hibiscus', 'Slip and detangling during rinse — Sheeta Virya counteracts Vata dryness and scalp sensitivity. Adds natural shine and smooth texture.'],
    ['Neem', 'Azadirachtin — antifungal action against Malassezia globosa. Effective dose. Kept lower than Kapha formula — Vata scalp is already dry.'],
  ];

  const comparisonRows = [
    ['Cleansing', 'SLS/SLES — strips all oil, destroys acid mantle', 'Shikakai + Reetha saponins — lifts sebum, preserves pH 4.5'],
    ['Scalp Barrier', 'Alkaline pH 6–7 — disrupts acid mantle every wash', 'pH 4.5–5.5 — matches and reinforces scalp acid mantle'],
    ['Lather Source', 'Synthetic surfactants — SLS/SLES', 'Galactomannan fiber from Methi + natural saponins'],
    ['Moisture', 'Strips natural sebum — dryness compounds over time', 'Hibiscus mucilage — slip and protection during wash'],
    ['Antifungal', 'None — or synthetic antifungal agents', 'Neem Azadirachtin — inhibits Malassezia naturally'],
    ['Vata Suitability', 'Not suitable — aggravates Vata dryness', 'Specifically formulated for Vata Prakriti'],
    ['Scalp Microbiome', 'Kills beneficial bacteria indiscriminately', 'Natural antimicrobials — microbiome intact'],
    ['Ingredients', 'Synthetic surfactants, preservatives, fragrance', '6 Ayurvedic herbs — zero synthetic ingredients'],
    ['Long-term Effect', 'Degrades scalp barrier with repeated use', 'Restores scalp barrier — better with each wash'],
    ['Verdict', 'Quick wash — long-term harm', 'Cleaner scalp, intact barrier, no synthetic residue'],
  ];

  const faqSections = [
    {
      section: 'WHAT IT IS',
      items: [
        ['What is Vata Kesh Wash?', 'It is a soap-free dry herbal hair wash powder formulated specifically for Vata Prakriti hair. You mix it fresh before each wash into a paste, apply it on your scalp, and rinse — no shampoo, no sulfates, no synthetic ingredients. Its only job is to clean your scalp properly, using classical Ayurvedic surfactants at the right pH for Vata constitution.'],
        ['Is this a shampoo replacement?', 'Yes — completely. Kesh Wash replaces your shampoo. Unlike shampoo, it contains no SLS or SLES — synthetic surfactants that run at pH 6–7, disrupting your scalp acid mantle (pH 4.5–5.5) every single wash. Shikakai and Reetha clean at pH 4.5–5.5 — the same range as your scalp — so nothing is stripped. For Vata hair specifically, sulfate shampoo is one of the primary long-term aggravators of dryness and breakage.'],
        ['Will it lather like shampoo?', 'It produces a light, natural froth — not the thick foam of shampoo. This comes from galactomannan fiber in Methi Dana and triterpenoid saponins in Reetha. The key step is to rub the paste between your palms for a few seconds before applying — this activates frothing. Less lather does not mean less clean. It means your acid mantle is intact. Thick shampoo foam is produced by SLS — its absence here is the point.'],
        ['How is this different from other herbal powders?', 'Most herbal powders mix growth herbs — Bhringraj, Brahmi, Jatamansi — into a hair wash. Growth herbs require 45–60 minutes minimum contact time to absorb. A hair wash takes 3–4 minutes. Those herbs rinse off doing nothing. Kesh Wash is built on a different philosophy: the wash does one job — clean the scalp properly. Growth and nourishment happen through oil and treatment masks, not a rinse-off product.'],
      ],
    },
    {
      section: 'HOW TO USE',
      items: [
        ['How do I prepare the paste?', 'Take 5g (1 teaspoon, included in pack) of dry powder in the katori provided. Add 2 teaspoons of aloe vera gel — stir. Add lukewarm water gradually until you reach a thick paste. Rub between palms until mild froth generates. Apply on wet scalp and massage 3–4 minutes. Rinse with lukewarm water. Use fresh paste only — never store the mixed paste.'],
        ['If I have applied oil, do I wash differently?', 'Yes — this is important. If you have pre-oiled your scalp, apply the paste to DRY hair first. Massage 3 minutes, rinse. Then reapply to wet hair and rinse again. A single application cannot lift a pre-oiled scalp cleanly. Skipping this step is the most common reason people feel residue after washing.'],
        ['Why aloe vera gel and not just water?', 'Aloe vera gel thickens the paste and adds a humectant layer that supports dry Vata scalp during wash. If aloe vera is unavailable, plain lukewarm water works — the paste will be slightly thinner but the cleansing is the same.'],
        ['How much powder per wash?', '5g (1 teaspoon) is the standard dose — the included spoon measures exactly this. A 150g pack gives approximately 30 washes. For very thick or long hair, use 7–8g. Do not over-use — Reetha is a strong surfactant and excess powder does not improve cleaning.'],
        ['Can I store the prepared paste?', 'No. The paste must be used immediately. Once water is added, microbial activity begins within hours. No preservatives are in this formula. Prepare only what you use in one wash.'],
      ],
    },
    {
      section: 'RESULTS & PERFORMANCE',
      items: [
        ['When will I see results?', 'The first change is scalp feel — less tightness, reduced dryness — typically within 3–5 washes. This is the immediate effect of washing at correct pH instead of disrupting it. Frizz reduction and smoother texture follow within 2–3 weeks of consistent use as your acid mantle rebuilds. Scalp barrier repair is a cumulative process — the longer you use it, the better it gets.'],
        ['Will it help with dry, flaky scalp?', 'Yes. Vata-type flakiness — dry, fine, white flakes — is caused by a disrupted scalp barrier and low sebum. Restoring the correct pH with each wash directly addresses the root cause. Neem provides antifungal action for cases where Malassezia is also present. Within 2–4 weeks of consistent use, flaking reduces as the acid mantle stabilises.'],
        ['Will it reduce frizz?', 'Frizz in Vata hair is largely a pH and moisture problem — alkaline shampoo raises the hair cuticle, creating roughness. Washing at pH 4.5–5.5 keeps the cuticle flat. Hibiscus mucilage adds slip during rinse. Frizz reduction is noticeable within 2–3 weeks.'],
        ['I expected hair growth. Will this help?', 'Kesh Wash is a cleanser — its job is to create a clean, healthy scalp environment. Growth requires herbs that stay on the scalp for 45–60 minutes minimum. That is the job of Prakriti Hair Oil (Phase 2). A cleanser loaded with growth herbs is an expensive product that fails at both cleansing and growth — which is exactly what most herbal shampoos on the market are.'],
      ],
    },
    {
      section: 'SUITABILITY & SAFETY',
      items: [
        ['Is this only for women?', 'No. Prakriti Wellness formulates by Prakriti, not gender. If you have Vata Prakriti, Kesh Wash is for you — regardless of gender. Men with Vata constitution will see the same results: less scalp dryness, reduced flaking, better scalp health.'],
        ['I have a sensitive scalp. Is it safe?', 'Vata Prakriti naturally has a sensitive, reactive scalp — this formula is designed for exactly that. Shikakai is the gentlest classical surfactant. Neem is dosed conservatively — Vata scalp cannot handle high Neem loads (Ruksha, drying action). Do a patch test on your inner arm for 24 hours before first use if you have known herb sensitivities.'],
        ['Can I use this if I have dandruff?', 'If it is Vata-type dandruff — dry, fine, white flakes, no oiliness — yes. Acid mantle restoration and Neem antifungal action address the root cause. If it is Kapha-type — oily, yellowish, heavy flakes — this Vata formula is not optimized for you. A Kapha-specific formula would be the correct choice.'],
        ['Can I use this with chemically treated hair?', 'Proceed with caution. Start with one wash per week and observe scalp response before increasing frequency. No known interactions — but chemically processed hair is structurally altered and may respond differently to saponin-based cleansing.'],
        ['Is it safe during pregnancy?', 'The herbs are generally safe for topical use. We recommend consulting your gynaecologist or Ayurvedic physician before beginning any new herbal routine during pregnancy.'],
      ],
    },
    {
      section: 'INGREDIENTS & FORMULATION',
      items: [
        ['What are the 6 ingredients and why only 6?', 'Shikakai (primary surfactant), Reetha (secondary surfactant), Amla (pH balance), Methi Dana (frothing agent), Hibiscus (slip and detangling), Neem (antifungal). Six ingredients because each one has a specific job in the wash. More herbs do not mean better results — growth herbs added to a rinse-off product simply wash away unused. This formula is market-validated: Havintha (Shark Tank India Season 4, Rs 25 crore valuation) uses only 4 ingredients. Cleanser-first is the correct approach.'],
        ['Why is Shikakai the primary surfactant and not Reetha?', 'Reetha has stronger saponins (15–20%) and is more aggressive at oil lift — ideal for Kapha oily scalp. Vata scalp is already dry and sensitive. Shikakai gentler saponins at pH 4.5–5.5 match the Vata scalp condition. Reetha is present at 20% for cleaning power — but Shikakai leads at 30% to prevent over-stripping.'],
        ['Why are growth herbs like Bhringraj and Brahmi not in this formula?', 'Bhringraj needs 45–60 minutes minimum contact time to reach the dermal papilla. Brahmi needs 30–45 minutes for follicle proliferation. Jatamansi needs 60 minutes for systemic absorption. A hair wash is rinsed off in 3–4 minutes. At that contact time, these herbs contribute zero effect — they simply rinse away. Including them would make the formula more expensive without improving results. They belong in Prakriti Hair Oil — Phase 2.'],
        ['Does it contain any fragrance or synthetic color?', 'No. No artificial fragrance, no synthetic color, no preservatives, no SLS, no SLES, no silicones, no parabens. The natural scent comes from Amla, Shikakai, and Neem — an earthy, herbal smell characteristic of a genuine Ayurvedic preparation.'],
      ],
    },
    {
      section: 'STORAGE & SHELF LIFE',
      items: [
        ['How should I store the powder?', 'In an airtight glass jar, in a cool dry place, away from direct sunlight. Always use the dry spoon provided — even a slightly damp spoon introduces moisture that degrades the powder. Avoid storing the bulk jar in a humid bathroom.'],
        ['What is the shelf life?', '3–4 months from preparation date under correct storage. Mixed paste must be used immediately — do not store. Microbial growth risk within hours of mixing.'],
        ['How many washes does one pack provide?', 'A 150g pack provides approximately 30 washes at 5g per wash — roughly 1 month of use at daily washing. The included 5g spoon measures the correct dose per wash.'],
      ],
    },
  ];

  return (
    <>
      {/* 1. HERO */}
      <section id="hero" style={{
        position: 'relative', minHeight: '92vh', display: 'flex', alignItems: 'center',
        background: 'var(--ink)', overflow: 'hidden', borderBottom: '1px solid rgba(255,255,255,0.08)', scrollMarginTop: 80,
      }}>
        <div className="page" style={{ position: 'relative', zIndex: 2, paddingBottom: 80, paddingTop: 80, width: '100%', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'flex-start' }}>
          <div>
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.55)', marginBottom: 20 }}>
              VATA DOSHA · HAIR WASH · SOAP-FREE
            </div>
            <h1 className="h-display" style={{ color: 'var(--paper)', fontSize: 'clamp(24px, 3.2vw, 56px)', margin: '0 0 24px' }}>
              Your shampoo is the problem.<br />It was never made for Vata hair.
            </h1>
            <p className="deck" style={{ color: 'rgba(255,255,255,0.8)', maxWidth: '52ch', marginTop: 0, marginBottom: 32 }}>
              6 classical Ayurvedic herbs. Zero synthetic ingredients. A soap-free hair wash powder formulated specifically for Vata Prakriti — cleanses at the right pH, preserves your acid mantle, replaces shampoo entirely.
            </p>
            <div className="flex" style={{ gap: 12, flexWrap: 'wrap' }}>
              <button className="btn accent" onClick={() => onNav('waitlist')}>Apply for Access <span className="arrow">→</span></button>
              <button className="btn ghost" style={{ borderColor: 'rgba(255,255,255,0.5)', color: 'var(--paper)' }}
                onClick={() => document.getElementById('formula')?.scrollIntoView({ behavior: 'smooth' })}>
                Learn the Formula
              </button>
            </div>
            {/* <div style={{ display: 'flex', gap: 0, flexWrap: 'wrap', marginTop: 56, borderTop: '1px solid rgba(255,255,255,0.15)', paddingTop: 24 }}>
              {['Founder-Tested Daily Ritual', '9 Ayurvedic Herbs', 'Zero Synthetics', 'Soap-Free'].map((s, i) => (
                <div key={s} style={{ padding: '0 28px 0 0', marginRight: 28, borderRight: i < 3 ? '1px solid rgba(255,255,255,0.18)' : 'none' }}>
                  <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.5)', marginBottom: 4 }}>·</div>
                  <div style={{ color: 'var(--paper)', fontSize: 13, fontFamily: 'var(--f-mono)', letterSpacing: '0.06em' }}>{s}</div>
                </div>
              ))}
            </div> */}
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-start', alignSelf: 'flex-start' }}>
            <div style={{ border: '1px solid rgba(255,255,255,0.12)', borderRadius: 24, padding: 24, background: 'rgba(255,255,255,0.04)' }}>
              <img
                src={IMG + 'ChatGPT Image Apr 27, 2026, 02_47_59 AM.png'}
                alt="Vata Kesh Wash — Hair Wash Powder"
                style={{ width: '100%', maxWidth: 320, height: 'auto', display: 'block', borderRadius: 12 }}
              />
            </div>
          </div>
        </div>
      </section>

      {/* 2. PROBLEM */}
      <section id="problem" className="section tint" style={{ scrollMarginTop: 80 }}>
        <div className="page">
          <div className="sec-head">
            <div className="eyebrow">WHY YOUR HAIR ISN'T HEALING</div>
            <h2 className="h-section" style={{ fontSize: 'clamp(32px, 4.5vw, 56px)', margin: '10px 0 0' }}>
              Commercial shampoo was never made for Vata hair.
            </h2>
          </div>
          <div className="grid-3" style={{ marginTop: 40 }}>
            {[
              ['Strips Acid Mantle', 'SLS and SLES destroy the scalp\'s pH 4.5–5.5 barrier every single wash. Dryness compounds with each use.', 'card-fail--gender'],
              ['Kills Scalp Microbiome', 'Sulfates eliminate beneficial bacteria. Bad bacteria recolonise faster. Scalp health deteriorates long-term.', 'card-fail--symptom'],
              ['Zero Active Ingredients', 'Surfactants clean. Nothing nourishes. Vata dryness gets worse, not better, with every wash.', 'card-fail--constitution'],
            ].map(([h, p, cls]) => (
              <div key={h} className={`card card-fail ${cls}`}>
                <div className="k">Why shampoo fails Vata</div>
                <div className="h">{h}</div>
                <p>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 3. PRODUCT INTRO */}
      <section id="formula" className="section" style={{ scrollMarginTop: 80 }}>
        <div className="page">
          <div className="grid-2" style={{ alignItems: 'center', gap: 56 }}>
            <img
              src={IMG + 'vata-keshamrit-powder.png'}
              alt="Vata Kesh Wash Hair Wash Powder"
              style={{ width: '100%', borderRadius: 'var(--r-lg)', objectFit: 'cover', background: 'var(--paper-2)' }}
            />
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>INTRODUCING</div>
              <h2 className="h-section" style={{ fontSize: 'clamp(28px, 3.5vw, 48px)', margin: '0 0 20px' }}>
                Vata Kesh Wash<br />Hair Wash Powder
              </h2>
              <p style={{ color: 'var(--ink-2)', fontSize: 17, lineHeight: 1.65, maxWidth: '52ch' }}>
                Not a shampoo. Not a herbal shampoo. A cleanser-first powder that does one job — clean your scalp at the correct pH. 6 classical Ayurvedic herbs. No growth herbs that rinse off unused. No sulfates. No synthetics.
              </p>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 28 }}>
                {['Cleanser-First Formula', 'Zero Synthetic Ingredients', '150g · 30 Washes · ₹199'].map(b => (
                  <span key={b} className="pill">{b}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 4. INGREDIENTS */}
      <section id="ingredients" style={{ position: 'relative', padding: '96px 0', scrollMarginTop: 80, background: 'var(--ink)', overflow: 'hidden' }}>
        <img
          src={IMG + 'ChatGPT Image Apr 27, 2026, 02_44_52 AM.png'}
          alt="Ayurvedic ingredients"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.22 }}
        />
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(26,23,20,0.72)' }} />
        <div className="page" style={{ position: 'relative', zIndex: 2 }}>
          <div className="sec-head" style={{ marginBottom: 44 }}>
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.5)' }}>WHAT'S INSIDE</div>
            <h2 className="h-section" style={{ color: 'var(--paper)', fontSize: 'clamp(30px, 4vw, 52px)', margin: '10px 0 0' }}>
              6 herbs. Each with a specific job in the wash.
            </h2>
          </div>
          <div className="grid-4" style={{ gap: 16 }}>
            {ingredients.map(([name, action]) => (
              <div key={name} style={{
                background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)',
                borderRadius: 'var(--r-lg)', padding: '20px 18px', transition: 'background 0.2s, border-color 0.2s',
              }}
                onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.1)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.25)'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.06)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.12)'; }}
              >
                <div style={{ fontFamily: 'var(--f-display)', fontSize: 20, color: 'var(--paper)', lineHeight: 1.15, marginBottom: 10 }}>{name}</div>
                <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', lineHeight: 1.5 }}>{action}</div>
              </div>
            ))}
          </div>
          {/* <p className="mono" style={{ color: 'rgba(255,255,255,0.38)', marginTop: 28 }}>
            Exact percentages are proprietary. No ingredient list on packaging by percentage — by design.
          </p> */}
        </div>
      </section>

      {/* 5. HOW TO USE */}
      <section id="ritual" className="section" style={{ scrollMarginTop: 80 }}>
        <div className="page">
          <div className="grid-2" style={{ alignItems: 'center', gap: 56 }}>
            <img
              src={IMG + 'ChatGPT Image Apr 27, 2026, 02_43_02 AM.png'}
              alt="Vata Kesh Wash ritual"
              style={{ width: '100%', borderRadius: 'var(--r-lg)', objectFit: 'cover' }}
            />
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>THE RITUAL</div>
              <h2 className="h-section" style={{ fontSize: 'clamp(28px, 3.5vw, 48px)', margin: '0 0 28px' }}>
                Mix. Wash. Rinse. That's it.
              </h2>
              <ol style={{ margin: 0, padding: 0, listStyle: 'none', display: 'grid', gap: 14 }}>
                {[
                  'Take 5g (1 tsp, included spoon) dry powder in the katori provided',
                  'Add 2 tsp aloe vera gel — stir well',
                  'Add lukewarm water gradually — target: thick paste',
                  'Rub mixture between palms until mild froth generates',
                  'Apply on wet scalp — massage 3–4 minutes',
                  'Rinse with lukewarm water',
                  'If pre-oiled: apply paste to DRY hair first, massage 3 min, rinse — then reapply to wet hair',
                  'Use fresh paste only — do not store mixed paste',
                ].map((step, i) => (
                  <li key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                    <span style={{
                      fontFamily: 'var(--f-mono)', fontSize: 11, color: 'var(--clay)', letterSpacing: '0.08em',
                      background: 'rgba(160,74,42,0.1)', borderRadius: 999, padding: '3px 9px', flexShrink: 0, marginTop: 2,
                    }}>0{i + 1}</span>
                    <span style={{ color: 'var(--ink-2)', fontSize: 15 }}>{step}</span>
                  </li>
                ))}
              </ol>
              {/* <div style={{ marginTop: 28, background: 'var(--paper-2)', border: '1px solid var(--bd)', borderRadius: 'var(--r-lg)', padding: '14px 18px' }}>
                <div className="eyebrow" style={{ marginBottom: 6 }}>FREQUENCY</div>
                <p style={{ margin: 0, fontSize: 14, color: 'var(--ink-2)' }}>
                  Sardi (Winter) = daily — Vata most aggravated · Garmi / Monsoon = alternate days
                </p>
              </div> */}
            </div>
          </div>
        </div>
      </section>

      {/* 6. COMPARISON TABLE */}
      <section id="difference" className="section tint" style={{ scrollMarginTop: 80 }}>
        <div className="page">
          <div className="grid-2" style={{ alignItems: 'start', gap: 48 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>THE DIFFERENCE</div>
              <h2 className="h-section" style={{ fontSize: 'clamp(28px, 3.5vw, 48px)', margin: '0 0 28px' }}>
                Shampoo vs Vata Kesh Wash.
              </h2>
              <div style={{ background: 'var(--paper)', border: '1px solid var(--bd)', borderRadius: 'var(--r-lg)', overflow: 'hidden' }}>
                <table className="table" style={{ fontSize: 14 }}>
                  <thead>
                    <tr>
                      <th style={{ width: '32%' }}>Parameter</th>
                      <th>Commercial Shampoo</th>
                      <th>Vata Kesh Wash</th>
                    </tr>
                  </thead>
                  <tbody>
                    {comparisonRows.map(([param, old, ours], i) => (
                      <tr key={param} style={i === comparisonRows.length - 1 ? { background: 'rgba(160,74,42,0.06)' } : {}}>
                        <td style={{ fontFamily: 'var(--f-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--ink-3)' }}>{param}</td>
                        <td style={{ color: 'var(--ink-3)' }}>{old}</td>
                        <td style={{ color: i === comparisonRows.length - 1 ? 'var(--clay)' : 'var(--ink)', fontWeight: i === comparisonRows.length - 1 ? 600 : 400 }}>{ours}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
            <div style={{ position: 'sticky', top: 100 }}>
              <img
                src={IMG + 'vata-keshamrit-powder-front.png'}
                alt="Vata Kesh Wash front label"
                style={{ width: '100%', borderRadius: 'var(--r-lg)', objectFit: 'contain', background: 'var(--paper)' }}
              />
            </div>
          </div>
        </div>
      </section>

      {/* 7. STATS BAND */}
      <section id="stats" className="section dark" style={{ scrollMarginTop: 80 }}>
        <div className="page">
          <div className="grid-4" style={{ gap: 0 }}>
            {[
              ['6', 'Classical Ayurvedic herbs — each with a specific wash job'],
              ['150g', '30 washes · 1 month supply · ₹199'],
              ['0', 'Synthetic ingredients — no SLS, SLES, parabens, silicones'],
              ['4.5', 'pH — matches your scalp acid mantle exactly'],
            ].map(([num, label], i) => (
              <div key={num + label} style={{ padding: '0 32px', borderRight: i < 3 ? '1px solid rgba(255,255,255,0.12)' : 'none' }}>
                <div className="bigstat" style={{ color: 'var(--clay-soft)' }}>{num}</div>
                <p style={{ color: 'rgba(255,255,255,0.65)', marginTop: 12, fontSize: 14 }}>{label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 8. STORAGE */}
      {/* <section id="storage" className="section" style={{ scrollMarginTop: 80 }}>
        <div className="page">
          <div className="sec-head">
            <div className="eyebrow">STORAGE</div>
            <h2 className="h-section" style={{ fontSize: 'clamp(28px, 3.5vw, 48px)', margin: '10px 0 0' }}>
              Treat it like an Ayurvedic preparation.
            </h2>
          </div>
          <div className="grid-4" style={{ marginTop: 40 }}>
            {[
              ['🫙', 'Airtight glass jar', 'Dark, dry place — no direct sunlight'],
              ['🥄', 'Always use dry spoon', 'Zero moisture contact with the powder'],
              ['📅', 'Shelf life 4–6 months', 'Dry powder only — mixed paste: use immediately'],
              ['❄️', 'No refrigeration needed', 'Room temperature storage is fine'],
            ].map(([icon, h, p]) => (
              <div key={h} className="card">
                <div style={{ fontSize: 32 }}>{icon}</div>
                <div className="h" style={{ fontSize: 20 }}>{h}</div>
                <p style={{ fontSize: 14 }}>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section> */}

      {/* 10. FAQ */}
      <section id="faq" className="section tint" style={{ scrollMarginTop: 80 }}>
        <div className="page">
          <div className="sec-head">
            <div className="eyebrow">QUESTIONS</div>
            <h2 className="h-section" style={{ fontSize: 'clamp(28px, 3.5vw, 48px)', margin: '10px 0 0' }}>
              You'll probably ask these.
            </h2>
          </div>
          <div style={{ marginTop: 36 }}>
            {faqSections.map((sec, si) => (
              <FaqSection key={si} section={sec.section} items={sec.items} openFaq={openFaq} setOpenFaq={setOpenFaq} sectionIndex={si} />
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { HomePage, DoshaPage, WaitlistPage, ApproachPage, VataBathamritPage, VataKeshamritPage, DOSHA_DATA });