// Page sections part 2: WhatWeDo, PatientPath, SecondOpinion, Stats, Stories, CTA, Contacts, Footer

// ============ WHAT WE DO ============
const WhatWeDo = () => {
  return (
    <section id="cases" className="sec">
      <div className="container">
        <SectionHead
          eyebrow="Подход"
          title="Что мы делаем"
          sub="Четыре опоры центра экспертной медицины"
        />

        <div className="wwd-grid">
          {DATA.whatWeDo.map((item, i) => (
            <article key={i} className="wwd-card">
              <div className="wwd-card__media">
                <ImagePlaceholder
                  label={item.photoLabel}
                  dark
                  style={{ height: '100%', borderRadius: 'var(--r-md) var(--r-md) 0 0' }}
                />
                <div className="wwd-card__overlay">
                  <span className="wwd-card__tag">{item.tag}</span>
                  <h3 className="wwd-card__title">{item.title}</h3>
                  <p className="wwd-card__desc">{item.desc}</p>
                  <span className="wwd-card__more">
                    <Icon name="arrow" size={18} />
                  </span>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>

      <style>{`
        .wwd-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 14px;
        }
        .wwd-card {
          aspect-ratio: 3/4.2;
          border-radius: var(--r-md);
          overflow: hidden;
          position: relative;
          transition: transform .2s ease;
        }
        .wwd-card:hover { transform: translateY(-2px); }
        .wwd-card__media { position: relative; height: 100%; }
        .wwd-card__overlay {
          position: absolute;
          inset: 0;
          background:
            linear-gradient(180deg, transparent 35%, oklch(0.18 0.04 255 / 0.85) 75%, oklch(0.15 0.04 255 / 0.95) 100%);
          padding: 22px;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          color: #fff;
          border-radius: var(--r-md);
        }
        .wwd-card__tag {
          align-self: flex-start;
          font-family: var(--font-mono);
          font-size: 11px;
          padding: 4px 8px;
          background: rgba(255,255,255,0.12);
          backdrop-filter: blur(8px);
          border-radius: var(--r-xs);
          color: #fff;
          letter-spacing: 0.06em;
          position: absolute;
          top: 18px; left: 18px;
        }
        .wwd-card__title {
          font-size: 20px;
          font-weight: 600;
          color: #fff;
          margin-bottom: 6px;
        }
        .wwd-card__desc {
          font-size: 13.5px;
          color: rgba(255,255,255,0.78);
          line-height: 1.45;
          max-height: 0;
          overflow: hidden;
          transition: max-height .35s ease, margin .35s ease;
          margin-bottom: 0;
        }
        .wwd-card:hover .wwd-card__desc {
          max-height: 200px;
          margin-bottom: 8px;
        }
        .wwd-card__more {
          width: 36px; height: 36px;
          border-radius: 999px;
          background: var(--accent);
          color: #fff;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          right: 18px;
          bottom: 18px;
          transition: transform .2s ease;
        }
        .wwd-card:hover .wwd-card__more { transform: translateX(3px); }

        @media (max-width: 1000px) { .wwd-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 540px)  { .wwd-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
};

// ============ STATS ============
const Stats = () => {
  return (
    <section className="stats">
      <div className="container">
        <div className="stats-grid">
          {DATA.stats.map((s, i) => (
            <div key={i} className="stat-item">
              <div className="stat-item__value">{s.value}</div>
              <div className="stat-item__label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .stats {
          background: var(--navy-800);
          color: #fff;
          padding: 56px 0;
          position: relative;
          overflow: hidden;
        }
        .stats::before {
          content: "";
          position: absolute;
          inset: 0;
          background:
            radial-gradient(800px 300px at 80% -10%, oklch(0.35 0.06 255 / 0.5), transparent 60%),
            radial-gradient(600px 250px at 0% 110%, oklch(0.35 0.06 235 / 0.3), transparent 60%);
        }
        .stats-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 24px;
          position: relative;
        }
        .stat-item {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }
        .stat-item__value {
          font-size: clamp(40px, 5vw, 64px);
          font-weight: 600;
          letter-spacing: -0.03em;
          line-height: 1;
          color: #fff;
        }
        .stat-item__label {
          font-size: 14.5px;
          color: rgba(255,255,255,0.65);
          max-width: 200px;
          line-height: 1.4;
        }
        @media (max-width: 740px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
      `}</style>
    </section>
  );
};

// ============ PATIENT PATH ============
const PatientPath = () => {
  return (
    <section id="about" className="sec sec-soft">
      <div className="container">
        <SectionHead
          eyebrow="Путь пациента"
          title="Как проходит работа с НАЦЗДРАВ"
          sub="От первого обращения до полного восстановления — прозрачный путь без лишних шагов"
        />

        <div className="path-grid">
          {DATA.patientPath.map((step, i) => (
            <div key={step.n} className="path-step">
              <div className="path-step__head">
                <span className="path-step__num">{step.n}</span>
                <span className="path-step__line" />
              </div>
              <h3 className="path-step__title">{step.title}</h3>
              <p className="path-step__desc">{step.desc}</p>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .path-grid {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 14px;
        }
        .path-step {
          padding: 22px 18px;
          background: #fff;
          border-radius: var(--r-md);
          border: 1px solid var(--border);
          display: flex;
          flex-direction: column;
          gap: 8px;
          position: relative;
        }
        .path-step__head {
          display: flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 6px;
        }
        .path-step__num {
          font-family: var(--font-mono);
          font-size: 12px;
          font-weight: 500;
          padding: 4px 8px;
          background: var(--navy-800);
          color: #fff;
          border-radius: var(--r-xs);
          letter-spacing: 0.04em;
        }
        .path-step__line { flex: 1; height: 1px; background: var(--border); }
        .path-step__title { font-size: 15.5px; font-weight: 600; color: var(--ink-900); }
        .path-step__desc { font-size: 12.5px; color: var(--ink-500); line-height: 1.45; }

        @media (max-width: 1200px) { .path-grid { grid-template-columns: repeat(4, 1fr); } }
        @media (max-width: 740px)  { .path-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 440px)  { .path-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
};

// ============ SECOND OPINION ============
const SecondOpinion = ({ onSecondOpinion }) => {
  return (
    <section id="second" className="sec">
      <div className="container">
        <div className="so-block">
          <div className="so-block__copy">
            <span className="eyebrow">Second opinion</span>
            <h2>Второе мнение — без поездки в Москву</h2>
            <p className="lead">
              Загрузите снимки, выписки или результаты анализов. Эксперты НАЦЗДРАВ изучат документы,
              соберут консилиум и подготовят независимое заключение в течение 3-7 дней.
            </p>

            <ul className="so-list">
              {[
                'Подходит при онкологии, кардиологии, неврологии',
                'Поддержка форматов: PDF, JPG, PNG, DICOM',
                'Консилиум 3-5 специалистов разных направлений',
                'Письменное заключение и план дальнейших шагов',
              ].map((it, i) => (
                <li key={i}>
                  <Icon name="check" size={16} className="so-check" />
                  <span>{it}</span>
                </li>
              ))}
            </ul>

            <div className="so-cta">
              <button className="btn btn-primary btn-lg" onClick={onSecondOpinion}>
                <Icon name="upload" size={18} />
                Загрузить документы
              </button>
              <a className="so-link" href="#second" onClick={(e) => e.preventDefault()}>
                Как это работает <Icon name="arrowR" size={14} />
              </a>
            </div>
          </div>

          <div className="so-block__visual">
            <div className="so-stack">
              <div className="so-doc so-doc--1">
                <div className="so-doc__head">
                  <Icon name="paper" size={18} />
                  <span>МРТ / Заключение</span>
                </div>
                <div className="so-doc__body">
                  <ImagePlaceholder label="МРТ snapshot" style={{ height: '100%' }} />
                </div>
              </div>
              <div className="so-doc so-doc--2">
                <div className="so-doc__head">
                  <Icon name="paper" size={18} />
                  <span>Выписка</span>
                </div>
                <div className="so-doc__rows">
                  {[78, 92, 64, 86, 70].map((w, i) => (
                    <span key={i} className="so-doc__row" style={{ width: `${w}%` }} />
                  ))}
                </div>
              </div>
              <div className="so-doc so-doc--3">
                <div className="so-doc__head">
                  <Icon name="paper" size={18} />
                  <span>Анализы.pdf</span>
                </div>
                <div className="so-doc__rows">
                  {[88, 70, 82, 64].map((w, i) => (
                    <span key={i} className="so-doc__row" style={{ width: `${w}%` }} />
                  ))}
                </div>
              </div>
              <div className="so-arrow">
                <Icon name="arrow" size={22} />
              </div>
              <div className="so-result">
                <div className="so-result__head">
                  <span className="so-result__dot" />
                  <span>Заключение консилиума</span>
                </div>
                <div className="so-result__title">5 врачей · 4 направления</div>
                <div className="so-result__body">
                  <span className="so-result__row" style={{ width: '90%' }} />
                  <span className="so-result__row" style={{ width: '72%' }} />
                  <span className="so-result__row" style={{ width: '85%' }} />
                  <span className="so-result__row" style={{ width: '58%' }} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .so-block {
          display: grid;
          grid-template-columns: 1.1fr 1fr;
          gap: 64px;
          align-items: center;
        }
        .so-block__copy h2 { margin: 12px 0 16px; }
        .so-list {
          list-style: none;
          padding: 0;
          margin: 24px 0 32px;
          display: grid;
          gap: 10px;
        }
        .so-list li {
          display: flex;
          align-items: flex-start;
          gap: 10px;
          font-size: 15px;
          color: var(--ink-700);
        }
        .so-check {
          flex-shrink: 0;
          color: var(--success);
          background: oklch(0.62 0.13 160 / 0.12);
          padding: 3px;
          border-radius: 999px;
          width: 22px; height: 22px;
          margin-top: 2px;
        }
        .so-cta {
          display: flex;
          align-items: center;
          gap: 18px;
          flex-wrap: wrap;
        }
        .so-link {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          font-size: 14.5px;
          font-weight: 500;
          color: var(--navy-700);
        }
        .so-link:hover { color: var(--navy-800); text-decoration: underline; }

        .so-block__visual {
          position: relative;
          aspect-ratio: 1/0.9;
        }
        .so-stack { position: relative; height: 100%; }
        .so-doc {
          position: absolute;
          background: #fff;
          border: 1px solid var(--border);
          border-radius: var(--r-md);
          padding: 12px;
          box-shadow: var(--shadow-md);
        }
        .so-doc__head {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 12.5px;
          font-weight: 500;
          color: var(--ink-700);
          margin-bottom: 10px;
        }
        .so-doc__head svg { color: var(--navy-600); }
        .so-doc__body { height: calc(100% - 32px); }
        .so-doc__rows { display: flex; flex-direction: column; gap: 6px; }
        .so-doc__row {
          display: block;
          height: 8px;
          background: var(--ink-200);
          border-radius: 999px;
        }
        .so-doc--1 { top: 0; left: 0; width: 60%; height: 50%; transform: rotate(-3deg); }
        .so-doc--2 { top: 12%; right: 0; width: 44%; transform: rotate(4deg); }
        .so-doc--3 { bottom: 28%; left: 18%; width: 44%; transform: rotate(-1deg); }
        .so-arrow {
          position: absolute;
          right: 38%;
          top: 56%;
          color: var(--navy-700);
          background: #fff;
          border-radius: 999px;
          width: 44px; height: 44px;
          display: flex;
          align-items: center; justify-content: center;
          box-shadow: var(--shadow-md);
          transform: rotate(20deg);
        }
        .so-result {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 60%;
          background: var(--navy-800);
          color: #fff;
          border-radius: var(--r-md);
          padding: 16px 18px;
          box-shadow: var(--shadow-lg);
        }
        .so-result__head {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 12px;
          color: rgba(255,255,255,0.6);
          text-transform: uppercase;
          letter-spacing: 0.08em;
          margin-bottom: 8px;
        }
        .so-result__dot {
          width: 8px; height: 8px;
          border-radius: 999px;
          background: var(--accent);
          box-shadow: 0 0 0 4px oklch(0.62 0.16 235 / 0.25);
        }
        .so-result__title {
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 14px;
        }
        .so-result__body { display: flex; flex-direction: column; gap: 6px; }
        .so-result__row {
          display: block; height: 8px; background: rgba(255,255,255,0.18); border-radius: 999px;
        }

        @media (max-width: 960px) {
          .so-block { grid-template-columns: 1fr; gap: 40px; }
          .so-block__visual { aspect-ratio: 1/0.7; }
        }
      `}</style>
    </section>
  );
};

// ============ STORIES ============
const Stories = () => {
  const [page, setPage] = useS(0);
  const perPage = 3;
  const total = DATA.stories.length;
  const totalPages = Math.ceil(total / perPage);

  const visible = useM(() => {
    const start = page * perPage;
    return DATA.stories.slice(start, start + perPage);
  }, [page]);

  return (
    <section id="patients" className="sec">
      <div className="container">
        <SectionHead
          eyebrow="Истории"
          title="Истории наших пациентов"
          sub="Реальные случаи, в которых консилиум, точная диагностика и сопровождение изменили ход лечения"
          action={
            <a className="btn btn-secondary" href="#patients" onClick={(e) => e.preventDefault()}>
              Все истории
            </a>
          }
        />

        <div className="stories-grid">
          {visible.map((s, i) => (
            <article key={page + '-' + i} className="story-card fade-up">
              <Icon name="star" size={22} className="story-card__quote" />
              <p className="story-card__text">«{s.quote}»</p>
              <div className="story-card__author">
                <div className="story-card__avatar">
                  {s.name.split(' ')[0][0]}{s.name.split(' ')[1]?.[0] || ''}
                </div>
                <div>
                  <div className="story-card__name">{s.name}</div>
                  <div className="story-card__diag">Диагноз: {s.diagnosis}</div>
                </div>
                <span className="story-card__tag">{s.direction}</span>
              </div>
            </article>
          ))}
        </div>

        <div className="stories-pager">
          {Array.from({ length: totalPages }).map((_, i) => (
            <button
              key={i}
              className={`stories-pager__dot ${i === page ? 'is-active' : ''}`}
              onClick={() => setPage(i)}
              aria-label={`Страница ${i + 1}`}
            />
          ))}
        </div>
      </div>

      <style>{`
        .stories-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
        }
        .story-card {
          background: #fff;
          border: 1px solid var(--border);
          border-radius: var(--r-md);
          padding: 28px 26px;
          display: flex;
          flex-direction: column;
          gap: 18px;
          transition: border-color .2s ease, box-shadow .2s ease;
        }
        .story-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
        .story-card__quote { color: var(--accent); }
        .story-card__text {
          font-size: 15px;
          color: var(--ink-700);
          line-height: 1.55;
          flex: 1;
        }
        .story-card__author {
          display: flex;
          align-items: center;
          gap: 12px;
          padding-top: 18px;
          border-top: 1px solid var(--border);
          flex-wrap: wrap;
        }
        .story-card__avatar {
          width: 40px; height: 40px;
          border-radius: 999px;
          background: var(--navy-800);
          color: #fff;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-weight: 600;
          font-size: 14px;
        }
        .story-card__name { font-size: 14.5px; font-weight: 600; color: var(--ink-900); }
        .story-card__diag { font-size: 12.5px; color: var(--ink-500); }
        .story-card__tag {
          margin-left: auto;
          padding: 4px 10px;
          background: var(--navy-100);
          color: var(--navy-700);
          font-size: 11.5px;
          border-radius: var(--r-full);
          font-weight: 500;
        }

        .stories-pager {
          display: flex;
          justify-content: center;
          gap: 6px;
          margin-top: 28px;
        }
        .stories-pager__dot {
          width: 24px; height: 4px;
          background: var(--ink-200);
          border-radius: 999px;
          transition: background .2s ease, width .2s ease;
        }
        .stories-pager__dot:hover { background: var(--ink-300); }
        .stories-pager__dot.is-active {
          background: var(--navy-800);
          width: 32px;
        }

        @media (max-width: 940px) { .stories-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
};

// ============ FINAL CTA ============
const FinalCta = ({ onBook, onSecondOpinion }) => {
  return (
    <section className="sec">
      <div className="container">
        <div className="fcta">
          <div className="fcta__copy">
            <h2>Не откладывайте здоровье</h2>
            <p>Запишитесь на приём или получите второе мнение уже сегодня. Мы поможем разобраться даже в сложном случае.</p>
          </div>
          <div className="fcta__actions">
            <button className="btn btn-primary btn-lg" onClick={onBook}>Записаться на приём</button>
            <button className="btn btn-secondary btn-lg" onClick={onSecondOpinion}>Получить второе мнение</button>
          </div>
          <div className="fcta__mark" aria-hidden="true">
            <svg viewBox="0 0 200 200" width="180" height="180">
              <g stroke="var(--navy-800)" strokeWidth="1.2" fill="none" opacity="0.5">
                <circle cx="100" cy="100" r="92" />
                <circle cx="100" cy="100" r="72" />
                <circle cx="100" cy="100" r="52" />
              </g>
              <g stroke="var(--navy-800)" strokeWidth="1.2" strokeLinecap="round" opacity="0.8">
                <line x1="100" y1="20" x2="100" y2="40" />
                <line x1="100" y1="160" x2="100" y2="180" />
                <line x1="20" y1="100" x2="40" y2="100" />
                <line x1="160" y1="100" x2="180" y2="100" />
                <line x1="40" y1="40" x2="54" y2="54" />
                <line x1="146" y1="146" x2="160" y2="160" />
                <line x1="160" y1="40" x2="146" y2="54" />
                <line x1="54" y1="146" x2="40" y2="160" />
              </g>
              <path d="M84 56 H116 V84 H144 V116 H116 V144 H84 V116 H56 V84 H84 Z" fill="var(--navy-800)" />
            </svg>
          </div>
        </div>
      </div>

      <style>{`
        .fcta {
          background: var(--navy-100);
          border: 1px solid var(--border);
          border-radius: var(--r-lg);
          padding: 48px 52px;
          display: grid;
          grid-template-columns: 1.4fr 1fr auto;
          align-items: center;
          gap: 32px;
          position: relative;
          overflow: hidden;
        }
        .fcta__copy h2 { margin-bottom: 10px; }
        .fcta__copy p { color: var(--ink-700); font-size: 15.5px; max-width: 460px; }
        .fcta__actions { display: flex; gap: 10px; flex-wrap: wrap; }
        .fcta__mark { opacity: 0.18; }
        @media (max-width: 960px) {
          .fcta { grid-template-columns: 1fr; padding: 32px 24px; }
          .fcta__mark { display: none; }
        }
      `}</style>
    </section>
  );
};

// ============ FOOTER ============
const Footer = () => {
  return (
    <footer id="contacts" className="footer">
      <div className="container">
        <div className="footer__grid">
          <div className="footer__brand">
            <Logo width={230} color="#fff" subColor="rgba(255,255,255,0.7)" />
            <p className="footer__about">
              Центр сложных клинических случаев и экспертной медицины в Дагестане. Точная диагностика, консилиум, операции, сопровождение.
            </p>
          </div>

          {DATA.footer.cols.map((col) => (
            <div key={col.title} className="footer__col">
              <h4 className="footer__title">{col.title}</h4>
              <ul>
                {col.links.map((l) => (
                  <li key={l}><a href="#" onClick={(e) => e.preventDefault()}>{l}</a></li>
                ))}
              </ul>
            </div>
          ))}

          <div className="footer__col">
            <h4 className="footer__title">Контакты</h4>
            <ul className="footer__contacts">
              <li>
                <a href={`tel:${DATA.brand.phoneRaw}`} className="footer__phone">{DATA.brand.phone}</a>
              </li>
              <li>
                <a href={`mailto:${DATA.brand.email}`}>{DATA.brand.email}</a>
              </li>
              <li>{DATA.brand.address}</li>
              <li>{DATA.brand.hours}</li>
            </ul>
            <div className="footer__socials">
              <a href="#" onClick={(e) => e.preventDefault()} className="footer__social" aria-label="WhatsApp">
                <Icon name="whatsapp" size={18} />
              </a>
              <a href="#" onClick={(e) => e.preventDefault()} className="footer__social" aria-label="Яндекс Карты">
                <Icon name="pin" size={18} />
              </a>
            </div>
          </div>
        </div>

        <div className="footer__bottom">
          <span>© НАЦЗДРАВ, {DATA.brand.year}</span>
          <a href="#" onClick={(e) => e.preventDefault()}>Политика конфиденциальности</a>
          <a href="#" onClick={(e) => e.preventDefault()}>Согласие на обработку ПДн</a>
        </div>
      </div>

      <style>{`
        .footer {
          background: var(--navy-900);
          color: rgba(255,255,255,0.78);
          padding: 64px 0 28px;
        }
        .footer__grid {
          display: grid;
          grid-template-columns: 2fr 1fr 1fr 1.4fr;
          gap: 48px;
          padding-bottom: 40px;
          border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .footer__about {
          font-size: 13.5px;
          color: rgba(255,255,255,0.55);
          margin-top: 16px;
          max-width: 320px;
          line-height: 1.55;
        }
        .footer__title {
          color: #fff;
          font-size: 14px;
          font-weight: 600;
          margin-bottom: 18px;
        }
        .footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
        .footer__col a { color: rgba(255,255,255,0.6); transition: color .15s ease; }
        .footer__col a:hover { color: #fff; }
        .footer__phone { font-size: 17px; color: #fff !important; font-weight: 600; letter-spacing: -0.01em; }
        .footer__contacts li { color: rgba(255,255,255,0.6); }
        .footer__socials { display: flex; gap: 8px; margin-top: 18px; }
        .footer__social {
          width: 38px; height: 38px;
          border-radius: var(--r-sm);
          background: rgba(255,255,255,0.06);
          color: #fff;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          transition: background .15s ease;
        }
        .footer__social:hover { background: var(--accent); }

        .footer__bottom {
          padding-top: 22px;
          display: flex;
          gap: 28px;
          align-items: center;
          font-size: 12.5px;
          color: rgba(255,255,255,0.4);
          flex-wrap: wrap;
        }
        .footer__bottom a { color: inherit; }
        .footer__bottom a:hover { color: rgba(255,255,255,0.8); }

        @media (max-width: 960px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
        @media (max-width: 540px) { .footer__grid { grid-template-columns: 1fr; } }
      `}</style>
    </footer>
  );
};

// ============ FLOATING WHATSAPP ============
const FloatingActions = () => {
  return (
    <a
      href={`https://wa.me/${DATA.brand.phoneRaw.replace('+', '')}`}
      target="_blank"
      rel="noopener noreferrer"
      className="float-wa"
      aria-label="Написать в WhatsApp"
    >
      <Icon name="whatsapp" size={26} />
      <style>{`
        .float-wa {
          position: fixed;
          right: 22px;
          bottom: 22px;
          z-index: 30;
          width: 56px; height: 56px;
          border-radius: 999px;
          background: oklch(0.62 0.13 160);
          color: #fff;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 12px 28px oklch(0.62 0.13 160 / 0.45);
          transition: transform .2s ease;
        }
        .float-wa:hover { transform: translateY(-3px) scale(1.04); }
        @media (max-width: 540px) {
          .float-wa { right: 14px; bottom: 14px; width: 50px; height: 50px; }
        }
      `}</style>
    </a>
  );
};

Object.assign(window, { WhatWeDo, Stats, PatientPath, SecondOpinion, Stories, FinalCta, Footer, FloatingActions });
