/* global React */
const { useState, useEffect } = React;

// ============ SHARED ACCENT PRESETS ============
window.ACCENT_PRESETS = {
  indigo:  { c1: "#6366F1", c2: "#8B5CF6", soft: "rgba(99,102,241,0.18)", glow: "rgba(99,102,241,0.45)" },
  teal:    { c1: "#34D8B6", c2: "#7C5CFF", soft: "rgba(52,216,182,0.18)", glow: "rgba(52,216,182,0.45)" },
  violet:  { c1: "#A78BFA", c2: "#6366F1", soft: "rgba(167,139,250,0.18)", glow: "rgba(167,139,250,0.45)" },
  amber:   { c1: "#F5B764", c2: "#7C5CFF", soft: "rgba(245,183,100,0.18)", glow: "rgba(245,183,100,0.45)" },
};

// ============ HERO ART ============
function PrismShard({ a }) {
  return (
    <svg viewBox="0 0 720 640" style={{ width: "100%", height: "100%", overflow: "visible" }}>
      <defs>
        <linearGradient id="shard1" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#fff" stopOpacity="0.95" />
          <stop offset="55%" stopColor={a.c1} stopOpacity="0.75" />
          <stop offset="100%" stopColor={a.c2} stopOpacity="0.55" />
        </linearGradient>
        <linearGradient id="shard2" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={a.c1} stopOpacity="0.9" />
          <stop offset="100%" stopColor={a.c2} stopOpacity="0.4" />
        </linearGradient>
        <linearGradient id="shard3" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={a.c2} stopOpacity="0.9" />
          <stop offset="100%" stopColor={a.c1} stopOpacity="0.3" />
        </linearGradient>
        <filter id="shardBlur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="22" /></filter>
        <filter id="shardSoft" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="6" /></filter>
      </defs>
      <ellipse cx="540" cy="180" rx="180" ry="120" fill={a.c2} opacity="0.35" filter="url(#shardBlur)" />
      <ellipse cx="220" cy="500" rx="200" ry="140" fill={a.c1} opacity="0.45" filter="url(#shardBlur)" />
      <g style={{ animation: "drift1 14s ease-in-out infinite alternate" }}>
        <polygon points="180,200 540,140 600,360 240,420" fill="url(#shard3)" opacity="0.55" filter="url(#shardSoft)" />
      </g>
      <g style={{ animation: "drift2 11s ease-in-out infinite alternate" }}>
        <polygon points="200,260 580,180 640,420 260,500" fill="url(#shard2)" opacity="0.78" />
        <polygon points="200,260 580,180 640,420 260,500" fill="none" stroke={a.c1} strokeOpacity="0.55" strokeWidth="1.2" />
      </g>
      <g style={{ animation: "drift3 9s ease-in-out infinite alternate" }}>
        <polygon points="160,300 540,230 600,470 220,540" fill="url(#shard1)" opacity="0.92" />
        <polygon points="160,300 540,230 600,470 220,540" fill="none" stroke="rgba(255,255,255,0.4)" strokeWidth="1" />
      </g>
      <ellipse cx="610" cy="450" rx="60" ry="40" fill={a.c2} opacity="0.7" filter="url(#shardBlur)" />
    </svg>
  );
}
window.PrismShard = PrismShard;

// ============ NAV ============
function Nav({ ctaCopy, current }) {
  const industries = [
    { slug: "Clinicas.html", label: "Clínicas privadas" },
    { slug: "Veterinarios.html", label: "Veterinarios" },
    { slug: "Asesorias.html", label: "Asesorías y gestorías" },
    { slug: "Abogados.html", label: "Despachos de abogados" },
    { slug: "Fincas.html", label: "Administración de fincas" },
    { slug: "Talleres.html", label: "Talleres y concesionarios" },
    { slug: "Instaladores.html", label: "Instaladores y oficios" },
    { slug: "Hosteleria.html", label: "Hostelería" },
    { slug: "Ecommerce.html", label: "E-commerce" },
    { slug: "Autoescuelas.html", label: "Autoescuelas y academias" },
  ];
  return (
    <nav className="nav-pill">
      <div className="nav-inner">
        <a href="Emblematic Voz Landing.html" className="logo">emblematic<span className="dot">.</span><span className="logo-sub">voz</span></a>
        <a href="Emblematic Voz Landing.html#como" className="nav-link">Cómo funciona</a>
        <div className="nav-dropdown">
          <button className="nav-link nav-drop-btn">Industrias <span className="caret">▾</span></button>
          <div className="nav-drop-menu">
            {industries.map((i) => (
              <a key={i.slug} href={i.slug} className={"nav-drop-item" + (current === i.slug ? " active" : "")}>{i.label}</a>
            ))}
          </div>
        </div>
        <a href="Emblematic Voz Landing.html#precios" className="nav-link">Precios</a>
        <a href="Emblematic Voz Landing.html#faq" className="nav-link">FAQ</a>
      </div>
      <a href="#demo" className="nav-cta">{ctaCopy || "Reservar demo"}</a>
    </nav>
  );
}
window.Nav = Nav;

// ============ HERO (generic, accepts overrides) ============
function Hero({ accent, ctaCopy, eyebrow, title, lead, scenarioName, scenarioStatus, transcript }) {
  const [phone, setPhone] = useState("");
  const [calling, setCalling] = useState(false);
  return (
    <section className="hero">
      <div className="hero-grid">
        <div className="hero-copy">
          <div className="eyebrow">
            <span className="dot-live" /> {eyebrow}
          </div>
          <h1 className="h-display">{title}</h1>
          <p className="lead">{lead}</p>

          <div className="hero-form">
            <div className="phone-input">
              <span className="cc">+34</span>
              <input type="tel" placeholder="600 000 000" value={phone} onChange={(e) => setPhone(e.target.value)} />
            </div>
            <button
              className={"btn-primary" + (calling ? " calling" : "")}
              onClick={() => { setCalling(true); setTimeout(() => setCalling(false), 2400); }}
            >
              {calling ? <><span className="ring" /> Llamando…</> : "Probar la IA ahora"}
            </button>
          </div>
          <p className="form-fineprint">
            Al hacer clic confirmas haber leído nuestra <a href="#">política de privacidad</a>.
            La IA te llamará en cuestión de segundos.
          </p>

          <div className="hero-cta-row">
            <a href="#demo" className="btn-ghost">{ctaCopy || "Reservar demo"} →</a>
            <div className="trust-mini">
              <div className="avatars">
                <img className="av" src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=80&h=80&fit=crop&crop=faces&q=80" alt="" />
                <img className="av" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=faces&q=80" alt="" />
                <img className="av" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=80&h=80&fit=crop&crop=faces&q=80" alt="" />
              </div>
              <div className="trust-text">
                <strong>+1.200</strong> negocios nos eligen
              </div>
            </div>
          </div>
        </div>

        <div className="hero-art">
          <PrismShard a={accent} />
          <CallCardOverlay name={scenarioName} status={scenarioStatus} transcript={transcript} />
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;

function CallCardOverlay({ name, status, transcript }) {
  const [t, setT] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setT((x) => x + 1), 1000);
    return () => clearInterval(id);
  }, []);
  const m = String(Math.floor(t / 60)).padStart(2, "0");
  const s = String(t % 60).padStart(2, "0");
  return (
    <div className="call-card">
      <div className="call-row">
        <div className="call-avatar">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="none">
            <path d="M5 5c0-1 1-2 2-2h2l2 4-2 1c.7 2 2.3 3.6 4.3 4.3l1-2 4 2v2c0 1-1 2-2 2A14 14 0 0 1 5 5z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
          </svg>
        </div>
        <div>
          <div className="call-name">{name || "Asistente IA · Clínica Sol"}</div>
          <div className="call-status"><span className="live-dot" /> {status || "En llamada"} · {m}:{s}</div>
        </div>
      </div>
      <div className="waveform">
        {[...Array(28)].map((_, i) => <span key={i} className="bar" style={{ animationDelay: `${i * 0.06}s` }} />)}
      </div>
      <div className="transcript">
        {(transcript || [
          { who: "user", text: "Hola, quería pedir cita para una limpieza dental esta semana…" },
          { who: "ai", text: "Claro. Tengo el jueves a las 10:30 o el viernes a las 17:00. ¿Cuál te encaja?" },
        ]).map((l, i) => (
          <div key={i} className="t-line"><span className={"t-tag " + l.who}>{l.who === "user" ? "Cliente" : "IA"}</span> {l.text}</div>
        ))}
      </div>
    </div>
  );
}

// ============ LOGO STRIP ============
function LogoStrip({ label }) {
  const logos = [
    "Fever",
    "Big Sur Ventures",
    "K Fund",
    "Plug and Play",
    "Pasión Capital",
    "Caser",
    "Smile&Co",
    "Vincci Coastal",
    "Reforma Group",
    "Atlántico Fincas",
    "ClimaPro",
    "Bermejo Asesores",
  ];
  return (
    <section className="logos">
      <div className="logos-label">{label || "RESPALDADOS POR INVERSORES Y EMPRESAS QUE CONFÍAN EN EMBLEMATIC"}</div>
      <div className="logos-track-wrap">
        <div className="logos-track">
          {[...logos, ...logos, ...logos].map((l, i) => <div key={i} className="logo-item">{l}</div>)}
        </div>
      </div>
    </section>
  );
}
window.LogoStrip = LogoStrip;

// ============ HOW IT WORKS ============
function HowItWorks({ accent }) {
  return (
    <section id="como" className="section">
      <div className="section-head center">
        <div className="pill">PUESTA EN MARCHA</div>
        <h2 className="h-section">Operativo en menos de <em>10 minutos</em></h2>
        <p className="section-sub">Sin equipo técnico. Sin instalaciones. Una IA que atiende como lo harías tú.</p>
      </div>
      <div className="steps">
        <div className="step-card">
          <div className="step-art"><StepAssistant a={accent} /></div>
          <div className="step-num">PASO 01</div>
          <h3 className="step-title">Crea tu asistente</h3>
          <p className="step-sub">Elige la voz, el idioma y el saludo en menos de cinco minutos. Sin código.</p>
        </div>
        <div className="step-card">
          <div className="step-art"><StepBehavior a={accent} /></div>
          <div className="step-num">PASO 02</div>
          <h3 className="step-title">Define cómo se comporta</h3>
          <p className="step-sub">Activa habilidades, conecta tus sistemas y decide cómo recibir resúmenes y transcripciones.</p>
        </div>
        <div className="step-card">
          <div className="step-art"><StepCall a={accent} /></div>
          <div className="step-num">PASO 03</div>
          <h3 className="step-title">Conéctalo a tu teléfono</h3>
          <p className="step-sub">Usa un número Emblematic o desvía tu centralita actual. Compatible con SIP, 3CX y similares.</p>
        </div>
      </div>
    </section>
  );
}
window.HowItWorks = HowItWorks;

function StepAssistant({ a }) {
  return (
    <div className="ui-mock">
      <div className="ui-mock-head">Configuración del asistente</div>
      <div className="field"><span className="label">Nombre</span><span className="value">Recepción · Clínica Sol</span></div>
      <div className="field"><span className="label">Idioma</span><span className="value">Español (España)</span></div>
      <div className="field"><span className="label">Voz</span>
        <span className="value voice-row"><span className="voice-dot" style={{ background: a.c1 }} />Lucía · cálida</span>
      </div>
      <div className="field"><span className="label">Saludo</span><span className="value clip">"Hola, soy Lucía…"</span></div>
    </div>
  );
}

function StepBehavior({ a }) {
  return (
    <div className="ui-mock behavior-mock">
      <div className="ui-mock-head">Habilidades activas</div>
      <div className="behavior-list">
        <div className="behavior-row">
          <div className="behavior-icon" style={{ background: a.soft, color: a.c1 }}>
            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3.5" y="5" width="17" height="15" rx="2" /><path d="M3.5 10h17M8 3v4M16 3v4" /></svg>
          </div>
          <div className="behavior-main">
            <div className="behavior-title">Agendar citas</div>
            <div className="behavior-sub">Sincroniza con Google Calendar</div>
          </div>
          <span className="toggle on" style={{ background: a.c1 }}><span /></span>
        </div>
        <div className="behavior-row">
          <div className="behavior-icon" style={{ background: a.soft, color: a.c1 }}>
            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 12a9 9 0 1 0-3.6 7.2L21 21l-1.8-3.6A8.97 8.97 0 0 0 21 12z" /></svg>
          </div>
          <div className="behavior-main">
            <div className="behavior-title">Resolver FAQ</div>
            <div className="behavior-sub">42 respuestas entrenadas</div>
          </div>
          <span className="toggle on" style={{ background: a.c1 }}><span /></span>
        </div>
        <div className="behavior-row">
          <div className="behavior-icon" style={{ background: a.soft, color: a.c1 }}>
            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 5c0-1 1-2 2-2h2l2 4-2 1c.7 2 2.3 3.6 4.3 4.3l1-2 4 2v2c0 1-1 2-2 2A14 14 0 0 1 5 5z" /></svg>
          </div>
          <div className="behavior-main">
            <div className="behavior-title">Transferir a humano</div>
            <div className="behavior-sub">Si la IA detecta urgencia</div>
          </div>
          <span className="toggle on" style={{ background: a.c1 }}><span /></span>
        </div>
      </div>
    </div>
  );
}

function StepCall({ a }) {
  return (
    <div className="ui-mock call-mock">
      <div className="phone-orb" style={{ boxShadow: `0 0 60px ${a.glow}` }}>
        <svg viewBox="0 0 24 24" width="28" height="28" fill="none">
          <path d="M5 5c0-1 1-2 2-2h2l2 4-2 1c.7 2 2.3 3.6 4.3 4.3l1-2 4 2v2c0 1-1 2-2 2A14 14 0 0 1 5 5z" stroke="#fff" strokeWidth="1.6" strokeLinejoin="round" />
        </svg>
      </div>
      <div className="phone-num">+34 919 91 84 02</div>
      <div className="phone-status"><span className="live-dot" /> En línea · 24/7</div>
    </div>
  );
}

// ============ FAQ ============
function FAQ({ items }) {
  const [open, setOpen] = useState(0);
  const list = items || [
    { q: "¿Mis clientes se van a dar cuenta de que es una IA?", a: "La voz suena muy humana — natural, con pausas, gestiona interrupciones y entiende acentos andaluces, gallegos, catalanes o de cualquier zona. Pero la IA siempre se identifica como asistente virtual al inicio de la llamada. No engañamos a quien llama: queremos que la conversación fluya como con una persona, pero con honestidad. Antes de decidirte te llamamos para que lo escuches tú mismo." },
    { q: "¿Y si la IA no sabe responder a algo?", a: "Pasa el aviso a la persona adecuada de tu equipo o agenda una rellamada. Nunca se inventa información. Tú decides qué temas resuelve sola y cuáles siempre derivan a un humano." },
    { q: "¿Cuánto se tarda en tenerlo funcionando?", a: "La mayoría de clientes está atendiendo llamadas reales en menos de una semana. La configuración inicial son un par de horas; lo demás es ajustar el guión y conectarlo con tus herramientas (calendario, CRM, software de gestión)." },
    { q: "¿Puedo seguir usando mi número de toda la vida?", a: "Sí. Mantienes tu número actual y desvías a la IA las llamadas que tú decidas (todas, fuera de horario, cuando comunica…). Compatible con centralitas IP, Aircall, 3CX, Twilio y la mayoría de operadores españoles." },
    { q: "¿Funciona con el software que ya uso?", a: "Sí, en casi todos los casos. Tenemos integraciones nativas con los CRMs y softwares verticales más usados en España (Holded, A3, Doctoralia, Clinic Cloud, Cloudbeds, Gesfincas, etc.). Si usas algo más específico, lo conectamos por API." },
    { q: "¿Y los datos? ¿Cumple el RGPD?", a: "Servidores en la UE (Frankfurt y Madrid), cifrado en tránsito y en reposo, contrato de encargado de tratamiento firmado. Cumplimos RGPD, LOPDGDD y EU AI Act. Tus llamadas no se usan para entrenar modelos y nunca salen de Europa." },
    { q: "¿Hay permanencia? ¿Y si quiero darme de baja?", a: "Sin permanencia. Pago mensual, te das de baja cuando quieras desde tu panel. La primera semana es de prueba para que veas si encaja con tu negocio." },
    { q: "¿Cuánto cuesta de verdad?", a: "Desde 99 €/mes para negocios pequeños — incluye un volumen de minutos suficiente para la mayoría. Si necesitas más volumen o varias líneas, lo ajustamos. Sin sorpresas: ves el consumo en directo desde el panel." },
  ];
  return (
    <section id="faq" className="section faq">
      <div className="section-head center">
        <div className="pill">PREGUNTAS FRECUENTES</div>
        <h2 className="h-section">Resolvemos tus <em>dudas</em></h2>
      </div>
      <div className="faq-list">
        {list.map((it, i) => (
          <button key={i} className={"faq-item" + (open === i ? " open" : "")} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="faq-q">
              <span>{it.q}</span>
              <span className="faq-plus">{open === i ? "−" : "+"}</span>
            </div>
            {open === i && <div className="faq-a">{it.a}</div>}
          </button>
        ))}
      </div>
    </section>
  );
}
window.FAQ = FAQ;

// ============ FINAL CTA ============
function FinalCTA({ ctaCopy, accent, title, body }) {
  return (
    <section id="demo" className="final-cta">
      <div className="final-card" style={{ "--accent": accent.c1, "--accent-glow": accent.glow }}>
        <div className="pill">EMPIEZA HOY</div>
        <h2 className="h-section">{title || "Repensemos las llamadas, juntos."}</h2>
        <p className="section-sub">{body || "Prueba Emblematic Voz y descubre cómo nuestro asistente automatiza tus llamadas y libera a tu equipo — fácil, eficiente y disponible 24/7."}</p>
        <div className="final-buttons">
          <a href="#" className="btn-primary">{ctaCopy || "Reservar demo"}</a>
          <a href="#" className="btn-ghost">Crear mi propia IA →</a>
        </div>
      </div>
    </section>
  );
}
window.FinalCTA = FinalCTA;

// ============ FOOTER ============
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div>
          <div className="logo">emblematic<span className="dot">.</span><span className="logo-sub">voz</span></div>
          <p className="muted small mt8">El asistente de voz con IA en español.</p>
          <p className="muted small mt8">hola@emblematic.ai · +34 919 91 84 02</p>
        </div>
        <div>
          <div className="footer-h">Industrias</div>
          <a href="Clinicas.html">Clínicas privadas</a>
          <a href="Veterinarios.html">Veterinarios</a>
          <a href="Asesorias.html">Asesorías y gestorías</a>
          <a href="Abogados.html">Despachos de abogados</a>
          <a href="Fincas.html">Administración de fincas</a>
          <a href="Talleres.html">Talleres y concesionarios</a>
          <a href="Instaladores.html">Instaladores y oficios</a>
          <a href="Hosteleria.html">Hostelería</a>
          <a href="Ecommerce.html">E-commerce</a>
          <a href="Autoescuelas.html">Autoescuelas</a>
        </div>
        <div>
          <div className="footer-h">Producto</div>
          <a href="#como">Cómo funciona</a><a href="#precios">Precios</a><a href="#integraciones">Integraciones</a><a href="#whatsapp">WhatsApp</a>
        </div>
        <div>
          <div className="footer-h">Empresa</div>
          <a href="#">Manifesto</a><a href="#">Carreras</a><a href="#">Prensa</a><a href="#">Contacto</a>
        </div>
        <div>
          <div className="footer-h">Legal</div>
          <a href="#">Privacidad</a><a href="#">Términos</a><a href="#">Trust Center</a>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Emblematic, Inc · Todos los derechos reservados</span>
        <span className="badges">
          <span className="b">🛡 RGPD</span>
          <span className="b">⚖ EU AI Act</span>
        </span>
      </div>
    </footer>
  );
}
window.Footer = Footer;

// ============ COMPLIANCE ============
function Compliance() {
  const items = [
    { title: "Datos cifrados", body: "Cifrado en reposo (AES-256) y en tránsito (TLS 1.2+).", icon: "lock" },
    { title: "RGPD", body: "Cumplimos los estándares más estrictos de protección de datos en Europa.", icon: "shield" },
    { title: "Servidores en la UE", body: "Tus datos se almacenan en Frankfurt y Madrid. Nunca cruzan el Atlántico.", icon: "globe" },
    { title: "EU AI Act", body: "Conformes con la regulación europea de inteligencia artificial.", icon: "check" },
  ];
  return (
    <section className="section compliance">
      <div className="section-head center">
        <div className="pill">PRIVACIDAD</div>
        <h2 className="h-section">Listo para <em>empresas</em></h2>
        <p className="section-sub">Tú eres dueño y controlas tus datos. Nuestros modelos nunca los usan para entrenar.</p>
      </div>
      <div className="comp-grid">
        {items.map((c) => (
          <div key={c.title} className="comp-card">
            <div className="comp-icon"><CompIcon name={c.icon} /></div>
            <h4 className="comp-title">{c.title}</h4>
            <p className="comp-body">{c.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}
window.Compliance = Compliance;

function CompIcon({ name }) {
  if (name === "lock") return <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="5" y="11" width="14" height="9" rx="2" /><path d="M8 11V8a4 4 0 0 1 8 0v3" /></svg>;
  if (name === "shield") return <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z" /></svg>;
  if (name === "globe") return <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" /></svg>;
  return <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M5 12l4 4 10-10" /></svg>;
}

// ============ WHATSAPP COMING SOON ============
function WhatsAppSection({ accent, waName, waMessages }) {
  return (
    <section id="whatsapp" className="section whatsapp-sec">
      <div className="wa-grid">
        <div>
          <div className="pill wa-pill"><span className="wa-pulse" /> EN DESARROLLO</div>
          <h2 className="h-section left">Una sola IA. <em>Voz y WhatsApp.</em></h2>
          <p className="section-sub left">
            En desarrollo: tu mismo asistente atenderá también los chats de WhatsApp Business.
            Mismo conocimiento, misma personalidad, misma trazabilidad — y la misma voz humana
            que ya hace que tus clientes en España no noten que están hablando con una máquina.
          </p>
          <div className="wa-bullets">
            <div className="wa-bullet"><span className="wa-check">✓</span> Continuidad entre llamada y chat</div>
            <div className="wa-bullet"><span className="wa-check">✓</span> Mensajes de voz transcritos automáticamente</div>
            <div className="wa-bullet"><span className="wa-check">✓</span> Plantillas oficiales de WhatsApp Business</div>
            <div className="wa-bullet"><span className="wa-check">✓</span> Integraciones con tu CRM al primer mensaje</div>
          </div>
          <div style={{ marginTop: 24, display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a href="#demo" className="btn-primary" style={{ background: "linear-gradient(180deg,#25D366,#128C7E)", boxShadow: "0 8px 28px rgba(37,211,102,0.35)" }}>Apuntarme a la beta</a>
            <a href="#" className="btn-ghost">Ver el roadmap →</a>
          </div>
        </div>
        <div className="wa-mock">
          <WhatsAppMock waName={waName} waMessages={waMessages} />
        </div>
      </div>
    </section>
  );
}
window.WhatsAppSection = WhatsAppSection;

const DEFAULT_WA_NAME = "Clínica Sol · Asistente";
const DEFAULT_WA_MESSAGES = [
  { dir: "in", text: "Hola, ¿podríais decirme si tenéis hueco para una limpieza esta semana?", time: "14:32" },
  { dir: "out", text: "¡Hola! Sí, tenemos hueco el jueves a las 10:30 y el viernes a las 17:00. ¿Cuál te encaja mejor?", time: "14:32 ✓✓" },
  { dir: "in", text: "El jueves perfecto. ¿Tenéis convenio con Adeslas?", time: "14:33" },
  { dir: "out", text: "Sí, somos centro concertado con Adeslas. La consulta inicial está cubierta al 100%. Te confirmo la cita por aquí en cuanto esté agendada.", time: "14:33 ✓✓" },
];

function WhatsAppMock({ waName, waMessages }) {
  const name = waName || DEFAULT_WA_NAME;
  const messages = waMessages || DEFAULT_WA_MESSAGES;
  return (
    <div className="wa-phone">
      <div className="wa-header">
        <span className="wa-back">‹</span>
        <span className="wa-avatar">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="#fff"><path d="M5 5c0-1 1-2 2-2h2l2 4-2 1c.7 2 2.3 3.6 4.3 4.3l1-2 4 2v2c0 1-1 2-2 2A14 14 0 0 1 5 5z" /></svg>
        </span>
        <div className="wa-h-info">
          <div className="wa-h-name">{name}</div>
          <div className="wa-h-status">en línea</div>
        </div>
      </div>
      <div className="wa-body">
        {messages.map((m, idx) => (
          <div key={idx} className={"wa-bubble " + m.dir}>{m.text}<span className="wa-time">{m.time}</span></div>
        ))}
        <div className="wa-typing"><span /><span /><span /></div>
      </div>
      <div className="wa-input-bar">
        <span className="wa-emoji">😊</span>
        <span className="wa-input-pl">Escribe un mensaje</span>
        <span className="wa-mic">🎙</span>
      </div>
    </div>
  );
}

// ============ TESTIMONIALS ============
function Testimonials({ items }) {
  const list = items || [
    { name: "Marta Pavlovsky", role: "Dirección · Valencia", photo: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=160&h=160&fit=crop&crop=faces&q=80", text: "Mi móvil ya no suena sin parar. La IA agenda las visitas y me manda un resumen al final del día, así puedo trabajar tranquila sin perder clientes." },
    { name: "Pilar Estévez", role: "Odontóloga · Madrid", photo: "https://images.unsplash.com/photo-1551836022-d5d88e9218df?w=200&h=200&fit=crop&crop=faces&q=80", text: "La IA gestiona horarios, recordatorios y dudas frecuentes. Las líneas quedan libres para urgencias reales y volvemos a atender bien al paciente." },
    { name: "Henrik Möller", role: "Director de hotel boutique · Barcelona", photo: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=200&h=200&fit=crop&crop=faces&q=80", text: "Los huéspedes llaman tarde, cuando hay menos personal en recepción. Con Emblematic estamos disponibles 24/7 y no perdemos reservas." },
    { name: "Sergi Aymat", role: "Administrador de fincas · Valencia", photo: "https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=200&h=200&fit=crop&crop=faces&q=80", text: "Antes éramos ciegos cuando llamaban veinte vecinos a la vez. Ahora la IA identifica la finca, califica la avería y nos envía un listado limpio." },
    { name: "Quim Folgueiras", role: "Instalador de climatización · Valencia", photo: "https://images.unsplash.com/photo-1564564321837-a57b7070ac4f?w=200&h=200&fit=crop&crop=faces&q=80", text: "Somos cuatro instaladores y una administrativa. Ahora la IA recoge las averías y solo pasa a la oficina lo que requiere mano humana." },
    { name: "Naiara Sigüenza", role: "Veterinaria · Rivas, Madrid", photo: "https://images.unsplash.com/photo-1623091410901-00e2d268901f?w=200&h=200&fit=crop&crop=faces&q=80", text: "Recordatorios de vacuna, control de citas, urgencias derivadas al móvil de guardia. La IA nos quita el ruido y nosotros nos centramos en los animales." },
  ];
  const [idx, setIdx] = useState(0);
  const N = list.length;
  const prev = () => setIdx((idx - 1 + N) % N);
  const next = () => setIdx((idx + 1) % N);
  const leftIdx = (idx - 1 + N) % N;
  const rightIdx = (idx + 1) % N;
  return (
    <section className="section testimonials">
      <div className="section-head center">
        <div className="pill">TESTIMONIOS</div>
        <h2 className="h-section">Lo que dicen <em>nuestros clientes</em></h2>
      </div>
      <div className="testi-wheel-wrap">
        <button className="testi-arrow testi-arrow-prev" onClick={prev} aria-label="Anterior">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 18l-6-6 6-6"/></svg>
        </button>
        <div className="testi-wheel">
          <TestiSide t={list[leftIdx]} side="left" key={"l"+leftIdx} onClick={prev} />
          <TestiCenter t={list[idx]} key={"c"+idx} />
          <TestiSide t={list[rightIdx]} side="right" key={"r"+rightIdx} onClick={next} />
        </div>
        <button className="testi-arrow testi-arrow-next" onClick={next} aria-label="Siguiente">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 18l6-6-6-6"/></svg>
        </button>
      </div>
      <div className="testi-dots">
        {list.map((_, i) => (
          <button key={i} className={"testi-dot" + (i === idx ? " active" : "")} onClick={() => setIdx(i)} aria-label={`Ir al testimonio ${i+1}`} />
        ))}
      </div>
    </section>
  );
}
function TestiCenter({ t }) {
  return (
    <article className="testi-card-center">
      <div className="testi-stars">★★★★★</div>
      <p className="testi-text-big">"{t.text}"</p>
      <div className="testi-author">
        <img src={t.photo} alt={t.name} className="testi-photo" loading="lazy" />
        <div>
          <div className="testi-name">{t.name}</div>
          <div className="testi-role">{t.role}</div>
        </div>
      </div>
    </article>
  );
}
function TestiSide({ t, side, onClick }) {
  return (
    <article className={"testi-card-side testi-side-" + side} onClick={onClick}>
      <div className="testi-stars">★★★★★</div>
      <p className="testi-text-side">"{t.text}"</p>
      <div className="testi-author">
        <img src={t.photo} alt={t.name} className="testi-photo" loading="lazy" />
        <div>
          <div className="testi-name">{t.name}</div>
          <div className="testi-role">{t.role}</div>
        </div>
      </div>
    </article>
  );
}
window.Testimonials = Testimonials;

// ============ INTEGRATIONS ============
function Integrations({ accent, tools }) {
  const list = tools || ["Google Calendar", "Outlook 365", "HubSpot", "Salesforce", "Pipedrive", "WhatsApp Business", "Stripe", "Bizum", "Holded", "Zapier", "Make", "API REST"];
  return (
    <section id="integraciones" className="section integrations">
      <div className="int-grid">
        <div>
          <div className="pill">INTEGRACIONES</div>
          <h2 className="h-section left">Conectado a tu <em>stack</em></h2>
          <p className="section-sub left">
            Integraciones nativas o vía API con tus calendarios, CRMs, ERPs y software vertical.
            La IA captura y consulta datos en tiempo real para que no se pierda nada.
          </p>
          <a href="#" className="btn-ghost">Que lo configuremos por ti →</a>
        </div>
        <div className="int-cloud">
          {list.slice(0, 6).map((t) => (
            <span key={t} className="int-chip" style={{ "--g": accent.glow }}>
              <span className="int-dot" style={{ background: accent.c1 }} />{t}
            </span>
          ))}
          <div className="int-core" style={{ background: `radial-gradient(circle, ${accent.c1}, ${accent.c2})` }}>
            <span>IA</span>
          </div>
          {list.slice(6).map((t) => (
            <span key={t} className="int-chip" style={{ "--g": accent.glow }}>
              <span className="int-dot" style={{ background: accent.c1 }} />{t}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Integrations = Integrations;

// ============ PRICING ============
function Pricing({ accent }) {
  return (
    <section id="precios" className="section pricing">
      <div className="section-head center">
        <div className="pill">PRECIOS</div>
        <h2 className="h-section">Precios <em>simples</em>, sin sorpresas</h2>
        <p className="section-sub">Garantía de devolución de 30 días. 15% de descuento en pago anual.</p>
      </div>
      <div className="pricing-grid">
        <div className="price-card">
          <div className="price-name">Solo</div>
          <div className="price-amount">€99<span>/mes</span></div>
          <div className="price-ideal">Para 1–20 llamadas al día</div>
          <ul className="price-feat">
            <li>1.000 minutos / mes</li>
            <li>1 número incluido</li>
            <li>1 usuario</li>
            <li>Integraciones estándar</li>
            <li>Soporte por email</li>
          </ul>
          <a href="#demo" className="btn-ghost full">Empezar →</a>
        </div>
        <div className="price-card featured">
          <div className="price-tag">RECOMENDADO</div>
          <div className="price-name">Team</div>
          <div className="price-amount">€299<span>/mes</span></div>
          <div className="price-ideal">Para 20–100 llamadas al día</div>
          <ul className="price-feat">
            <li>3.000 minutos / mes</li>
            <li>3 llamadas simultáneas</li>
            <li>SIP trunk</li>
            <li>Llamadas salientes</li>
            <li>Soporte prioritario</li>
          </ul>
          <a href="#demo" className="btn-primary full">Empezar →</a>
        </div>
        <div className="price-card">
          <div className="price-name">Scale</div>
          <div className="price-amount">€499<span>/mes+</span></div>
          <div className="price-ideal">Más de 100 llamadas al día</div>
          <ul className="price-feat">
            <li>5.000+ minutos / mes</li>
            <li>SIP a medida</li>
            <li>Voces personalizadas</li>
            <li>SLA y CSM dedicado</li>
            <li>SSO y auditoría</li>
          </ul>
          <a href="#demo" className="btn-ghost full">Hablar con ventas →</a>
        </div>
      </div>
    </section>
  );
}
window.Pricing = Pricing;