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

// ============================================================
// Nav
// ============================================================
function Nav({ audience, setAudience }) {
  return (
    <header className="nav">
      <div className="container nav-inner">
        <a href="#" className="nav-logo">
          <div className="nav-logo-mark"><span/><span/><span/><span/></div>
          contarte<span className="tld">·mx</span>
        </a>

        <div className="audience-switch" role="tablist" aria-label="Audiencia">
          <button data-on={audience === "empresa"} onClick={() => setAudience("empresa")}>Empresario</button>
          <button data-on={audience === "despacho"} onClick={() => setAudience("despacho")}>Despacho</button>
        </div>

        <nav className="nav-links">
          <a href="#modulos" className="nav-link">Producto</a>
          <a href="#tour" className="nav-link">Tour</a>
          <a href="#precios" className="nav-link">Precios</a>
          <a href="#recursos" className="nav-link">Recursos</a>
          <a href="#faq" className="nav-link">Ayuda</a>
          <span className="nav-sep"/>
          <a href="#" className="nav-link">Iniciar sesión</a>
          <a href="#cta" className="btn btn-primary btn-sm">Prueba 3 días</a>
        </nav>
      </div>
    </header>
  );
}

// ============================================================
// Hero
// ============================================================
function Hero({ audience, setAudience }) {
  const copy = {
    empresa: {
      eyebrow: "Para empresarios y MiPyMEs",
      title: <>Tu <span className="k">contabilidad</span><br/>ordenada y al día<br/>con tu contador.</>,
      sub: "Factura CFDI 4.0, cobra en línea, organiza tus XML del SAT y comparte todo con tu contador — sin salir de la nube.",
      cta: "Prueba gratis 3 días",
      sub2: "Ver demo en vivo",
    },
    despacho: {
      eyebrow: "Para despachos contables",
      title: <>Un despacho <span className="k">multi-RFC</span><br/>que trabaja contigo<br/>en tiempo real.</>,
      sub: "Administra timbres, colabora con tu equipo, descarga masiva desde SAT y cierra balanzas más rápido. Diseñado por contadores, para contadores.",
      cta: "Ver plan Despacho",
      sub2: "Agenda una demo",
    }
  }[audience];

  return (
    <section className="hero">
      <div className="container hero-inner">
        <div>
          <div className="hero-eyebrow">
            <span className="chip">{copy.eyebrow}</span>
            <span>· 100% mexicana · Conectada al SAT</span>
          </div>
          <h1 className="hero-title">{copy.title}</h1>
          <p className="hero-sub">{copy.sub}</p>

          <div className="audience-split">
            <button
              className="audience-card empresa"
              data-selected={audience === "empresa"}
              onClick={() => setAudience("empresa")}>
              <div className="aud-ico"><Icon name="user" size={16}/></div>
              <h4>Soy empresario</h4>
              <p>Mi RFC, facturas y cobros.</p>
              <div className="arrow"><Icon name="arrow-right" size={16}/></div>
            </button>
            <button
              className="audience-card despacho"
              data-selected={audience === "despacho"}
              onClick={() => setAudience("despacho")}>
              <div className="aud-ico"><Icon name="briefcase" size={16}/></div>
              <h4>Soy despacho</h4>
              <p>Multi-RFC, timbres y balanza.</p>
              <div className="arrow"><Icon name="arrow-right" size={16}/></div>
            </button>
          </div>

          <div className="hero-ctas">
            <a href="#cta" className="btn btn-primary btn-lg">{copy.cta} <Icon name="arrow-right" size={16}/></a>
            <a href="#tour" className="btn btn-ghost btn-lg"><Icon name="play" size={14}/> {copy.sub2}</a>
          </div>

          <div className="hero-proof">
            <div className="stat"><b>13+ años</b> operando en México</div>
            <div className="sep"/>
            <div className="stat"><b>99%</b> disponibilidad contractual</div>
            <div className="sep"/>
            <div className="stat"><b>4.1 ★</b> en Chrome Web Store</div>
          </div>
        </div>

        <HeroDashboard/>
      </div>
    </section>
  );
}

// ============================================================
// Logos strip
// ============================================================
function LogosStrip() {
  const labels = ["PAC certificado", "SAT", "Chrome Store", "AWS", "Zendesk", "MIT / SPUG"];
  return (
    <section className="logos-strip">
      <div className="container">
        <div className="label">Integrado y respaldado por</div>
        <div className="logos-row">
          {labels.map(l => <div key={l} className="logo-slot">{l}</div>)}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Module grid (audience-aware)
// ============================================================
function Modules({ audience }) {
  const empresa = [
    { size: "big",  ico: "invoice",  title: "Facturación CFDI 4.0", body: "Emite, cancela y manda facturas en segundos. Complemento de pago (REP) incluido.", tag: "Core" },
    { size: "",     ico: "wallet",   title: "Cobros en línea",      body: "Acepta tarjeta con CLABE conectada al SAT.", tag: "Pagos" },
    { size: "",     ico: "download", title: "Descarga masiva SAT",   body: "Extensión oficial para Chrome.", tag: "SAT" },
    { size: "",     ico: "bank",     title: "Bancos y flujo",        body: "Saldos, transferencias, traspasos y préstamos.", tag: "" },
    { size: "",     ico: "chart",    title: "Reportes financieros",  body: "Balanza, directorios y flujo exportable.", tag: "" },
    { size: "wide", ico: "people",   title: "Colaboración con tu contador", body: "Tu contador trabaja contigo en el mismo expediente, en tiempo real.", tag: "" },
    { size: "",     ico: "shield",   title: "Resguardo 5 años",      body: "XML guardados y respaldados.", tag: "" },
  ];
  const despacho = [
    { size: "big",  ico: "briefcase",title: "Administración multi-RFC", body: "Gestiona todos tus clientes desde una sola consola. Cambia de RFC sin cerrar sesión.", tag: "Core" },
    { size: "",     ico: "stamp",    title: "Timbres",        body: "Asigna, reasigna y monitorea consumo.", tag: "" },
    { size: "",     ico: "download", title: "Descarga masiva SAT", body: "Para cada cliente, en un solo clic.", tag: "SAT" },
    { size: "",     ico: "chart",    title: "DIOT y balanza", body: "Papel de trabajo listo para declarar.", tag: "" },
    { size: "",     ico: "folder",   title: "Expedientes",    body: "CFDI, bancos y anexos por cliente.", tag: "" },
    { size: "wide", ico: "people",   title: "Colaboración con tu equipo",  body: "Asigna clientes por contador, revisa avances, cierra en tiempo.", tag: "" },
    { size: "",     ico: "lock",     title: "Permisos",       body: "Roles por usuario y por cliente.", tag: "" },
  ];
  const data = audience === "empresa" ? empresa : despacho;

  return (
    <section className="section" id="modulos">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Módulos del producto</span>
          <h2>{audience === "empresa" ? "Todo lo que tu RFC necesita, en un solo lugar." : "Una práctica contable moderna, en un solo sistema."}</h2>
          <p>{audience === "empresa"
            ? "Facturación, cobros, SAT, bancos y reportes. Sin instalaciones, sin Excel, sin correos perdidos."
            : "Multi-RFC, timbres, DIOT, descarga masiva y colaboración. Menos horas operativas por cliente, más margen."}</p>
        </div>

        <div className="modules">
          {data.map((m, i) => (
            <div key={i} className={`module ${m.size}`}>
              {m.tag && <span className="tag">{m.tag}</span>}
              <div className="ico"><Icon name={m.ico} size={18}/></div>
              <h3>{m.title}</h3>
              <p>{m.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Product tour
// ============================================================
function Tour({ audience }) {
  const [tab, setTab] = useState(0);

  const tabs = audience === "empresa" ? [
    { t: "Emite CFDI 4.0", s: "Desde cero o a partir de cotizaciones", body: "Captura cliente, concepto, impuestos y timbra. Listo en segundos." },
    { t: "Importa gastos por XML", s: "Clasifica deducibles automáticamente", body: "Arrastra XMLs o usa la extensión del SAT. Contarte separa deducibles y no deducibles." },
    { t: "Comparte con tu contador", s: "Sin correos, sin Excel", body: "Tu contador ve lo mismo que tú, en vivo. Comenta, corrige y cierra el mes." },
    { t: "Cobra en línea", s: "Tarjeta + CLABE", body: "Manda link de pago. Se concilia con la factura al momento." },
  ] : [
    { t: "Consola multi-RFC", s: "Cambia de cliente en 1 clic", body: "Todos tus RFC con el mismo login. Timbres centralizados." },
    { t: "Descarga masiva SAT", s: "Extensión oficial", body: "Descarga CFDI emitidos y recibidos de cada cliente con un clic." },
    { t: "Papel de trabajo", s: "Balanza + DIOT", body: "Balanza de comprobación y DIOT listas para declarar." },
    { t: "Equipo y permisos", s: "Asigna clientes por contador", body: "Roles granulares, historial de cambios y responsables." },
  ];

  return (
    <section className="tour" id="tour">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow" style={{color:"var(--cyan-300)"}}>Recorrido guiado</span>
          <h2>Cómo se siente trabajar en Contarte.</h2>
          <p>Cuatro momentos que resumen la operación diaria de un {audience === "empresa" ? "empresario" : "despacho"}.</p>
        </div>

        <div className="tour-grid">
          <div className="tour-tabs">
            {tabs.map((x, i) => (
              <button key={i} className="tour-tab" data-on={tab === i} onClick={() => setTab(i)}>
                <b>{i+1}. {x.t}</b>
                <span>{x.s}</span>
              </button>
            ))}
          </div>
          <div className="tour-panel">
            <div className="tour-panel-inner">
              <TourPanelContent audience={audience} index={tab}/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Tour panel placeholder content — structural, labelled as mock
function TourPanelContent({ audience, index }) {
  const titles = [
    "Nueva factura CFDI 4.0",
    "Gastos importados por XML",
    "Expediente compartido con contador",
    "Cobros en línea (tarjeta)",
  ];
  return (
    <div style={{display:"flex", flexDirection:"column", height:"100%"}}>
      <div style={{display:"flex", alignItems:"center", justifyContent:"space-between", marginBottom:20}}>
        <div>
          <div style={{fontSize:12, color:"var(--ink-500)", textTransform:"uppercase", letterSpacing:".08em", fontWeight:500}}>Paso {index+1} de 4</div>
          <div style={{fontSize:22, fontWeight:600, marginTop:4, letterSpacing:"-0.02em"}}>{titles[index]}</div>
        </div>
        <span className="pill"><span className="dot"/>En vivo</span>
      </div>

      <div style={{
        flex:1,
        borderRadius:"var(--r-md)",
        background:"repeating-linear-gradient(135deg, var(--ink-50) 0 12px, #fff 12px 24px)",
        border:"1px dashed var(--ink-200)",
        display:"grid", placeItems:"center",
        color:"var(--ink-500)",
        fontFamily:"var(--font-mono)", fontSize:12
      }}>
        [ UI mock · {audience} · paso {index+1} — reemplazar con screenshot real ]
      </div>

      <div style={{display:"flex", gap:8, marginTop:16}}>
        <button className="btn btn-outline btn-sm"><Icon name="play" size={12}/> Ver en video</button>
        <button className="btn btn-ghost btn-sm">Siguiente paso <Icon name="arrow-right" size={12}/></button>
      </div>
    </div>
  );
}

// ============================================================
// Trust / testimonials
// ============================================================
function Trust({ showEditorial }) {
  const quotes = [
    { q: "Dejamos de pelear con el Excel. Mi contador ya no me pide cosas por correo — todo está ahí.", n: "— Testimonio · Empresario", role: "PyME de servicios · Tijuana", i: "M" },
    { q: "Manejo 28 clientes. Con los timbres centralizados y la descarga masiva, cerramos balanzas antes del día 15.", n: "— Testimonio · Despacho contable", role: "Despacho · 4 contadores", i: "D" },
    { q: "El cobro con CLABE conciliado con el CFDI me ahorró horas de conciliación manual cada mes.", n: "— Testimonio · Empresario", role: "e-commerce · CDMX", i: "R" },
  ];
  return (
    <section className="section" id="clientes" style={{background:"var(--ink-50)"}}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Historias de clientes</span>
          <h2>Contadores y empresarios que ya dejaron el Excel.</h2>
        </div>
        <div className="trust-grid">
          {quotes.map((q, i) => (
            <div key={i} className="quote">
              <div className="quote-mark">“</div>
              <blockquote>{q.q}</blockquote>
              <div className="quote-by">
                <div className="quote-avatar">{q.i}</div>
                <div>
                  <b>{q.n}</b>
                  <span>{q.role}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
        {showEditorial && (
          <div className="editorial-note">
            # editorial — testimoniales estructurales (sin copy real). Reemplazar con casos verificados antes de publicar.
          </div>
        )}
      </div>
    </section>
  );
}

// ============================================================
// FAQ
// ============================================================
function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
    { q: "¿Necesito conocimientos contables para usar Contarte?", a: "No. Contarte está diseñado para que un empresario lleve el día a día (facturas, cobros, gastos) y su contador se conecte al mismo expediente para cerrar el mes." },
    { q: "¿Qué pasa con mis XML si cancelo?", a: "Conservas acceso de lectura a todo lo almacenado; no podrás agregar ni modificar datos. Además, siempre puedes descargar tus XML desde la plataforma." },
    { q: "¿Incluye timbres fiscales?", a: "Sí. Cada plan incluye una cuota mensual de CFDI timbrados. Los timbres no consumidos expiran al cierre de cada mes, salvo en planes con CFDI ilimitado." },
    { q: "¿Se conecta directo al SAT?", a: "Sí. Usamos PACs autorizados para timbrar y cancelar, y una extensión oficial de Chrome para descarga masiva de CFDI emitidos y recibidos." },
    { q: "¿Puedo cambiar de plan?", a: "Puedes hacer upgrade en cualquier momento. El downgrade se realiza al cumplir el año, notificando con dos semanas de anticipación." },
    { q: "¿Ofrecen soporte en español?", a: "Sí. Centro de ayuda, tickets, WhatsApp y demo agendada — todo en español, con equipo en México." },
  ];
  return (
    <section className="section" id="faq">
      <div className="container" style={{maxWidth:800}}>
        <div className="section-head">
          <span className="eyebrow">Preguntas frecuentes</span>
          <h2>Respuestas claras antes de que preguntes.</h2>
        </div>
        <div className="faq">
          {items.map((it, i) => (
            <div key={i} className="faq-item" data-open={open === i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                {it.q}
                <span className="plus"><Icon name="plus" size={14}/></span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// CTA banner
// ============================================================
function CTABanner({ audience }) {
  return (
    <section className="section" id="cta">
      <div className="container">
        <div className="cta-banner">
          <div>
            <h2>Empieza hoy. Timbra tu primer CFDI en menos de 10 minutos.</h2>
            <p>Prueba 3 días, sin tarjeta. Importa tus clientes desde un XML y sincroniza el SAT en un clic.</p>
          </div>
          <div style={{display:"flex", gap:10, position:"relative"}}>
            <a href="#" className="btn btn-primary btn-lg">{audience === "despacho" ? "Crear cuenta despacho" : "Crear cuenta gratis"} <Icon name="arrow-right" size={16}/></a>
            <a href="#" className="btn btn-ghost btn-lg">Agendar demo</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Footer
// ============================================================
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col footer-brand">
            <a href="#" className="nav-logo" style={{color:"#fff"}}>
              <div className="nav-logo-mark"><span/><span/><span/><span/></div>
              contarte<span className="tld" style={{color:"var(--cyan-300)"}}>·mx</span>
            </a>
            <p className="tag">Contabilidad en la nube, 100% mexicana, diseñada para empresarios y despachos.</p>
            <div className="social">
              <a href="#" aria-label="LinkedIn"><Icon name="logo-ln" size={14}/></a>
              <a href="#" aria-label="YouTube"><Icon name="logo-yt" size={14}/></a>
              <a href="#" aria-label="Instagram"><Icon name="logo-ig" size={14}/></a>
            </div>
          </div>
          <div className="footer-col">
            <h5>Producto</h5>
            <ul>
              <li><a href="#">Empresario</a></li>
              <li><a href="#">Despacho</a></li>
              <li><a href="#">Precios</a></li>
              <li><a href="#">Descarga masiva</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Recursos</h5>
            <ul>
              <li><a href="#">Blog</a></li>
              <li><a href="#">Calculadoras</a></li>
              <li><a href="#">Centro de ayuda</a></li>
              <li><a href="#">Agenda demo</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Compañía</h5>
            <ul>
              <li><a href="#">Acerca de</a></li>
              <li><a href="#">Impacto social</a></li>
              <li><a href="#">Contacto</a></li>
              <li><a href="#">Prensa</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Legal</h5>
            <ul>
              <li><a href="#">Términos</a></li>
              <li><a href="#">Aviso de privacidad</a></li>
              <li><a href="#">Derechos ARCO</a></li>
              <li><a href="#">Seguridad</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-legal">
          <div>© 2026 Contarte · Hecho en México 🇲🇽</div>
          <div className="domiciles">info@contarte.mx · +52 664 331 2170 · Tijuana, B.C.</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, LogosStrip, Modules, Tour, Trust, FAQ, CTABanner, Footer });