// Home page

const { useState: useStateHome, useEffect: useEffectHome } = React;

function HomePage({ setRoute, accent }) {
  const data = window.BOV_DATA;
  const c = data.clinic;

  const featured = ["diagnostics-imaging","emergency-critical-care","surgery","dermatology","vaccinations","dentistry","internal-medicine","physiotherapy"];
  const featSvcs = featured.map(s => data.services.find(x => x.slug === s));

  const teamTeaser = ["magdalena-lisinska","dieter-malleczek","nour-abou-fakher","mariana-barreto"]
    .map(s => data.vets.find(v => v.slug === s));

  return (
    <main className="page-enter">

      {/* HERO */}
      <section className="hero">
        <div className="container hero-grid">
          <div className="hero-copy">
            <div className="hero-eyebrow">
              <span className="dot" style={{ background: "var(--leaf)" }}/>
              <span>Open today · 24/7 emergency care</span>
            </div>

            <h1 className="hero-h">
              Trusted veterinary <em>care</em> in Dubai
              <span className="hero-sub-line">since <span className="hero-year">2008</span>.</span>
            </h1>

            <p className="hero-lede">
              A small-animal hospital with an in-house MRI suite, an international specialist team of {data.vets.length}, and an emergency line that doesn't sleep. We care more — and we mean it.
            </p>

            <div className="hero-cta">
              <button className="btn btn-primary" onClick={() => setRoute({ page: "contact" })}>
                <Icon name="calendar" size={16} stroke={2}/> Book an appointment
              </button>
              <a className="btn btn-emergency" href={`tel:${c.emergencyTel.replace(/\s+/g,'')}`}>
                <Icon name="alert" size={16} stroke={2}/> Emergency · 050 557 8834
              </a>
            </div>

            <div className="hero-trust">
              {data.trust.map((t, i) => (
                <React.Fragment key={t}>
                  <span className="hero-trust-item">{t}</span>
                  {i < data.trust.length - 1 && <span className="hero-trust-sep">·</span>}
                </React.Fragment>
              ))}
            </div>
          </div>

          <div className="hero-visual">
            <div className="hero-photo-main photo">
              <img src="media/consult-cat-stethoscope-exam.webp" alt="A vet examining a cat with a stethoscope" />
            </div>
            <div className="hero-photo-sub photo">
              <img src="media/clinic-imaging-suite.webp" alt="The in-house MRI imaging suite at Blue Oasis Vet" />
            </div>
            <div className="hero-photo-tag">
              <Icon name="scan" size={16}/>
              <div>
                <div style={{fontFamily:"var(--f-mono)", fontSize:10.5, letterSpacing:".18em", color:"var(--mute)", textTransform:"uppercase"}}>In-house</div>
                <div style={{fontWeight:600, color:"var(--ink)", fontSize:14}}>MRI · X-ray · Ultrasound · Lab</div>
              </div>
            </div>
            <div className="hero-photo-stat">
              <div className="hero-stat-num h-display">16+</div>
              <div className="hero-stat-l">years of practice<br/><span style={{color:"var(--mute)"}}>established 2008</span></div>
            </div>
          </div>
        </div>

        <ECGLine color="var(--oasis)" />
      </section>

      {/* MARQUEE / pet types ribbon */}
      <section className="ribbon-section">
        <div className="container ribbon">
          <span className="eyebrow dim">We care for</span>
          <span className="ribbon-item">Dogs</span><span className="ribbon-sep">·</span>
          <span className="ribbon-item">Cats</span><span className="ribbon-sep">·</span>
          <span className="ribbon-item">Rabbits</span><span className="ribbon-sep">·</span>
          <span className="ribbon-item">Avian</span><span className="ribbon-sep">·</span>
          <span className="ribbon-item">Exotics</span>
          <span style={{ flex: 1 }}/>
          <a href={c.booking} target="_blank" rel="noreferrer" className="ribbon-cta">
            Online booking via Floof <Icon name="arrow-up-right" size={14} stroke={2}/>
          </a>
        </div>
      </section>

      {/* DIAGNOSTICS — differentiator band */}
      <section className="diag-band">
        <div className="container diag-grid">
          <div className="diag-copy">
            <span className="eyebrow">The differentiator</span>
            <h2 className="h-display" style={{ fontSize: "clamp(36px, 5vw, 64px)", margin: "12px 0 18px" }}>
              A diagnostic suite under one roof.
            </h2>
            <p className="lede" style={{ maxWidth: 540 }}>
              MRI, digital X-ray, ultrasound and an in-house laboratory — so we can move from suspicion to diagnosis in a single visit, without sending you across town. We also accept MRI, cytology and oncology referrals from other clinics.
            </p>

            <div className="diag-grid-mini">
              {[
                { i: "scan", t: "MRI", s: "Soft-tissue, neuro, orthopaedic" },
                { i: "spark", t: "Digital X-ray", s: "Skeletal, thoracic, abdominal" },
                { i: "drop", t: "Ultrasound", s: "Abdominal & cardiac" },
                { i: "tag", t: "Laboratory", s: "Bloods, biochem, cytology" },
              ].map(it => (
                <div key={it.t} className="diag-mini-card">
                  <span className="diag-mini-ico"><Icon name={it.i} size={20}/></span>
                  <div>
                    <div style={{ fontWeight: 600, color: "var(--oasis-deep)" }}>{it.t}</div>
                    <div style={{ fontSize: 13, color: "var(--slate)" }}>{it.s}</div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 28 }}>
              <button className="btn btn-primary" onClick={() => setRoute({ page: "diagnostics" })}>
                Tour the imaging suite <Icon name="arrow-right" size={14} stroke={2}/>
              </button>
            </div>
          </div>

          <div className="diag-visual">
            <div className="photo">
              <img src="media/imaging-equipment-station.webp" alt="Imaging equipment station with monitors and anaesthesia"/>
            </div>
            <div className="diag-callout">
              <div style={{display:"flex", alignItems:"center", gap:10, marginBottom:8}}>
                <Icon name="stethoscope" size={18} style={{ color: "var(--leaf-deep)" }}/>
                <span className="eyebrow" style={{color:"var(--leaf-deep)"}}>Referrals welcome</span>
              </div>
              <p style={{margin:0, color: "var(--slate)", fontSize: 14, lineHeight: 1.5}}>
                Other clinics: refer MRI, cytology and oncology cases to our imaging team and you'll receive a written report within working hours.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* SERVICES GRID */}
      <section style={{ background: "var(--paper-warm)" }}>
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">What we do</span>
              <h2 className="h-display" style={{ fontSize: "clamp(34px, 4.4vw, 56px)", margin: "10px 0 6px" }}>
                Care across <em>every</em> stage of life.
              </h2>
              <p className="lede">From puppy boosters to complex surgery and end-of-life comfort — built around your pet's life, not a checklist.</p>
            </div>
            <button className="btn btn-ghost" onClick={() => setRoute({ page: "services" })}>
              All {data.services.length} services <Icon name="arrow-right" size={14} stroke={2}/>
            </button>
          </div>

          <div className="svc-grid">
            {featSvcs.map((s, i) => (
              <button key={s.slug}
                className={"svc-card card card-link " + (i === 0 ? "svc-card-feat" : "")}
                onClick={() => setRoute({ page: "service", slug: s.slug })}>
                <div className="svc-card-head">
                  <span className="svc-ico"><Icon name={s.icon} size={20}/></span>
                  {s.flagship && <span className="tag leaf">Flagship</span>}
                  {s.group === "Urgent" && <span className="tag alert">24/7</span>}
                </div>
                <h3 className="svc-name">{s.name}</h3>
                <p className="svc-lede">{s.lede}</p>
                <span className="svc-more">
                  Read more <Icon name="arrow-right" size={13} stroke={2}/>
                </span>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* MEET THE TEAM TEASER */}
      <section style={{ background: "var(--oasis-deep)", color: "#fff" }}>
        <div className="container">
          <div className="section-head dark">
            <div>
              <span className="eyebrow" style={{ color: "rgba(255,255,255,.6)" }}>The people</span>
              <h2 className="h-display" style={{ fontSize: "clamp(34px, 4.4vw, 56px)", color: "#fff", margin: "10px 0 6px" }}>
                An international team you'll <em>actually</em> meet.
              </h2>
              <p className="lede" style={{ color: "rgba(255,255,255,.78)" }}>
                {data.vets.length} vets across surgery, dermatology, imaging, oncology, internal medicine and emergency. Trained in Vienna, Wroclaw, Cairo, Brno, Beirut, Manila and Kyiv — practising in Dubai.
              </p>
            </div>
            <button className="btn btn-ghost btn-on-dark" onClick={() => setRoute({ page: "team" })}>
              Meet the team <Icon name="arrow-right" size={14} stroke={2}/>
            </button>
          </div>

          <div className="team-teaser">
            {teamTeaser.map(v => (
              <button key={v.slug} className="vet-tile" onClick={() => setRoute({ page: "vet", slug: v.slug })}>
                <div className="vet-tile-photo"><img src={v.photo} alt={v.name}/></div>
                <div className="vet-tile-meta">
                  <div className="vet-tile-name">{v.name}</div>
                  <div className="vet-tile-role">{v.role}</div>
                  <div className="vet-tile-tags">
                    {v.tags.slice(0,2).map(t => <span key={t} className="tag soft" style={{background:"rgba(255,255,255,.10)", color:"rgba(255,255,255,.88)"}}>{t}</span>)}
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* CONVENIENCE LAYER */}
      <section>
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">Convenience layer</span>
              <h2 className="h-display" style={{ fontSize: "clamp(32px, 4vw, 50px)", margin: "10px 0 6px" }}>
                When you (or your pet) can't come in.
              </h2>
            </div>
          </div>

          <div className="conv-grid">
            <button className="conv-card card card-link" onClick={() => setRoute({ page: "service", slug: "housecall" })}>
              <Icon name="house" size={26}/>
              <h3>Housecall</h3>
              <p>A vet at your door for wellness checks, vaccinations and end-of-life care.</p>
              <span className="svc-more">Request a visit <Icon name="arrow-right" size={13} stroke={2}/></span>
            </button>
            <button className="conv-card card card-link" onClick={() => setRoute({ page: "service", slug: "pet-taxi" })}>
              <Icon name="car" size={26}/>
              <h3>Pet Taxi</h3>
              <p>Climate-controlled transport with a trained handler. Door to clinic and back.</p>
              <span className="svc-more">Book a ride <Icon name="arrow-right" size={13} stroke={2}/></span>
            </button>
            <a className="conv-card card card-link" href={window.BOV_DATA.clinic.booking} target="_blank" rel="noreferrer">
              <Icon name="calendar" size={26}/>
              <h3>Online booking</h3>
              <p>Pick a slot through our Floof booking page — no phone tag, no waiting room queue.</p>
              <span className="svc-more">Open Floof <Icon name="arrow-up-right" size={13} stroke={2}/></span>
            </a>
            <button className="conv-card card card-link" onClick={() => setRoute({ page: "service", slug: "pet-relocation" })}>
              <Icon name="plane" size={26}/>
              <h3>Pet Relocation</h3>
              <p>Export paperwork &amp; travel coordination via our partner Blue Sky Pet Relocation.</p>
              <span className="svc-more">Plan a move <Icon name="arrow-right" size={13} stroke={2}/></span>
            </button>
          </div>
        </div>
      </section>

      {/* TESTIMONIAL — careful: no fabricated rating */}
      <section style={{ background: "var(--sky)" }}>
        <div className="container test-grid">
          <div className="test-q">
            <span className="eyebrow">In our owners' words</span>
            <p className="h-display test-quote">
              "They diagnosed in one visit what two other clinics had missed. The MRI, the team, the way they speak to you — it's the standard you wish every clinic met."
            </p>
            <div className="test-attr">
              <span style={{ fontWeight: 600 }}>An owner of a 9-year-old Labrador</span>
              <span style={{ color: "var(--mute)", fontSize: 13 }}>
                Verbatim quotations to be reviewed and approved with the clinic before publishing alongside Google rating.
              </span>
            </div>
          </div>
          <div className="test-stats">
            {data.stats.map(s => (
              <div key={s.l} className="test-stat">
                <div className="test-stat-v h-display">{s.v}</div>
                <div className="test-stat-l">{s.l}</div>
              </div>
            ))}
            <div className="test-stat-foot">
              All figures reported by the clinic.
            </div>
          </div>
        </div>
      </section>

      {/* EMERGENCY BAND */}
      <section className="emerg-band">
        <div className="container emerg-grid">
          <div>
            <span className="eyebrow" style={{ color: "rgba(255,255,255,.7)" }}>If it can't wait</span>
            <h2 className="h-display" style={{ fontSize: "clamp(34px, 4.4vw, 56px)", color: "#fff", margin: "10px 0 14px" }}>
              Emergency care, 24 hours a day.
            </h2>
            <p style={{ color: "rgba(255,255,255,.85)", fontSize: 17, maxWidth: 560 }}>
              Call ahead so the team is ready when you arrive. Trauma, poisoning, breathing distress, blockages and post-surgery monitoring — every hour, every day.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
              <a className="btn" style={{ background: "#fff", color: "var(--alert-deep)" }} href={`tel:${c.emergencyTel.replace(/\s+/g,'')}`}>
                <Icon name="phone" size={16} stroke={2}/> 050 557 8834
              </a>
              <a className="btn btn-on-dark btn-ghost" style={{ borderColor: "rgba(255,255,255,.4)", color: "#fff" }} href={`tel:${c.phoneTel}`}>
                Main line · 04 884 8580
              </a>
            </div>
          </div>
          <div className="emerg-ecg">
            <ECGPulse color="rgba(255,255,255,.4)"/>
            <ECGPulse color="rgba(255,255,255,.7)"/>
            <ECGPulse color="#fff"/>
          </div>
        </div>
      </section>

      <style>{`
        /* HERO */
        .hero {
          padding-top: clamp(50px, 7vw, 96px);
          padding-bottom: clamp(40px, 5vw, 72px);
          background:
            radial-gradient(800px 400px at 90% 0%, var(--sky) 0, transparent 60%),
            radial-gradient(600px 320px at 0% 100%, rgba(90,171,63,.10) 0, transparent 60%),
            var(--paper-warm);
        }
        .hero-grid {
          display: grid;
          grid-template-columns: 1.05fr 1fr;
          gap: clamp(40px, 6vw, 80px);
          align-items: center;
        }
        .hero-eyebrow {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 6px 12px;
          background: var(--paper);
          border: 1px solid var(--line);
          border-radius: var(--r-pill);
          font-size: 13px; font-weight: 500;
          color: var(--slate);
          margin-bottom: 22px;
        }
        .hero-h {
          font-family: var(--f-display);
          font-weight: 400;
          font-size: clamp(48px, 7vw, 92px);
          line-height: 0.98;
          letter-spacing: -0.02em;
          color: var(--oasis-deep);
          margin: 0 0 24px;
        }
        .hero-h em { font-style: italic; color: var(--leaf-deep); }
        .hero-sub-line {
          display: block;
          font-size: clamp(36px, 5vw, 72px);
          color: var(--ink);
          opacity: .92;
        }
        .hero-year { color: var(--oasis); font-style: italic; }
        .hero-lede { font-size: 18px; line-height: 1.5; color: var(--slate); max-width: 540px; margin: 0 0 32px; }
        .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
        .hero-trust {
          display: flex; flex-wrap: wrap; gap: 6px 12px;
          font-family: var(--f-mono); font-size: 11.5px;
          letter-spacing: .12em; text-transform: uppercase; color: var(--slate);
        }
        .hero-trust-sep { color: var(--oasis); }
        .hero-trust-item { color: var(--slate); }

        .hero-visual {
          position: relative;
          aspect-ratio: 5 / 6;
          max-width: 560px;
          margin-left: auto;
          width: 100%;
        }
        .hero-photo-main {
          position: absolute; inset: 0 0 18% 22%;
          border-radius: 240px 240px 32px 32px;
          box-shadow: 0 30px 60px -25px rgba(15,26,36,.32);
        }
        .hero-photo-sub {
          position: absolute; left: 0; bottom: 0;
          width: 46%; aspect-ratio: 4/3;
          border-radius: 22px;
          border: 6px solid var(--paper-warm);
          box-shadow: 0 20px 40px -20px rgba(15,26,36,.28);
        }
        .hero-photo-tag {
          position: absolute; top: 24px; left: -8px;
          background: var(--paper);
          padding: 12px 16px;
          border-radius: var(--r-md);
          box-shadow: 0 10px 30px -10px rgba(15,26,36,.18);
          display: inline-flex; align-items: center; gap: 12px;
          color: var(--oasis);
        }
        .hero-photo-stat {
          position: absolute; right: -12px; bottom: 24%;
          background: var(--oasis-deep);
          color: #fff;
          padding: 16px 18px;
          border-radius: var(--r-md);
          display: inline-flex; align-items: center; gap: 14px;
          box-shadow: 0 18px 40px -18px rgba(12,58,92,.6);
        }
        .hero-stat-num { font-size: 48px; line-height: 1; color: #fff; }
        .hero-stat-l { font-size: 12.5px; line-height: 1.3; color: rgba(255,255,255,.86); }

        /* RIBBON */
        .ribbon-section { padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
        .ribbon { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
        .ribbon-item { font-family: var(--f-display); font-style: italic; font-size: 22px; color: var(--oasis-deep); }
        .ribbon-sep { color: var(--leaf); }
        .ribbon-cta {
          display: inline-flex; align-items: center; gap: 6px;
          font-size: 13px; font-weight: 600; color: var(--oasis);
        }

        /* DIAG BAND */
        .diag-band {
          background:
            linear-gradient(180deg, var(--paper) 0, var(--paper) 60%, var(--paper-warm) 100%);
        }
        .diag-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: clamp(40px, 6vw, 80px);
          align-items: center;
        }
        .diag-grid-mini {
          margin-top: 28px;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 12px;
          max-width: 520px;
        }
        .diag-mini-card {
          display: flex; gap: 14px; align-items: center;
          padding: 14px 16px;
          background: var(--paper);
          border: 1px solid var(--line);
          border-radius: var(--r-md);
        }
        .diag-mini-ico {
          width: 40px; height: 40px;
          border-radius: 10px;
          display: inline-flex; align-items: center; justify-content: center;
          background: var(--sky); color: var(--oasis);
          flex-shrink: 0;
        }
        .diag-visual { position: relative; }
        .diag-visual .photo { aspect-ratio: 4/3; border-radius: var(--r-lg); }
        .diag-callout {
          position: absolute; left: -20px; bottom: -36px;
          max-width: 280px;
          background: var(--paper);
          padding: 18px 20px;
          border-radius: var(--r-md);
          border: 1px solid var(--line);
          box-shadow: 0 18px 40px -22px rgba(15,26,36,.2);
        }

        /* SECTION HEAD */
        .section-head {
          display: flex; justify-content: space-between; gap: 32px; align-items: flex-end;
          margin-bottom: 40px; flex-wrap: wrap;
        }
        .section-head h2 em { font-style: italic; color: var(--leaf-deep); }
        .section-head.dark h2 em { color: #b6d99c; }

        /* SERVICES GRID */
        .svc-grid {
          display: grid;
          grid-template-columns: 1.4fr 1fr 1fr 1fr;
          grid-template-rows: auto auto;
          gap: 16px;
        }
        .svc-card {
          padding: 28px;
          text-align: left;
          display: flex; flex-direction: column; gap: 12px;
          min-height: 220px;
          cursor: pointer;
        }
        .svc-card-feat {
          grid-row: span 2;
          background: linear-gradient(160deg, var(--oasis-deep) 0%, var(--oasis-ink) 100%);
          border: 1px solid var(--oasis-ink);
          color: #fff;
          min-height: 100%;
        }
        .svc-card-feat .svc-name { color: #fff; }
        .svc-card-feat .svc-lede { color: rgba(255,255,255,.85); }
        .svc-card-feat .svc-ico { background: rgba(255,255,255,.14); color: #fff; }
        .svc-card-feat .svc-more { color: #b6d99c; }
        .svc-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
        .svc-ico {
          width: 44px; height: 44px;
          border-radius: 12px;
          display: inline-flex; align-items: center; justify-content: center;
          background: var(--sky); color: var(--oasis);
        }
        .svc-name { margin: 4px 0 0; font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
        .svc-lede { margin: 0; font-size: 14px; color: var(--slate); line-height: 1.5; flex: 1; }
        .svc-more {
          margin-top: 4px;
          display: inline-flex; align-items: center; gap: 6px;
          font-size: 13px; font-weight: 600; color: var(--oasis);
        }

        /* TEAM TEASER */
        .team-teaser {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 16px;
        }
        .vet-tile {
          background: rgba(255,255,255,.05);
          border: 1px solid rgba(255,255,255,.10);
          border-radius: var(--r-lg);
          padding: 16px;
          text-align: left;
          color: #fff;
          transition: background .15s ease, border-color .15s ease;
          cursor: pointer;
        }
        .vet-tile:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22); }
        .vet-tile-photo {
          aspect-ratio: 4/5;
          border-radius: var(--r-md);
          overflow: hidden;
          background: rgba(255,255,255,.04);
          margin-bottom: 14px;
        }
        .vet-tile-photo img { width: 100%; height: 100%; object-fit: cover; }
        .vet-tile-name { font-weight: 600; font-size: 15.5px; }
        .vet-tile-role { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 2px; }
        .vet-tile-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

        /* CONVENIENCE */
        .conv-grid {
          display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
        }
        .conv-card {
          padding: 28px;
          text-align: left;
          display: flex; flex-direction: column; gap: 10px;
          color: var(--oasis);
          cursor: pointer;
        }
        .conv-card h3 { margin: 8px 0 4px; font-size: 19px; color: var(--ink); font-weight: 600; }
        .conv-card p { color: var(--slate); font-size: 14px; margin: 0; flex: 1; }
        .conv-card .svc-more { color: var(--leaf-deep); }

        /* TESTIMONIAL */
        .test-grid {
          display: grid; grid-template-columns: 1.4fr 1fr;
          gap: clamp(40px, 6vw, 80px);
          align-items: start;
        }
        .test-quote {
          font-size: clamp(28px, 3.6vw, 44px);
          font-style: italic;
          color: var(--oasis-deep);
          line-height: 1.15;
          margin: 18px 0 24px;
        }
        .test-attr { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
        .test-stats {
          display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
          background: var(--paper);
          padding: 28px;
          border-radius: var(--r-lg);
          border: 1px solid var(--line);
        }
        .test-stat { padding: 12px; border-bottom: 1px solid var(--line-soft); }
        .test-stat:nth-child(odd) { border-right: 1px solid var(--line-soft); }
        .test-stat:nth-child(n+3) { border-bottom: 0; }
        .test-stat-v { font-size: 44px; color: var(--oasis); line-height: 1; }
        .test-stat-l { font-size: 13px; color: var(--slate); margin-top: 6px; }
        .test-stat-foot { grid-column: 1 / -1; font-size: 12px; color: var(--mute); border-top: 1px solid var(--line-soft); padding-top: 12px; }

        /* EMERGENCY BAND */
        .emerg-band {
          background: linear-gradient(120deg, var(--alert) 0, var(--alert-deep) 100%);
        }
        .emerg-grid {
          display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center;
        }
        .emerg-ecg { display: flex; flex-direction: column; gap: 12px; }
        .btn-on-dark.btn-ghost:hover { background: rgba(255,255,255,.08); }

        @media (max-width: 980px) {
          .hero-grid { grid-template-columns: 1fr; }
          .hero-visual { max-width: 100%; margin-left: 0; }
          .diag-grid { grid-template-columns: 1fr; }
          .svc-grid { grid-template-columns: 1fr 1fr; }
          .svc-card-feat { grid-row: auto; grid-column: 1 / -1; }
          .team-teaser, .conv-grid { grid-template-columns: 1fr 1fr; }
          .test-grid { grid-template-columns: 1fr; }
          .emerg-grid { grid-template-columns: 1fr; }
          .emerg-ecg { display: none; }
        }
        @media (max-width: 560px) {
          .svc-grid, .team-teaser, .conv-grid { grid-template-columns: 1fr; }
          .test-stats { grid-template-columns: 1fr; }
          .test-stat:nth-child(odd) { border-right: 0; }
          .hero-h { font-size: 44px; }
          .hero-photo-stat { padding: 12px 14px; }
          .hero-stat-num { font-size: 36px; }
        }
      `}</style>
    </main>
  );
}

window.HomePage = HomePage;