/* Services.jsx */

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

  const cats = ar
    ? [{id:'all',l:'الكل'},{id:'preventive',l:'الوقائي'},{id:'cosmetic',l:'التجميلي'},{id:'restorative',l:'الترميمي'},{id:'pediatric',l:'الأطفال'}]
    : [{id:'all',l:'All'},{id:'preventive',l:'Preventive'},{id:'cosmetic',l:'Cosmetic'},{id:'restorative',l:'Restorative'},{id:'pediatric',l:'Pediatric'}];

  const services = (ar ? [
    { c:'preventive', n:'01', t:'فحص شامل وتنظيف', d:'فحص دقيق، تنظيف عميق، وأشعة رقمية. ٤٥ دقيقة.', price:'٣٥٠ ر.س' },
    { c:'preventive', n:'02', t:'علاج اللثة', d:'علاج التهابات اللثة في مراحلها المبكرة والمتقدمة.', price:'٤٥٠ ر.س' },
    { c:'cosmetic',  n:'03', t:'تبييض الأسنان', d:'تبييض داخل العيادة، جلسة واحدة، نتيجة فورية.', price:'١٬٤٠٠ ر.س' },
    { c:'cosmetic',  n:'04', t:'فينير', d:'قشور خزفية مصنوعة يدوياً. استشارة + جلستان.', price:'٢٬٢٠٠ ر.س / سن' },
    { c:'cosmetic',  n:'05', t:'تقويم إنفيزالاين', d:'تقويم شفاف بإشراف مباشر. متابعة شهرية.', price:'من ١٢٬٠٠٠ ر.س' },
    { c:'restorative', n:'06', t:'علاج الجذور', d:'علاج عصب بدقة باستخدام مجاهر العمليات.', price:'٩٠٠ ر.س' },
    { c:'restorative', n:'07', t:'زراعة الأسنان', d:'زراعة فورية أو مرحلية حسب الحالة.', price:'من ٣٬٥٠٠ ر.س' },
    { c:'restorative', n:'08', t:'تيجان وجسور', d:'تيجان زيركونيا في زيارتين فقط.', price:'١٬٨٠٠ ر.س' },
    { c:'pediatric', n:'09', t:'طب أسنان الأطفال', d:'فحص ودوداً، وقاية، وعلاج. من سنّ ٣.', price:'٢٥٠ ر.س' },
  ] : [
    { c:'preventive', n:'01', t:'Check-up & clean', d:'Thorough exam, deep clean, digital X-rays. 45 minutes.', price:'350 SAR' },
    { c:'preventive', n:'02', t:'Gum care', d:'Treatment of early- and advanced-stage gum disease.', price:'450 SAR' },
    { c:'cosmetic',  n:'03', t:'Whitening', d:'In-clinic whitening, one session, immediate result.', price:'1,400 SAR' },
    { c:'cosmetic',  n:'04', t:'Veneers', d:'Hand-crafted porcelain veneers. Consult + 2 visits.', price:'2,200 SAR / tooth' },
    { c:'cosmetic',  n:'05', t:'Invisalign', d:'Clear aligners with direct supervision. Monthly review.', price:'from 12,000 SAR' },
    { c:'restorative', n:'06', t:'Root canal', d:'Precise endodontics under surgical microscope.', price:'900 SAR' },
    { c:'restorative', n:'07', t:'Implants', d:'Immediate or staged, depending on the case.', price:'from 3,500 SAR' },
    { c:'restorative', n:'08', t:'Crowns & bridges', d:'Zirconia crowns in two visits.', price:'1,800 SAR' },
    { c:'pediatric', n:'09', t:'Pediatric care', d:'Friendly exams, prevention, treatment. Ages 3+.', price:'250 SAR' },
  ]);

  const [filter, setFilter] = React.useState('all');
  const shown = services.filter(s => filter === 'all' || s.c === filter);

  return (
    <main>
      <section className="page-hero container">
        <Reveal><Eyebrow>{ar?'الخدمات':'Services'}</Eyebrow></Reveal>
        <Reveal delay={120} as="h1">{ar?'كل ما تحتاجه،\nبهدوء.':'Everything you need,\nquietly done.'}</Reveal>
        <Reveal delay={280}>
          <p className="lede">
            {ar
              ? 'تسع خدمات أساسية، كل واحدة بفريق متخصص. الأسعار شفافة، والتقديرات النهائية تُمنح بعد الفحص.'
              : 'Nine core services, each with a specialist team. Prices are transparent; final estimates are given after the exam.'}
          </p>
        </Reveal>
      </section>

      <section className="section container">
        <Reveal>
          <div className="chips" style={{marginBottom:48}}>
            {cats.map(c => (
              <button key={c.id} className={`chip ${filter===c.id?'on':''}`} onClick={()=>setFilter(c.id)}>{c.l}</button>
            ))}
          </div>
        </Reveal>
        <div className="services-list">
          {shown.map((s,i)=>(
            <Reveal key={s.n} delay={i*40}>
              <article className="service-row">
                <div className="sr-num">{s.n}</div>
                <div className="sr-title">
                  <h3>{s.t}</h3>
                  <p>{s.d}</p>
                </div>
                <div className="sr-price">{s.price}</div>
                <div className="sr-action">
                  <button className="sr-link" onClick={()=>go('booking')}>{ar?'احجز ←':'Book →'}</button>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </section>

      <section className="section container" style={{textAlign:'center'}}>
        <Reveal>
          <Eyebrow>{ar?'احجز':'Book'}</Eyebrow>
          <h2 style={{margin:'14px auto 16px',maxWidth:'18ch'}}>{ar?'استشارة أولى، مجانية.':'First consultation, on us.'}</h2>
          <p className="lede" style={{margin:'0 auto 32px',maxWidth:'46ch'}}>
            {ar?'تعال، تعرّف على الفريق، واسأل ما تشاء.':'Come in, meet the team, ask anything.'}
          </p>
          <BtnWithArrow onClick={()=>go('booking')}>{ar?'احجز موعدك':'Book a visit'}</BtnWithArrow>
        </Reveal>
      </section>
    </main>
  );
}

window.Services = Services;