// Components for Chraibi Dental Clinic — i18n + RTL aware
const { useState, useEffect, useRef, useCallback } = React;

const useT = (lang) => (path) => {
  const parts = path.split('.');
  let v = window.I18N[lang];
  for (const p of parts) { v = v?.[p]; if (v === undefined) return path; }
  return v;
};

// ─────────────────────────────────────────── HERO CAROUSEL ───────────────────────────────────────────
const HERO_IMAGES = [
  "https://www.chraibidentalclinic.com/wp-content/uploads/2024/01/clinique-dentaire-casablanca-Maroc.webp",
  "https://www.drchraibi.com/wp-content/uploads/2024/03/Section-3-1024x683.webp",
  "https://www.drchraibi.com/wp-content/uploads/2025/01/Dentiste-Casablanca.jpeg",
];

function HeroCarousel({ lang, accent }) {
  const t = useT(lang);
  const slides = t('hero.slides');
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setIdx(i => (i + 1) % slides.length), 6000);
    return () => clearInterval(id);
  }, [slides.length]);

  return (
    <section id="home" className="hero">
      <div className="hero__slides">
        {HERO_IMAGES.map((src, i) => (
          <div key={i} className={`hero__slide ${i === idx ? 'is-active' : ''}`} style={{ backgroundImage: `url("${src}")` }} aria-hidden={i !== idx} />
        ))}
        <div className="hero__overlay" />
      </div>

      <div className="hero__inner container">
        <div className="hero__eyebrow">
          <span className="dot" style={{background: accent}} />
          <span>{t('hero.eyebrow')}</span>
        </div>

        {slides.map((s, i) => (
          <div key={i} className={`hero__textframe ${i === idx ? 'is-active' : ''}`} aria-hidden={i !== idx}>
            <h1 className="hero__title">{s.title}</h1>
            <p className="hero__sub">{s.sub}</p>
          </div>
        ))}

        <div className="hero__ctas">
          <a className="btn btn--primary" href="#appointment" style={{background: accent}}>
            <CalendarIcon /> {t('cta.appointment')}
          </a>
          <a className="btn btn--ghost" href={`https://wa.me/212689531119?text=${encodeURIComponent(t('appointment.whatsappPrefill'))}`} target="_blank" rel="noopener">
            <WhatsAppIcon /> {t('cta.whatsapp')}
          </a>
        </div>

        <div className="hero__dots" role="tablist">
          {slides.map((_, i) => (
            <button key={i} className={`hero__dot ${i === idx ? 'is-active' : ''}`} onClick={() => setIdx(i)} aria-label={`Slide ${i+1}`} style={i === idx ? {background: accent} : {}} />
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────── STATS ───────────────────────────────────────────
function Stats({ lang, accent }) {
  const t = useT(lang);
  return (
    <section className="stats">
      <div className="container stats__grid">
        <Stat n="92%" l={t('stats.p92')} accent={accent} />
        <Stat n="81%" l={t('stats.p81')} accent={accent} />
        <Stat n="10+" l={t('stats.years')} accent={accent} />
        <Stat n="8" l={t('stats.specialties')} accent={accent} />
      </div>
    </section>
  );
}
function Stat({ n, l, accent }) {
  return (
    <div className="stat">
      <div className="stat__n" style={{color: accent}}>{n}</div>
      <div className="stat__l">{l}</div>
    </div>
  );
}

// ─────────────────────────────────────────── ABOUT ───────────────────────────────────────────
function About({ lang, accent }) {
  const t = useT(lang);
  return (
    <section id="clinic" className="about section">
      <div className="container about__grid">
        <div className="about__media">
          <img src="https://www.chraibidentalclinic.com/wp-content/uploads/2024/01/clinique-dentaire-casablanca-Maroc.webp" alt="Clinique dentaire à Casablanca — Chraibi Dental Clinic, Boulevard Abdelmoumen" loading="lazy" />
        </div>
        <div className="about__text">
          <Kicker accent={accent}>{t('about.kicker')}</Kicker>
          <h2 className="h2">{t('about.title')}</h2>
          <p className="lead">{t('about.lead')}</p>
          <p className="body">{t('about.body')}</p>
          <div className="tags">
            <span className="tag">{t('about.tag1')}</span>
            <span className="tag">{t('about.tag2')}</span>
            <span className="tag">{t('about.tag3')}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────── PILLARS ───────────────────────────────────────────
function Pillars({ lang, accent }) {
  const t = useT(lang);
  const items = t('pillars.items');
  const icons = [<DoctorIcon />, <HeartIcon />, <ClockIcon />, <SparkleIcon />];
  return (
    <section className="pillars section">
      <div className="container">
        <div className="pillars__head">
          <h2 className="h2">{t('pillars.title')}</h2>
        </div>
        <div className="pillars__grid">
          {items.map((it, i) => (
            <div className="pillar" key={i}>
              <div className="pillar__icon" style={{color: accent, borderColor: accent + '40'}}>{icons[i]}</div>
              <h3 className="pillar__t">{it.t}</h3>
              <p className="pillar__d">{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────── DOCTOR ───────────────────────────────────────────
function Doctor({ lang, accent }) {
  const t = useT(lang);
  return (
    <section id="doctor" className="doctor section">
      <div className="container doctor__grid">
        <div className="doctor__text">
          <Kicker accent={accent}>{t('doctor.kicker')}</Kicker>
          <h2 className="h2">{t('doctor.name')}</h2>
          <p className="doctor__role" style={{color: accent}}>{t('doctor.role')}</p>
          <p className="body">{t('doctor.bio')}</p>
          <p className="body">{t('doctor.bio2')}</p>
          <ul className="creds">
            {t('doctor.creds').map((c, i) => (
              <li key={i}><CheckIcon style={{color: accent}} /> {c}</li>
            ))}
          </ul>
        </div>
        <div className="doctor__media">
          <img src="https://www.drchraibi.com/wp-content/uploads/2021/01/Dr-Mouni-Chraibi-Chraibi-Dental-Clinic-2.jpg" alt="Dr Mounir Chraïbi — dentiste Casablanca, chirurgien-dentiste et orthodontiste" loading="lazy" />
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────── SERVICES ───────────────────────────────────────────
const SERVICE_ICONS = [
  <ServiceTooth />, <ServiceSmile />, <ServiceBraces />, <ServiceImplant />,
  <ServiceChild />, <ServiceCanal />, <ServiceCrown />, <ServiceSurgery />
];
function Services({ lang, accent }) {
  const t = useT(lang);
  return (
    <section id="services" className="services section section--dark">
      <div className="container">
        <div className="services__head">
          <Kicker accent={accent}>{t('services.kicker')}</Kicker>
          <h2 className="h2 h2--light">{t('services.title')}</h2>
          <p className="lead lead--light">{t('services.sub')}</p>
        </div>
        <div className="services__grid">
          {t('services.items').map((it, i) => (
            <article className="svc" key={i}>
              <div className="svc__icon" style={{color: accent}}>{SERVICE_ICONS[i]}</div>
              <h3 className="svc__t">{it.t}</h3>
              <p className="svc__d">{it.d}</p>
              <span className="svc__num">{String(i+1).padStart(2,'0')}</span>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────── SMILE SLIDER ───────────────────────────────────────────
const SMILE_PAIRS = [
  ["https://www.drchraibi.com/wp-content/uploads/2024/07/b1.png", "https://www.drchraibi.com/wp-content/uploads/2024/07/a1.png"],
  ["https://www.drchraibi.com/wp-content/uploads/2024/07/b2.png", "https://www.drchraibi.com/wp-content/uploads/2024/07/a2.png"],
  ["https://www.drchraibi.com/wp-content/uploads/2024/07/b3.png", "https://www.drchraibi.com/wp-content/uploads/2024/07/a3.png"],
  ["https://www.chraibidentalclinic.com/wp-content/uploads/2024/01/avant-chraibi-dental-clinic-casablanca-dentaire1.webp", "https://www.chraibidentalclinic.com/wp-content/uploads/2024/01/apres-chraibi-dental-clinic-casablanca-dentaire1.webp"],
];
function SmileGallery({ lang, accent, dir }) {
  const t = useT(lang);
  const [idx, setIdx] = useState(0);
  return (
    <section id="gallery" className="smile section">
      <div className="container">
        <div className="smile__head">
          <Kicker accent={accent}>{t('smile.kicker')}</Kicker>
          <h2 className="h2">{t('smile.title')}</h2>
          <p className="lead">{t('smile.sub')}</p>
        </div>
        <div className="smile__main">
          <BeforeAfterSlider before={SMILE_PAIRS[idx][0]} after={SMILE_PAIRS[idx][1]} beforeLabel={t('smile.before')} afterLabel={t('smile.after')} accent={accent} dir={dir} />
        </div>
        <div className="smile__thumbs">
          {SMILE_PAIRS.map((p, i) => (
            <button key={i} className={`smile__thumb ${i === idx ? 'is-active' : ''}`} onClick={() => setIdx(i)} aria-label={`Cas clinique ${i+1} — soins dentaires Casablanca`} style={i === idx ? {borderColor: accent} : {}}>
              <img src={p[1]} alt={`Cas ${i+1} — esthétique du sourire, Chraibi Dental Clinic Casablanca`} loading="lazy" />
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function BeforeAfterSlider({ before, after, beforeLabel, afterLabel, accent, dir }) {
  const [pos, setPos] = useState(50);
  const ref = useRef(null);
  const dragging = useRef(false);

  const onMove = useCallback((clientX) => {
    if (!ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    let p = ((clientX - rect.left) / rect.width) * 100;
    if (dir === 'rtl') p = 100 - p;
    setPos(Math.max(0, Math.min(100, p)));
  }, [dir]);

  useEffect(() => {
    const mm = (e) => { if (dragging.current) onMove(e.clientX); };
    const tm = (e) => { if (dragging.current && e.touches[0]) onMove(e.touches[0].clientX); };
    const up = () => { dragging.current = false; };
    window.addEventListener('mousemove', mm);
    window.addEventListener('touchmove', tm, { passive: true });
    window.addEventListener('mouseup', up);
    window.addEventListener('touchend', up);
    return () => {
      window.removeEventListener('mousemove', mm);
      window.removeEventListener('touchmove', tm);
      window.removeEventListener('mouseup', up);
      window.removeEventListener('touchend', up);
    };
  }, [onMove]);

  const visualPos = dir === 'rtl' ? 100 - pos : pos;

  return (
    <div className="ba" ref={ref}
         onMouseDown={(e) => { dragging.current = true; onMove(e.clientX); }}
         onTouchStart={(e) => { dragging.current = true; if (e.touches[0]) onMove(e.touches[0].clientX); }}>
      <img src={before} alt={`${beforeLabel} — soins dentaires Casablanca`} className="ba__img" loading="lazy" />
      <div className="ba__after" style={{ clipPath: dir === 'rtl' ? `inset(0 0 0 ${100 - pos}%)` : `inset(0 ${100 - pos}%  0 0)` }}>
        <img src={after} alt={`${afterLabel} — esthétique du sourire, clinique dentaire à Casablanca`} className="ba__img" loading="lazy" />
      </div>
      <span className="ba__label ba__label--before">{beforeLabel}</span>
      <span className="ba__label ba__label--after">{afterLabel}</span>
      <div className="ba__handle" style={{ left: `${visualPos}%`, background: accent }}>
        <div className="ba__knob" style={{borderColor: accent}}>
          <ChevronsIcon />
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────── CLINIC GALLERY ───────────────────────────────────────────
const CLINIC_IMAGES = [
  "https://www.chraibidentalclinic.com/wp-content/uploads/2024/01/chraibi-centre-dentaire-casablanca.webp",
  "https://www.chraibidentalclinic.com/wp-content/uploads/2024/01/chraibi-dental-clinic.webp",
  "https://www.chraibidentalclinic.com/wp-content/uploads/2024/01/Clinique-dentaire-casablanca.webp",
  "https://www.chraibidentalclinic.com/wp-content/uploads/2024/01/clinique-dentaire-casablanca-2.webp",
  "https://www.chraibidentalclinic.com/wp-content/uploads/2024/01/clinique-dentaire-casablanca-3.webp",
  "https://www.chraibidentalclinic.com/wp-content/uploads/2024/01/clinique-dentaire-casablanca-4.webp",
  "https://www.chraibidentalclinic.com/wp-content/uploads/2024/01/clinique-dentaire-casablanca-5.webp",
  "https://www.chraibidentalclinic.com/wp-content/uploads/2024/01/clinique-dentaire-casablanca-7.webp",
  "https://www.chraibidentalclinic.com/wp-content/uploads/2024/01/clinique-dentaire-casablanca-maroc-1.webp",
];
function ClinicGallery({ lang, accent }) {
  const t = useT(lang);
  return (
    <section id="clinic-gallery" className="cgallery section">
      <div className="container">
        <div className="cgallery__head">
          <Kicker accent={accent}>{t('gallery.kicker')}</Kicker>
          <h2 className="h2">{t('gallery.title')}</h2>
        </div>
        <div className="cgallery__grid">
          {CLINIC_IMAGES.map((src, i) => (
            <a key={i} href={src} target="_blank" rel="noopener" className={`cgallery__cell cgallery__cell--${i % 5}`} aria-label={`Photo ${i+1} — clinique dentaire à Casablanca`}>
              <img src={src} alt={`Clinique dentaire à Casablanca — Chraibi Dental Clinic, photo ${i+1}`} loading="lazy" />
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────── HYGIENE ───────────────────────────────────────────
function Hygiene({ lang, accent }) {
  const t = useT(lang);
  const icons = [<ShieldIcon />, <SprayIcon />, <PackageIcon />, <DropIcon />];
  return (
    <section id="hygiene" className="hygiene section">
      <div className="container hygiene__grid">
        <div className="hygiene__text">
          <Kicker accent={accent}>{t('hygiene.kicker')}</Kicker>
          <h2 className="h2">{t('hygiene.title')}</h2>
          <p className="lead">{t('hygiene.sub')}</p>
        </div>
        <div className="hygiene__items">
          {t('hygiene.items').map((it, i) => (
            <div className="hyg" key={i}>
              <div className="hyg__icon" style={{color: accent}}>{icons[i]}</div>
              <div>
                <h3 className="hyg__t">{it.t}</h3>
                <p className="hyg__d">{it.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────── TESTIMONIALS ───────────────────────────────────────────
function Testimonials({ lang, accent }) {
  const t = useT(lang);
  return (
    <section id="testimonials" className="tm section">
      <div className="container">
        <div className="tm__head">
          <Kicker accent={accent}>{t('testimonials.kicker')}</Kicker>
          <h2 className="h2">{t('testimonials.title')}</h2>
          <p className="lead">{t('testimonials.sub')}</p>
        </div>
        <div className="tm__grid">
          {t('testimonials.items').map((it, i) => (
            <figure className="tcard" key={i}>
              <QuoteIcon style={{color: accent}} />
              <blockquote className="tcard__q">{it.t}</blockquote>
              <figcaption className="tcard__c">
                <div className="tcard__avatar" style={{background: `linear-gradient(135deg, ${accent}, ${accent}80)`}}>{it.n.charAt(0)}</div>
                <div>
                  <div className="tcard__name">{it.n}</div>
                  <div className="tcard__stars">★★★★★</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────── FAQ ───────────────────────────────────────────
function FAQ({ lang, accent }) {
  const t = useT(lang);
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="faq section">
      <div className="container faq__wrap">
        <div className="faq__head">
          <Kicker accent={accent}>{t('faq.kicker')}</Kicker>
          <h2 className="h2">{t('faq.title')}</h2>
        </div>
        <div className="faq__list">
          {t('faq.items').map((it, i) => (
            <details key={i} open={open === i} onClick={(e) => { e.preventDefault(); setOpen(open === i ? -1 : i); }}>
              <summary>
                <span>{it.q}</span>
                <span className="faq__icon" style={{color: accent}}>{open === i ? '−' : '+'}</span>
              </summary>
              <p>{it.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────── CALLBACK FORM ───────────────────────────────────────────
function CallbackForm({ lang, accent }) {
  const t = useT(lang);
  const [sent, setSent] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const onSubmit = async (e) => {
    e.preventDefault();
    setError('');
    const f = e.target;
    const payload = {
      type: 'callback',
      name: f.name.value,
      phone: f.phone.value,
      time: f.time.value,
      message: f.message.value,
      website: f.website.value, // honeypot
      lang,
    };
    setLoading(true);
    try {
      const res = await fetch('send.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.ok) {
        setSent(true);
        if (window.gtag) window.gtag('event', 'callback_submit', { lang });
      } else {
        setError(data.error || 'Erreur. Réessayez ou appelez +212 5 22 25 28 87.');
      }
    } catch (err) {
      setError('Connexion impossible. Appelez +212 5 22 25 28 87.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <section id="callback" className="callback section section--accent">
      <div className="container callback__grid">
        <div className="callback__text">
          <Kicker accent="rgba(255,255,255,0.9)">{t('callback.kicker')}</Kicker>
          <h2 className="h2 h2--light">{t('callback.title')}</h2>
          <p className="lead lead--light">{t('callback.sub')}</p>
        </div>
        <form className="callback__form" onSubmit={onSubmit} noValidate>
          {sent ? (
            <div className="success"><CheckIcon /> {t('callback.success')}</div>
          ) : (
            <React.Fragment>
              <label className="field"><span>{t('callback.name')}</span><input name="name" required type="text" autoComplete="name" /></label>
              <label className="field"><span>{t('callback.phone')}</span><input name="phone" required type="tel" autoComplete="tel" /></label>
              <label className="field"><span>{t('callback.time')}</span>
                <select name="time"><option>9h — 12h</option><option>12h — 15h</option><option>15h — 18h</option><option>18h — 20h</option></select>
              </label>
              <label className="field field--full"><span>{t('callback.message')}</span><textarea name="message" rows="3" /></label>
              {/* Honeypot: invisible champ pour piéger les bots */}
              <input name="website" type="text" tabIndex="-1" autoComplete="off" style={{position:'absolute',left:'-9999px',width:1,height:1,opacity:0}} aria-hidden="true" />
              {error && <div className="form-error" role="alert">{error}</div>}
              <button type="submit" disabled={loading} className="btn btn--primary btn--full" style={{background: '#fff', color: accent, opacity: loading ? 0.7 : 1}}>
                {loading ? '…' : t('callback.submit')}
              </button>
            </React.Fragment>
          )}
        </form>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────── APPOINTMENT FORM ───────────────────────────────────────────
function AppointmentForm({ lang, accent }) {
  const t = useT(lang);
  const services = t('services.items').map(s => s.t);
  const [sent, setSent] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const onSubmit = async (e) => {
    e.preventDefault();
    setError('');
    const f = e.target;
    const payload = {
      type: 'rdv',
      name: f.name.value,
      phone: f.phone.value,
      email: f.email.value,
      service: f.service.value,
      date: f.date.value,
      message: f.message.value,
      website: f.website.value, // honeypot
      lang,
    };
    setLoading(true);
    try {
      const res = await fetch('send.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.ok) {
        setSent(true);
        if (window.gtag) window.gtag('event', 'appointment_submit', { lang, service: payload.service });
      } else {
        setError(data.error || 'Erreur. Réessayez ou WhatsApp +212 6 89 53 11 19.');
      }
    } catch (err) {
      setError('Connexion impossible. WhatsApp +212 6 89 53 11 19.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <section id="appointment" className="appt section">
      <div className="container appt__grid">
        <div className="appt__text">
          <Kicker accent={accent}>{t('appointment.kicker')}</Kicker>
          <h2 className="h2">{t('appointment.title')}</h2>
          <p className="lead">{t('appointment.sub')}</p>

          <div className="appt__channels">
            <a className="channel" href={`https://wa.me/212689531119?text=${encodeURIComponent(t('appointment.whatsappPrefill'))}`} target="_blank" rel="noopener">
              <WhatsAppIcon />
              <div>
                <div className="channel__t">WhatsApp</div>
                <div className="channel__d phone-num">+212 6 89 53 11 19</div>
              </div>
            </a>
            <a className="channel" href="tel:+212522252887">
              <PhoneIcon />
              <div>
                <div className="channel__t">{t('cta.call')}</div>
                <div className="channel__d phone-num">+212 5 22 25 28 87</div>
              </div>
            </a>
          </div>
        </div>

        <form className="appt__form" onSubmit={onSubmit} noValidate>
          {sent ? (
            <div className="success success--light" style={{borderColor: accent, color: accent}}><CheckIcon /> {t('appointment.success')}</div>
          ) : (
            <React.Fragment>
              <label className="field"><span>{t('appointment.fullname')}</span><input name="name" required type="text" autoComplete="name" /></label>
              <label className="field"><span>{t('appointment.phone')}</span><input name="phone" required type="tel" autoComplete="tel" /></label>
              <label className="field field--full"><span>{t('appointment.email')}</span><input name="email" type="email" autoComplete="email" /></label>
              <label className="field"><span>{t('appointment.service')}</span>
                <select name="service">{services.map((s, i) => <option key={i}>{s}</option>)}</select>
              </label>
              <label className="field"><span>{t('appointment.date')}</span><input name="date" type="date" /></label>
              <label className="field field--full"><span>{t('appointment.message')}</span><textarea name="message" rows="4" /></label>
              {/* Honeypot */}
              <input name="website" type="text" tabIndex="-1" autoComplete="off" style={{position:'absolute',left:'-9999px',width:1,height:1,opacity:0}} aria-hidden="true" />
              {error && <div className="form-error form-error--light" role="alert">{error}</div>}
              <button type="submit" disabled={loading} className="btn btn--primary btn--full" style={{background: accent, opacity: loading ? 0.7 : 1}}>
                {loading ? '…' : t('appointment.submit')}
              </button>
            </React.Fragment>
          )}
        </form>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────── HOURS + MAP ───────────────────────────────────────────
function HoursMap({ lang, accent }) {
  const t = useT(lang);
  return (
    <section id="contact" className="hm section">
      <div className="container hm__grid">
        <div className="hm__info">
          <Kicker accent={accent}>{t('contact.kicker')}</Kicker>
          <h2 className="h2">{t('contact.title')}</h2>

          <div className="hm__row">
            <div className="hm__icon" style={{color: accent}}><PinIcon /></div>
            <div>
              <div className="hm__l">{t('contact.address')}</div>
              <div className="hm__v">2, Rue Soumaya, Angle Bd Abdelmoumen<br/>Résidence Shehrazad III, 6<sup>e</sup> étage<br/>Casablanca, Maroc</div>
            </div>
          </div>

          <div className="hm__row">
            <div className="hm__icon" style={{color: accent}}><PhoneIcon /></div>
            <div>
              <div className="hm__l">{t('contact.phone')}</div>
              <div className="hm__v"><a href="tel:+212522252887">+212 5 22 25 28 87</a><br/><a href="tel:+212689531119">+212 6 89 53 11 19</a></div>
            </div>
          </div>

          <div className="hm__row">
            <div className="hm__icon" style={{color: accent}}><ClockIcon /></div>
            <div>
              <div className="hm__l">{t('hours.kicker')}</div>
              <div className="hm__v">
                <div className="hm__day"><span>{t('hours.week')}</span><span>{t('hours.weekHours')}</span></div>
                <div className="hm__day"><span>{t('hours.sat')}</span><span>{t('hours.satHours')}</span></div>
                <div className="hm__day hm__day--muted"><span>{t('hours.sun')}</span><span>{t('hours.sunHours')}</span></div>
              </div>
            </div>
          </div>

          <div className="hm__row hm__row--alert">
            <div className="hm__icon" style={{color: accent}}><AlertIcon /></div>
            <div>
              <div className="hm__l">{t('contact.emergency')}</div>
              <div className="hm__v"><a href="tel:+212522252887">+212 5 22 25 28 87</a></div>
            </div>
          </div>
        </div>

        <div className="hm__map">
          <iframe
            title="Chraibi Dental Clinic — Casablanca"
            src="https://maps.google.com/maps?q=Chraibi+Dental+Clinic+Casablanca&t=&z=16&ie=UTF8&iwloc=&output=embed"
            width="100%" height="100%" style={{border:0, minHeight: '420px'}} loading="lazy"
            referrerPolicy="no-referrer-when-downgrade" allowFullScreen></iframe>
          <a className="hm__maplink" target="_blank" rel="noopener" href="https://share.google/YusEwk8ibzAp0ZkLh" style={{color: accent}}>
            {t('contact.map')} →
          </a>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────── FOOTER ───────────────────────────────────────────
function Footer({ lang, accent }) {
  const t = useT(lang);
  return (
    <footer className="footer">
      <div className="container footer__grid">
        <div className="footer__brand">
          <Logo accent={accent} />
          <p>{t('footer.tag')}</p>
        </div>
        <div>
          <h4>{t('footer.quick')}</h4>
          <ul>
            <li><a href="#clinic">{t('nav.clinic')}</a></li>
            <li><a href="#doctor">{t('nav.doctor')}</a></li>
            <li><a href="#services">{t('nav.services')}</a></li>
            <li><a href="#gallery">{t('nav.gallery')}</a></li>
            <li><a href="#faq">{t('nav.faq')}</a></li>
          </ul>
        </div>
        <div>
          <h4>{t('footer.services')}</h4>
          <ul>
            {t('services.items').slice(0, 6).map((s, i) => <li key={i}><a href="#services">{s.t}</a></li>)}
          </ul>
        </div>
        <div>
          <h4>{t('footer.contact')}</h4>
          <ul className="footer__contact">
            <li>2, Rue Soumaya, Angle Bd Abdelmoumen,<br/>Résidence Shehrazad III, Casablanca</li>
            <li><a href="tel:+212522252887">+212 5 22 25 28 87</a></li>
            <li><a href={`https://wa.me/212689531119`} target="_blank" rel="noopener">+212 6 89 53 11 19</a></li>
          </ul>
        </div>
      </div>
      <div className="footer__bar">
        <div className="container">
          <span>© 2015 — 2026 Chraibi Dental Clinic. {t('footer.rights')}</span>
        </div>
      </div>
    </footer>
  );
}

// ─────────────────────────────────────────── WHATSAPP FAB ───────────────────────────────────────────
function WhatsAppFab({ lang }) {
  const t = useT(lang);
  return (
    <a className="fab" href={`https://wa.me/212689531119?text=${encodeURIComponent(t('appointment.whatsappPrefill'))}`} target="_blank" rel="noopener" aria-label="WhatsApp">
      <WhatsAppIcon />
    </a>
  );
}

// ─────────────────────────────────────── CALL FAB ──────────────────
function CallFab({ lang, accent }) {
  const t = useT(lang);
  const [open, setOpen] = React.useState(false);
  const labels = {
    fr: { tag: "BESOIN D'INFORMATIONS ?", brand: "Chraibi Dental Clinic" },
    en: { tag: "NEED INFORMATION?", brand: "Chraibi Dental Clinic" },
    es: { tag: "¿NECESITA INFORMACIÓN?", brand: "Chraibi Dental Clinic" },
    ar: { tag: "‏تحتاج إلى معلومات؟", brand: "عيادة الشرايبي" }
  };
  const L = labels[lang] || labels.fr;
  return (
    <React.Fragment>
      {open && (
        <div className="callcard" role="dialog" aria-label="Call us">
          <div className="callcard__brand">{L.brand}</div>
          <div className="callcard__tag">{L.tag}</div>
          <a className="callcard__btn" href="tel:+212522252887">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
            +212 5 22 25 28 87
          </a>
        </div>
      )}
      <button
        className={`fab fab--call ${open ? 'is-open' : ''}`}
        onClick={() => setOpen(o => !o)}
        aria-label={open ? "Close" : "Call"}
        aria-expanded={open}>
        {open ? (
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
        ) : (
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
        )}
      </button>
    </React.Fragment>
  );
}

// ─────────────────────────────────────────── SHARED ───────────────────────────────────────────
function Kicker({ children, accent }) {
  return <div className="kicker" style={{color: accent}}><span className="kicker__line" style={{background: accent}} />{children}</div>;
}

function Logo({ accent, dark }) {
  return (
    <div className="logo">
      <img
        src="https://www.drchraibi.ma/wp-content/uploads/chraibi-dental-clinic1.webp"
        alt="Chraibi Dental Clinic — clinique dentaire à Casablanca"
        className="logo__img"
      />
    </div>
  );
}

// ─────────────────────────────────────────── ICONS ───────────────────────────────────────────
function CalendarIcon() { return <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>; }
function WhatsAppIcon() { return <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.8.9-1 1.1-.2.2-.4.2-.7.1-1.1-.5-2-1.2-2.7-2.4-.2-.3 0-.5.2-.7.2-.2.4-.4.5-.7.1-.2.1-.4 0-.6-.1-.2-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1.1 1-1.1 2.5s1.1 2.9 1.3 3.1c.2.2 2.2 3.4 5.4 4.7.7.3 1.3.5 1.8.6.7.2 1.4.2 2 .1.6-.1 1.7-.7 2-1.4.3-.7.3-1.3.2-1.4-.1-.2-.3-.2-.6-.4zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.4c1.4.8 3.1 1.2 4.8 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/></svg>; }
function PhoneIcon() { return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>; }
function PinIcon() { return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>; }
function ClockIcon() { return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>; }
function AlertIcon() { return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>; }
function CheckIcon({ style }) { return <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={style}><polyline points="20 6 9 17 4 12"/></svg>; }
function QuoteIcon({ style }) { return <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor" style={style}><path d="M3 17h3l2-4V7H2v6h3zm10 0h3l2-4V7h-6v6h3z"/></svg>; }
function ChevronsIcon() { return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/><polyline points="9 18 3 12 9 6" opacity="0"/><polyline points="9 18 15 12 9 6"/></svg>; }
function DoctorIcon() { return <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M14 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"/><path d="M12 7v3"/><path d="M8 10s-3 1-3 5v6h14v-6c0-4-3-5-3-5"/><path d="M9 13v2a3 3 0 0 0 6 0v-2"/></svg>; }
function HeartIcon() { return <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>; }
function SparkleIcon() { return <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5z"/><path d="M19 15l.8 2.4L22 18l-2.2.6L19 21l-.8-2.4L16 18l2.2-.6z"/></svg>; }
function ShieldIcon() { return <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></svg>; }
function SprayIcon() { return <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M9 11h6v10H9z"/><path d="M11 11V7h2v4"/><circle cx="17" cy="4" r="1"/><circle cx="20" cy="6" r="1"/><circle cx="17" cy="8" r="1"/></svg>; }
function PackageIcon() { return <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/></svg>; }
function DropIcon() { return <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2.5s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z"/></svg>; }
// service-specific icons
function ServiceTooth() { return <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3c-3 0-5 2-5 4 0 3 1 5 2 8 .5 1.5 1.5 1.5 2 0 .5-2 1-3 1-3s.5 1 1 3c.5 1.5 1.5 1.5 2 0 1-3 2-5 2-8 0-2-2-4-5-4z"/></svg>; }
function ServiceSmile() { return <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>; }
function ServiceBraces() { return <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"><path d="M3 9c2-2 4-3 9-3s7 1 9 3"/><path d="M3 15c2 2 4 3 9 3s7-1 9-3"/><rect x="6" y="10" width="3" height="4"/><rect x="11" y="10" width="3" height="4"/><rect x="16" y="10" width="3" height="4"/></svg>; }
function ServiceImplant() { return <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"><path d="M9 3h6v4H9z"/><path d="M10 7v3M14 7v3M11 10h2v3l-1 2-1-2z"/><path d="M11 17l1 4 1-4"/></svg>; }
function ServiceChild() { return <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="4"/><path d="M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"/><circle cx="10" cy="8" r="0.5" fill="currentColor"/><circle cx="14" cy="8" r="0.5" fill="currentColor"/></svg>; }
function ServiceCanal() { return <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"><path d="M12 4c-3 0-5 2-5 4 0 4 2 7 3 11 .3 1 1 1 1.5 0L12 16l.5 3c.5 1 1.2 1 1.5 0 1-4 3-7 3-11 0-2-2-4-5-4z"/><path d="M11 10v4M13 10v4"/></svg>; }
function ServiceCrown() { return <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"><path d="M3 17l2-9 4 4 3-7 3 7 4-4 2 9z"/><path d="M3 20h18"/></svg>; }
function ServiceSurgery() { return <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3l3 3-9 9H6v-2.7z"/><path d="M13 8l3 3"/><path d="M3 21h18"/></svg>; }

// Export everything to window
Object.assign(window, {
  HeroCarousel, Stats, About, Pillars, Doctor, Services, SmileGallery,
  ClinicGallery, Hygiene, Testimonials, FAQ, CallbackForm, AppointmentForm,
  HoursMap, Footer, WhatsAppFab, CallFab, Logo, useT
});