/* ============================================================
   SameDay Dental — App: remaining sections, modal, tweaks
   ============================================================ */

/* ---------- Founders + Team ---------- */
function Founders({ onAssessment }) {
  const team = [
    { src: "media/dr-ramy.webp", name: "Dr. Ramy Tamzouk", role: "Specialist Prosthodontist" },
    { src: "media/dr-indraniil.webp", name: "Dr. Indraniil Roy", role: "Specialist OMFS" },
    { src: "media/dr-abdelhakim.webp", name: "Dr. Abdelhakim A. El-Gheriani", role: "Consultant Orthodontist · ABO Diplomate" },
    { src: "media/dr-tina.webp", name: "Dr. Tina Rokadia", role: "Specialist Prosthodontist · Airway Dentist" },
  ];
  return (
    <section className="founders" id="dentists">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>The founders</div>
            <h2 className="display">A surgeon and a prosthodontist &mdash; in partnership since 2011.</h2>
          </div>
          <p className="summary">
            SameDay was co-founded by a specialist Oral &amp; Maxillofacial Surgeon and a specialist Prosthodontist. Every implant case is planned and reviewed by both disciplines &mdash; one mouth, one team.
          </p>
        </div>
        <div className="founders-grid">
          <div className="founder">
            <div className="founder-photo">
              <img src="media/dr-costa.webp" alt="Dr. Costa Nicolopoulos" />
              <div className="role">Co-founder · OMFS</div>
            </div>
            <div className="founder-meta">
              <h3 className="display">Dr. Costa Nicolopoulos</h3>
              <div className="cred">BDS cum laude · FFD (SA) · MFOS · Specialist Oral &amp; Maxillofacial Surgeon</div>
              <p>
                Qualified BDS with honours (Wits, 1984); FFD from the College of Medicine of South Africa (1990) after four years of Maxillo-Facial &amp; Oral Surgery training; in private OMFS practice since 1991. ZAGA-certified zygomatic implant expert; lectures internationally with the Academy of Osseointegration, AAED, Osseodensification Academy and ADI.
              </p>
              <p className="attribution">"50,000+ implants placed" is a clinic figure self-attributed by Dr. Costa; we present it as such, not as an independently audited figure.</p>
            </div>
          </div>
          <div className="founder">
            <div className="founder-photo">
              <img src="media/dr-petros.webp" alt="Dr. Petros Yuvanoglu" />
              <div className="role">Co-founder · Prosthodontist</div>
            </div>
            <div className="founder-meta">
              <h3 className="display">Dr. Petros Yuvanoglu</h3>
              <div className="cred">DMD summa cum laude · Cert. Prosthodontics (Tufts) · Specialist Prosthodontist</div>
              <p>
                DMD summa cum laude / valedictorian, Semmelweis (1995); three-year prosthodontics specialty certificate, Tufts University, Boston (1998); in private specialist prosthodontic practice since 1999. Adjunct Faculty at Tufts University School of Dental Medicine and Clinical Assistant Professor at Boston University Henry M. Goldman School of Dental Medicine.
              </p>
            </div>
          </div>
        </div>

        <div className="team-strip">
          <div className="team-member">
            <div className="pic" style={{ background: 'var(--bone)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <div style={{ textAlign: 'center', padding: 12 }}>
                <div className="display" style={{ fontSize: 28, color: 'var(--petrol-deep)', lineHeight: 1 }}>14</div>
                <div style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--slate)', marginTop: 4 }}>Specialist dentists</div>
              </div>
            </div>
            <div className="name display">The full team</div>
            <div className="role">14 specialists across OMFS, prosthodontics, ortho, endo, paeds &amp; airway.</div>
          </div>
          {team.map((m, i) => (
            <div className="team-member" key={i}>
              <div className="pic"><img src={m.src} alt={m.name} /></div>
              <div className="name display">{m.name}</div>
              <div className="role">{m.role}</div>
            </div>
          ))}
          <div className="team-member" style={{ justifyContent: 'center' }}>
            <div className="pic" style={{ background: 'var(--petrol-deep)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--gold-soft)' }}>
              <span style={{ fontFamily: 'var(--display-font)', fontSize: 22, fontStyle: 'italic' }}>+9 more</span>
            </div>
            <a href="#" className="name display" style={{ color: 'var(--petrol)' }}>Meet all 14 dentists</a>
            <div className="role">Endo · Ortho · Paeds · Sedation · Airway</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Accessibility / IBCCES ---------- */
function Accessibility() {
  const items = [
    { ic: "01", h: "Sensory accommodations", p: "Quieter rooms, dimmable lighting and noise-canceling options on request." },
    { ic: "02", h: "Pre-visit preparation", p: "Walk-through materials and pre-visit familiarisation for autistic patients and their families." },
    { ic: "03", h: "Sedation options", p: "Oral, conscious and general anaesthesia available with appropriate consultation." },
    { ic: "04", h: "Trained team", p: "Staff trained to IBCCES standards across sensory, communication and behavioural support." },
  ];
  return (
    <section className="access" id="accessibility">
      <div className="container">
        <div className="access-grid">
          <div className="access-left">
            <div className="access-badge"><img src="media/badge-ibcces-autism.webp" alt="IBCCES Certified Autism Center" /></div>
            <div className="eyebrow"><span className="dot"></span>Accessibility · Autism-friendly</div>
            <h2 className="display">A dental clinic that's calm by design.</h2>
            <p>
              In October 2025, SameDay became the first adult dental practice in Dubai and the UAE to earn the IBCCES Certified Autism Center™ designation &mdash; an independently issued, audit-based certification.
            </p>
            <p>
              We welcome autistic patients, neurodivergent adults and anyone whose previous dental visits have been difficult. Tell us in advance &mdash; we'll adapt.
            </p>
          </div>
          <div className="access-right">
            <div className="access-list">
              {items.map((it, i) => (
                <div className="access-list-item" key={i}>
                  <div className="ic">{it.ic}</div>
                  <div>
                    <h5>{it.h}</h5>
                    <p>{it.p}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- International ---------- */
function International({ onAssessment }) {
  return (
    <section className="intl" id="international">
      <div className="container">
        <div className="intl-grid">
          <div className="intl-photo">
            <img src="media/service-team-at-work.webp" alt="Treatment in progress at SameDay Dental" />
            <div className="stamp">
              <span className="b">Habibi,</span>
              <span className="s">come to</span>
              <span className="b" style={{ fontSize: 16 }}>Dubai</span>
            </div>
          </div>
          <div>
            <div className="eyebrow"><span className="dot"></span>International patients · DXH member</div>
            <h2 className="display">One flight. One visit. One smile.</h2>
            <p>
              Patients fly to SameDay from across the Gulf, MENA, Europe and beyond for the immediate-loading protocol. We coordinate diagnostics, treatment and recovery into the shortest viable stay &mdash; with concierge support for travel, accommodation and post-op review.
            </p>
            <div className="intl-languages">
              <span>English</span>
              <span>العربية</span>
              <span>Русский</span>
              <span>中文 (planned)</span>
              <span>French</span>
              <span>German</span>
            </div>
            <ul className="intl-bullets">
              <li>Pre-arrival CBCT and case review (send your records, we plan ahead).</li>
              <li>Coordinated stay across treatment days and recovery.</li>
              <li>Member of <strong>DXH &mdash; Dubai Health Experience</strong>, the city's official health-tourism platform.</li>
              <li>Documented aftercare plan and remote follow-up after you return.</li>
            </ul>
            <div style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={onAssessment}>Plan an international visit <IconArrow /></button>
              <a className="btn btn-outline" href="https://wa.me/97143158300" target="_blank" rel="noopener">Message us on WhatsApp</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Guarantee ---------- */
function Guarantee() {
  return (
    <section className="guarantee" id="guarantee">
      <div className="container">
        <div className="guarantee-grid">
          <div className="guarantee-mark">
            <div className="ring"></div>
            <div className="ring inner"></div>
            <div className="ring center">
              <span className="num">10</span>
              <span className="label">Year guarantee</span>
            </div>
          </div>
          <div>
            <div className="eyebrow">◆ The written guarantee</div>
            <h2 className="display">
              Ten years.<br />
              On every implant we place.
            </h2>
            <p>
              If an implant placed at SameDay fails to integrate within ten years, we remove it and &mdash; where indicated &mdash; replace it at no additional cost. Conditions are published in full and apply equally to every patient.
            </p>
            <ul>
              <li>Six-month clinical evaluations including X-rays and cleaning (free for the first two years; nominal fee thereafter).</li>
              <li>Adherence to the oral-hygiene instructions given at your case review.</li>
              <li>Wearing a night guard / bite plate if it has been prescribed for you.</li>
              <li>All repair, rework and replacement performed at SameDay.</li>
            </ul>
            <div className="compliance">
              We do not market implants as "permanent" or "for life". The guarantee runs for ten years from placement, per the published conditions.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Testimonials (compliant placeholder) ---------- */
function Testimonials() {
  const cards = [
    {
      quote: "We display patient testimonials only with documented written consent. Real, verbatim quotes will load here from the clinic's testimonials page.",
      source: "Pending — clinic to supply consent-cleared testimonials",
      attributed: "On-site /testimonials"
    },
    {
      quote: "Aggregate Google ratings remain unverified — sources conflict between 4.1 and 5.0 across 5 to 100 reviews. We won't publish a number we can't stand behind.",
      source: "Editorial decision",
      attributed: "Trust > Star score"
    },
    {
      quote: "Before / after imagery is consent-gated and DHA-compliance reviewed. A locked gallery placeholder will live behind this section in production.",
      source: "Compliance",
      attributed: "DHA / MOH standards"
    },
  ];
  return (
    <section className="testimonials" id="testimonials">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>What patients say</div>
            <h2 className="display">Real voices &mdash; once we have written consent.</h2>
          </div>
          <p className="summary">
            We will only publish attributed, consented testimonials &mdash; never composites, never AI-written copy, never an aggregate rating we cannot verify against a live Google Business Profile.
          </p>
        </div>
        <div className="test-grid">
          {cards.map((c, i) => (
            <div className="test-card" key={i}>
              <div className="stars">◆ ◆ ◆ ◆ ◆</div>
              <div className="quote">"{c.quote}"</div>
              <div className="source"><strong>{c.attributed}</strong> &mdash; {c.source}</div>
            </div>
          ))}
        </div>
        <div className="test-disclaimer">
          This block intentionally renders compliance-first placeholders for the demo. In production each card carries a named patient, treatment type and written consent reference.
        </div>
      </div>
    </section>
  );
}

/* ---------- CTA band + contact ---------- */
function CtaBand({ onAssessment }) {
  return (
    <section className="cta-band" id="contact">
      <div className="container">
        <div className="cta-band-grid">
          <div>
            <div className="eyebrow"><span className="dot"></span>Book a consultation</div>
            <h2 className="display">A specialist assessment is <em>free.</em></h2>
            <p>
              No commitment. A clinician will review your case, your imaging (if you have any) and your goals, then explain whether same-day immediate loading is right for you &mdash; or what alternative would be.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={onAssessment}>
                Free implant assessment <IconArrow />
              </button>
              <a className="btn btn-outline" href="https://wa.me/97143158300" target="_blank" rel="noopener">
                WhatsApp the clinic
              </a>
            </div>
          </div>
          <div className="cta-band-card">
            <h4 className="display">SameDay Dental Clinic</h4>
            <div className="row">
              <div className="ic"><IconPin /></div>
              <div>
                <div className="lbl">Address</div>
                <div className="val">Villa 733, Jumeirah Beach Road<br />Umm Suqeim 2, Dubai</div>
              </div>
            </div>
            <div className="row">
              <div className="ic"><IconClock /></div>
              <div>
                <div className="lbl">Hours</div>
                <div className="val">Sat–Thu · 08:00–20:00<br />Friday · 09:00–19:00</div>
              </div>
            </div>
            <div className="row">
              <div className="ic"><IconPhone /></div>
              <div>
                <div className="lbl">Phone &amp; WhatsApp</div>
                <div className="val"><a href="tel:+97143158300">+971 4 315 8300</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <img src="media/logo-sameday.webp" alt="SameDay Dental" />
            <p>Founder-led specialist dental implant clinic in Umm Suqeim 2, Dubai. Certified ZAGA Center, Brånemark Osseointegration Centre, IBCCES Certified Autism Center™. MOH BD58756.</p>
          </div>
          <div className="footer-col">
            <h5>Implant treatments</h5>
            <ul>
              <li><a href="#zygomatic">Zygomatic Implants</a></li>
              <li><a href="#">Same-Day / Immediate</a></li>
              <li><a href="#">All-on-4 / 6 / X</a></li>
              <li><a href="#">Single &amp; multiple</a></li>
              <li><a href="#">Ceramic implants</a></li>
              <li><a href="#guarantee">10-Year guarantee</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>The clinic</h5>
            <ul>
              <li><a href="#dentists">Our dentists</a></li>
              <li><a href="#international">International patients</a></li>
              <li><a href="#accessibility">Autism-friendly care</a></li>
              <li><a href="#">Before &amp; after</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Testimonials</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Contact</h5>
            <ul>
              <li>Villa 733, Jumeirah Beach Road<br />Umm Suqeim 2, Dubai</li>
              <li><a href="tel:+97143158300">+971 4 315 8300</a></li>
              <li><a href="https://wa.me/97143158300" target="_blank" rel="noopener">WhatsApp</a></li>
              <li>Sat–Thu · 08:00–20:00</li>
              <li>Friday · 09:00–19:00</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Same Day Dental Clinic LLC. All rights reserved.</div>
          <div className="licences">
            <span>MOH BD58756</span>
            <span>DHA-compliant</span>
            <span>DXH member</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ---------- WhatsApp FAB ---------- */
function WhatsAppFab() {
  return (
    <a className="fab" href="https://wa.me/97143158300?text=Hi%20SameDay%2C%20I%27d%20like%20a%20free%20implant%20assessment" target="_blank" rel="noopener" aria-label="WhatsApp the clinic">
      <IconWhatsapp />
    </a>
  );
}

/* ---------- Assessment modal ---------- */
function AssessmentModal({ open, onClose }) {
  const [sent, setSent] = useState(false);
  useEffect(() => {
    if (open) setSent(false);
    const handler = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [open, onClose]);

  const submit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  return (
    <div className={"modal-backdrop" + (open ? " open" : "")} onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close"><IconClose /></button>
        {!sent ? (
          <React.Fragment>
            <div className="eyebrow"><span className="dot"></span>Free implant assessment</div>
            <h3 className="display">Tell us a little about your case.</h3>
            <p className="sub">We'll come back within one working day to schedule a specialist consultation. Minimal information &mdash; no clinical detail required at this stage.</p>
            <form onSubmit={submit}>
              <div className="modal-row">
                <div>
                  <label>Full name</label>
                  <input type="text" required placeholder="Your name" />
                </div>
                <div>
                  <label>Mobile</label>
                  <input type="tel" required placeholder="+971 ..." />
                </div>
              </div>
              <label>Email</label>
              <input type="email" required placeholder="you@email.com" />
              <label>Treatment of interest</label>
              <select required>
                <option value="">Select an option</option>
                <option>Same-day / immediate implants</option>
                <option>Zygomatic implants</option>
                <option>All-on-4 / 6 / X</option>
                <option>Single or multiple implants</option>
                <option>Full-mouth rehabilitation</option>
                <option>Other / not sure yet</option>
              </select>
              <label>Preferred consultation date</label>
              <input type="date" />
              <button type="submit" className="btn btn-primary" style={{ width: '100%', marginTop: 18, justifyContent: 'center' }}>
                Request assessment <IconArrow />
              </button>
              <div className="small">
                By submitting you agree to be contacted by SameDay Dental Clinic regarding this enquiry. No clinical detail is collected on this form &mdash; that's gathered safely in-clinic.
              </div>
            </form>
          </React.Fragment>
        ) : (
          <div className="modal-success">
            <div className="check">✓</div>
            <h4 className="display">Thank you &mdash; we'll be in touch.</h4>
            <p>A coordinator will reach out within one working day to schedule your specialist consultation.</p>
            <p style={{ marginTop: 14, fontSize: 12.5 }}>Demo only &mdash; no data was submitted.</p>
          </div>
        )}
      </div>
    </div>
  );
}

/* ---------- Tweaks ---------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "petrol",
  "display": "serif",
  "rhythm": 1
}/*EDITMODE-END*/;

function TweaksUI() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.setAttribute('data-palette', tweaks.palette);
    document.documentElement.setAttribute('data-display', tweaks.display);
    document.documentElement.style.setProperty('--rhythm', String(tweaks.rhythm));
  }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette" />
      <TweakRadio
        label="Direction"
        value={tweaks.palette}
        onChange={(v) => setTweak('palette', v)}
        options={[
          { value: 'petrol', label: 'Petrol' },
          { value: 'navy', label: 'Navy' },
          { value: 'charcoal', label: 'Charcoal' },
        ]}
      />
      <TweakSection label="Display type" />
      <TweakRadio
        label="Family"
        value={tweaks.display}
        onChange={(v) => setTweak('display', v)}
        options={[
          { value: 'serif', label: 'Fraunces' },
          { value: 'sans', label: 'Inter Tight' },
        ]}
      />
      <TweakSection label="Section rhythm" />
      <TweakSlider
        label="Vertical pace"
        value={tweaks.rhythm}
        onChange={(v) => setTweak('rhythm', v)}
        min={0.6}
        max={1.3}
        step={0.05}
      />
    </TweaksPanel>
  );
}

/* ---------- App ---------- */
function App() {
  const [modal, setModal] = useState(false);
  const open = () => setModal(true);
  const close = () => setModal(false);
  return (
    <React.Fragment>
      <TopUtility />
      <Nav onAssessment={open} />
      <Hero onAssessment={open} />
      <TrustBand />
      <Credentials />
      <SameDayBand />
      <Treatments onAssessment={open} />
      <Zygomatic onAssessment={open} />
      <Process />
      <Founders onAssessment={open} />
      <Accessibility />
      <International onAssessment={open} />
      <Guarantee />
      <Testimonials />
      <CtaBand onAssessment={open} />
      <Footer />
      <WhatsAppFab />
      <AssessmentModal open={modal} onClose={close} />
      <TweaksUI />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<App />);