// ============================================================
// pages-misc.jsx — Research, FAQ
// ============================================================

function ResearchPage({ onNav }) {
  const [chapter, setChapter] = useState('dandruff');
  const chapters = [
    ['dandruff', 'Dandruff & Malassezia'],
    ['stress', 'Stress & Cortisol'],
    ['ingredients', 'Ingredient Validation'],
    ['classical', 'Classical Texts'],
    ['gap', 'The Research Gap'],
  ];

  return (
    <>
      <section className="page hero">
        <Pill>Research Library</Pill>
        <h1 className="h-display" style={{ marginTop: 16 }}>
          Every claim<br/><em className="accent">has a source.</em>
        </h1>
        <p className="deck">
          18+ peer-reviewed citations, classical texts, two months of founder testing, and doctor validation. Judge for yourself.
        </p>
      </section>

      <div className="subnav">
        {chapters.map(([k, l]) => (
          <button key={k} className={chapter === k ? 'on' : ''} onClick={() => setChapter(k)}>{l}</button>
        ))}
      </div>

      {chapter === 'dandruff' && (
        <section className="section page">
          <SectionHead eyebrow="01 · Root cause" title="Dandruff is a fungal problem, not a skin problem.">
            In 70–80% of cases, dandruff is caused by Malassezia furfur. Shampoo removes the flakes — it does not remove the fungus.
          </SectionHead>
          <div className="grid-2">
            <div className="card">
              <div className="k">Finding</div>
              <div className="bigstat">70–80%</div>
              <p>of dandruff cases are caused by <em>Malassezia furfur</em>, a scalp fungus.</p>
              <div className="mono">Dermatology Research &amp; Practice, 2016</div>
            </div>
            <div className="card">
              <div className="k">Finding</div>
              <div className="bigstat">60–70%</div>
              <p>Relapse rate within 6 months of using standard medicated shampoos.</p>
              <div className="mono">Dermatology Research &amp; Practice, 2016</div>
            </div>
          </div>
          <p className="muted" style={{ marginTop: 28, maxWidth: '68ch' }}>
            Shampoo provides temporary relief, but the root cause remains untreated. Addressing dandruff properly requires antifungal ingredients and restoring the scalp microbiome — not just cleansing the surface.
          </p>
        </section>
      )}

      {chapter === 'stress' && (
        <section className="section page">
          <SectionHead eyebrow="02 · Stress → Hair fall" title="Cortisol directly shuts down hair follicles.">
            Chronic mental stress raises cortisol, which reduces follicle activity. In Ayurveda, this is the classical definition of Vata imbalance.
          </SectionHead>
          <div className="grid-2">
            <div className="card">
              <div className="k">Finding</div>
              <div className="bigstat">p&lt;0.0001</div>
              <p>KSM-66 Ashwagandha significantly reduced cortisol in healthy adults.</p>
              <div className="mono">Indian J. Psychological Medicine, 2012</div>
            </div>
            <div className="card">
              <div className="k">Mechanism</div>
              <div className="h">Cortisol ↑ → follicle ↓</div>
              <p>Elevated cortisol prematurely pushes hair follicles into the resting phase (telogen). Visible shedding follows 2–3 months later.</p>
            </div>
          </div>
        </section>
      )}

      {chapter === 'ingredients' && (
        <section className="section page">
          <SectionHead eyebrow="03 · Ingredients" title="Nine herbs. Each one backed by research.">
          </SectionHead>
          <table className="table">
            <thead>
              <tr>
                <th>Ingredient</th>
                <th>Claim</th>
                <th>Source</th>
              </tr>
            </thead>
            <tbody>
              {[
                ['Bhringraj', 'Antifungal activity against Malassezia furfur', 'J. Ethnopharmacology, 2013'],
                ['Bhringraj', '+60% hair density improvement in 8–12 weeks', 'Dermatology Research & Practice'],
                ['Neem', 'Strong antifungal + antibacterial vs Malassezia', 'African J. Biotechnology, 2009'],
                ['Amla', 'Potent anti-inflammatory + antimicrobial on scalp', 'Phytotherapy Research, 2011'],
                ['Sesame oil', 'Deep scalp penetration · anti-inflammatory', 'Int. J. Molecular Sciences, 2011'],
                ['Sesame oil', 'Penetrates effectively in 30–45 minutes', 'J. Ethnopharmacology, 2003'],
                ['Ashwagandha KSM-66', 'Cortisol reduction (p<0.0001)', 'Indian J. Psych. Medicine, 2012'],
                ['Brahmi', 'Nervine tonic · stress-related hair loss', 'Classical texts + Charaka'],
              ].map((r, i) => (
                <tr key={i}>
                  <td style={{ fontFamily: 'var(--f-display)', fontSize: 18 }}>{r[0]}</td>
                  <td>{r[1]}</td>
                  <td className="mono">{r[2]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>
      )}

      {chapter === 'classical' && (
        <section className="section page">
          <SectionHead eyebrow="04 · Classical" title="Charaka Samhita · Ashtanga Hridaya · Dr JV Hebbar.">
            Every formulation decision is continuously validated against three classical Ayurvedic sources.
          </SectionHead>
          <div className="grid-3">
            {[
              ['Charaka Samhita', '"No oil surpasses sesame for Vata." Primary classical recommendation for Vata hair care.'],
              ['Snehan → Shodhana', 'Classical sequence: oil first, cleanse after. Dr JV Hebbar (easyayurveda.com) confirms.'],
              ['Kashaya method', '1 part herb + 16 parts water → reduce to 1/4 → combine with sesame oil → heat till moisture evaporates. Classical extraction.'],
            ].map(([h, p]) => (
              <div key={h} className="card">
                <div className="k">Classical</div>
                <div className="h">{h}</div>
                <p>{p}</p>
              </div>
            ))}
          </div>
        </section>
      )}

      {chapter === 'gap' && (
        <section className="section dark">
          <div className="page">
            <SectionHead eyebrow="05 · The gap">
              <span style={{ color: 'var(--paper)' }}>Prakriti-specific RCTs<br/><em className="accent" style={{ color: 'var(--clay-soft)' }}>do not yet exist.</em></span>
            </SectionHead>
            <p style={{ color: 'rgba(255,255,255,0.8)', fontSize: 18, maxWidth: '60ch' }}>
              Modern clinical research does not test formulations by Prakriti type. All existing RCTs use a one-size-fits-all approach. This is the research gap we are addressing through founder testing and community data.
            </p>
            <div className="grid-3" style={{ marginTop: 40 }}>
              {[
                ['2 months', 'Founder personal testing'],
                ['Multiple iterations', 'Formula refinements'],
                ['Doctor validated', 'Dr Saksham Saxena + 2nd doctor'],
              ].map(([h, p]) => (
                <div key={h}>
                  <div className="bigstat" style={{ color: 'var(--clay-soft)' }}>{h}</div>
                  <p style={{ color: 'rgba(255,255,255,0.7)', marginTop: 8 }}>{p}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      <section className="section page">
        <div className="flex-between">
          <span className="mono">Research-backed. Founder-tested. Prakriti-filtered.</span>
          <button className="btn accent" onClick={() => onNav('quiz')}>Discover your Prakriti →</button>
        </div>
      </section>
    </>
  );
}

function FaqPage({ onNav }) {
  const groups = [
    {
      title: 'The system',
      items: [
        ['How is this different from a shampoo or oil?', 'Shampoos and oils work only on the surface. This system works inside and out — internal support addresses the root imbalance, while external care supports the follicle directly. It is also Prakriti-specific, not gender-based.'],
        ['Who is this for?', 'Currently, only Vata Prakriti types. If you have dry hair, dandruff, stress-driven hair fall, or cold sensitivity, take the diagnostic to confirm your type.'],
        ['What is included in the kit?', 'Sesame scalp oil · growth oil · 100g herbal powder wash · Ashwagandha KSM-66 (500mg) · copper measuring spoon · marked mixing bowl · ritual card. Seven components in total.'],
        ['How much time does the ritual take?', 'The system fits entirely within your existing routine. External care takes minutes at bath time. Internal support is one step with breakfast. Zero extra time required.'],
      ],
    },
    {
      title: 'Results & safety',
      items: [
        ['How long before I see results?', 'Ayurvedic systems work gradually — the body needs time to rebalance. Early signs of improvement typically appear within the first few weeks. Full results require consistent use over months. Individual results vary based on your Prakriti and current imbalance.'],
        ['Is it safe? Any side effects?', 'All ingredients are classical Ayurvedic — validated by both ancient texts and modern research. Externally tested for purity and safety. Consult a doctor if you are pregnant or have a medical condition.'],
        ['What if it does not work for me?', 'If the ritual does not show results after 12 weeks, we will issue a full refund — no questions asked. That confidence comes from the founder testing process.'],
        ['Is it free of synthetics, parabens, and sulphates?', 'Yes. Nothing synthetic. Entirely classical formulation. Kaolin clay is included with doctor approval — it provides body and lift without dryness (Laghutva property).'],
      ],
    },
    {
      title: 'Pricing & access',
      items: [
        ['What does it cost?', '₹999 for members (₹99 one-time lifetime membership). Non-members: ₹1,499. Effective first-kit cost is ₹900 with the ₹99 welcome coupon.'],
        ['Why a waitlist?', 'Two reasons. First — 150 kits per month, all handmade using the Kashaya method. Not designed to scale. Second — we filter by Prakriti. Giving the wrong kit to the wrong type produces poor results. The waitlist is a quality filter.'],
        ['What is the membership?', '₹99 one-time, lifetime. Not a subscription. Member pricing is permanent. Includes a ₹99 welcome coupon off the first kit.'],
        ['Why no advertising?', '"Prakriti Wellness will never advertise. Our work speaks. Your hair will too." Growth happens through word of mouth and a Community Partner network — zero paid acquisition.'],
      ],
    },
    {
      title: 'Prakriti basics',
      items: [
        ['What is Prakriti?', 'In Ayurveda, every person\'s body is made up of three doshas — Vata (air), Pitta (fire), and Kapha (earth and water). Your unique combination of these three is your Prakriti — and it determines everything from hair type to digestion to stress response.'],
        ['How accurate is the quiz?', 'The diagnostic covers 9 questions across hair, body, and lifestyle. It identifies the dominant dosha accurately in approximately 70–80% of cases. For edge cases, we offer a personal consultation.'],
        ['What if I have a dual Prakriti?', 'Very common — Vata-Pitta, Pitta-Kapha, and others. Your dominant dosha determines the primary treatment direction. Dual-specific protocols are planned for a future phase.'],
      ],
    },
  ];

  return (
    <>
      <section className="page hero" style={{ textAlign: 'center' }}>
        <Pill>FAQ</Pill>
        <h1 className="h-display" style={{ marginTop: 16, margin: '16px auto 0' }}>
          Questions<br/><em className="accent">we hear often.</em>
        </h1>
        <p className="deck" style={{ margin: '16px auto 0' }}>
          If your question is not here, reach out on WhatsApp. A real person will respond within 7 days.
        </p>
      </section>

      {groups.map(g => (
        <section key={g.title} className="section page">
          <SectionHead eyebrow={g.title} />
          <div>
            {g.items.map(([q, a]) => <FaqItem key={q} q={q} a={a} />)}
          </div>
        </section>
      ))}

      <section className="section dark">
        <div className="page">
          <h2 className="h-section" style={{ fontSize: 'clamp(40px, 6vw, 72px)', color: 'var(--paper)', maxWidth: '18ch' }}>
            Still have questions?
          </h2>
          <p style={{ color: 'rgba(255,255,255,0.8)', maxWidth: '48ch', marginTop: 12 }}>
            Ask us directly on WhatsApp. A real person will respond — within 7 days.
          </p>
          <div className="flex" style={{ marginTop: 28 }}>
            <button className="btn accent" onClick={() => onNav('waitlist')}>Apply for access →</button>
            <button className="btn ghost" style={{ borderColor: 'var(--paper)', color: 'var(--paper)' }} onClick={() => onNav('quiz')}>Discover your Prakriti</button>
          </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>
  );
}

Object.assign(window, { ResearchPage, FaqPage });