/* ===========================================================================
   Sentir · sentir.iahumana — landing (liquid glass sobre blanco)
   Usa componentes IA Humana DS + kit.jsx
   =========================================================================== */
const { Button, Badge, Card, BrandMark, Icon, NpsArc } = window;

/* ---------- small atoms ---------- */
function Eyebrow({ children, center }) {
  return <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', fontWeight: 500,
    letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--accent)',
    textAlign: center ? 'center' : 'left' }}>{children}</div>;
}
function Glass({ children, style, className = '', interactive }) {
  return <div className={'glass ' + (interactive ? 'glass-i ' : '') + className} style={style}>{children}</div>;
}

/* Brand isotype — DS olive by default; custom arcs/head when globals are set */
function Mark({ size = 28, style }) {
  const arcs = window.SENTIR_MARK_ARCS;
  const head = window.SENTIR_MARK_HEAD;
  if (!head && !arcs) return <BrandMark variant="duotone-olive" size={size} style={style} />;
  const body = window.SENTIR_MARK_BODY || '#0A0A0A';
  const stroke = arcs && arcs.length === 4 ? arcs : [body, body, body, body];
  const hc = head || stroke[3];
  const h = size * 322 / 332;
  const paths = ['M 33 322 A 147 147 0 0 1 327 322', 'M 70 322 A 110 110 0 0 1 290 322', 'M 107 322 A 73 73 0 0 1 253 322', 'M 144 322 A 36 36 0 0 1 216 322'];
  return (
    <svg width={size} height={h} viewBox="14 20 332 322" fill="none" style={style} role="img" aria-label="IA Humana">
      <g fill="none" strokeWidth="19" strokeLinecap="butt">
        {paths.map((d, i) => <path key={i} d={d} stroke={stroke[i]} />)}
      </g>
      <g fill="none" stroke={hc} strokeWidth="19">
        <circle cx="252" cy="95" r="56.5" />
        <circle cx="252" cy="95" r="24" />
      </g>
      <circle cx="252" cy="95" r="9" fill={hc} />
    </svg>
  );
}

/* ===================== HEADER ===================== */
function Header() {
  return (
    <header className="site-head">
      <div className="head-inner">
        <a href="#top" className="brand">
          <Mark size={28} />
          <span className="brand-word">sentir<span style={{ color: 'var(--text-3)' }}>.iahumana</span></span>
        </a>
        <nav className="head-nav">
          <a href="#tipos">Qué escucha</a>
          <a href="#ia">IA</a>
          <a href="#precios">Precios</a>
        </nav>
        <div className="head-cta">
          <a href="#" className="link-quiet">Ingresar</a>
          <Button variant="primary" size="sm">Probar gratis</Button>
        </div>
      </div>
    </header>
  );
}

/* ===================== HERO ===================== */
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-grid">
        <div className="hero-copy">
          <Badge tone="accent" dot style={{ whiteSpace: 'nowrap' }}>Por IA Humana</Badge>
          <h1 className="hero-h1">Lo que tus clientes <span className="accent-word">sienten</span>, en una sola plataforma.</h1>
          <p className="hero-sub">NPS, opiniones y quejas — capturados en cada punto de contacto, leídos por IA y convertidos en acción. Medición y seguimiento 360, para todas tus empresas.</p>
          <div className="hero-actions">
            <Button variant="primary" size="lg" iconRight={<Icon name="arrowRight" size={17} color="var(--text-on-accent)" />}>Probar gratis 14 días</Button>
            <Button variant="secondary" size="lg">Ver una demo</Button>
          </div>
          <div className="hero-meta">
            <span><Icon name="check" size={14} color="var(--accent)" /> Sin tarjeta</span>
            <span><Icon name="check" size={14} color="var(--accent)" /> Listo en minutos</span>
            <span><Icon name="check" size={14} color="var(--accent)" /> Multiempresa</span>
          </div>
        </div>

        {/* floating glass product peek */}
        <div className="hero-peek">
          <Glass className="peek">
            <div className="peek-head">
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <Mark size={18} />
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14 }}>Resumen · Mercurio Retail</span>
              </span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', color: 'var(--text-3)', textTransform: 'uppercase' }}>Hoy</span>
            </div>
            <div className="peek-body">
              <div className="peek-arc">
                <NpsArc value={52} size={168} />
                <div className="peek-bands">
                  {[['var(--success)', 'Promotores', '61%'], ['var(--warning)', 'Pasivos', '30%'], ['var(--danger)', 'Detractores', '9%']].map(([c, l, n]) => (
                    <span key={l}><i style={{ background: c }} />{l}<em>{n}</em></span>
                  ))}
                </div>
              </div>
              <div className="peek-cards">
                <div className="peek-mini">
                  <span className="pm-k">Opiniones</span>
                  <span className="pm-v">4,3<small>/5</small></span>
                  <span className="pm-d up"><Icon name="trendingUp" size={12} /> +0,2</span>
                </div>
                <div className="peek-mini">
                  <span className="pm-k">Quejas abiertas</span>
                  <span className="pm-v">3</span>
                  <span className="pm-d"><Icon name="clock" size={12} /> 2 en plazo</span>
                </div>
                <div className="peek-insight">
                  <Icon name="sparkles" size={14} color="var(--accent)" />
                  <span><strong>IA:</strong> «Tiempos de espera» sube en Sucursales esta semana.</span>
                </div>
              </div>
            </div>
          </Glass>
          <div className="orb orb-a" />
          <div className="orb orb-b" />
        </div>
      </div>
    </section>
  );
}

/* ===================== STAT BAND ===================== */
function Stats() {
  const items = [
    { v: '67%', l: 'de los clientes molestos no se quejan: solo se van.' },
    { v: '5×', l: 'más caro captar un cliente que retener al que ya tienes.' },
    { v: '< 48 h', l: 'para cerrar el ciclo con un detractor y recuperarlo.' },
  ];
  return (
    <section className="stats-wrap">
      <Glass className="stats">
        {items.map((it, i) => (
          <div key={i} className="stat-cell">
            <span className="stat-v">{it.v}</span>
            <span className="stat-l">{it.l}</span>
          </div>
        ))}
      </Glass>
    </section>
  );
}

/* ===================== TIPOS ===================== */
function Tipos() {
  const cards = [
    { ic: 'gauge', t: 'NPS 360', d: 'Recomendación 0–10 transaccional y relacional, en cada punto de contacto: QR, tablet, email, WhatsApp o widget web.', tag: 'Transaccional + relacional' },
    { ic: 'messageCircle', t: 'Opiniones', d: 'Satisfacción y comentarios abiertos, sin fricción. Una pregunta, un toque — y la voz real de tu cliente.', tag: 'CSAT + texto libre' },
    { ic: 'flag', t: 'Quejas', d: 'Reclamos formales que abren un caso, se asignan a un responsable y no se pierden. Trazabilidad de punta a punta.', tag: 'Caso + SLA' },
  ];
  return (
    <section className="section" id="tipos">
      <div className="section-head center">
        <Eyebrow center>// Una plataforma, tres formas de escuchar</Eyebrow>
        <h2 className="section-h2">No solo mides. Entiendes y resuelves.</h2>
        <p className="section-lead">Sentir reúne las tres señales que importan en un mismo lugar — y las conecta con quien puede actuar.</p>
      </div>
      <div className="tipos-grid">
        {cards.map((c, i) => (
          <Glass key={i} interactive className="tipo-card">
            <div className="tipo-ic"><Icon name={c.ic} size={22} color="var(--accent)" /></div>
            <h3 className="tipo-t">{c.t}</h3>
            <p className="tipo-d">{c.d}</p>
            <span className="tipo-tag">{c.tag}</span>
          </Glass>
        ))}
      </div>
    </section>
  );
}

/* ===================== IA ===================== */
function IA() {
  const rows = [
    { ic: 'sparkles', t: 'Lee y clasifica', d: 'Cada comentario etiquetado por tema y sentimiento, automáticamente.' },
    { ic: 'alertTriangle', t: 'Prioriza', d: 'Detecta palabras críticas («negligencia», «cobro duplicado») y eleva la urgencia.' },
    { ic: 'fileText', t: 'Resume', d: '«¿Qué dicen tus clientes esta semana?» — un resumen claro, listo para tu comité.' },
  ];
  return (
    <section className="section ia-sec" id="ia">
      <div className="ia-grid">
        <div className="ia-copy">
          <Eyebrow>// IA que se usa de verdad</Eyebrow>
          <h2 className="section-h2">Sentir lee cada comentario por ti.</h2>
          <p className="section-lead">No más planillas con miles de respuestas sin leer. La IA de Sentir convierte texto suelto en temas, prioridades y decisiones — y deja el criterio final en manos de tu equipo.</p>
          <div className="ia-rows">
            {rows.map((r, i) => (
              <div key={i} className="ia-row">
                <div className="ia-row-ic"><Icon name={r.ic} size={18} color="var(--accent)" /></div>
                <div>
                  <div className="ia-row-t">{r.t}</div>
                  <div className="ia-row-d">{r.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <Glass className="ia-panel">
          <div className="iap-head"><Icon name="sparkles" size={15} color="var(--accent)" /> Insight de la semana</div>
          <p className="iap-quote">El <strong>18%</strong> de los comentarios negativos en Sucursales mencionan <strong>tiempos de espera</strong> — concentrados los sábados por la tarde.</p>
          <div className="iap-themes">
            {[['Tiempos de espera', 38, 'neg'], ['Trato del personal', 22, 'pos'], ['App / web', 15, 'pos'], ['Precio / valor', 12, 'neg']].map(([t, n, s], i) => (
              <div key={i} className="iap-theme">
                <span className="iapt-t">{t}</span>
                <span className="iapt-bar"><i style={{ width: n * 2 + '%', background: s === 'neg' ? 'var(--danger)' : 'var(--success)' }} /></span>
                <span className="iapt-n">{n}</span>
              </div>
            ))}
          </div>
          <div className="iap-foot"><Icon name="shieldCheck" size={13} color="var(--text-3)" /> Tus datos no se comparten con terceros.</div>
        </Glass>
      </div>
    </section>
  );
}

/* ===================== MULTIEMPRESA ===================== */
function Multi() {
  return (
    <section className="section">
      <Glass className="multi">
        <div className="multi-copy">
          <Eyebrow>// Pensado como SaaS</Eyebrow>
          <h2 className="section-h2" style={{ maxWidth: '16ch' }}>Todas tus marcas, un solo tablero.</h2>
          <p className="section-lead" style={{ marginBottom: 0 }}>Registra varias empresas, dales su propia marca y equipos, y sigue el NPS 360 de cada una — o de todas juntas. Tu equipo queda independiente, no dependiente del proveedor.</p>
        </div>
        <div className="multi-logos">
          {[['M', 'Mercurio Retail'], ['V', 'Clínica Vida'], ['A', 'Banca Andina'], ['E', 'Envíalo']].map(([i, n], k) => (
            <div key={k} className="multi-pill"><span className="mp-ic">{i}</span>{n}</div>
          ))}
        </div>
      </Glass>
    </section>
  );
}

/* ===================== PRECIOS ===================== */
function Precios() {
  const plans = [
    { n: 'Despegue', p: 'USD 99', per: '/mes', d: '1 empresa · hasta 3 áreas', feats: ['NPS + opiniones', '2.000 respuestas/mes', 'QR, tablet y email', 'Dashboard en tiempo real'], cta: 'Empezar', variant: 'outline' },
    { n: 'Escala', p: 'USD 300', per: '/mes', d: 'Áreas y equipos ilimitados', feats: ['NPS + opiniones + quejas', '15.000 respuestas/mes', 'IA de temas y sentimiento', 'Close the Loop + WhatsApp'], cta: 'Probar gratis', variant: 'primary', featured: true },
  ];
  return (
    <section className="section" id="precios">
      <div className="section-head center">
        <Eyebrow center>// Precios públicos</Eyebrow>
        <h2 className="section-h2">Claros. Sin costos ocultos.</h2>
        <p className="section-lead">Como toda IA Humana: el precio se ve desde el primer día. Empieza en USD 99 y crece con tu operación.</p>
      </div>
      <div className="precios-2">
        {plans.map((pl, i) => (
          <Glass key={i} className={'precio ' + (pl.featured ? 'precio-feat' : '')}>
            {pl.featured && <span className="precio-flag">Más elegido</span>}
            <div className="precio-n">{pl.n}</div>
            <div className="precio-p">{pl.p}<small>{pl.per}</small></div>
            <div className="precio-d">{pl.d}</div>
            <ul className="precio-feats">
              {pl.feats.map((f, k) => <li key={k}><Icon name="check" size={15} color="var(--accent)" />{f}</li>)}
            </ul>
            <Button variant={pl.variant} fullWidth>{pl.cta}</Button>
          </Glass>
        ))}
      </div>
      <Calculadora />
    </section>
  );
}

/* ===================== CALCULADORA ===================== */
function Calculadora() {
  const [resp, setResp] = React.useState(8000);
  const [emp, setEmp] = React.useState(1);
  const fmt = (n) => n.toLocaleString('es-ES');

  // plan base por volumen + extras por empresa y por exceso de respuestas
  let base, plan;
  if (resp <= 2000 && emp === 1) { base = 99; plan = 'Despegue'; }
  else if (resp <= 15000) { base = 300; plan = 'Escala'; }
  else { base = 300 + Math.ceil((resp - 15000) / 5000) * 75; plan = 'Escala +'; }
  const extraEmp = Math.max(0, emp - 1) * 120;
  const total = base + extraEmp;

  return (
    <Glass className="calc">
      <div className="calc-controls">
        <Eyebrow>// Calcula tu plan</Eyebrow>
        <h3 className="calc-h">Paga por lo que realmente escuchas.</h3>
        <div className="calc-field">
          <div className="calc-label"><span>Respuestas al mes</span><strong>{fmt(resp)}</strong></div>
          <input className="calc-slider" type="range" min="1000" max="50000" step="1000"
            value={resp} onChange={(e) => setResp(+e.target.value)}
            style={{ '--fill': ((resp - 1000) / 49000 * 100) + '%' }} />
          <div className="calc-scale"><span>1.000</span><span>50.000</span></div>
        </div>
        <div className="calc-field">
          <div className="calc-label"><span>Empresas / marcas</span><strong>{emp}</strong></div>
          <div className="calc-stepper">
            <button onClick={() => setEmp(Math.max(1, emp - 1))} aria-label="menos"><Icon name="x" size={14} style={{ transform: 'rotate(45deg)' }} /></button>
            <div className="calc-emp">{[...Array(8)].map((_, i) => <i key={i} className={i < emp ? 'on' : ''} />)}</div>
            <button onClick={() => setEmp(Math.min(8, emp + 1))} aria-label="más"><Icon name="plus" size={14} /></button>
          </div>
        </div>
      </div>
      <div className="calc-result">
        <span className="calc-r-k">Estimado</span>
        <div className="calc-r-p">USD {fmt(total)}<small>/mes</small></div>
        <span className="calc-r-plan"><Icon name="zap" size={13} color="var(--accent)" /> Plan {plan}</span>
        <div className="calc-r-break">
          <div><span>Base {plan}</span><span>USD {fmt(base)}</span></div>
          {extraEmp > 0 && <div><span>+{emp - 1} empresa{emp - 1 > 1 ? 's' : ''}</span><span>USD {fmt(extraEmp)}</span></div>}
        </div>
        <Button variant="primary" fullWidth iconRight={<Icon name="arrowRight" size={16} color="var(--text-on-accent)" />}>Empezar con {plan}</Button>
        <span className="calc-note">Sin permanencia · cancela cuando quieras</span>
      </div>
    </Glass>
  );
}

/* ===================== CTA + FOOTER ===================== */
function CTA() {
  return (
    <section className="section">
      <Glass className="cta">
        <div className="orb orb-c" />
        <h2 className="cta-h">Empieza a escuchar lo que de verdad importa.</h2>
        <p className="cta-sub">Configura tu primera empresa y lanza una encuesta en minutos.</p>
        <div className="cta-actions">
          <Button variant="primary" size="lg" iconRight={<Icon name="arrowRight" size={17} color="var(--text-on-accent)" />}>Probar gratis 14 días</Button>
          <Button variant="ghost" size="lg">Ver una demo</Button>
        </div>
      </Glass>
    </section>
  );
}
function Footer() {
  return (
    <footer className="site-foot">
      <div className="foot-inner">
        <div className="foot-brand">
          <Mark size={24} />
          <span className="brand-word">sentir<span style={{ color: 'var(--text-3)' }}>.iahumana</span></span>
        </div>
        <div className="foot-links">
          <a href="#tipos">Qué escucha</a><a href="#ia">IA</a><a href="#precios">Precios</a><a href="#">Ingresar</a>
        </div>
        <div className="foot-legal">Hecho con criterio humano · IA Humana © 2026</div>
      </div>
    </footer>
  );
}

function Landing() {
  return (
    <div className="page-bg">
      <div className="bg-orbs"><div className="bo bo-1" /><div className="bo bo-2" /><div className="bo bo-3" /></div>
      <Header />
      <main>
        <Hero />
        <Stats />
        <Tipos />
        <IA />
        <Multi />
        <Precios />
        <CTA />
      </main>
      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Landing />);