// Home page — visual-forward edition

function DSCHomePage({ navigate }) {
  const d = window.DSC_DATA;

  return (
    <div className="dsc-page" data-screen-label="01 Home">
      <DSCHero navigate={navigate} />

      {/* RATING BADGES — replaces plain strip with stylized arcs */}
      <section className="dsc-section" style={{paddingTop: "clamp(2rem, 4vw, 4rem)", paddingBottom: 0}}>
        <div className="dsc-container">
          <div className="dsc-ratings">
            <DSCRatingBadge
              score="4.99"
              max="5"
              count="40"
              platform="Doctify"
              accent
              caption="verified patients · re-checked 21 May 2026" />
            <DSCRatingBadge
              score="4.8"
              max="5"
              count="392"
              platform="Google"
              caption="directory-reported · live GBP pending" />
            <DSCRatingBadge
              score="20+"
              max="years"
              count={null}
              platform="In Dubai"
              caption="founded 2006 · German-Swedish" />
            <DSCRatingBadge
              score="DHA"
              max=""
              count={null}
              platform="Regulated"
              caption="Trio Dental Center LLC" />
          </div>
        </div>
      </section>

      {/* FEATURED TREATMENTS — 3 big image cards */}
      <section className="dsc-section" data-screen-label="featured">
        <div className="dsc-container">
          <DSCSectionHead
            eyebrow="Higher-ticket care"
            title={<>Three things we are <em>known for.</em></>}
            link={{ href: "#/treatments", label: "All treatments", onClick: (e) => { e.preventDefault(); navigate("treatments"); } }}
          />
          <div className="dsc-featured-grid">
            <DSCFeaturedCard
              navigate={navigate}
              slug="dental-implants"
              tag="Implantology"
              title="Dental implants"
              subtitle="UCLA-trained · CBCT-planned · guided"
              image="media/images/treatment-implant.webp"
              dentist="Led by Dr. Rabih Abi Nader" />
            <DSCFeaturedCard
              navigate={navigate}
              slug="veneers"
              tag="Cosmetic"
              title="Veneers &amp; smile makeover"
              subtitle="Digital Smile Design · porcelain &amp; composite"
              image="media/images/treatment-orthodontics.webp"
              dentist="Led by Dr. Maximilian Riewer" />
            <DSCFeaturedCard
              navigate={navigate}
              slug="root-canal"
              tag="Endodontics"
              title="Root canal"
              subtitle="Microscope-assisted · gentle, pain-free"
              image="media/images/treatment-rootcanal.webp"
              dentist="Led by Dr. Wael Arabi" />
          </div>
        </div>
      </section>

      {/* TREATMENTS GRID — 12 categories, compact */}
      <section className="dsc-section dsc-section--surface" data-screen-label="treatments-grid">
        <div className="dsc-container">
          <DSCSectionHead
            eyebrow="What we treat"
            title={<>Twelve disciplines, <em>one team.</em></>}
          />
          <div className="dsc-treat-list">
            {d.treatments.map((t) => (
              <DSCTreatmentCard key={t.slug} t={t}
                onClick={(e) => { e.preventDefault(); navigate("treatments", { slug: t.slug }); }} />
            ))}
          </div>
        </div>
      </section>

      {/* TEAM — editorial spread */}
      <section className="dsc-section" data-screen-label="team">
        <div className="dsc-container">
          <div className="dsc-team-spread">
            <div className="dsc-team-photo">
              <img src="media/images/clinic-team-group.webp" alt="The team at Dubai Sky Clinic by Trio Dental Center" />
              <div className="dsc-team-photo-meta">
                <span>The team · 2026</span>
                <span>13 dentists · 5 languages</span>
              </div>
            </div>
            <div className="dsc-team-text">
              <div className="dsc-eyebrow">The people behind the chair</div>
              <h2 className="dsc-h1" style={{fontSize: "clamp(2.5rem, 5vw, 4.5rem)", marginTop: "1rem"}}>
                A clinic founded by two — staffed by <em>thirteen.</em>
              </h2>
              <p className="dsc-lede" style={{marginTop: "1.5rem"}}>
                Dr. Maximilian Riewer (DDS Germany) and Anna Maria Silfverskiöld opened the practice in 2006. Today the team works in <strong>English, German, Arabic, French</strong> and more — each dentist a specialist, none a generalist in disguise.
              </p>
              <div className="dsc-team-roster">
                {d.dentists.filter((x) => x.verified).map((doc) => (
                  <a key={doc.slug} className="dsc-team-mini" href={`#/dentists/${doc.slug}`}
                     onClick={(e) => { e.preventDefault(); navigate("dentists", { slug: doc.slug }); }}>
                    <img src={doc.photo} alt={doc.name} />
                    <div>
                      <div className="dsc-team-mini-name">{doc.name.replace(/^Dr\.\s+/, "Dr. ")}</div>
                      <div className="dsc-team-mini-role">{doc.role}</div>
                    </div>
                  </a>
                ))}
              </div>
              <a className="dsc-btn dsc-btn-ghost" href="#/dentists"
                 onClick={(e) => { e.preventDefault(); navigate("dentists"); }} style={{marginTop: "1.5rem"}}>
                Meet all 13 dentists →
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* TOUR THE CLINIC — image strip */}
      <section className="dsc-section dsc-section--surface" data-screen-label="tour">
        <div className="dsc-container">
          <DSCSectionHead
            eyebrow="The premises"
            title={<>A clinic that <em>looks like</em> the work it does.</>}
          />
          <div className="dsc-tour-grid">
            <div className="dsc-tour-card dsc-tour-card--lg">
              <img src="media/images/clinic-interior-01.webp" alt="Reception" />
              <div className="dsc-tour-overlay">
                <span className="dsc-mono">01 · RECEPTION</span>
                <span className="dsc-mono">21F · Burjuman</span>
              </div>
            </div>
            <div className="dsc-tour-card">
              <img src="media/images/treatment-implant.webp" alt="Treatment room" />
              <div className="dsc-tour-overlay">
                <span className="dsc-mono">02 · CHAIR</span>
                <span className="dsc-mono">CBCT-equipped</span>
              </div>
            </div>
            <div className="dsc-tour-card">
              <img src="media/images/clinic-business-bay-03.webp" alt="Corridor" />
              <div className="dsc-tour-overlay">
                <span className="dsc-mono">03 · BUSINESS BAY</span>
                <span className="dsc-mono">sister premises</span>
              </div>
            </div>
            <div className="dsc-tour-card">
              <img src="media/images/treatment-rootcanal.webp" alt="Endodontics" />
              <div className="dsc-tour-overlay">
                <span className="dsc-mono">04 · ENDO</span>
                <span className="dsc-mono">microscope-assisted</span>
              </div>
            </div>
          </div>
          <p className="dsc-flag" style={{marginTop: "1rem"}}>
            Hero & interior shots from Trio Dental Center. Commission a Burjuman-specific 21st-floor view for production.
          </p>
        </div>
      </section>

      {/* REVIEWS — visual quote */}
      <section className="dsc-section" data-screen-label="reviews">
        <div className="dsc-container">
          <div className="dsc-reviews-spread">
            <div className="dsc-reviews-ring">
              <DSCRatingRing score={4.99} />
              <div className="dsc-reviews-ring-meta">
                <div className="dsc-eyebrow">On Doctify</div>
                <div className="dsc-mono" style={{marginTop: 6, color: "var(--ink-mute)"}}>40 verified · 107 expertise areas</div>
                <a className="dsc-btn-link" href="https://www.doctify.com/en-ae/practice/dubai-sky-clinic-by-trio-dental" target="_blank" rel="noreferrer" style={{marginTop: "1rem"}}>
                  View on Doctify →
                </a>
              </div>
            </div>
            <div className="dsc-reviews-quotes">
              {d.reviews.slice(0, 3).map((r, i) => (
                <div className="dsc-quote-card" key={i}>
                  <span className="dsc-quote-mark" aria-hidden="true">&ldquo;</span>
                  <p className="dsc-quote-text">{r.quote}</p>
                  <div className="dsc-quote-meta">
                    <span>{r.attribution} · {r.treatment}</span>
                    <span className="dsc-mono">{r.date}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* FINANCING — visual */}
      <section className="dsc-section dsc-section--ink" data-screen-label="financing">
        <div className="dsc-container">
          <div className="dsc-pay-grid">
            <div>
              <div className="dsc-eyebrow" style={{color: "color-mix(in oklab, var(--bg) 60%, transparent)", marginBottom: "1rem"}}>Financing</div>
              <h2 className="dsc-h2" style={{color: "var(--bg)", textWrap: "balance"}}>
                Higher-ticket treatment. <em style={{color: "var(--accent)"}}>Paid in four.</em>
              </h2>
              <p className="dsc-lede" style={{color: "color-mix(in oklab, var(--bg) 75%, transparent)", marginTop: "1.5rem"}}>
                Implants, smile makeovers and aligners are eligible for Tabby's pay-in-four. Quoted in writing at consultation — never on the internet.
              </p>
            </div>
            <div className="dsc-pay-visual">
              <div className="dsc-pay-amount">
                <span className="dsc-mono dsc-pay-label">EXAMPLE — IMPLANT CASE</span>
                <span className="dsc-pay-total">AED <em>—</em></span>
                <span className="dsc-pay-divide">÷ 4</span>
                <span className="dsc-pay-each">≈ AED — per month</span>
              </div>
              <div className="dsc-pay-tabby">
                <img src="media/logos/tabby-payment-logo.webp" alt="Tabby" />
                <span>powered by Tabby · subject to approval</span>
              </div>
              <p className="dsc-flag" style={{color: "color-mix(in oklab, var(--bg) 50%, transparent)", marginTop: "1rem"}}>
                No invented prices — quoted in clinic.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* BRANCHES — image backgrounds */}
      <section className="dsc-section" data-screen-label="branches">
        <div className="dsc-container">
          <DSCSectionHead
            eyebrow="Visit us"
            title={<>Two premises. <em>One operator.</em></>}
          />
          <div className="dsc-branch-cards">
            {d.branches.map((b, i) => (
              <DSCBranchCard key={b.id} branch={b} navigate={navigate}
                image={b.id === "burjuman" ? "media/images/clinic-interior-01.webp" : "media/images/clinic-business-bay-03.webp"} />
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---- Rating arc badge ---- */
function DSCRatingBadge({ score, max, count, platform, caption, accent }) {
  return (
    <div className={`dsc-rating-badge ${accent ? "dsc-rating-badge--accent" : ""}`}>
      <div className="dsc-rating-badge-num">
        <span className="dsc-rating-badge-score">{score}</span>
        {max && <span className="dsc-rating-badge-max">/{max}</span>}
      </div>
      <div className="dsc-rating-badge-plat">{platform}</div>
      <div className="dsc-rating-badge-cap">{caption}</div>
    </div>
  );
}

/* ---- Rating ring (SVG) ---- */
function DSCRatingRing({ score = 4.99, max = 5 }) {
  const pct = score / max;
  const radius = 88;
  const circ = 2 * Math.PI * radius;
  const offset = circ * (1 - pct);
  return (
    <svg className="dsc-rating-ring" width="220" height="220" viewBox="0 0 220 220">
      <circle cx="110" cy="110" r={radius} fill="none" stroke="var(--rule)" strokeWidth="2" />
      <circle cx="110" cy="110" r={radius} fill="none"
              stroke="var(--accent)" strokeWidth="2"
              strokeDasharray={circ} strokeDashoffset={offset}
              transform="rotate(-90 110 110)"
              strokeLinecap="round" />
      <text x="110" y="105" textAnchor="middle" fontFamily="var(--display)" fontSize="48" fill="var(--ink)" letterSpacing="-0.02em">
        {score.toFixed(2)}
      </text>
      <text x="110" y="135" textAnchor="middle" fontFamily="var(--sans)" fontSize="11" fill="var(--ink-mute)" letterSpacing="0.16em">
        OUT OF {max}
      </text>
    </svg>
  );
}

/* ---- Featured treatment card ---- */
function DSCFeaturedCard({ slug, tag, title, subtitle, image, dentist, navigate }) {
  return (
    <a className="dsc-featured" href={`#/treatments/${slug}`}
       onClick={(e) => { e.preventDefault(); navigate("treatments", { slug }); }}>
      <div className="dsc-featured-img">
        <img src={image} alt="" />
      </div>
      <div className="dsc-featured-body">
        <div className="dsc-mono dsc-featured-tag">{tag.toUpperCase()}</div>
        <h3 className="dsc-featured-title" dangerouslySetInnerHTML={{ __html: title }} />
        <p className="dsc-featured-sub">{subtitle}</p>
        <div className="dsc-featured-foot">
          <span>{dentist}</span>
          <span className="dsc-featured-arrow">→</span>
        </div>
      </div>
    </a>
  );
}

/* ---- Branch card ---- */
function DSCBranchCard({ branch, image, navigate }) {
  const b = branch;
  return (
    <div className="dsc-branch-card">
      <div className="dsc-branch-card-img">
        <img src={image} alt={b.brand} />
        <div className="dsc-branch-card-img-tag">
          <span className="dsc-eyebrow">{b.flagship ? "Flagship" : "Sister premises"}</span>
        </div>
      </div>
      <div className="dsc-branch-card-body">
        <h3 className="dsc-h3">{b.brand}</h3>
        <div className="dsc-mono" style={{color: "var(--ink-mute)", marginTop: 4}}>{b.label}</div>
        <div style={{marginTop: "1.25rem", fontSize: "0.95rem", lineHeight: 1.6, color: "var(--ink-soft)"}}>
          <div>{b.address1}</div>
          <div>{b.address2}</div>
          <div>{b.address3}</div>
        </div>
        <div style={{marginTop: "1rem", fontSize: "0.88rem", color: "var(--ink-soft)"}}>
          {b.hours.map((h, i) => <div key={i}><strong style={{color: "var(--ink)"}}>{h.d}</strong> · {h.t}</div>)}
        </div>
        <div style={{marginTop: "1.5rem", display: "flex", gap: "0.5rem", flexWrap: "wrap"}}>
          <a className="dsc-btn dsc-btn-ghost" href={b.phoneTel}>{b.phone}</a>
          <a className="dsc-btn dsc-btn-ghost" href={`https://www.google.com/maps/search/?api=1&query=${b.coords.lat},${b.coords.lng}`} target="_blank" rel="noreferrer">Directions</a>
          <a className="dsc-btn dsc-btn-primary" href="#/book" onClick={(e) => { e.preventDefault(); navigate("book", { branch: b.id }); }}>Book here →</a>
        </div>
      </div>
    </div>
  );
}

window.DSCHomePage = DSCHomePage;
window.DSCRatingBadge = DSCRatingBadge;
window.DSCRatingRing = DSCRatingRing;
window.DSCFeaturedCard = DSCFeaturedCard;
window.DSCBranchCard = DSCBranchCard;
