/* About, Conditions, Treatments, v1 visual language. */
const { useState, useEffect, useRef } = React;

/* ================= ABOUT ================= */
function About({ go }) {
  useReveal();
  return (
    <main>
      <section>
        <div className="wrap about-grid">
          <div className="about-text reveal">
            <Eyebrow>The practice</Eyebrow>
            <h2>Surgical precision, delivered with calm.</h2>
            <p><strong>{CLINIC.doctor}</strong> is a Senior Consultant Neurosurgeon at Yashoda Hospitals, Hitec City, and one of {CLINIC.city}'s most respected neuro-oncologists, with over 22 years of experience treating complex conditions of the brain and spine.</p>
            <p>From correcting spinal pathologies to removing benign and malignant brain and spine tumours, he performs intricate procedures using cutting-edge technology including neuro-navigation, endoscopes and operative microscopes, always staying current with the latest techniques to deliver the best possible outcomes.</p>
            <p>He has performed more than 7,000 elective neurosurgical operations, including complex tumour removal, minimally invasive neurosurgery and neurotrauma surgery, and has numerous publications and presentations in prestigious journals to his credit.</p>
            <ul className="about-list">
              {ABOUT_POINTS.map(pt => (
                <li key={pt}><span className="tick"><Icon name="check" size={13} stroke={3} /></span> {pt}</li>
              ))}
            </ul>
          </div>
          <div className="portrait reveal">
            <img className="portrait-photo" src="dr-reddy.jpg?v=286" alt={CLINIC.doctor} />
            <div className="portrait-scrim" />
            <h3>{CLINIC.doctor}</h3>
            <p>{CLINIC.doctorTitle}</p>
            <div className="creds">{CLINIC.creds.map(c => <span key={c}>{c}</span>)}</div>
          </div>
        </div>
      </section>

      <section className="soft-bg">
        <div className="wrap">
          <div className="sec-head reveal">
            <Eyebrow>At a glance</Eyebrow>
            <h2>Credentials &amp; training.</h2>
          </div>
          <div className="facts-grid">
            {QUICK_FACTS.map(f => (
              <div className="fact-card reveal" key={f.label}>
                <div className="ic"><Icon name={f.icon} size={22} /></div>
                <span className="fact-label">{f.label}</span>
                <p>{f.value}</p>
              </div>
            ))}
          </div>
          <div className="cv-grid">
            <div className="reveal">
              <h3 className="cv-title"><Icon name="cap" size={20} /> Education</h3>
              <ul className="tline">
                {EDUCATION.map(e => (
                  <li key={e.year}><span className="yr">{e.year}</span><h4>{e.degree}{e.honor ? ` · ${e.honor}` : ""}</h4><span className="where">{e.inst}</span></li>
                ))}
              </ul>
            </div>
            <div className="reveal">
              <h3 className="cv-title"><Icon name="building" size={20} /> Experience</h3>
              <ul className="tline">
                {CAREER.map((c, i) => (
                  <li key={i}><span className="yr">{c.period}</span><h4>{c.role}</h4><span className="where">{c.place}</span></li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section>
        <div className="wrap">
          <div className="sec-head reveal">
            <Eyebrow>Recognition</Eyebrow>
            <h2>Awards &amp; achievements.</h2>
          </div>
          <div className="honor-grid">
            {AWARDS.map((a, i) => (
              <div className="honor-card reveal" key={i}>
                <div className="ic"><Icon name="award" size={22} /></div>
                <p>{a}</p>
              </div>
            ))}
          </div>
          <div className="member-row reveal">
            <span className="member-label"><Icon name="shield" size={16} /> Professional membership</span>
            {MEMBERSHIPS.map((m, i) => (<span className="member-chip" key={i}>{m}</span>))}
          </div>
        </div>
      </section>

      <section className="soft-bg">
        <div className="wrap">
          <div className="sec-head reveal">
            <Eyebrow>Research</Eyebrow>
            <h2>Publications &amp; presentations.</h2>
          </div>
          <ul className="pub-list">
            {PUBLICATIONS.map((p, i) => (
              <li className="reveal" key={i}>
                <div className="pub-ic"><Icon name="doc" size={20} /></div>
                <div><h4>{p.title}</h4><span>{p.venue}</span></div>
              </li>
            ))}
          </ul>
        </div>
      </section>

      <TrustStrip />

      <section>
        <div className="wrap">
          <div className="sec-head reveal">
            <Eyebrow>The Patient Experience</Eyebrow>
            <h2>What guides every consultation.</h2>
          </div>
          <div className="why-grid">
            {WHY.map(w => (
              <div className="why-card reveal" key={w.n}>
                <div className="n">{w.n}</div><h3>{w.title}</h3><p>{w.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <LocationsSection go={go} />
      <CTABand go={go} />
    </main>
  );
}

/* ================= SPECIALITY ================= */
function Speciality({ go }) {
  useReveal();
  const groups = ["All", "Brain & Nerve", "Spine"];
  const [filter, setFilter] = useState("All");
  const [openId, setOpenId] = useState(null);
  const list = CONDITIONS.filter(c => filter === "All" || c.group === filter);
  const procGroups = ["Brain & Nerve Surgery", "Spine Surgery"];
  return (
    <main>
      <section>
        <div className="wrap">
          <div className="sec-head reveal" style={{ marginBottom: 30 }}>
            <Eyebrow>Conditions treated</Eyebrow>
            <h2>Brain, nerve &amp; spine conditions.</h2>
          </div>
          <div className="filterbar reveal">
            {groups.map(g => (
              <button key={g} className={"filter-pill" + (filter === g ? " active" : "")} onClick={() => { setFilter(g); setOpenId(null); }}>{g}</button>
            ))}
          </div>
          <div className="cond-grid">
            {list.map(c => {
              const open = openId === c.id;
              return (
                <div key={c.id} className={"cond-card reveal" + (open ? " open" : "")}>
                  <button className="cond-head" onClick={() => setOpenId(open ? null : c.id)}>
                    <div className="ic"><Icon name={c.icon} size={24} /></div>
                    <div className="meta">
                      <span className="cond-group">{c.group}</span>
                      <h3>{c.name}</h3>
                    </div>
                    <span className="cond-toggle"><Icon name={open ? "close" : "plus"} size={18} /></span>
                  </button>
                  <p className="cond-short">{c.short}</p>
                  {open && (
                    <div className="cond-detail">
                      <span className="lbl">Common signs</span>
                      <ul>{c.symptoms.map(s => <li key={s}><span className="tick"><Icon name="check" size={12} stroke={3} /></span>{s}</li>)}</ul>
                      <Btn icon="arrow" onClick={() => go("booking")}>Discuss this with Dr. Reddy</Btn>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
          <div className="cond-note reveal">
            <div className="ic"><Icon name="shield" size={26} /></div>
            <div>
              <b>Not sure what's causing your symptoms?</b>
              <span>That's exactly what a consultation is for. Bring any scans you have and we'll help you make sense of them.</span>
            </div>
            <Btn variant="light" icon="arrow" onClick={() => go("booking")}>Appointment</Btn>
          </div>
        </div>
      </section>

      <section className="soft-bg">
        <div className="wrap">
          <div className="sec-head reveal">
            <Eyebrow>Surgeries &amp; procedures</Eyebrow>
            <h2>The procedures Dr. Reddy performs.</h2>
            <p>From keyhole spine surgery to advanced brain procedures, and the many non-surgical treatments in between.</p>
          </div>
          {procGroups.map(g => {
            const items = TREATMENTS.filter(t => t.group === g);
            return (
              <div key={g} className="treat-group">
                <div className="treat-group-head reveal">
                  <h2 className="treat-group-title">{g}</h2>
                  <span className="treat-group-count">{items.length} procedures</span>
                </div>
                <div className="treat-grid">
                  {items.map(t => (
                    <div key={t.id} className="treat-card reveal">
                      <div className="top">
                        <div className="ic"><Icon name="shield" size={22} /></div>
                        <h3>{t.name}</h3>
                      </div>
                      <p className="treat-short">{t.short}</p>
                      <ul className="treat-points">
                        {t.points.map(p => <li key={p}><Icon name="check" size={15} stroke={2.2} />{p}</li>)}
                      </ul>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
          <div className="treat-reassure reveal">
            <Eyebrow>A gentle reminder</Eyebrow>
            <h3>Most patients never need an operation at all.</h3>
            <p>Listing every procedure can feel daunting, but our first instinct is always the least-invasive route. We'll only recommend surgery when it's clearly the best path for you.</p>
            <div className="book-cta-row treat-reassure-cta">
              <Btn contact="whatsapp" variant="whatsapp" icon="whatsapp">Message us on WhatsApp</Btn>
              <Btn contact="phone" variant="light" icon="phone">Call <ContactText kind="phone" /></Btn>
            </div>
          </div>
        </div>
      </section>
      <CTABand go={go} />
    </main>
  );
}

/* ================= WHY US ================= */
function WhyUs({ go }) {
  useReveal();

  const teamPillars = WHY_US_TEAM.map(t => ({
    icon: t.icon,
    title: t.title,
    text: t.short || t.text,
  }));

  const visitSteps = WHY_US_EXPERIENCE.map((j, i) => ({
    n: i + 1,
    title: j.title,
    text: j.short || j.text,
    tone: i < 2 ? "teal" : "gold",
  }));

  const recoverySteps = WHY_US_RECOVERY.map((j, i) => ({
    n: i + 1,
    title: j.title,
    text: j.short || j.text,
    tone: i === 1 ? "gold" : "teal",
  }));

  const valuePillars = [
    { icon: "star", title: WHY[0].title, text: WHY[0].short || WHY[0].text },
    { icon: "shield", title: WHY[1].title, text: WHY[1].short || WHY[1].text },
    { icon: "clock", title: WHY[2].title, text: WHY[2].short || WHY[2].text },
    { icon: "heart", title: WHY[3].title, text: WHY[3].short || WHY[3].text },
  ];

  const visitChips = [
    "Groundwork done before Dr. Reddy",
    "No repeating your story",
    "Options with real timelines",
    "Decisions with clarity",
  ];

  const recoveryChips = [
    "Admission walk-through",
    "Same team through surgery",
    "Follow-up you can reach",
  ];

  return (
    <main className="why-page">
      <section className="why-page-hero">
        <div className="wrap">
          <div className="why-hero-intro reveal">
            <Eyebrow>The Patient Experience</Eyebrow>
            <h2>Why patients choose Dr. Reddy.</h2>
            <p className="why-page-lede">Skilled surgery is only part of the story. Here is how our team works together, what you can expect at each step, and the principles behind every consultation.</p>
          </div>
        </div>
      </section>

      <section id="why-team" className="soft-bg">
        <div className="wrap">
          <div className="why-phase-head reveal">
            <Eyebrow>Our team</Eyebrow>
            <h3 className="why-journey-title">How we operate together.</h3>
          </div>
          <div className="why-pillars reveal">
            {teamPillars.map(p => (
              <div className="why-pillar" key={p.title}>
                <div className="why-pillar-icon" aria-hidden="true">
                  <Icon name={p.icon} size={24} stroke={1.7} />
                </div>
                <h3>{p.title}</h3>
                <p>{p.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="why-visit">
        <div className="wrap">
          <div className="why-phase-head reveal">
            <Eyebrow>What you&apos;ll experience</Eyebrow>
            <h3 className="why-journey-title">Care that&apos;s ready before you arrive.</h3>
          </div>
          <div className="journey-rail reveal">
            {visitSteps.map(s => (
              <div className={"journey-step journey-step--" + s.tone} key={s.n}>
                <div className="journey-dot">{s.n}</div>
                <h4>{s.title}</h4>
                <p>{s.text}</p>
              </div>
            ))}
          </div>
          <div className="journey-chips reveal">
            {visitChips.map(label => (
              <div className="journey-chip" key={label}>
                <Icon name="check" size={14} stroke={2.4} />
                <span>{label}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="why-recovery" className="soft-bg">
        <div className="wrap">
          <div className="why-phase-head reveal">
            <Eyebrow>Beyond the consultation</Eyebrow>
            <h3 className="why-journey-title">We don&apos;t stop when you leave the room.</h3>
          </div>
          <div className="journey-rail journey-rail--3 reveal">
            {recoverySteps.map(s => (
              <div className={"journey-step journey-step--" + s.tone} key={s.n}>
                <div className="journey-dot">{s.n}</div>
                <h4>{s.title}</h4>
                <p>{s.text}</p>
              </div>
            ))}
          </div>
          <div className="journey-chips journey-chips--3 reveal">
            {recoveryChips.map(label => (
              <div className="journey-chip" key={label}>
                <Icon name="check" size={14} stroke={2.4} />
                <span>{label}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="why-values">
        <div className="wrap">
          <div className="why-phase-head reveal">
            <Eyebrow>What we stand for</Eyebrow>
            <h3 className="why-journey-title">The principles behind every consultation.</h3>
          </div>
          <div className="why-pillars reveal">
            {valuePillars.map(p => (
              <div className="why-pillar" key={p.title}>
                <div className="why-pillar-icon" aria-hidden="true">
                  <Icon name={p.icon} size={24} stroke={1.7} />
                </div>
                <h3>{p.title}</h3>
                <p>{p.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <TrustStrip />
      <CTABand go={go} />
    </main>
  );
}

Object.assign(window, { About, Speciality, WhyUs });