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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "indigo",
  "ctaCopy": "Reservar demo"
}/*EDITMODE-END*/;

function App() {
  const [tw, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const accent = window.ACCENT_PRESETS[tw.accent] || window.ACCENT_PRESETS.indigo;

  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", accent.c1);
    r.style.setProperty("--accent-2", accent.c2);
    r.style.setProperty("--accent-soft", accent.soft);
    r.style.setProperty("--accent-glow", accent.glow);
  }, [accent.c1]);

  return (
    <div className="app">
      <window.Nav ctaCopy={tw.ctaCopy} current="generic" />
      <window.Hero
        accent={accent}
        ctaCopy={tw.ctaCopy}
        eyebrow={<><span className="flag-es">🇪🇸</span> En español de España</>}
        title={<>El asistente de <span className="grad-text">voz con IA</span> para tu negocio en español</>}
        lead="Deja que una IA atienda tus llamadas como una persona — agenda citas, resuelve dudas y captura leads las 24 horas. Adaptada a España, con una voz tan natural que tus clientes no notan la diferencia."
      />
      <window.LogoStrip />
      <window.HowItWorks accent={accent} />
      <UseCases />
      <IndustriesGrid />
      <window.Testimonials />
      <window.Integrations accent={accent} />
      <window.WhatsAppSection accent={accent} />
      <window.Pricing accent={accent} />
      <window.Compliance />
      <window.FAQ />
      <window.FinalCTA accent={accent} ctaCopy={tw.ctaCopy} />
      <window.Footer />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection title="Color de acento">
          <window.TweakRadio
            value={tw.accent}
            onChange={(v) => setTweak("accent", v)}
            options={[
              { value: "indigo", label: "Índigo" },
              { value: "teal", label: "Teal" },
              { value: "violet", label: "Violeta" },
              { value: "amber", label: "Ámbar" },
            ]}
          />
        </window.TweakSection>
        <window.TweakSection title="CTA principal">
          <window.TweakText value={tw.ctaCopy} onChange={(v) => setTweak("ctaCopy", v)} />
        </window.TweakSection>
      </window.TweaksPanel>
    </div>
  );
}

function UseCases() {
  const cases = [
    { icon: "calendar", title: "Citas y reservas", body: "La IA agenda durante la llamada y sincroniza con tu calendario o sistema de reservas." },
    { icon: "support", title: "Atención al cliente", body: "Resuelve dudas frecuentes 24/7. Tú defines exactamente cómo responde, también en casos especiales." },
    { icon: "secretary", title: "Recepción virtual", body: "Atiende llamadas entrantes, filtra spam y deriva al equipo correcto cuando hace falta." },
    { icon: "transcribe", title: "Transcripciones", body: "Toma el recado, lo transcribe y te lo envía por email, WhatsApp o Slack al instante." },
    { icon: "order", title: "Pedidos y reservas", body: "Captura pedidos completos con productos, cantidades y dirección — directo a tu sistema." },
    { icon: "more", title: "+100 casos más", body: "Encuestas, recordatorios, rellamadas, cualificación de leads, cobros… si suena, lo automatiza." },
  ];
  return (
    <section className="section">
      <div className="section-head center">
        <div className="pill">CASOS DE USO</div>
        <h2 className="h-section">Una IA que se adapta a tu <em>negocio</em></h2>
        <p className="section-sub">Se integra de forma nativa en calendarios, CRMs y centralita. Llamadas automatizadas que de verdad tienen sentido.</p>
      </div>
      <div className="cases-grid">
        {cases.map((c) => (
          <div key={c.title} className="case-card">
            <div className="case-icon"><CaseIcon name={c.icon} /></div>
            <h3 className="case-title">{c.title}</h3>
            <p className="case-body">{c.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function CaseIcon({ name }) {
  const s = "currentColor";
  if (name === "calendar") return <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke={s} strokeWidth="1.5"><rect x="3.5" y="5" width="17" height="15" rx="2" /><path d="M3.5 10h17M8 3v4M16 3v4" /></svg>;
  if (name === "support") return <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke={s} strokeWidth="1.5"><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" /><path d="M9 11h6M9 14h4" /></svg>;
  if (name === "secretary") return <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke={s} strokeWidth="1.5"><circle cx="12" cy="8" r="3.5" /><path d="M5 20c1-3.5 4-5 7-5s6 1.5 7 5" /></svg>;
  if (name === "transcribe") return <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke={s} strokeWidth="1.5"><rect x="4" y="3.5" width="16" height="17" rx="2" /><path d="M8 8h8M8 12h8M8 16h5" /></svg>;
  if (name === "order") return <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke={s} strokeWidth="1.5"><path d="M4 5h2l2.5 12h10L21 8H7" /><circle cx="9.5" cy="20" r="1.3" /><circle cx="17" cy="20" r="1.3" /></svg>;
  return <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke={s} strokeWidth="1.5"><circle cx="6" cy="12" r="1.4" /><circle cx="12" cy="12" r="1.4" /><circle cx="18" cy="12" r="1.4" /></svg>;
}

function IndustriesGrid() {
  const inds = [
    { href: "Clinicas.html", emoji: "🩺", title: "Clínicas privadas", body: "Dental, fisio, estética, podología. Reduce los no-shows y libera la recepción. Integrado con Doctoralia y Clinic Cloud." },
    { href: "Veterinarios.html", emoji: "🐾", title: "Centros veterinarios", body: "Cita previa, urgencias, recordatorios de vacunas. 6.500 clínicas independientes esperándote en España." },
    { href: "Asesorias.html", emoji: "📊", title: "Asesorías y gestorías", body: "Estado de modelos, plazos, citas. Identificación por DNI y consulta directa en A3 o Sage." },
    { href: "Abogados.html", emoji: "⚖️", title: "Despachos de abogados", body: "Filtra consultas, agenda primera cita y deriva al abogado correcto. Compatible con Aranzadi y Tirant." },
    { href: "Fincas.html", emoji: "🏢", title: "Administración de fincas", body: "Triaje de averías, derramas, juntas. La IA puede gestionar hasta el 80% de las llamadas." },
    { href: "Talleres.html", emoji: "🔧", title: "Talleres y concesionarios", body: "Cita previa, ITV y recordatorios. Cada llamada perdida son 300€ de ticket que se va a la competencia." },
    { href: "Instaladores.html", emoji: "🛠️", title: "Instaladores y oficios", body: "Fontaneros, electricistas, climatización. Atiende mientras tienes las manos ocupadas en la obra." },
    { href: "Hosteleria.html", emoji: "🏨", title: "Hostelería", body: "Hoteles, hostales, casas rurales. Reservas en cinco idiomas, también de madrugada." },
    { href: "Ecommerce.html", emoji: "🛒", title: "E-commerce y D2C", body: "Estado del pedido, devoluciones, consultas pre-venta. Conectado con Shopify, PrestaShop y WooCommerce." },
    { href: "Autoescuelas.html", emoji: "🚗", title: "Autoescuelas y academias", body: "Información de cursos, precios, matrículas. Recuerda automáticamente exámenes y clases prácticas." },
  ];
  return (
    <section className="section">
      <div className="section-head center">
        <div className="pill">VERTICALES</div>
        <h2 className="h-section">Construido para los negocios <em>que reciben llamadas</em></h2>
        <p className="section-sub">Cada vertical con sus integraciones, su flujo y su voz. Empieza con una plantilla y la afinas en minutos.</p>
      </div>
      <div className="industry-cards">
        {inds.map((i) => (
          <a key={i.href} href={i.href} className="industry-card">
            <span className="industry-card-emoji">{i.emoji}</span>
            <div className="industry-card-body">
              <h3>{i.title}</h3>
              <p>{i.body}</p>
            </div>
            <span className="industry-card-arrow">→</span>
          </a>
        ))}
      </div>
    </section>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);