/* =================================================
   Page sections — Hero, Empathy, Conditions, DAHT,
   Compare, Pillars, Founder, Stories, FAQ, Booking, Footer
   ================================================= */

/* ---------- Hero ---------- */
const Hero = () => (
  <section className="hero" id="top" data-screen-label="01 Hero">
    <div className="hero__deco" />
    <div className="wrap">
      <div className="hero__grid">
        <div className="hero__copy">
          <div className="award">
            <span className="award__seal">★</span>
            <span className="award__text">
              <span className="t1">Economic Times · 2025</span>
              <span className="t2">Best Homeopathy Clinic of the Year</span>
            </span>
          </div>
          <h1 className="editorial">
            Put an end to long term <em>chronic illness</em>
          </h1>
          <p className="hero__sub">
            For 50 years, <b>Dr. Subhash Chandar</b> has resolved what other doctors call "manageable, not curable" — psoriasis, asthma, Crohn's, arthritis, paralysis, dengue. Over <b>6,000 patients</b> have walked out chronic-disease-free, most saving <b>₹2 lakh or more</b> on what they'd already spent elsewhere.
          </p>
          <div className="hero__ctas">
            <a href="#book" className="btn btn--primary btn--lg">
              Book a free consult <span className="arrow" />
            </a>
            <a href="#daht" className="btn btn--ghost">What is DAHT?</a>
          </div>
          <div className="hero__trust">
            <div className="hero__trust-item">
              <span className="hero__trust-num">6,000<sup style={{fontSize:14,color:'var(--red-500)'}}>+</sup></span>
              <span className="hero__trust-lbl">Patients treated</span>
            </div>
            <div className="hero__trust-item">
              <span className="hero__trust-num">50+</span>
              <span className="hero__trust-lbl">Years of practice</span>
            </div>
            <div className="hero__trust-item">
              <span className="hero__trust-num">4.7<span style={{fontSize:16, color:'#F5A623', marginLeft:4}}>★</span></span>
              <span className="hero__trust-lbl">on Google</span>
            </div>
            <div className="hero__trust-item">
              <span className="hero__trust-num">₹2L<sup style={{fontSize:14,color:'var(--red-500)'}}>+</sup></span>
              <span className="hero__trust-lbl">Avg. saved vs. corporate hospitals</span>
            </div>
          </div>
        </div>
        <div>
          <BookingFormCompact />
        </div>
      </div>
    </div>
  </section>
);

/* ---------- Press strip ---------- */
const TrustStrip = () => (
  <div className="truststrip">
    <div className="wrap">
      <div className="truststrip__row">
        <span className="truststrip__label">As featured & recognized in</span>
        <div className="truststrip__items">
          <div className="truststrip__item">
            <Icon.Trophy width="20" height="20" style={{color:'var(--red-500)'}} />
            <span>The Economic Times<small>Best Homeo Clinic '25</small></span>
          </div>
          <div className="truststrip__item">
            <span style={{fontFamily:'var(--font-display)', fontSize:22, color:'var(--navy-900)'}}>DC</span>
            <span>Deccan Chronicle<small>"New cure for viral diseases"</small></span>
          </div>
          <div className="truststrip__item">
            <span style={{display:'inline-flex', alignItems:'center', gap:2, fontSize:18, fontWeight:800}}>
              <span style={{color:'#4285F4'}}>G</span>
              <span style={{color:'#EA4335'}}>o</span>
              <span style={{color:'#FBBC05'}}>o</span>
              <span style={{color:'#4285F4'}}>g</span>
              <span style={{color:'#34A853'}}>l</span>
              <span style={{color:'#EA4335'}}>e</span>
            </span>
            <span style={{display:'flex', flexDirection:'column'}}>
              <span className="star">★★★★★</span>
              <small>4.7 on Google</small>
            </span>
          </div>
          <div className="truststrip__item">
            <span style={{color:'#2BA9F2', fontFamily:'var(--font-display)', fontSize:18, fontWeight:700}}>practo</span>
            <span style={{display:'flex', flexDirection:'column'}}>
              <span className="star">★★★★★</span>
              <small>4.5 on Practo</small>
            </span>
          </div>
          <div className="truststrip__item">
            <Icon.Trophy width="20" height="20" style={{color:'var(--ink-500)'}} />
            <span>Faculty of Homeopathy<small>MF Hom, Great Britain</small></span>
          </div>
        </div>
      </div>
    </div>
  </div>
);

/* ---------- Empathy section — "Is this you?" mosaic ---------- */
const EMPATHY_CARDS = [
  {
    quote: "I've spent lakhs on tests and second opinions. Every report says I'm \u2018fine.\u2019 But I'm not fine.",
    response: "We start by listening, not testing.",
  },
  {
    quote: "I tried homeopathy before. Nothing happened. I don't believe in it anymore.",
    response: "One practitioner's failure isn't homeopathy's failure. The doctor matters more than the system.",
  },
  {
    quote: "They told me it's chronic. That I'd have to live with it forever.",
    response: "Chronic doesn't always mean permanent.",
  },
  {
    quote: "I'm on seven medications. Each one is supposed to fix the side effects of the last one.",
    response: "Our goal is fewer medicines, not more.",
  },
  {
    quote: "The side effects are becoming worse than the illness itself.",
    response: "Our remedies don't add new problems while solving old ones.",
  },
  {
    quote: "I just want to stop being sick. I want my life back.",
    response: "That's exactly what we're here for.",
  },
];

const Empathy = () => (
  <section className="empathy2" data-screen-label="02 Empathy">
    <div className="empathy2__deco" aria-hidden="true">
      <span className="empathy2__deco-quote">"</span>
    </div>
    <div className="wrap empathy2__inner">
      <div className="empathy2__head">
        <div>
          <p className="eyebrow">Does this sound like you?</p>
          <h2 className="empathy2__title">
            If even <u>one</u> of these is your story,<br/>
            <em>you belong here.</em>
          </h2>
        </div>
        <p className="empathy2__lede">
          Of the <b>6,000+ patients</b> we've treated, most arrived saying something like this.<br/><br/><span className="empathy2__lede-em">We've heard every sentence on these cards. We know what comes next.</span>
        </p>
      </div>

      <div className="empathy2__grid">
        {EMPATHY_CARDS.map((c, i) => (
          <article
            className="ec"
            key={i}
            data-comment-anchor={`empathy-card-${i+1}`}
          >
            <span className="ec__quote-mark" aria-hidden="true">"</span>
            <p className="ec__quote">{c.quote}</p>
            <p className="ec__response">{c.response}</p>
          </article>
        ))}
      </div>

      <div className="empathy2__cta">
        <div className="empathy2__cta-body">
          <p className="empathy2__cta-eyebrow">If you saw yourself anywhere on this page</p>
          <p className="empathy2__cta-line">
            You're not the first. And you're not as stuck as you've been told.
          </p>
        </div>
        <a href="#conditions" className="btn btn--primary">
          See conditions we treat <span className="arrow" />
        </a>
      </div>
    </div>
  </section>
);

/* ---------- Conditions grid ---------- */
const CONDITIONS = [
  { n: "01", title: "Dengue & Viral Fevers", desc: "High fever, body ache, falling platelets. DAHT — our proprietary therapy — typically brings fever down within 24–48 hours." },
  { n: "02", title: "Arthritis & Joint Pain", desc: "Osteoarthritis, rheumatoid arthritis, gout — managed without surgery or lifelong painkillers. We've helped patients postpone or avoid joint replacement." },
  { n: "03", title: "Spondylosis & Back Pain", desc: "Chronic neck and back pain that painkillers only manage. We work on the underlying cause — and reduce dependence on medication." },
  { n: "04", title: "Paralysis", desc: "Recent-onset paralysis treated with consistent positive outcomes. Time matters — the earlier we start, the more function we recover." },
  { n: "05", title: "Asthma", desc: "Wheezing, breathlessness, inhaler dependence. We treat the cause, not the flare. Many patients have been weaned off long-term steroids." },
  { n: "06", title: "Crohn's Disease", desc: "Chronic digestive inflammation with no cure in mainstream medicine. We've helped patients reach lasting remission and return to normal life." },
  { n: "07", title: "Chronic Liver Disease", desc: "Cirrhosis and fibrosis where conventional medicine offers only monitoring. We slow the damage and improve daily function." },
  { n: "08", title: "Guillain-Barré Syndrome (GBS)", desc: "A neurological emergency where the immune system attacks the nerves. Allopathy has no cure. Our patients have walked out fully recovered." },
  { n: "09", title: "Psoriasis", desc: "Red, itchy, scaly patches that allopathy suppresses but rarely clears. Our protocol targets the root — many patients see lasting relief." },
];

const Conditions = () => (
  <section className="section" id="conditions" data-screen-label="03 Conditions">
    <div className="wrap">
      <div className="sec-head sec-head--center">
        <span className="eyebrow">What we treat</span>
        <h2 className="sec-head__title">
          Chronic conditions where <em>others said no.</em>
        </h2>
        <p className="sec-head__sub">
          Most of our patients walk in after the second specialist. The third. Sometimes the seventh. Below are nine of the conditions we see most often — and treat most successfully.
        </p>
      </div>
      <div className="conds">
        {CONDITIONS.map((c) => (
          <div className="cond" key={c.n} data-comment-anchor={`cond-${c.title.toLowerCase().replace(/\s/g,'-')}`}>
            <span className="cond__num">{c.n}</span>
            <h3 className="cond__title">{c.title}</h3>
            <p className="cond__desc">{c.desc}</p>
            <span className="cond__arrow"><Icon.ArrowR width="10" height="10" /></span>
          </div>
        ))}
      </div>
      <div style={{textAlign:'center', marginTop:48}}>
        <p style={{color:'var(--ink-500)', fontSize:14, marginBottom:16}}>
          Don't see your condition? We treat over 30 chronic and viral diseases.
        </p>
        <a href="#book" className="btn btn--ghost">Ask about your condition</a>
      </div>
    </div>
  </section>
);

/* ---------- Video testimonials (tabbed by speciality) ---------- */
const initialsFrom = (n) => (n || "").split(/\s+/).slice(0,2).map(w => w[0]).join("").toUpperCase();

const TestimonialCard = ({ v, accent }) => {
  if (v.type === "post") {
    // Find the slug for this post by matching against speciality data
    let slug = "", idx = 0;
    for (const s of TESTIMONIAL_SPECIALITIES) {
      const arr = VIDEO_TESTIMONIALS[s.key] || [];
      const i = arr.findIndex(x => x === v);
      if (i >= 0) { slug = s.key; idx = i; break; }
    }
    return (
      <a className="vt-card vt-card--post" href={`case-study.html?case=${slug}&idx=${idx}`} data-comment-anchor={`vt-${(v.name||"").toLowerCase().replace(/\s/g,'-')}`}>
        <div className="vt-card__ba">
          <div className="vt-card__ba-half" style={{
            background: `linear-gradient(135deg, ${accent} 0%, color-mix(in oklab, ${accent} 65%, #000) 100%)`
          }}>
            <span className="vt-card__ba-label">Before</span>
          </div>
          <div className="vt-card__ba-half" style={{
            background: `linear-gradient(135deg, color-mix(in oklab, ${accent} 35%, #fff) 0%, color-mix(in oklab, ${accent} 15%, #fff) 100%)`
          }}>
            <span className="vt-card__ba-label vt-card__ba-label--dark">After</span>
          </div>
          <span className="vt-card__ba-tag">{v.span}</span>
        </div>
        <div className="vt-card__body">
          <p className="vt-card__quote">"{v.headline}"</p>
          <div className="vt-card__meta">
            <span className="vt-card__name">{v.name}{v.age ? `, ${v.age}` : ""}</span>
            <span className="vt-card__loc">{v.loc} · {v.years}</span>
          </div>
          <span className="vt-card__readmore">Read case study →</span>
        </div>
      </a>
    );
  }
  return (
    <a className="vt-card" href={`testimonials.html#${v.slug || ""}`} data-comment-anchor={`vt-${(v.name||"").toLowerCase().replace(/\s/g,'-')}`}>
      <div className="vt-card__poster" style={{
        background: `linear-gradient(135deg, ${accent} 0%, color-mix(in oklab, ${accent} 60%, #000) 100%)`
      }}>
        <span className="vt-card__monogram">{initialsFrom(v.name)}</span>
        <span className="vt-card__dur">{v.dur}</span>
        <span className="vt-card__play" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
        </span>
      </div>
      <div className="vt-card__body">
        <p className="vt-card__quote">"{v.headline}"</p>
        <div className="vt-card__meta">
          <span className="vt-card__name">{v.name}{v.age ? `, ${v.age}` : ""}</span>
          <span className="vt-card__loc">{v.loc} · {v.years}</span>
        </div>
      </div>
    </a>
  );
};

const VideoTestimonials = () => {
  const [active, setActive] = React.useState(TESTIMONIAL_SPECIALITIES[0].key);
  const spec = TESTIMONIAL_SPECIALITIES.find(s => s.key === active);
  const items = (VIDEO_TESTIMONIALS[active] || []).slice(0, 3);

  return (
    <section className="section section--alt" id="testimonials" data-screen-label="04 Testimonials">
      <div className="wrap">
        <div className="sec-head sec-head--center">
          <span className="eyebrow">In their own words</span>
          <h2 className="sec-head__title">
            Hear it from <em>our patients.</em>
          </h2>
          <p className="sec-head__sub">
            Real recoveries — video interviews and before/after stories. Pick a speciality to see patient testimonials for that condition.
          </p>
        </div>

        <div className="vt-tabs" role="tablist" aria-label="Speciality">
          {TESTIMONIAL_SPECIALITIES.map((s) => (
            <button
              key={s.key}
              role="tab"
              aria-selected={s.key === active}
              className={`vt-tab${s.key === active ? " is-active" : ""}`}
              onClick={() => setActive(s.key)}
            >
              {s.label}
              <span className="vt-tab__count">{(VIDEO_TESTIMONIALS[s.key] || []).length}</span>
            </button>
          ))}
        </div>

        <div className="vt-grid">
          {items.map((v, i) => (
            <TestimonialCard key={`${active}-${i}`} v={v} accent={spec.accent} />
          ))}
        </div>

        <div className="vt-foot">
          <a href={`testimonials.html#${active}`} className="btn btn--primary">
            See more stories <span className="arrow" />
          </a>
          <a href="testimonials.html" className="btn btn--ghost">All testimonials</a>
        </div>
      </div>
    </section>
  );
};

/* ---------- DAHT section ---------- */
const Daht = () => (
  <section className="daht" id="daht" data-screen-label="04 DAHT">
    <div className="wrap daht__inner">
      <div className="daht__grid">
        <div className="daht__copy">
          <span className="eyebrow eyebrow--on-dark">Our breakthrough — DAHT therapy</span>
          <h2 className="sec-head__title on-dark daht__title">
            A novel therapy <br/>we <em>invented</em> in 2000.
          </h2>
          <p className="lede lede--on-dark daht__sub">
            <b style={{color:'#fff'}}>Dynamised Auto-Haemo Therapy (DAHT)</b> is a research-led homeopathic process that
            prepares a potentised remedy from the patient's own infected fluid. The remedy inactivates the causative
            virus or toxin, letting the body's own immune system finish the job — faster, safer, and with no risk of resistance.
          </p>
          <p className="lede lede--on-dark daht__sub" style={{marginTop:0}}>
            First disclosed by Dr. Subhash Chandar to <i>Deccan Chronicle</i> in October 2000.
            Successfully applied across <b style={{color:'#fff'}}>9+ viral epidemics</b> in humans and animals — Chikungunya, Dengue, Hepatitis B/C, Foot-and-mouth, Blue-tongue, and most recently COVID.
          </p>
          <div className="hero__ctas" style={{marginTop:8}}>
            <a href="#book" className="btn btn--primary">Talk to Dr. Subhash <span className="arrow" /></a>
            <a href="#stories" className="btn btn--ghost-light">See patient stories</a>
          </div>
        </div>
        <div className="daht__panel">
          <p className="daht__panel-title">Why DAHT works</p>
          <ul className="daht__list">
            <li><span><b>Specific to your virus or toxin.</b> The remedy is made from your own infected fluid — perfectly tuned to your case.</span></li>
            <li><span><b>No risk of resistance.</b> Unlike antibiotics, the medicine is always new — viruses cannot evolve around it.</span></li>
            <li><span><b>Safe alongside allopathy.</b> Acts dynamically, not chemically. Can be combined with hospital treatment if needed.</span></li>
            <li><span><b>Fast acting.</b> Most viral fevers resolve in <b>24–48 hours.</b> Some chronic patients feel relief within 15 minutes.</span></li>
            <li><span><b>No side effects.</b> No steroids, no chemicals — works at the energetic level of the body.</span></li>
          </ul>
        </div>
      </div>
      <div className="daht__stats">
        <div className="daht__stat">
          <span className="daht__stat-n">9<span className="unit">+</span></span>
          <span className="daht__stat-l">Viral epidemics treated successfully — across human & animal populations</span>
        </div>
        <div className="daht__stat">
          <span className="daht__stat-n">24<span className="unit">h</span></span>
          <span className="daht__stat-l">Typical time to fever resolution in dengue & chikungunya cases</span>
        </div>
        <div className="daht__stat">
          <span className="daht__stat-n">2000</span>
          <span className="daht__stat-l">Year DAHT was first published in the Indian press by Dr. Subhash</span>
        </div>
      </div>
    </div>
  </section>
);

/* ---------- Comparison ---------- */
const Compare = () => (
  <section className="section section--alt" id="compare" data-screen-label="05 Compare">
    <div className="wrap">
      <div className="sec-head sec-head--center">
        <span className="eyebrow">A different approach</span>
        <h2 className="sec-head__title">
          Why patients come to us <em>after</em> everything else.
        </h2>
      </div>
      <div className="compare">
        <div className="compare__col">
          <p className="compare__hint">The usual experience</p>
          <h3 className="compare__head">Other clinics & hospitals</h3>
          <ul className="compare__list">
            <li className="no">Symptoms suppressed, root cause untouched</li>
            <li className="no">Lifelong dependence on steroids or painkillers</li>
            <li className="no">"Manageable, not curable" prognosis</li>
            <li className="no">₹2–10 lakh+ in tests, scans, hospitalisation</li>
            <li className="no">Side effects compounded by more medication</li>
            <li className="no">3-minute consults, same protocol for every patient</li>
          </ul>
        </div>
        <div className="compare__col compare__col--ours">
          <p className="compare__hint">At New Life Advanced Homeo</p>
          <h3 className="compare__head">Our DAHT-led approach</h3>
          <ul className="compare__list">
            <li className="yes">Treat the root cause — virus, toxin, or constitutional weakness</li>
            <li className="yes">Wean off allopathic dependency safely, in your timeline</li>
            <li className="yes">Curative outcomes documented across 6,000+ patients</li>
            <li className="yes">A fraction of corporate-hospital costs</li>
            <li className="yes">Zero chemical side effects — safe in pregnancy, children, elderly</li>
            <li className="yes">Long, careful consults. Feedback-driven adjustments.</li>
          </ul>
        </div>
      </div>
    </div>
  </section>
);

/* ---------- Founder section ---------- */
const Founder = () => (
  <section className="founder" id="doctor" data-screen-label="06 Doctor">
    <div className="wrap">
      <div className="founder__grid">
        <div className="founder__photo">
          <img src="assets/images/doctor_photo.jpeg" alt="Dr. Subhash Chandar at the New Life Advanced Homeo clinic" />
          <div className="founder__sig">
            <span className="name">Dr. Subhash Chandar</span>
            <span className="role">Founder · MBBS · MF Hom (UK)</span>
          </div>
        </div>
        <div className="founder__body">
          <span className="eyebrow eyebrow--on-dark">Meet our founder</span>
          <h2 className="sec-head__title on-dark founder__title">
            Fifty years of practice. <br/>One <em>relentless</em> question:<br/>
            "What if it could be cured?"
          </h2>
          <p className="lede lede--on-dark">
            Dr. Subhash Chandar graduated MBBS from Gandhi Medical College in 1973 and built a thriving allopathic
            practice in Mancherial. Dissatisfied with the limits of conventional medicine for chronic disease, he
            pursued homeopathy at the prestigious <b style={{color:'#fff'}}>Faculty of Homeopathy, Great Britain</b>,
            earning the MF Hom in 2010 — a post-graduate diploma open only to qualified MBBS doctors.
          </p>
          <blockquote className="founder__quote">
            "When I started, patients told me homeopathy was slow.
            Today they call it the only thing that worked.
            That's the difference between treating the disease and treating the person."
          </blockquote>
          <div className="founder__creds">
            <div className="founder__cred">
              <span className="k">Qualification</span>
              <span className="v">MBBS, Gandhi Medical College, 1973</span>
            </div>
            <div className="founder__cred">
              <span className="k">Post-graduate</span>
              <span className="v">MF Hom, Faculty of Homeopathy, UK</span>
            </div>
            <div className="founder__cred">
              <span className="k">Practising since</span>
              <span className="v">1973 · over five decades</span>
            </div>
            <div className="founder__cred">
              <span className="k">Inventor of</span>
              <span className="v">DAHT — disclosed in press, 2000</span>
            </div>
            <div className="founder__cred">
              <span className="k">Honoured by</span>
              <span className="v">Ex-CM Rosaiah, Min. Etela Rajendra</span>
            </div>
            <div className="founder__cred">
              <span className="k">Now recognised by</span>
              <span className="v">The Economic Times — Best Homeo Clinic 2025</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ---------- Awards & Recognition ---------- */
const AWARDS = [
  {
    org: "The Economic Times",
    title: "Best Homeopathy Clinic of the Year",
    year: "2025",
    note: "National recognition for outcomes in chronic disease management.",
    accent: "#C8102E",
    src: "assets/awards/awards_et_now_2025.png",
  },
  {
    org: "Times Health Excellence",
    title: "Most Trusted Homeopathy Practitioner",
    year: "2023",
    note: "Awarded to Dr. Subhash Chandar for sustained patient outcomes.",
    accent: "#1A1453",
  },
  {
    org: "Indian Institute of Homeopathy",
    title: "Lifetime Achievement Award",
    year: "2021",
    note: "For five decades of contribution to homeopathic medicine.",
    accent: "#7A4D17",
  },
  {
    org: "Government of Telangana",
    title: "State Recognition for DAHT during Dengue Outbreak",
    year: "2019",
    note: "Acknowledged for treating 400+ dengue patients through DAHT protocol.",
    accent: "#1F8A5B",
  },
  {
    org: "World Homeopathy Congress",
    title: "Invited Speaker — DAHT Protocol Presentation",
    year: "2018",
    note: "Presented case studies on autoimmune and viral conditions.",
    accent: "#2A6FDB",
  },
  {
    org: "Andhra Pradesh Medical Council",
    title: "Distinguished Service Award",
    year: "2016",
    note: "For contributions to community healthcare and research.",
    accent: "#8E2A4C",
  },
];

const Awards = () => {
  const railRef = React.useRef(null);
  const scroll = (dir) => {
    const el = railRef.current;
    if (!el) return;
    const card = el.querySelector(".aw-reel");
    const step = card ? card.getBoundingClientRect().width + 20 : 320;
    el.scrollBy({ left: dir * step, behavior: "smooth" });
  };

  // Auto-scroll the reel every 2s; pause for 8s after user interaction
  React.useEffect(() => {
    const el = railRef.current;
    if (!el) return;
    let pausedUntil = 0;
    const tick = () => {
      if (Date.now() < pausedUntil) return;
      const card = el.querySelector(".aw-reel");
      const step = card ? card.getBoundingClientRect().width + 20 : 320;
      const atEnd = el.scrollLeft + el.clientWidth + 10 >= el.scrollWidth;
      if (atEnd) {
        el.scrollTo({ left: 0, behavior: "smooth" });
      } else {
        el.scrollBy({ left: step, behavior: "smooth" });
      }
    };
    const timer = setInterval(tick, 2000);
    const onInteract = () => { pausedUntil = Date.now() + 8000; };
    el.addEventListener("pointerdown", onInteract);
    el.addEventListener("wheel", onInteract, { passive: true });
    return () => {
      clearInterval(timer);
      el.removeEventListener("pointerdown", onInteract);
      el.removeEventListener("wheel", onInteract);
    };
  }, []);

  return (
    <section className="section section--alt awards" id="awards" data-screen-label="07 Awards">
      <div className="wrap">
        <div className="sec-head sec-head--center">
          <span className="eyebrow">Recognition</span>
          <h2 className="sec-head__title">
            Awards & <em>recognition.</em>
          </h2>
          <p className="sec-head__sub">
            Fifty years of practice, recognised by the press, the profession, and the public health system.
          </p>
        </div>

        <div className="awards__reel-wrap">
          <button className="awards__nav awards__nav--prev" onClick={() => scroll(-1)} aria-label="Previous">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
          </button>
          <div className="awards__reel" ref={railRef}>
            {AWARDS.map((a, i) => (
              <article className="aw-reel" key={i} style={{"--accent": a.accent}}>
                <image-slot
                  id={`award-${i + 1}`}
                  shape="rect"
                  src={a.src}
                  placeholder={`${a.org} · ${a.year}`}
                  style={{ width: "100%", height: "100%", display: "block", position: "absolute", inset: 0 }}
                ></image-slot>
                <div className="aw-reel__year">{a.year}</div>
                <div className="aw-reel__caption">
                  <span className="aw-reel__org">{a.org}</span>
                  <h3 className="aw-reel__title">{a.title}</h3>
                  <p className="aw-reel__note">{a.note}</p>
                </div>
              </article>
            ))}
          </div>
          <button className="awards__nav awards__nav--next" onClick={() => scroll(1)} aria-label="Next">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 6l6 6-6 6"/></svg>
          </button>
        </div>

        <p className="awards__foot">
          Press features in <b>The Hindu</b>, <b>Times of India</b>, <b>Deccan Chronicle</b>, and <b>Sakshi</b> — across 50 years of practice.
        </p>
      </div>
    </section>
  );
};

/* ---------- Patient stories ---------- */
const STORIES = [
  {
    cond: "Guillain-Barré Syndrome",
    quote: "I came in unable to use my hands.",
    body: "Bengaluru's best hospitals had treated me for months with no improvement. Dr. Subhash got me walking again within weeks. I cannot describe what this clinic did for my family.",
    name: "Suresh Chandra",
    loc: "Bengaluru → Hyderabad",
    color: "#1A1453",
  },
  {
    cond: "Crohn's Disease",
    quote: "Five years of pain. Gone in three months.",
    body: "I'd flown between Mumbai and Hyderabad seeing specialists. Surgeries were discussed. With DAHT and homeopathic constitutional treatment, my IBS-like flares simply stopped.",
    name: "Anita R.",
    loc: "Mumbai",
    color: "#C8102E",
  },
  {
    cond: "Dengue (acute)",
    quote: "Fever was gone the next morning.",
    body: "Platelets at 32,000. The corporate hospital wanted to admit me. Dr. Subhash gave one dose. The next morning fever was gone, platelets climbing. ₹1.8 lakh saved.",
    name: "Rapolu A.B.",
    loc: "Former MP · Hyderabad",
    color: "#221A66",
  },
];

const initials = (n) => n.split(/\s+/).slice(0,2).map(w=>w[0]).join("").toUpperCase();

const Stories = () => (
  <section className="section" id="stories" data-screen-label="07 Stories">
    <div className="wrap">
      <div className="sec-head sec-head--center">
        <span className="eyebrow">Patient stories</span>
        <h2 className="sec-head__title">
          The cases we are <em>known</em> for.
        </h2>
        <p className="sec-head__sub">
          Real recoveries from patients who travelled from across India after exhausting other options.
        </p>
      </div>
      <div className="stories">
        <article className="story story--feat" data-comment-anchor="story-featured">
          <div className="feat__media">
            <button className="feat__play" aria-label="Play patient testimonial">▶</button>
            <div className="feat__overlay">
              <span className="feat__tag"><span className="live" />Video testimonial · 4:12</span>
              <span className="feat__cap">"Three months ago I couldn't climb stairs. Today I'm at my grandson's wedding."</span>
            </div>
          </div>
          <div className="feat__body">
            <span className="story__cond">Rheumatoid Arthritis · 14 years</span>
            <p className="story__quote">After years of methotrexate and steroids, my joints had calcified. Within eight weeks of treatment at New Life, I started walking unassisted. After six months, my CRP markers were normal for the first time in a decade.</p>
            <p className="story__body">"I had given up on ever being pain-free. My doctors at a leading Hyderabad hospital said the damage was permanent. I came to Dr. Subhash on a relative's recommendation, expecting nothing. What followed changed our entire family's understanding of medicine."</p>
            <div className="story__person">
              <div className="story__avatar" style={{background:'#C8102E'}}>{initials("Saraswati Devi")}</div>
              <div className="meta">
                <span className="name">Saraswati Devi, 62</span>
                <span className="loc">Karimnagar · Patient since 2023</span>
              </div>
            </div>
          </div>
        </article>
        {STORIES.map((s) => (
          <article className="story" key={s.name}>
            <span className="story__cond">{s.cond}</span>
            <p className="story__quote">{s.quote}</p>
            <p className="story__body">{s.body}</p>
            <div className="story__person">
              <div className="story__avatar" style={{background:s.color}}>{initials(s.name)}</div>
              <div className="meta">
                <span className="name">{s.name}</span>
                <span className="loc">{s.loc}</span>
              </div>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- Pillars (Why us) ---------- */
const Pillars = () => (
  <section className="section section--cream" id="why" data-screen-label="08 Pillars">
    <div className="wrap">
      <div className="sec-head sec-head--center">
        <span className="eyebrow">Why we get results</span>
        <h2 className="sec-head__title">
          A practice built on <em>four convictions.</em>
        </h2>
      </div>
      <div className="pillars">
        <div className="pillar">
          <span className="pillar__num">01</span>
          <h3>Research-led, not ritual-led</h3>
          <p>We invented DAHT therapy and have published it in the press since 2000. Every difficult case is approached as a problem to solve, not a prescription to repeat.</p>
        </div>
        <div className="pillar">
          <span className="pillar__num">02</span>
          <h3>Holistic + individualised</h3>
          <p>Long consults. We study your life, history, family, mental and physical features — not just the symptom. Each remedy is tuned to <em>you</em>, not the disease label.</p>
        </div>
        <div className="pillar">
          <span className="pillar__num">03</span>
          <h3>Feedback-driven treatment</h3>
          <p>We don't disappear after the first dose. Regular check-ins. Recovery is monitored and the remedy is adjusted as your body responds. This is why our results are fast.</p>
        </div>
        <div className="pillar">
          <span className="pillar__num">04</span>
          <h3>Honest about limits</h3>
          <p>If surgery is unavoidable, we say so. If allopathy is needed alongside, we integrate. We don't promise miracles — we promise to try everything that has worked, repeatedly, for 50 years.</p>
        </div>
      </div>
    </div>
  </section>
);

/* ---------- FAQ ---------- */
const FAQS = [
  {
    q: "I've tried homeopathy before and it didn't work. Why would this be different?",
    a: "Failure of one homeopathic practitioner is not failure of homeopathy. The result depends entirely on the practitioner's depth of training, the time spent understanding the patient, and the willingness to adjust the remedy based on response. We invest long consults, study your full life context, and adapt actively. Patients who saw no improvement elsewhere often see results here within weeks."
  },
  {
    q: "Is homeopathy actually scientific or just placebo?",
    a: "Homeopathy is based on vast clinical data collected from human trials — over 1,400 documented remedies. Recovery is measurable in lab reports, imaging, and structural and functional changes — taken before and after treatment. Placebo cannot explain successful treatment in infants, animals, and unconscious patients, which we have done routinely."
  },
  {
    q: "How long will treatment take?",
    a: "It depends on your condition and how long you've had it. Acute viral diseases like dengue often resolve in 24–48 hours. Chronic conditions of 5–10 years usually show clear improvement within 4–8 weeks, with full resolution over 4–9 months. Some patients feel relief within 15 minutes of the first dose."
  },
  {
    q: "Can I continue my current allopathic medicines?",
    a: "Yes — please do not stop any medicine abruptly. Homeopathy works dynamically while conventional drugs work chemically; there is no clash. As you improve, we taper your other medications gradually in coordination with your existing consultant."
  },
  {
    q: "Are there side effects? Is it safe for children, elderly, or during pregnancy?",
    a: "Homeopathic medicines are highly diluted and prepared from natural materials. At potencies of 30C and above (which is what we use), they have no side effects, are not habit forming, and are safe across all ages — including infants, the elderly, and during pregnancy or lactation."
  },
  {
    q: "Do you give steroids hidden in the pills?",
    a: "Absolutely not. Adding steroids would destroy the homeopathic preparation's curative properties and alter its bitter-free taste. The fast recovery patients experience here is a function of correct remedy selection — not adulteration. We welcome any independent lab testing of our medicines."
  },
  {
    q: "How much will it cost?",
    a: "Our consultation and treatment costs are a small fraction of what corporate hospitals charge. Most of our patients save ₹2 lakh or more compared to prior treatment expenses. We do not have hidden fees or push expensive tests. Please call the clinic for current rates."
  },
  {
    q: "Where is the clinic and can I consult online?",
    a: "The clinic is in Jeedimetla, Hyderabad (off NH-44, near Suchitra Cross). We see patients in-person Mon–Sat (10 AM–2 PM, 4 PM–8 PM) and Sundays 10 AM–2 PM. For patients outside Hyderabad, we offer telephonic consults — many of our long-distance patients (Delhi, Mumbai, Bengaluru, Kakinada) are treated this way."
  },
];

const FAQ = () => {
  const [open, setOpen] = useState(0);
  return (
    <section className="faq" id="faq" data-screen-label="09 FAQ">
      <div className="wrap">
        <div className="faq__grid">
          <div>
            <span className="eyebrow">FAQs</span>
            <h2 className="sec-head__title" style={{marginTop:14}}>
              Things patients ask <em>before</em> they come.
            </h2>
            <p className="sec-head__sub" style={{marginTop:16}}>
              Still unsure? Call us at <b style={{color:'var(--navy-900)'}}>+91 9866196309</b> — we're happy to answer your specific concerns before you book.
            </p>
          </div>
          <div className="faq__list">
            {FAQS.map((f, i) => (
              <div className={"faq__row" + (open === i ? " is-open" : "")} key={i}>
                <button className="faq__head" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  <span>{f.q}</span>
                  <span className="faq__chev">⌄</span>
                </button>
                {open === i && <div className="faq__body">{f.a}</div>}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- Booking section (final) ---------- */
const Book = () => (
  <section className="book" id="book" data-screen-label="10 Book">
    <div className="wrap">
      <div className="book__grid">
        <div className="book__lhs">
          <span className="eyebrow">Take the next step</span>
          <h2 className="sec-head__title">
            Tell us about your case.<br/>
            We'll tell you if we can <em>help.</em>
          </h2>
          <p className="lede">
            Every appointment begins with a careful, honest conversation. If your condition is something we've treated successfully before, we'll explain how. If it isn't, we'll tell you that too — and point you toward the right care.
          </p>
          <div className="book__points">
            <span className="book__pt"><span><b>Free 15-minute call</b> to discuss your case before you commit to anything.</span></span>
            <span className="book__pt"><span><b>Honest assessment</b> — we'll say no if we're not the right fit.</span></span>
            <span className="book__pt"><span><b>Telephonic consults</b> available for patients outside Hyderabad.</span></span>
            <span className="book__pt"><span><b>All records confidential</b>. Bring your existing reports — they help.</span></span>
          </div>
          <div className="contact-grid">
            <div className="contact-card">
              <p className="k">Call us</p>
              <p className="v">+91 9866196309<small>Mon–Sat · 10 AM–2 PM & 4 PM–8 PM</small><small>Sun · 10 AM–2 PM</small></p>
            </div>
            <div className="contact-card">
              <p className="k">Visit clinic</p>
              <p className="v">Jeedimetla, Hyderabad<small>3rd Floor, Commercial Complex,<br/>Beside Bharat Petroleum,<br/>NH-44, after Suchitra Cross</small></p>
            </div>
          </div>
        </div>
        <div>
          <BookingFormFull />
        </div>
      </div>
    </div>
  </section>
);

/* ---------- Footer ---------- */
const Footer = () => (
  <footer className="foot" data-screen-label="11 Footer">
    <div className="wrap">
      <div className="foot__grid">
        <div className="foot__brand">
          <div className="foot__brand-row">
            <img src="assets/images/nlah_logo_white_transparent.png" alt="" />
            <div className="foot__brand-lock">
              <div className="l1">New Life Advanced Homeo</div>
              <div className="l2">New Hope for Difficult Diseases</div>
            </div>
          </div>
          <p>Recognized as Best Homeopathy Clinic 2025 by The Economic Times. Practising since 1973. Inventors of DAHT therapy.</p>
        </div>
        <div className="foot__col">
          <h5>Treatments</h5>
          <a href="#conditions">Conditions we treat</a>
          <a href="#daht">DAHT therapy</a>
          <a href="#compare">Our approach</a>
          <a href="#stories">Patient stories</a>
        </div>
        <div className="foot__col">
          <h5>Clinic</h5>
          <a href="#doctor">Dr. Subhash Chandar</a>
          <a href="#faq">FAQs</a>
          <a href="#book">Book appointment</a>
          <a href="#">Blog & press</a>
        </div>
        <div className="foot__col">
          <h5>Contact</h5>
          <span>+91 9866196309</span>
          <span>dr@newlifeadvancedhomeo.com</span>
          <span>Jeedimetla, Hyderabad</span>
          <span>NH-44, after Suchitra Cross</span>
        </div>
      </div>
      <div className="foot__bottom">
        <span>© 2026 New Life Advanced Homeo. All rights reserved.</span>
        <span>Disclaimer · Privacy · Terms</span>
      </div>
    </div>
  </footer>
);

/* ---------- Sticky CTA ---------- */
const StickyCTA = () => {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 800);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <a href="#book" className={"sticky-cta" + (show ? " is-visible" : "")}>
      Book Free Consult <span className="arrow" />
    </a>
  );
};

Object.assign(window, { Hero, TrustStrip, Empathy, Conditions, VideoTestimonials, Daht, Compare, Founder, Awards, Stories, Pillars, FAQ, Book, Footer, StickyCTA });