/* ============================================================
   SameDay Dental — Section components
   Loaded BEFORE app.jsx; exports to window.
   ============================================================ */
const { useState, useEffect, useRef } = React;

/* ---------- Inline SVG icons ---------- */
const IconArrow = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
    <path d="M5 12h14M13 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);
const IconPhone = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
    <path d="M22 16.92v3a2 2 0 0 1-2.18 2A19.79 19.79 0 0 1 2.06 4.18 2 2 0 0 1 4.05 2h3a2 2 0 0 1 2 1.72c.13.96.34 1.9.63 2.81a2 2 0 0 1-.45 2.11L8 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.29 1.85.5 2.81.63A2 2 0 0 1 22 16.92z" />
  </svg>
);
const IconWhatsapp = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0 0 20.464 3.488" />
  </svg>
);
const IconClose = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
    <path d="M18 6L6 18M6 6l12 12" strokeLinecap="round" />
  </svg>
);
const IconPin = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
    <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>
);
const IconClock = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
    <circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" strokeLinecap="round" />
  </svg>
);

/* ---------- Utility strip + Nav ---------- */
function TopUtility() {
  return (
    <div className="utility">
      <div className="container">
        <div className="pill">
          <span className="pulse"></span>
          <span>Open today · Sat–Thu 08:00–20:00 · Fri 09:00–19:00</span>
        </div>
        <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
          <a href="tel:+97143158300" style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
            <IconPhone /> +971 4 315 8300
          </a>
          <span style={{ opacity: .5 }}>·</span>
          <a href="https://wa.me/97143158300" target="_blank" rel="noopener">WhatsApp</a>
          <span style={{ opacity: .5 }}>·</span>
          <a href="#contact">Villa 733, Jumeirah Beach Road</a>
          <span style={{ opacity: .5 }}>·</span>
          <span style={{ display: 'inline-flex', gap: 8 }}><span style={{ opacity: .5 }}>EN</span> / <span style={{ opacity: .5 }}>AR</span></span>
        </div>
      </div>
    </div>
  );
}

function Nav({ onAssessment }) {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#" className="nav-brand">
          <img src="media/logo-sameday.webp" alt="SameDay Dental Implants" />
          <span className="sub">Dubai</span>
        </a>
        <div className="nav-links">
          <a href="#treatments" className="has-caret">Implant Treatments</a>
          <a href="#zygomatic">Zygomatic</a>
          <a href="#dentists">Our Dentists</a>
          <a href="#international">International Patients</a>
          <a href="#guarantee">Guarantee</a>
          <a href="#contact">Contact</a>
        </div>
        <div className="nav-cta">
          <a href="tel:+97143158300" className="btn btn-ghost" style={{ display: 'inline-flex', gap: 8 }}>
            <IconPhone /> Call
          </a>
          <button className="btn btn-primary" onClick={onAssessment}>
            Free Implant Assessment <IconArrow />
          </button>
        </div>
      </div>
    </nav>
  );
}

/* ---------- Hero ---------- */
function Hero({ onAssessment }) {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow-row">
              <div className="eyebrow"><span className="dot"></span>Founded 2011 · Umm Suqeim 2, Dubai</div>
            </div>
            <h1 className="display">
              Fixed teeth in <em>a day.</em><br />
              Even for the <em>complex</em> cases.
            </h1>
            <p className="lede">
              Dubai's certified ZAGA &amp; Brånemark implant centre. Specialist surgeons, immediate-loading implants for suitable cases, zygomatic protocols without bone grafts &mdash; backed by a written 10-year implant guarantee.
            </p>
            <div className="hero-cta">
              <button className="btn btn-primary" onClick={onAssessment}>
                Book a free implant assessment <IconArrow />
              </button>
              <a href="https://wa.me/97143158300?text=Hi%20SameDay%2C%20I%27d%20like%20a%20free%20implant%20assessment" target="_blank" rel="noopener" className="btn btn-outline">
                WhatsApp +971 4 315 8300
              </a>
            </div>
            <div className="hero-micro">
              <div className="hero-micro-item">
                <span className="k">14</span>
                <span className="v">Specialist dentists</span>
              </div>
              <div className="hero-micro-item">
                <span className="k">Only</span>
                <span className="v">ZAGA Center in the GCC</span>
              </div>
              <div className="hero-micro-item">
                <span className="k">10 yr</span>
                <span className="v">Implant guarantee</span>
              </div>
              <div className="hero-micro-item">
                <span className="k">2011</span>
                <span className="v">Founder-led</span>
              </div>
            </div>
          </div>
          <div className="hero-photo">
            <img src="media/clinic-exterior-2.webp" alt="SameDay Dental Clinic — Villa 733, Jumeirah Beach Road, Dubai" />
            <div className="caption">Villa 733 · Jumeirah Beach Road</div>
            <div className="badge-stack">
              <div className="num">50k<span style={{ fontSize: 28, color: 'var(--gold)' }}>+</span></div>
              <div className="lbl">Implants placed</div>
              <div className="src">Clinic figure attributed to founder Dr. Costa Nicolopoulos.</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Trust marquee ---------- */
function TrustBand() {
  const items = [
    { strong: "Certified ZAGA Center", soft: "Zygoma Anatomy-Guided Approach" },
    { strong: "Brånemark Osseointegration Centre", soft: "Only in the Middle East" },
    { strong: "IBCCES Certified Autism Center™", soft: "First adult dental practice in UAE" },
    { strong: "10-Year Implant Guarantee", soft: "Per published conditions" },
    { strong: "MOH BD58756", soft: "Licensed by the UAE Ministry of Health" },
    { strong: "DXH member", soft: "Dubai Health Experience" },
  ];
  const loop = [...items, ...items];
  return (
    <div className="trust-band">
      <div className="trust-track">
        {loop.map((it, i) => (
          <div className="trust-item" key={i}>
            <span className="star">◆</span>
            <strong>{it.strong}</strong>
            <span>{it.soft}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- Credentials cards ---------- */
function Credentials() {
  const items = [
    {
      img: "media/logo-zaga.webp",
      scope: "First & only in the GCC",
      title: "Certified ZAGA Center",
      desc: "The Zygoma Anatomy-Guided Approach is a patient-specific protocol for zygomatic implants. Certification is awarded clinic-by-clinic worldwide.",
    },
    {
      img: "media/logo-branemark.webp",
      scope: "Only Brånemark centre in the ME",
      title: "Brånemark Osseointegration Centre",
      desc: "Named for Per-Ingvar Brånemark, the father of modern dental implantology. The clinic states only ~23 centres exist worldwide.",
    },
    {
      img: "media/badge-ibcces-autism.webp",
      scope: "First adult dental practice, UAE",
      title: "IBCCES Certified Autism Center™",
      desc: "Independently awarded by the International Board of Credentialing and Continuing Education Standards in October 2025.",
    },
    {
      img: "media/badge-10yr-warranty.webp",
      scope: "Per published conditions",
      title: "10-Year Implant Guarantee",
      desc: "If a SameDay-placed implant fails to integrate, it is removed and replaced at no additional cost. Conditions apply.",
    },
  ];
  return (
    <section className="creds" id="trust">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>The trust spine</div>
            <h2 className="display">Credentials worth verifying.</h2>
          </div>
          <p className="summary">
            We won't publish a star rating &mdash; aggregators disagree. Instead, the credentials below are independently issued, externally verifiable, and rarely held in combination.
          </p>
        </div>
      </div>
      <div className="creds-grid">
        {items.map((it, i) => (
          <div className="cred" key={i}>
            <div className="cred-mark">
              <img src={it.img} alt="" />
            </div>
            <div className="scope">{it.scope}</div>
            <h3>{it.title}</h3>
            <p>{it.desc}</p>
            <div className="verified">Independently issued</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- Same-day band ---------- */
function SameDayBand() {
  return (
    <section className="sameday" id="same-day">
      <div className="container">
        <div className="sameday-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}><span className="dot"></span>What "same-day" actually means</div>
            <p className="sameday-quote">
              One visit. CBCT, surgery, and a <span className="accent">fixed provisional</span> set of teeth &mdash; for suitable cases.
            </p>
          </div>
          <div className="sameday-body">
            <p>
              "Same-day dental implants" is an <strong>immediate-loading protocol</strong>. In one appointment we capture a CBCT scan, plan the placement in 3D, place the implants, and fit a fixed provisional bridge engineered by our in-house master lab.
            </p>
            <p>
              The final, definitive prosthesis is fitted at a later, scheduled visit once integration is confirmed. Same-day is appropriate for many full-arch and complex cases &mdash; including patients told they need bone grafts &mdash; but candidacy is determined per patient at consultation.
            </p>
            <p>
              For severe upper-jaw bone loss, our specialist team uses <strong>zygomatic implants via the ZAGA method</strong> &mdash; anchored in the cheekbone, avoiding bone grafts, with fixed teeth delivered the same day.
            </p>
            <div className="sameday-disclaimer">
              Same-day / "within 6 hours" describes the protocol for suitable cases &mdash; not a guaranteed outcome for every patient. Candidacy and outcomes are determined at your consultation by a specialist clinician. SameDay Dental Clinic LLC · MOH BD58756.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Treatments grid ---------- */
function Treatments({ onAssessment }) {
  const items = [
    {
      cls: "t-md", num: "01 · Single tooth",
      title: "Single Tooth Implant",
      desc: "One implant + crown to replace a single missing tooth, matched to your existing dentition.",
    },
    {
      cls: "t-md", num: "02 · Multiple teeth",
      title: "Multiple Teeth Implants",
      desc: "Two or more implants supporting bridges where several teeth are missing.",
    },
    {
      cls: "t-sm", num: "03 · Full arch",
      title: "All-on-4",
      desc: "A full fixed arch on four strategically angled implants.",
    },
    {
      cls: "t-sm", num: "04 · Full arch",
      title: "All-on-6",
      desc: "A full fixed arch on six implants — increased load distribution.",
    },
    {
      cls: "t-sm", num: "05 · Full arch",
      title: "All-on-X",
      desc: "A variable-implant fixed bridge — planned to the individual jaw.",
    },
    {
      cls: "t-sm", num: "06 · Posterior",
      title: "Pterygoid Implants",
      desc: "Anchored in the pterygoid region for posterior upper-jaw bone loss.",
    },
    {
      cls: "t-sm", num: "07 · Metal-free",
      title: "Ceramic Implants",
      desc: "Zirconia, metal-free alternative for patients who prefer it.",
    },
    {
      cls: "t-sm", num: "08 · Adjunct",
      title: "Bone Grafting",
      desc: "Augmentation when bone volume is insufficient for conventional implants.",
    },
  ];
  return (
    <section className="treatments" id="treatments">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>Implant treatments</div>
            <h2 className="display">From a single tooth to a full arch &mdash; in a day.</h2>
          </div>
          <p className="summary">
            A specialist oral &amp; maxillofacial surgeon and prosthodontist co-lead every case. CBCT planning, in-house master lab, and immediate-loading workflow under one roof.
          </p>
        </div>
        <div className="treatments-grid">
          {/* Flagship Zygomatic */}
          <a className="treatment t-flagship" href="#zygomatic">
            <div className="photo"><img src="media/service-zygomatic.webp" alt="Zygomatic implants — SameDay's flagship procedure" /></div>
            <div className="inner">
              <div className="ribbon">◆ Flagship procedure · ZAGA-certified</div>
              <h3 className="display">Zygomatic Implants.</h3>
              <p>For patients with severe maxillary bone loss who were told they need a bone graft. Anchored in the cheekbone via the ZAGA method &mdash; fixed teeth in one day.</p>
              <div className="footer">Read the protocol <span className="arrow"><IconArrow /></span></div>
            </div>
          </a>
          {items.map((it, i) => (
            <a className={"treatment " + it.cls} href="#" key={i}>
              <div className="num">{it.num}</div>
              <h3>{it.title}</h3>
              <p>{it.desc}</p>
              <div className="footer"><span>Learn more</span><span className="arrow"><IconArrow /></span></div>
            </a>
          ))}
        </div>
        <div style={{ marginTop: 36, display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center' }}>
          <button className="btn btn-primary" onClick={onAssessment}>
            Free implant assessment <IconArrow />
          </button>
          <span style={{ fontSize: 13.5, color: 'var(--slate)', fontStyle: 'italic' }}>
            No prices are published until clinically scoped — every case is unique.
          </span>
        </div>
      </div>
    </section>
  );
}

/* ---------- Zygomatic flagship feature ---------- */
function Zygomatic({ onAssessment }) {
  const points = [
    { n: "01", label: "For severe upper-jaw bone loss", desc: "Where conventional implants aren't possible &mdash; including patients told they need extensive bone grafting." },
    { n: "02", label: "Anchored in the zygoma", desc: "The cheekbone provides reliable anchorage, bypassing the need to rebuild lost maxillary bone." },
    { n: "03", label: "ZAGA-protocol planning", desc: "Five anatomical types of zygoma anatomy are classified per-patient, then the approach is tailored." },
    { n: "04", label: "Fixed teeth, same day", desc: "An immediate-loading fixed provisional bridge is fitted in one visit &mdash; the definitive prosthesis follows after integration." },
  ];
  return (
    <section className="zygomatic" id="zygomatic">
      <div className="container">
        <div className="zyg-grid">
          <div>
            <div className="eyebrow">◆ Flagship · zygomatic implants</div>
            <h2 className="display">
              Bone loss <em>isn't</em> a dead end.<br />
              The ZAGA approach.
            </h2>
            <p className="lede">
              SameDay is the first and only Certified ZAGA Center in the UAE and the wider GCC &mdash; the only clinic in the region authorised to deliver the Zygoma Anatomy-Guided Approach to zygomatic implant surgery.
            </p>
            <div className="zyg-points">
              {points.map((p, i) => (
                <div className="zyg-point" key={i}>
                  <span className="n">{p.n}</span>
                  <div>
                    <div className="label">{p.label}</div>
                    <div className="desc">{p.desc}</div>
                  </div>
                </div>
              ))}
            </div>
            <button className="btn btn-gold" onClick={onAssessment}>
              Discuss your case with a ZAGA-trained surgeon <IconArrow />
            </button>
          </div>
          <div className="zyg-photo">
            <img src="media/service-costa-at-work.webp" alt="Dr. Costa Nicolopoulos during zygomatic implant surgery" />
            <div className="zyg-card-overlay">
              <div>
                <div className="t display">Dr. Costa Nicolopoulos</div>
                <div className="s">Specialist Oral &amp; Maxillofacial Surgeon · ZAGA-certified · 50k+ implants placed (clinic figure)</div>
              </div>
              <img src="media/logo-zaga.webp" alt="ZAGA" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Process strip ---------- */
function Process() {
  const steps = [
    { hour: "Hour 0", n: "01", title: "CBCT &amp; consultation", desc: "3D imaging, oral exam, and candidacy review with a specialist. Sedation options discussed." },
    { hour: "Hour 1", n: "02", title: "Digital planning", desc: "Implant positions are planned in software against your CBCT. The master lab is briefed in parallel." },
    { hour: "Hour 2&ndash;5", n: "03", title: "Surgery &amp; placement", desc: "Implants placed under your chosen sedation by the OMFS &amp; prosthodontic team." },
    { hour: "Hour 6", n: "04", title: "Fixed provisional fitted", desc: "Your immediate-loading fixed provisional bridge is delivered the same day, for suitable cases." },
  ];
  return (
    <section className="process tight" id="process">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>The one-visit workflow</div>
            <h2 className="display">A day at SameDay.</h2>
          </div>
          <p className="summary">
            CBCT, 3D planning, surgical placement, and an in-house master dental lab all under one roof. That's how same-day actually works &mdash; for suitable cases.
          </p>
        </div>
        <div className="process-grid">
          {steps.map((s, i) => (
            <div className="process-step" key={i}>
              <div className="hour">{s.hour}</div>
              <div className="n">{s.n}</div>
              <h4 dangerouslySetInnerHTML={{ __html: s.title }} />
              <p dangerouslySetInnerHTML={{ __html: s.desc }} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  IconArrow, IconPhone, IconWhatsapp, IconClose, IconPin, IconClock,
  TopUtility, Nav, Hero, TrustBand, Credentials, SameDayBand, Treatments, Zygomatic, Process,
});