/* ============ Interactive Home ============ */

const SERVES_PHRASES = [
  'Serving Tricity, Haryana, Punjab, Himachal & Worldwide',
  'Serving Chandigarh · Panchkula · Mohali',
  'Serving Haryana · Punjab · Himachal Pradesh',
  'Trusted Across North India & Worldwide',
  'Serving Shimla, Hisar, Jind & Beyond',
];
function RotatingServes() {
  const [idx, setIdx] = React.useState(0);
  const [fade, setFade] = React.useState(true);
  React.useEffect(() => {
    const t = setInterval(() => { setFade(false); setTimeout(() => { setIdx(i => (i+1) % SERVES_PHRASES.length); setFade(true); }, 300); }, 4000);
    return () => clearInterval(t);
  }, []);
  return <span style={{transition:'opacity .3s', opacity: fade ? 1 : 0}}>{SERVES_PHRASES[idx]}</span>;
}

const ROTATING_PHRASES = [
  'Personalized Fertility Treatment','Expert IVF Specialists','Trusted Fertility Care',
  'Compassionate IVF Support','IVF Treatment Tailored to You','Comprehensive Fertility Solutions',
  'Supporting Your Parenthood Journey','Leading Fertility Specialists','Modern IVF Technology & Care',
  'Helping Families Grow','Fertility Care You Can Trust','Evidence-Based Fertility Treatment',
  'Patient-Centered IVF Care','Experienced IVF Team'
];
function RotatingPhrase() {
  const [idx, setIdx] = React.useState(0);
  const [fade, setFade] = React.useState(true);
  React.useEffect(() => {
    const t = setInterval(() => { setFade(false); setTimeout(() => { setIdx(i => (i+1) % ROTATING_PHRASES.length); setFade(true); }, 300); }, 3500);
    return () => clearInterval(t);
  }, []);
  return <span style={{transition:'opacity .3s', opacity: fade ? 1 : 0}}>{ROTATING_PHRASES[idx]}</span>;
}

/* ---- cursor-parallax orbs ---- */
function HeroOrbs() {
  const wrap = useRef(null);
  useEffect(() => {
    const el = wrap.current; if (!el) return;
    const orbs = el.querySelectorAll('.orb');
    const onMove = (e) => {
      const cx = window.innerWidth/2, cy = window.innerHeight/2;
      const dx = (e.clientX - cx)/cx, dy = (e.clientY - cy)/cy;
      orbs.forEach((o,i)=>{
        const depth = (i+1)*10;
        o.style.transform = `translate(${dx*depth}px, ${dy*depth}px)`;
      });
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);
  return (
    <div className="hero-orbs" ref={wrap} aria-hidden="true">
      <span className="orb orb-1" /><span className="orb orb-2" />
      <span className="orb orb-3" /><span className="orb orb-4" />
    </div>
  );
}

/* ---- rotating word ---- */
function RotatingWord({ words }) {
  const [i, setI] = useState(0);
  useEffect(() => {
    const t = setInterval(()=>setI(v=>(v+1)%words.length), 2600);
    return () => clearInterval(t);
  }, []);
  return (
    <span className="rot-word">
      {words.map((w,idx)=>(
        <span key={w} className={'rot-item'+(idx===i?' on':'')}>{w}</span>
      ))}
      <span className="rot-ghost">{words[0]}</span>
    </span>
  );
}

/* ---- treatment finder quiz ---- */
function Finder() {
  const f = D.finder;
  const [pick, setPick] = useState(null);
  const rec = pick!=null ? D.treatments.find(t=>t.slug===f.options[pick].rec) : null;
  return (
    <div className="finder glass">
      <div className="finder-head">
        <span className="eyebrow">Treatment finder</span>
        <h3>{f.question}</h3>
        <p>{f.intro}</p>
      </div>
      <div className="finder-opts">
        {f.options.map((o,i)=>(
          <button key={i} className={'finder-opt'+(pick===i?' sel':'')} onClick={()=>setPick(i)}>
            <span className="fo-check">{pick===i ? <Icon name="check"/> : null}</span>
            <span><strong>{o.label}</strong><em>{o.sub}</em></span>
          </button>
        ))}
      </div>
      <div className={'finder-result'+(rec?' show':'')}>
        {rec && (
          <div className="fr-inner">
            <span className="fr-ic"><Icon name={rec.icon}/></span>
            <div className="fr-body">
              <span className="fr-label">A sensible starting point</span>
              <strong>{rec.name} - {rec.full}</strong>
              <p>{rec.short}</p>
            </div>
            <a href={L('/treatments/'+rec.slug)} className="btn btn-coral">Explore {rec.name} →</a>
          </div>
        )}
      </div>
    </div>
  );
}

/* ---- tabbed treatment explorer ---- */
function TreatExplorer() {
  const [active, setActive] = useState(D.treatments[0].slug);
  const t = D.treatments.find(x=>x.slug===active);
  return (
    <div className="explorer">
      <div className="explorer-tabs">
        {D.treatments.map(x=>(
          <button key={x.slug} className={'ex-tab'+(active===x.slug?' on':'')} onClick={()=>setActive(x.slug)}>
            {x.name}
          </button>
        ))}
      </div>
      <div className="explorer-panel card" key={t.slug}>
        <div className="ep-media">
          <Ph label={t.name} src={t.img} icon={t.icon} className="ep-ph" />
          {t.tag && <span className="pill ep-tag">{t.tag}</span>}
        </div>
        <div className="ep-body">
          <span className="treat-full">{t.full}</span>
          <h3>{t.name}</h3>
          <p>{t.overview.split('. ').slice(0,2).join('. ')}.</p>
          <div className="ep-facts">
            <div><Icon name="clock"/><span>{t.duration}</span></div>
            <div><Icon name="star"/><span>{t.success} {t.successLabel.split('(')[0]}</span></div>
          </div>
          <div className="ep-actions">
            <a href={L('/treatments/'+t.slug)} className="btn btn-purple">Full details →</a>
            <a href={L('/book')} className="link-arrow">Book this treatment →</a>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---- scrubbable process timeline ---- */
function ProcessTimeline() {
  const steps = D.treatments.find(t=>t.slug==='ivf').process;
  const [i, setI] = useState(0);
  return (
    <div className="timeline">
      <div className="tl-track">
        <div className="tl-line"><span className="tl-fill" style={{width:(i/(steps.length-1))*100+'%'}}/></div>
        {steps.map((s,idx)=>(
          <button key={idx} className={'tl-dot'+(idx<=i?' done':'')+(idx===i?' on':'')}
            onClick={()=>setI(idx)} aria-label={s.t}>
            <span>{idx+1}</span>
          </button>
        ))}
      </div>
      <div className="tl-content card" key={i}>
        <span className="tl-step-n">Step {i+1} of {steps.length}</span>
        <h3>{steps[i].t}</h3>
        <p>{steps[i].d}</p>
        <div className="tl-nav">
          <button className="btn btn-ghost" disabled={i===0} onClick={()=>setI(v=>Math.max(0,v-1))}>← Previous</button>
          <button className="btn btn-coral" disabled={i===steps.length-1} onClick={()=>setI(v=>Math.min(steps.length-1,v+1))}>Next step →</button>
        </div>
      </div>
    </div>
  );
}


/* ---- draggable testimonial carousel ---- */
function Carousel() {
  const track = useRef(null);
  const scrollBy = (dir) => {
    const el = track.current; if(!el) return;
    el.scrollBy({ left: dir * (el.clientWidth*0.8), behavior:'smooth' });
  };
  return (
    <div className="carousel">
      <div className="car-track" ref={track}>
        {D.testimonials.map((t,i)=>(
          <figure key={i} style={{background:'#fff',borderRadius:18,padding:'22px 24px',minWidth:300,maxWidth:360,flexShrink:0,boxShadow:'0 4px 20px rgba(0,0,0,.08)',display:'flex',flexDirection:'column',gap:14,margin:'4px 0'}}>
            <div style={{display:'flex',alignItems:'center',gap:12}}>
              <span style={{width:42,height:42,borderRadius:'50%',background:'var(--purple-100)',color:'var(--purple-700)',display:'flex',alignItems:'center',justifyContent:'center',fontWeight:700,fontSize:18,flexShrink:0}}>{t.name.charAt(0)}</span>
              <div>
                <strong style={{display:'block',color:'var(--ink)',fontSize:14}}>{t.name}</strong>
                <span style={{fontSize:12,color:'var(--slate-500)'}}>{t.city} · {t.treatment}{t.baby?' · '+t.baby:''}</span>
              </div>
              <span style={{marginLeft:'auto',background:'#e8f5e9',color:'#2e7d32',fontSize:11,fontWeight:600,borderRadius:20,padding:'2px 10px'}}>✓ Google</span>
            </div>
            <div style={{background:'var(--lavender-50)',borderRadius:'4px 16px 16px 16px',padding:'14px 16px',position:'relative'}}>
              <span style={{position:'absolute',top:0,left:-6,width:12,height:12,background:'var(--lavender-50)',clipPath:'polygon(100% 0,100% 100%,0 100%)'}}/>
              <p style={{margin:0,color:'var(--slate-700)',fontSize:14,lineHeight:1.6}}>&ldquo;{t.quote}&rdquo;</p>
            </div>
            <div style={{color:'#f59e0b',fontSize:13}}>★★★★★</div>
          </figure>
        ))}
      </div>
      <div className="car-nav">
        <button onClick={()=>scrollBy(-1)} aria-label="Previous">←</button>
        <button onClick={()=>scrollBy(1)} aria-label="Next">→</button>
      </div>
    </div>
  );
}

/* ---- immersive photo gallery (real clinic + families) ---- */
function Gallery() {
  const [lb, setLb] = useState(null);
  const g = D.gallery;
  return (
    <>
      <div className="gallery-grid">
        {g.map((item,i)=>(
          <button key={i} className={'gal-item gal-'+(i%6)} onClick={()=>setLb(i)} aria-label={item.label}>
            <img src={item.img} alt={item.label} loading="lazy" />
            <span className="gal-zoom"><Icon name="scope"/></span>
          </button>
        ))}
      </div>
      {lb!==null && (
        <div className="lightbox" onClick={()=>setLb(null)}>
          <button className="lb-close" aria-label="Close" onClick={()=>setLb(null)}>×</button>
          <button className="lb-arrow lb-prev" aria-label="Previous" onClick={(e)=>{e.stopPropagation(); setLb((lb-1+g.length)%g.length);}}>←</button>
          <figure className="lb-fig" onClick={(e)=>e.stopPropagation()}>
            <img src={g[lb].img} alt={g[lb].label} />
            <figcaption>{g[lb].label}</figcaption>
          </figure>
          <button className="lb-arrow lb-next" aria-label="Next" onClick={(e)=>{e.stopPropagation(); setLb((lb+1)%g.length);}}>→</button>
        </div>
      )}
    </>
  );
}

/* ---- press wall: news clippings + drop slots ---- */
function PressWall() {
  return (
    <section className="press-band">
      <div className="press-stars" aria-hidden="true" />
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow" style={{color:'var(--lavender-200)'}}>As featured in the press</span>
          <h2 style={{color:'#fff'}}>EVAA in the news</h2>
          <p style={{color:'var(--lavender-200)'}}>Two decades of headlines, features and thank-you notes. Drag your news print-outs onto the empty frames - they’ll stay.</p>
        </div>
        <div className="press-grid">
          {D.press.map((p,i)=>(
            <Reveal key={i} delay={(i%3)*90}>
              <figure className={'press-card pc-'+(i%4)}>
                <span className="press-tape" />
                {p.img
                  ? <img src={p.img} alt={p.title} loading="lazy" />
                  : <image-slot id={p.slot} placeholder={p.sub} radius="4"></image-slot>}
              </figure>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ HOME ============ */
function Home() {
  const c = D.clinic;
  const doc = D.doctors[0];
  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <HeroOrbs />
        <div className="container hero-grid">
          <div className="hero-copy">
            <Reveal><span className="hero-kicker"><span className="hk-dot"/> <RotatingServes /></span></Reveal>
            <Reveal delay={80}>
              <h1 className="hero-h1">
                Your journey to <RotatingWord words={['parenthood','your baby','new beginnings','hope']} /> <br/>starts with <span className="grad-text">honest care</span>
              </h1>
            </Reveal>
            <Reveal delay={160}>
              <p className="hero-sub">
                Chandigarh&rsquo;s most trusted IVF &amp; fertility centre. Advanced technology, transparent
                pricing, and a team that walks every step with you - warmly and honestly.
              </p>
            </Reveal>
            <Reveal delay={240}>
              <div className="hero-actions">
                <Magnetic><a href={L('/book')} className="btn btn-coral"><Icon name="calendar"/> Book Appointment</a></Magnetic>
                <a href={L('/treatments')} className="btn btn-ghost"><Icon name="embryo"/> Explore treatments</a>
              </div>
            </Reveal>
            <Reveal delay={320}>
              <div className="hero-stats-inline">
                {D.stats.slice(0,3).map(s=>(
                  <div key={s.label}><strong><Counter value={s.value} suffix={s.suffix}/></strong><span>{s.label}</span></div>
                ))}
              </div>
            </Reveal>
          </div>
          <Reveal delay={200} className="hero-media">
            <Tilt className="hero-card-tilt">
              <Ph label="Our waiting lounge · EVAA Chandigarh" src="img/lobby.jpg" icon="baby" className="hero-img" />
            </Tilt>
            <a href="https://g.page/r/CfYUx7tB3iEpEBM/review" target="_blank" rel="noreferrer" className="hero-float glass" style={{textDecoration:'none',cursor:'pointer'}}>
              <div className="hf-rate"><Icon name="star"/> {c.rating}</div>
              <div><strong>{c.reviews} Google reviews</strong><span>See all reviews ↗</span></div>
            </a>
            <div className="hero-float2 glass">
              <span className="hf2-ic"><Icon name="shield"/></span>
              <div><strong>ART Certified</strong><span>IVF Centre</span></div>
            </div>
          </Reveal>
        </div>
        <button className="hero-scroll" onClick={()=>window.scrollBy({top:window.innerHeight*0.8,behavior:'smooth'})} aria-label="Scroll down">
          <span/>
        </button>
      </section>

      {/* MARQUEE */}
      <div className="marquee">
        <div className="marquee-row">
          {[...Array(2)].map((_,r)=>(
            <div className="marquee-set" key={r}>
              {['1,500+ Babies Born','Trusted Fertility Care','20+ Years Experience','ART Certified Lab','ISAR Member','Transparent Pricing','No-Cost EMI','Care in Your Language'].map((m,i)=>(
                <span key={i} className="mq-item"><span className="mq-dot"/> {m}</span>
              ))}
            </div>
          ))}
        </div>
      </div>

      {/* TAGLINE BAND (real EVAA promise) */}
      <section className="tagline-band">
        <div className="tb-photo" style={{backgroundImage:'url(img/reception.jpg)'}} />
        <div className="tb-overlay" />
        <div className="container tb-inner">
          <Reveal>
            <span className="eyebrow" style={{color:'var(--lavender-200)', justifyContent:'center'}}>Our promise</span>
            <p className="tb-quote">
              “It&rsquo;s hard to wait around for something you know might never happen - but it&rsquo;s even harder to give up when you know it&rsquo;s <em>everything</em> you want.”
            </p>
            <span className="tb-sign">- The EVAA family, Chandigarh</span>
          </Reveal>
        </div>
      </section>

      {/* FINDER */}
      <section className="section finder-section">
        <div className="container">
          <div className="section-head center">
            <span className="eyebrow">Where do I start?</span>
            <h2>Not sure which treatment is right?</h2>
            <p>Take a guess out of it. Tell us where you are, and we&rsquo;ll point you to a sensible first step.</p>
          </div>
          <Finder />
        </div>
      </section>

      {/* WHY */}
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <div className="section-head center">
            <span className="eyebrow">Why families choose EVAA</span>
            <h2>Honest, warm, world-class care</h2>
          </div>
          <div className="why-grid why-grid--6">
            {D.whyUs.map((w,i)=>(
              <Reveal key={w.title} delay={(i%3)*80}>
                <Tilt className="card why-card" max={5}>
                  <span className="why-ic"><Icon name={w.icon}/></span>
                  <h3>{w.title}</h3>
                  <p>{w.text}</p>
                </Tilt>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* TREATMENTS EXPLORER */}
      <section className="section" style={{background:'var(--bg-alt)'}}>
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Our treatments</span>
            <h2>Complete fertility care, one team</h2>
            <p>Tap any treatment to explore it - then dive into the full details whenever you&rsquo;re ready.</p>
          </div>
          <TreatExplorer />
        </div>
      </section>

      {/* PROCESS TIMELINE */}
      <section className="section">
        <div className="container">
          <div className="section-head center">
            <span className="eyebrow">How IVF works at EVAA</span>
            <h2>Your path, step by step</h2>
            <p>Click through each stage. No confusion, no surprises - just a clear, caring process.</p>
          </div>
          <ProcessTimeline />
        </div>
      </section>

      {/* STATS */}
      <section className="stats-band">
        <div className="container">
          <div className="stats-grid">
            {D.stats.map(s=>(
              <div key={s.label} className="stat">
                <div className="stat-num"><Counter value={s.value} suffix={s.suffix}/></div>
                <div className="stat-label">{s.label}</div>
              </div>
            ))}
          </div>
          <p className="stats-disc">Success rates vary by age and diagnosis. Consult our team for a personalised assessment.</p>
        </div>
      </section>

      {/* DOCTOR FEATURE */}
      <section className="section">
        <div className="container doc-feature">
          <Reveal className="df-media">
            <Tilt className="df-tilt" max={4}>
              <Ph label="Dr. Sakshi Sharma" src={doc.img} className="df-photo" />
            </Tilt>
            <div className="df-badge glass">
              <Icon name="award"/>
              <div><strong>{doc.years} years</strong><span>{doc.procedures} procedures</span></div>
            </div>
          </Reveal>
          <div className="df-copy">
            <span className="eyebrow">Your doctor</span>
            <h2>Meet Dr. Sakshi Sharma</h2>
            <span className="df-role">{doc.qual}</span>
            <p className="df-bio">{doc.bio}</p>
            <div className="chip-row">
              {doc.spec.map(s=><span key={s} className="pill">{s}</span>)}
            </div>
            <div className="df-langs"><Icon name="globe"/> Consultations in {doc.langs.join(', ')}</div>
            <div className="hero-actions" style={{marginTop:26}}>
              <a href={L('/about/'+doc.slug)} className="btn btn-purple">Her story →</a>
              <Magnetic><a href={L('/book')} className="btn btn-coral"><Icon name="calendar"/> Book with Dr. Sakshi</a></Magnetic>
            </div>
          </div>
        </div>
      </section>

      {/* IMMERSIVE GALLERY */}
      <section className="section gallery-section">
        <div className="container">
          <div className="section-head center">
            <span className="eyebrow">Inside EVAA</span>
            <h2>Step inside our world</h2>
            <p>A calm, modern space in the heart of Manimajra - and the families who have walked out of it with their dreams in their arms.</p>
          </div>
        </div>
        <Gallery />
      </section>

      {/* STORIES CAROUSEL */}
      <section className="section" style={{background:'var(--bg-alt)'}}>
        <div className="container">
          <div className="section-head" style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',maxWidth:'none',gap:20,flexWrap:'wrap'}}>
            <div>
              <span className="eyebrow">Patient stories</span>
              <h2>Real families. Real beginnings.</h2>
            </div>
            <a href={L('/success-stories')} className="link-arrow">Read all stories →</a>
          </div>
          <Carousel />
          <div style={{textAlign:'center',marginTop:32}}>
            <a href="https://g.page/r/CfYUx7tB3iEpEBM/review" target="_blank" rel="noreferrer"
               className="btn btn-outline" style={{display:'inline-flex',alignItems:'center',gap:8}}>
              <Icon name="star"/> Read all {D.clinic.reviews} Google Reviews ↗
            </a>
          </div>
        </div>
      </section>

      <PressWall />

      {/* VISIT */}
      <section className="section">
        <div className="container locations-wrap">
          <div className="locations-copy">
            <span className="eyebrow">Visit our centre</span>
            <h2 style={{fontSize:'clamp(28px,3.6vw,42px)', marginTop:16}}>Right in the heart of Chandigarh</h2>
            <p style={{color:'var(--slate-600)', marginTop:14, fontSize:18}}>
              Our centre in NAC Manimajra brings everything under one roof - consultations, our ART-certified
              embryology lab, day-care theatre and recovery suites. {c.serves}.
            </p>
            <div className="visit-rows">
              <div className="visit-row"><span className="visit-ic"><Icon name="pin"/></span><div><strong>Address</strong><span>{c.address}</span></div></div>
              <div className="visit-row"><span className="visit-ic"><Icon name="clock"/></span><div><strong>Opening hours</strong><span>{c.hours}<br/>{c.sunday}</span></div></div>
              <div className="visit-row"><span className="visit-ic"><Icon name="phone"/></span><div><strong>Call us</strong><span>{c.phones.join(' · ')}</span></div></div>
            </div>
            <div className="hero-actions" style={{marginTop:24}}>
              <a href={L('/contact')} className="btn btn-purple"><Icon name="pin"/> Get directions</a>
              <a href={c.whatsappLink} target="_blank" rel="noreferrer" className="btn btn-whatsapp"><Icon name="chat"/> WhatsApp</a>
            </div>
          </div>
          <Reveal className="locations-map">
            <Ph label="SCO 817, NAC Sector 13, Manimajra" src="img/building.jpg" className="loc-map-ph" />
          </Reveal>
        </div>
      </section>

      {/* BLOG */}
      <section className="section" style={{background:'var(--bg-alt)', paddingTop:88}}>
        <div className="container">
          <div className="section-head" style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', maxWidth:'none', gap:20, flexWrap:'wrap'}}>
            <div>
              <span className="eyebrow">From our blog</span>
              <h2>Guidance for every step</h2>
            </div>
            <a href={L('/blog')} className="link-arrow">View all articles →</a>
          </div>
          <div className="blog-grid">
            {D.blog.slice(0,3).map((b,i)=>(
              <Reveal key={b.slug} delay={i*90}>
                <a className="card card-hover blog-card" href={L('/blog/'+b.slug)}>
                  <div className="blog-img" style={{backgroundImage:`url(${b.img})`,backgroundSize:'cover',backgroundPosition:'center'}} />
                  <div className="blog-body">
                    <span className="blog-cat">{b.cat} · {b.read}</span>
                    <h3>{b.title}</h3>
                    <p>{b.excerpt}</p>
                  </div>
                </a>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <CTAStrip />
    </main>
  );
}
Object.assign(window, { Home });