/* Home.jsx — Hero, intro, services preview, numbers, CTA */

function Home() {
  const { lang } = useLang();
  const { go } = useRoute();
  const ar = lang === 'ar';

  // hero parallax
  const heroImgRef = React.useRef(null);
  React.useEffect(() => {
    const onScroll = () => {
      const el = heroImgRef.current;
      if (!el) return;
      const y = Math.min(window.scrollY * 0.15, 60);
      el.style.transform = `translateY(${y}px)`;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const services = ar ? [
    { n:'01', title:'فحص شامل', body:'فحص دقيق وتنظيف. ٤٥ دقيقة.' },
    { n:'02', title:'تبييض الأسنان', body:'جلسة واحدة داخل العيادة.' },
    { n:'03', title:'تقويم شفاف', body:'إنفيزالاين بإشراف مباشر.' },
    { n:'04', title:'الزراعة', body:'حلّ دائم لاستبدال الأسنان.' },
  ] : [
    { n:'01', title:'General check-up', body:'A thorough exam and clean. 45 minutes.' },
    { n:'02', title:'Whitening', body:'In-clinic whitening, one session.' },
    { n:'03', title:'Clear aligners', body:'Invisalign with direct supervision.' },
    { n:'04', title:'Implants', body:'A permanent solution for replacement teeth.' },
  ];

  return (
    <main>
      {/* -------- HERO -------- */}
      <section className="hero">
        <div className="container hero-inner">
          <div className="hero-text">
            <Reveal delay={0}><Eyebrow>{ar ? 'عيادة طب الأسنان · الرياض' : 'A dental clinic · Riyadh'}</Eyebrow></Reveal>
            <Reveal delay={120} as="h1" className="hero-h1">
              {ar ? <>رعاية هادئة،<br/>نتائج واضحة.</> : <>A quiet kind<br/>of dental care.</>}
            </Reveal>
            <Reveal delay={280}>
              <p className="lede hero-lede">
                {ar
                  ? 'في قلب حيّ السليمانية. نأخذ وقتنا، نشرح كل خطوة، ولا نوصي بما لا تحتاج إليه.'
                  : 'In the heart of Al Sulaimaniyah. We take our time, explain every step, and only recommend what you actually need.'}
              </p>
            </Reveal>
            <Reveal delay={440}>
              <div className="hero-ctas">
                <BtnWithArrow onClick={()=>go('booking')}>{ar ? 'احجز موعدك' : 'Book a visit'}</BtnWithArrow>
                <Btn kind="ghost" onClick={()=>go('services')}>
                  {ar ? 'اكتشف الخدمات' : 'See services'}
                </Btn>
              </div>
            </Reveal>
          </div>
          <Reveal delay={300} className="hero-img-wrap">
            <div ref={heroImgRef} className="hero-img-inner">
              <ImgSlot id="home-hero"
                src="assets/photos/home-hero.jpg"
                label={ar ? 'صورة داخل العيادة (٤:٥)' : 'Clinic interior photo (4:5)'}
                style={{ width:'100%', aspectRatio:'4/5', minHeight:560 }} />
            </div>
            <div className="hero-tag">
              <div style={{fontSize:11,letterSpacing:'0.16em',color:'var(--gold-deep)',fontWeight:600,textTransform:ar?'none':'uppercase'}}>
                {ar ? 'مرخّصة' : 'LICENSED'}
              </div>
              <div style={{fontSize:14,color:'var(--ink)',fontWeight:600,marginTop:4}}>
                {ar ? 'وزارة الصحة السعودية' : 'Saudi MoH · since 2019'}
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* -------- INTRO STATEMENT -------- */}
      <section className="section intro-statement">
        <div className="container">
          <Reveal>
            <p className="statement">
              {ar
                ? 'نؤمن بأن طب الأسنان لا يحتاج إلى ضجيج. يحتاج إلى وقت، ودقّة، وفريق يستمع قبل أن يتحدث.'
                : 'We believe dentistry doesn\'t need noise. It needs time, precision, and a team that listens before it speaks.'}
            </p>
          </Reveal>
        </div>
      </section>

      {/* -------- SERVICES PREVIEW -------- */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <Reveal>
              <Eyebrow>{ar ? 'الخدمات' : 'What we offer'}</Eyebrow>
              <h2 style={{marginTop:14}}>{ar ? 'كل ما تحتاجه، تحت سقف واحد.' : 'Everything you\'d need, under one roof.'}</h2>
            </Reveal>
            <Reveal delay={120}>
              <Btn kind="secondary" onClick={()=>go('services')}>{ar?'كل الخدمات':'All services'}</Btn>
            </Reveal>
          </div>
          <div className="services-grid">
            {services.map((s, i) => (
              <Reveal key={s.n} delay={i * 80}>
                <a className="tile" onClick={()=>go('services')}>
                  <div>
                    <div className="num">{s.n}</div>
                    <h3 style={{marginTop:12}}>{s.title}</h3>
                  </div>
                  <p>{s.body}</p>
                  <span className="more">{ar ? 'اعرف المزيد ←' : 'Learn more →'}</span>
                </a>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* -------- NUMBERS -------- */}
      <section className="section">
        <div className="container">
          <div className="numbers">
            {[
              { n: '7', l: ar ? 'سنوات من الخبرة' : 'Years in practice' },
              { n: '12', l: ar ? 'طبيب وأخصائي' : 'Dentists & specialists' },
              { n: '14k', l: ar ? 'موعد أُجري' : 'Appointments delivered' },
              { n: '4.9', l: ar ? 'تقييم Google' : 'Google rating' },
            ].map((s, i) => (
              <Reveal key={i} delay={i * 100} className="stat">
                <div className="n">{s.n}</div>
                <div className="l">{s.l}</div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* -------- BIG CTA -------- */}
      <section className="section cta-block">
        <div className="container cta-inner">
          <Reveal>
            <Eyebrow>{ar ? 'احجز' : 'Book'}</Eyebrow>
            <h2 className="cta-h">
              {ar ? 'موعدك القادم،\nبهدوء.' : 'Your next visit,\nquietly arranged.'}
            </h2>
          </Reveal>
          <Reveal delay={160}>
            <p className="lede">{ar ? 'دقيقة واحدة. لا حسابات، لا تأكيدات بالبريد.' : 'One minute. No accounts, no email confirmations.'}</p>
            <div style={{marginTop:24}}>
              <BtnWithArrow onClick={()=>go('booking')}>{ar ? 'احجز موعدك' : 'Book a visit'}</BtnWithArrow>
            </div>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

window.Home = Home;