// Demo 1 — Clínica Dental Oriente · Sagunto
// Vibe: trust, medical professionalism, warm. Accent: soft blue #3B82F6.

const DENTAL_BLUE = '#3B82F6';
const DENTAL_BLUE_SOFT = '#EFF4FF';
const DENTAL_INK = '#0B2545';
const DENTAL_MUTED = '#5B6B85';

// ── Floating WhatsApp/IA chip + chat bubble ─────────────────
function DentalChat({ compact = false }) {
  const [open, setOpen] = React.useState(true);
  const [step, setStep] = React.useState(0);
  const messages = [
    { from: 'bot', text: '¡Hola! Soy Lía, asistente IA de la clínica.' },
    { from: 'bot', text: '¿Cuándo quieres tu cita?' },
  ];
  const replies = ['Esta semana', 'La próxima'];
  const followups = {
    'Esta semana': '¡Genial! Tenemos huecos jueves 10:30 y viernes 17:00 ✨',
    'La próxima': 'Perfecto, te paso disponibilidad del lunes al sábado 🦷',
  };
  const [picked, setPicked] = React.useState(null);

  return (
    <div style={{
      position: 'absolute',
      right: compact ? 12 : 24,
      bottom: compact ? 12 : 24,
      width: compact ? 240 : 300,
      fontFamily: 'Plus Jakarta Sans, sans-serif',
      zIndex: 50,
    }}>
      {open && (
        <div style={{
          background: '#fff',
          borderRadius: 18,
          boxShadow: '0 20px 50px -12px rgba(15,37,68,0.25), 0 4px 12px rgba(15,37,68,0.08)',
          overflow: 'hidden',
          marginBottom: 10,
          border: '1px solid rgba(15,37,68,0.06)',
        }}>
          <div style={{
            background: DENTAL_INK,
            color: '#fff',
            padding: '12px 14px',
            display: 'flex',
            alignItems: 'center',
            gap: 10,
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: '50%',
              background: `linear-gradient(135deg, ${DENTAL_BLUE}, #60A5FA)`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 13, fontWeight: 700,
            }}>L</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, fontWeight: 700, lineHeight: 1.2 }}>Lía · IA</div>
              <div style={{ fontSize: 10, opacity: 0.7, display: 'flex', alignItems: 'center', gap: 5 }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#34D399' }}></span>
                respondiendo ahora
              </div>
            </div>
            <button onClick={() => setOpen(false)} style={{
              background: 'transparent', border: 'none', color: '#fff', opacity: 0.6,
              cursor: 'pointer', fontSize: 16, padding: 0,
            }}>×</button>
          </div>
          <div style={{ padding: '14px 14px 10px', maxHeight: 220, overflowY: 'auto' }}>
            {messages.slice(0, step + 2).map((m, i) => (
              <div key={i} style={{
                background: DENTAL_BLUE_SOFT,
                color: DENTAL_INK,
                fontSize: 12.5,
                lineHeight: 1.4,
                padding: '8px 11px',
                borderRadius: '14px 14px 14px 4px',
                marginBottom: 6,
                maxWidth: '90%',
                animation: 'denFade .35s ease both',
              }}>{m.text}</div>
            ))}
            {picked && (
              <>
                <div style={{
                  marginLeft: 'auto',
                  background: DENTAL_BLUE,
                  color: '#fff',
                  fontSize: 12.5,
                  padding: '8px 11px',
                  borderRadius: '14px 14px 4px 14px',
                  marginBottom: 6,
                  maxWidth: '80%',
                  width: 'fit-content',
                }}>{picked}</div>
                <div style={{
                  background: DENTAL_BLUE_SOFT,
                  color: DENTAL_INK,
                  fontSize: 12.5,
                  lineHeight: 1.4,
                  padding: '8px 11px',
                  borderRadius: '14px 14px 14px 4px',
                  maxWidth: '90%',
                }}>{followups[picked]}</div>
              </>
            )}
          </div>
          {!picked && (
            <div style={{ padding: '4px 12px 12px', display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {replies.map(r => (
                <button key={r} onClick={() => setPicked(r)} style={{
                  background: '#fff',
                  border: `1px solid ${DENTAL_BLUE}`,
                  color: DENTAL_BLUE,
                  fontFamily: 'inherit',
                  fontSize: 11.5,
                  fontWeight: 600,
                  padding: '7px 12px',
                  borderRadius: 999,
                  cursor: 'pointer',
                  transition: 'all .15s',
                }}
                onMouseEnter={e => { e.currentTarget.style.background = DENTAL_BLUE; e.currentTarget.style.color = '#fff'; }}
                onMouseLeave={e => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.color = DENTAL_BLUE; }}
                >{r}</button>
              ))}
            </div>
          )}
          {picked && (
            <div style={{ padding: '6px 12px 12px' }}>
              <button style={{
                width: '100%',
                background: DENTAL_INK,
                color: '#fff',
                fontFamily: 'inherit',
                fontSize: 12,
                fontWeight: 600,
                padding: '9px 12px',
                borderRadius: 10,
                border: 'none',
                cursor: 'pointer',
              }}>Reservar cita →</button>
            </div>
          )}
        </div>
      )}
      <button onClick={() => setOpen(o => !o)} style={{
        background: '#25D366',
        color: '#fff',
        width: 56, height: 56,
        borderRadius: '50%',
        border: 'none',
        cursor: 'pointer',
        boxShadow: '0 12px 28px -4px rgba(37,211,102,0.45)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        marginLeft: 'auto',
        position: 'relative',
      }}>
        <svg width="26" height="26" viewBox="0 0 24 24" fill="#fff">
          <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9s-.5-.1-.7.2c-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.4-1.5-.9-.8-1.5-1.8-1.6-2.1-.2-.3 0-.5.1-.6l.4-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5s-.7-1.7-1-2.3c-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.2 3.4 5.3 4.7.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.7-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3z"/>
          <path d="M20.5 3.5C18.3 1.2 15.2 0 12 0 5.4 0 .1 5.4.1 12c0 2.1.6 4.2 1.6 6L0 24l6.2-1.6c1.7.9 3.7 1.4 5.7 1.4h.1c6.5 0 11.9-5.4 11.9-12 0-3.2-1.2-6.1-3.4-8.3zM12 21.8c-1.8 0-3.6-.5-5.1-1.4l-.4-.2-3.7 1 1-3.6-.2-.4c-1-1.6-1.5-3.4-1.5-5.3 0-5.4 4.4-9.9 9.9-9.9 2.6 0 5.1 1 7 2.9 1.9 1.9 2.9 4.4 2.9 7 0 5.5-4.4 9.9-9.9 9.9z"/>
        </svg>
        <span style={{
          position: 'absolute',
          top: -2, right: -2,
          background: DENTAL_BLUE,
          color: '#fff',
          fontSize: 9, fontWeight: 700,
          padding: '2px 6px',
          borderRadius: 999,
          border: '2px solid #fff',
          letterSpacing: '0.04em',
        }}>IA</span>
      </button>
    </div>
  );
}

// ── Service card ────────────────────────────────────────────
function ServiceCard({ icon, title, desc, price }) {
  return (
    <div style={{
      background: '#fff',
      border: '1px solid #E5EAF2',
      borderRadius: 18,
      padding: '24px 22px',
      transition: 'all .2s',
      cursor: 'pointer',
    }}
    onMouseEnter={e => { e.currentTarget.style.borderColor = DENTAL_BLUE; e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 18px 40px -16px rgba(59,130,246,0.25)'; }}
    onMouseLeave={e => { e.currentTarget.style.borderColor = '#E5EAF2'; e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }}
    >
      <div style={{
        width: 44, height: 44, borderRadius: 12,
        background: DENTAL_BLUE_SOFT,
        color: DENTAL_BLUE,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        marginBottom: 16,
      }}>{icon}</div>
      <div style={{ fontSize: 16, fontWeight: 700, color: DENTAL_INK, marginBottom: 6 }}>{title}</div>
      <div style={{ fontSize: 13, color: DENTAL_MUTED, lineHeight: 1.5, marginBottom: 14 }}>{desc}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
        <span style={{ fontSize: 11, color: DENTAL_MUTED, textTransform: 'uppercase', letterSpacing: '0.06em' }}>desde</span>
        <span style={{ fontSize: 18, fontWeight: 700, color: DENTAL_INK }}>{price}</span>
      </div>
    </div>
  );
}

// ── Placeholder portrait ─────────────────────────────────────
function DentistPortrait({ height = 460, mobile = false }) {
  return (
    <div style={{
      position: 'relative',
      height,
      borderRadius: 24,
      overflow: 'hidden',
      background: `linear-gradient(160deg, ${DENTAL_BLUE_SOFT} 0%, #fff 100%)`,
      border: '1px solid #E5EAF2',
    }}>
      {/* striped placeholder */}
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
        <defs>
          <pattern id="dstripe" patternUnits="userSpaceOnUse" width="14" height="14" patternTransform="rotate(45)">
            <rect width="14" height="14" fill={DENTAL_BLUE_SOFT}/>
            <line x1="0" y1="0" x2="0" y2="14" stroke={DENTAL_BLUE} strokeWidth="1" opacity="0.18"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#dstripe)"/>
      </svg>
      <div style={{
        position: 'absolute',
        inset: 0,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'column',
        gap: 6,
        color: DENTAL_BLUE,
      }}>
        <div style={{ fontFamily: 'monospace', fontSize: 11, opacity: 0.7 }}>[ retrato.dentista.jpg ]</div>
        <div style={{ fontFamily: 'monospace', fontSize: 10, opacity: 0.5 }}>{mobile ? '390 × 320' : '620 × 460'}</div>
      </div>
      {/* Floating trust badge */}
      <div style={{
        position: 'absolute',
        left: 18, bottom: 18,
        background: '#fff',
        borderRadius: 14,
        padding: '10px 14px',
        boxShadow: '0 10px 30px -8px rgba(15,37,68,0.18)',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: '50%',
          background: DENTAL_BLUE_SOFT,
          color: DENTAL_BLUE,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontWeight: 800, fontSize: 12,
        }}>★</div>
        <div>
          <div style={{ fontSize: 13, fontWeight: 700, color: DENTAL_INK, lineHeight: 1.1 }}>4,9 / 5</div>
          <div style={{ fontSize: 10, color: DENTAL_MUTED }}>312 reseñas Google</div>
        </div>
      </div>
    </div>
  );
}

// ── Desktop ─────────────────────────────────────────────────
function DentalDesktop() {
  return (
    <div style={{
      width: 1440, minHeight: 900,
      background: '#fff',
      fontFamily: 'Plus Jakarta Sans, sans-serif',
      color: DENTAL_INK,
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Top promo bar */}
      <div style={{
        background: DENTAL_INK, color: '#fff',
        fontSize: 12, padding: '8px 0',
        textAlign: 'center', letterSpacing: '0.02em',
      }}>
        Primera revisión + radiografía <strong style={{ color: '#7DD3FC' }}>gratuitas</strong> · Pide tu cita en menos de 1 minuto
      </div>
      {/* Nav */}
      <nav style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '20px 80px',
        borderBottom: '1px solid #F1F4F9',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 34, height: 34, borderRadius: 10,
            background: DENTAL_INK,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff', fontWeight: 800, fontSize: 14,
          }}>O</div>
          <div style={{ whiteSpace: 'nowrap' }}>
            <div style={{ fontSize: 14, fontWeight: 800, lineHeight: 1.1, whiteSpace: 'nowrap' }}>Clínica Dental Oriente</div>
            <div style={{ fontSize: 10, color: DENTAL_MUTED, letterSpacing: '0.08em', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>Sagunto · desde 1998</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 32, fontSize: 14, fontWeight: 500, color: DENTAL_INK }}>
          {['Servicios', 'Equipo', 'Tecnología', 'Precios', 'Contacto'].map(l => (
            <span key={l} style={{ cursor: 'pointer' }}>{l}</span>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <span style={{ fontSize: 13, color: DENTAL_MUTED }}>📞 962 661 482</span>
          <button style={{
            background: DENTAL_BLUE, color: '#fff',
            fontFamily: 'inherit', fontSize: 13, fontWeight: 600,
            padding: '10px 18px', borderRadius: 10, border: 'none', cursor: 'pointer',
          }}>Pedir cita</button>
        </div>
      </nav>

      {/* Hero */}
      <section style={{ padding: '60px 80px 80px', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 60, alignItems: 'center' }}>
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            background: DENTAL_BLUE_SOFT, color: DENTAL_BLUE,
            fontSize: 12, fontWeight: 600,
            padding: '6px 12px', borderRadius: 999, marginBottom: 24,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: DENTAL_BLUE }}></span>
            Aceptamos tu seguro · Adeslas, Sanitas, DKV
          </div>
          <h1 style={{
            fontSize: 64, fontWeight: 800, lineHeight: 1.02, letterSpacing: '-0.03em',
            margin: '0 0 24px',
          }}>
            Sonríe sin pensarlo<br/>
            <span style={{ color: DENTAL_BLUE, fontStyle: 'italic', fontWeight: 500 }}>dos veces.</span>
          </h1>
          <p style={{ fontSize: 17, color: DENTAL_MUTED, lineHeight: 1.55, maxWidth: 480, margin: '0 0 36px' }}>
            Odontología avanzada en el corazón de Sagunto. Tres generaciones cuidando tu salud bucal con la última tecnología y un trato cercano.
          </p>
          <div style={{ display: 'flex', gap: 12, marginBottom: 40 }}>
            <button style={{
              background: DENTAL_INK, color: '#fff',
              fontFamily: 'inherit', fontSize: 15, fontWeight: 600,
              padding: '15px 26px', borderRadius: 12, border: 'none', cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 10,
            }}>
              Reservar online
              <span style={{ fontSize: 16 }}>→</span>
            </button>
            <button style={{
              background: '#fff', color: DENTAL_INK,
              fontFamily: 'inherit', fontSize: 15, fontWeight: 600,
              padding: '15px 22px', borderRadius: 12,
              border: '1.5px solid #E5EAF2', cursor: 'pointer',
            }}>Ver tratamientos</button>
          </div>
          {/* Trust strip */}
          <div style={{ display: 'flex', gap: 36, paddingTop: 30, borderTop: '1px solid #F1F4F9' }}>
            <div>
              <div style={{ fontSize: 26, fontWeight: 800 }}>27<span style={{ color: DENTAL_BLUE }}>+</span></div>
              <div style={{ fontSize: 11, color: DENTAL_MUTED, letterSpacing: '0.06em', textTransform: 'uppercase' }}>años cuidándote</div>
            </div>
            <div>
              <div style={{ fontSize: 26, fontWeight: 800 }}>12.400</div>
              <div style={{ fontSize: 11, color: DENTAL_MUTED, letterSpacing: '0.06em', textTransform: 'uppercase' }}>pacientes felices</div>
            </div>
            <div>
              <div style={{ fontSize: 26, fontWeight: 800 }}>3D</div>
              <div style={{ fontSize: 11, color: DENTAL_MUTED, letterSpacing: '0.06em', textTransform: 'uppercase' }}>diagnóstico CBCT</div>
            </div>
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <DentistPortrait height={520}/>
          {/* Floating booking card */}
          <div style={{
            position: 'absolute',
            right: -20, top: 40,
            background: '#fff',
            borderRadius: 18,
            padding: 18,
            width: 240,
            boxShadow: '0 20px 50px -12px rgba(15,37,68,0.2)',
          }}>
            <div style={{ fontSize: 11, color: DENTAL_MUTED, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 10 }}>Próxima disponibilidad</div>
            <div style={{ display: 'flex', gap: 6, marginBottom: 10 }}>
              {[
                { d: 'Mar', n: '28' }, { d: 'Mié', n: '29' }, { d: 'Jue', n: '30' }, { d: 'Vie', n: '01' },
              ].map((x, i) => (
                <div key={i} style={{
                  flex: 1, textAlign: 'center', padding: '8px 0',
                  borderRadius: 9,
                  background: i === 2 ? DENTAL_BLUE : '#F4F7FB',
                  color: i === 2 ? '#fff' : DENTAL_INK,
                }}>
                  <div style={{ fontSize: 9, opacity: 0.7, textTransform: 'uppercase' }}>{x.d}</div>
                  <div style={{ fontSize: 14, fontWeight: 700 }}>{x.n}</div>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
              {['09:30', '10:30', '12:00', '17:00', '18:30'].map((t, i) => (
                <span key={t} style={{
                  fontSize: 11, fontWeight: 600,
                  padding: '5px 9px', borderRadius: 7,
                  background: i === 1 ? DENTAL_BLUE_SOFT : '#fff',
                  color: i === 1 ? DENTAL_BLUE : DENTAL_INK,
                  border: `1px solid ${i === 1 ? DENTAL_BLUE_SOFT : '#E5EAF2'}`,
                }}>{t}</span>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Services */}
      <section style={{ padding: '20px 80px 80px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32 }}>
          <div>
            <div style={{ fontSize: 12, color: DENTAL_BLUE, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 8 }}>— Tratamientos</div>
            <h2 style={{ fontSize: 38, fontWeight: 800, letterSpacing: '-0.02em', margin: 0 }}>Lo que hacemos mejor</h2>
          </div>
          <span style={{ fontSize: 14, color: DENTAL_BLUE, fontWeight: 600, cursor: 'pointer' }}>Ver todos los servicios →</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          <ServiceCard
            icon={<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2 L15 8 L21 9 L16.5 13.5 L18 20 L12 17 L6 20 L7.5 13.5 L3 9 L9 8 Z"/></svg>}
            title="Implantes dentales"
            desc="Recupera tu sonrisa con implantes de titanio en una sola sesión guiada por software 3D."
            price="850€"
          />
          <ServiceCard
            icon={<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 8 Q12 2 20 8 Q20 18 12 22 Q4 18 4 8 Z"/><path d="M9 11 L12 14 L15 11"/></svg>}
            title="Ortodoncia invisible"
            desc="Alineadores transparentes Invisalign®, casi invisibles y removibles. Resultados desde 6 meses."
            price="1.890€"
          />
          <ServiceCard
            icon={<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="8"/><path d="M12 4 L12 7 M12 17 L12 20 M4 12 L7 12 M17 12 L20 12"/></svg>}
            title="Blanqueamiento LED"
            desc="Hasta 8 tonos más blanco en una sola sesión clínica. Sin sensibilidad, resultados visibles al instante."
            price="180€"
          />
        </div>
      </section>

      {/* Footer strip */}
      <section style={{
        margin: '0 80px 60px',
        background: DENTAL_INK,
        borderRadius: 20,
        padding: '36px 44px',
        color: '#fff',
        display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 30,
      }}>
        <div>
          <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.01em', marginBottom: 8, lineHeight: 1.2 }}>Tu sonrisa empieza con una llamada.</div>
          <div style={{ fontSize: 13, opacity: 0.7 }}>Atendemos urgencias el mismo día.</div>
        </div>
        <div>
          <div style={{ fontSize: 11, opacity: 0.5, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>Dirección</div>
          <div style={{ fontSize: 13, lineHeight: 1.5 }}>Av. País Valencià, 14<br/>46500 Sagunto</div>
        </div>
        <div>
          <div style={{ fontSize: 11, opacity: 0.5, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>Horario</div>
          <div style={{ fontSize: 13, lineHeight: 1.5 }}>L–V · 9:00–14:00<br/>L–V · 16:00–20:30</div>
        </div>
        <div>
          <div style={{ fontSize: 11, opacity: 0.5, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>Teléfono</div>
          <div style={{ fontSize: 13, lineHeight: 1.5 }}>962 661 482<br/>info@dentaloriente.es</div>
        </div>
      </section>

      <DentalChat/>
    </div>
  );
}

// ── Mobile ──────────────────────────────────────────────────
function DentalMobile() {
  return (
    <div style={{
      width: 390, minHeight: 844,
      background: '#fff',
      fontFamily: 'Plus Jakarta Sans, sans-serif',
      color: DENTAL_INK,
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Status bar */}
      <div style={{
        height: 44, padding: '0 22px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontSize: 14, fontWeight: 600,
      }}>
        <span>9:41</span>
        <span style={{ display: 'flex', gap: 5, alignItems: 'center', fontSize: 12 }}>
          <span>●●●</span>
          <span>📶</span>
          <span>🔋</span>
        </span>
      </div>
      {/* Top bar */}
      <div style={{
        padding: '8px 20px 14px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{
            width: 30, height: 30, borderRadius: 9,
            background: DENTAL_INK, color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontWeight: 800, fontSize: 13,
          }}>O</div>
          <div style={{ fontSize: 13, fontWeight: 800 }}>Dental Oriente</div>
        </div>
        <button style={{
          background: 'transparent', border: '1px solid #E5EAF2',
          width: 36, height: 36, borderRadius: 10, fontSize: 16, cursor: 'pointer',
        }}>☰</button>
      </div>

      {/* Hero */}
      <section style={{ padding: '8px 20px 26px' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          background: DENTAL_BLUE_SOFT, color: DENTAL_BLUE,
          fontSize: 11, fontWeight: 600,
          padding: '5px 10px', borderRadius: 999, marginBottom: 16,
        }}>
          <span style={{ width: 5, height: 5, borderRadius: '50%', background: DENTAL_BLUE }}></span>
          1ª visita gratuita
        </div>
        <h1 style={{
          fontSize: 38, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.03em',
          margin: '0 0 14px',
        }}>
          Sonríe sin<br/>pensarlo<br/>
          <span style={{ color: DENTAL_BLUE, fontStyle: 'italic', fontWeight: 500 }}>dos veces.</span>
        </h1>
        <p style={{ fontSize: 14, color: DENTAL_MUTED, lineHeight: 1.55, margin: '0 0 22px' }}>
          Odontología avanzada en Sagunto. Tres generaciones cuidando tu sonrisa.
        </p>
        <button style={{
          width: '100%',
          background: DENTAL_INK, color: '#fff',
          fontFamily: 'inherit', fontSize: 15, fontWeight: 600,
          padding: '15px 0', borderRadius: 12, border: 'none', cursor: 'pointer',
          marginBottom: 18,
        }}>Reservar cita →</button>
        <DentistPortrait height={240} mobile/>
      </section>

      {/* Services */}
      <section style={{ padding: '8px 20px 24px' }}>
        <div style={{ fontSize: 11, color: DENTAL_BLUE, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 6 }}>— Tratamientos</div>
        <h2 style={{ fontSize: 26, fontWeight: 800, letterSpacing: '-0.02em', margin: '0 0 18px' }}>Lo que hacemos mejor</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <ServiceCard icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2 L15 8 L21 9 L16.5 13.5 L18 20 L12 17 L6 20 L7.5 13.5 L3 9 L9 8 Z"/></svg>} title="Implantes dentales" desc="Implantes de titanio guiados por 3D en una sola sesión." price="850€"/>
          <ServiceCard icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 8 Q12 2 20 8 Q20 18 12 22 Q4 18 4 8 Z"/></svg>} title="Ortodoncia invisible" desc="Alineadores transparentes. Resultados desde 6 meses." price="1.890€"/>
          <ServiceCard icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="8"/></svg>} title="Blanqueamiento LED" desc="8 tonos más blanco en una sola sesión clínica." price="180€"/>
        </div>
      </section>

      {/* Footer */}
      <section style={{
        margin: '0 20px 24px',
        background: DENTAL_INK,
        borderRadius: 18,
        padding: '24px 22px',
        color: '#fff',
      }}>
        <div style={{ fontSize: 18, fontWeight: 800, marginBottom: 10, lineHeight: 1.25 }}>Atendemos urgencias el mismo día.</div>
        <div style={{ fontSize: 12, opacity: 0.7, lineHeight: 1.6, marginBottom: 14 }}>
          Av. País Valencià, 14 · Sagunto<br/>
          L–V · 9:00–14:00 / 16:00–20:30
        </div>
        <button style={{
          background: DENTAL_BLUE, color: '#fff',
          fontFamily: 'inherit', fontSize: 13, fontWeight: 600,
          padding: '11px 18px', borderRadius: 10, border: 'none', cursor: 'pointer',
        }}>📞 962 661 482</button>
      </section>

      <DentalChat compact/>
    </div>
  );
}

Object.assign(window, { DentalDesktop, DentalMobile });