/* global React, Icon, Button, Eyebrow, Badge, Droplets, Container, Reveal, useWindowWidth */

const CA = {
  coral:  '#E14F3D',
  warm:   '#FF9270',
  deep:   '#8A2A1E',
  bg:     'var(--sub-closer-bg)',
  surface:'#FEF6F4',
};

// ============================================================
// HERO
// ============================================================
function CaHero({ onCta }) {
  const w = useWindowWidth();
  const stack = w < 900;
  return (
    <section id="top" style={{
      position: 'relative', overflow: 'hidden',
      background: `radial-gradient(85% 65% at 50% 0%, ${CA.bg} 0%, var(--ink-0) 70%)`,
    }}>
      <Droplets style={{ right: -60, top: 60 }} color={CA.warm} opacity={0.22} size={260} />
      <Droplets style={{ left: -100, bottom: -60 }} color={CA.coral} opacity={0.1} size={300} />

      <Container style={{ padding: '72px 32px 96px', position: 'relative' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontFamily: 'var(--font-mono)', fontSize: 11.5,
          color: 'var(--fg3)', letterSpacing: '0.02em',
          marginBottom: 26,
        }}>
          <a href="/" style={{ color: 'var(--fg3)' }}>frsko.com</a>
          <span style={{ opacity: 0.5 }}>/</span>
          <a href="/ia" style={{ color: 'var(--fg3)' }}>ia</a>
          <span style={{ opacity: 0.5 }}>/</span>
          <span style={{ color: CA.coral, fontWeight: 600 }}>closer-ai</span>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: stack ? '1fr' : '1.05fr 1fr', gap: stack ? 40 : 56,
          alignItems: 'start',
        }}>
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '5px 12px', borderRadius: 999,
              background: '#fff', border: `1px solid ${CA.coral}`,
              fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
              textTransform: 'uppercase', color: CA.coral,
              marginBottom: 22,
            }}>
              <Icon name="message" size={12} />
              Closer AI · Agente de ventas por WhatsApp
            </div>

            <h1 style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 'clamp(32px, 4.1vw, 56px)',
              lineHeight: 1.06, letterSpacing: '-0.032em',
              margin: '0 0 24px', color: 'var(--fg1)',
            }}>
              Mientras tú duermes,<br/>
              <span style={{ color: CA.coral, fontStyle: 'italic' }}>tus leads se enfrían.</span> Closer AI no.
            </h1>

            <p style={{
              fontSize: 'clamp(17px, 1.4vw, 20px)', lineHeight: 1.55,
              color: 'var(--fg2)', maxWidth: 580, margin: '0 0 32px',
            }}>
              Closer AI da el primer seguimiento a tus leads por WhatsApp, vengan de donde vengan: pauta digital, SEO, Lead Engine AI o cualquier otro canal. Califica, resuelve objeciones y agenda la cita en menos de 8 segundos, las 24 horas del día.
            </p>

            <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', marginBottom: 32 }}>
              <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
                Agenda tu diagnóstico 360°
              </Button>
              <Button variant="ghost" size="lg" icon="arrow-down-right" onClick={() => {
                document.getElementById('como-funciona')?.scrollIntoView({ behavior: 'smooth' });
              }}>
                Ver cómo funciona
              </Button>
            </div>

            <div style={{ display: 'flex', alignItems: 'center', gap: 18, color: 'var(--fg3)', fontSize: 13.5, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="check" size={14} stroke={2} style={{ color: CA.coral }} /> Respuesta &lt;8s, 24/7
              </div>
              <div style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--ink-300)' }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="check" size={14} stroke={2} style={{ color: CA.coral }} /> Implementación en 21 días
              </div>
              <div style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--ink-300)' }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="check" size={14} stroke={2} style={{ color: CA.coral }} /> Conecta con cualquier CRM
              </div>
            </div>
          </div>

          <ChatPreview />
        </div>
      </Container>
    </section>
  );
}

function ChatPreview() {
  const [step, setStep] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setStep(s => (s + 1) % 4), 2200);
    return () => clearInterval(t);
  }, []);

  const bubbles = [
    { from: 'lead', text: 'Hola, ¿me dan informes?', time: '11:42 PM' },
    { from: 'ai',   text: '¡Hola! Claro que sí. Antes de mandarte info, ¿me cuentas qué te gustaría resolver y con qué presupuesto estás trabajando?', time: '11:42 PM', tag: 'Respondido en 6s' },
    { from: 'lead', text: 'La verdad está un poco caro para nosotros ahora mismo…', time: '11:44 PM' },
    { from: 'ai',   text: 'Entiendo. Muchos clientes empezaron con la misma duda, y esto se paga solo en el primer mes. ¿Tienes 20 min mañana a las 10am?', time: '11:44 PM', tag: 'Objeción resuelta' },
  ];
  const visible = bubbles.slice(0, step + 1);

  return (
    <div style={{
      background: '#fff',
      border: '1px solid var(--border)',
      borderRadius: 24,
      boxShadow: 'var(--shadow-lg)',
      overflow: 'hidden',
      position: 'relative',
    }}>
      <div style={{
        padding: '14px 18px',
        background: CA.deep,
        color: '#fff',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{
          width: 32, height: 32, borderRadius: 999,
          background: 'rgba(255,255,255,0.15)',
          display: 'grid', placeItems: 'center',
        }}>
          <Icon name="message" size={16} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13.5, fontWeight: 600 }}>Closer AI</div>
          <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.7)' }}>en línea · agente de ventas</div>
        </div>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 5,
          fontSize: 10, fontWeight: 700, letterSpacing: '0.06em',
          textTransform: 'uppercase', padding: '3px 8px', borderRadius: 999,
          background: 'rgba(255,255,255,0.15)',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: '#82E5C5' }} />
          Muestra
        </span>
      </div>

      <div style={{ padding: '18px 16px', background: 'var(--ink-25)', minHeight: 300, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {visible.map((b, i) => (
          <div key={i} style={{
            alignSelf: b.from === 'lead' ? 'flex-start' : 'flex-end',
            maxWidth: '84%',
            animation: 'caIn 320ms var(--ease-out) both',
          }}>
            {b.tag && (
              <div style={{
                fontSize: 10, fontWeight: 700, letterSpacing: '0.06em',
                textTransform: 'uppercase', color: CA.coral,
                marginBottom: 4, textAlign: 'right',
              }}>{b.tag}</div>
            )}
            <div style={{
              padding: '10px 14px',
              borderRadius: b.from === 'lead' ? '14px 14px 14px 4px' : '14px 14px 4px 14px',
              background: b.from === 'lead' ? '#fff' : CA.coral,
              color: b.from === 'lead' ? 'var(--fg1)' : '#fff',
              border: b.from === 'lead' ? '1px solid var(--border)' : 'none',
              fontSize: 13.5, lineHeight: 1.45,
            }}>{b.text}</div>
            <div style={{
              fontSize: 10, color: 'var(--fg3)', marginTop: 3,
              textAlign: b.from === 'lead' ? 'left' : 'right',
            }}>{b.time}</div>
          </div>
        ))}
        {step >= 3 && (
          <div style={{
            alignSelf: 'center', marginTop: 6,
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '6px 14px', borderRadius: 999,
            background: CA.bg, color: CA.deep,
            fontSize: 11.5, fontWeight: 700,
            animation: 'caIn 320ms var(--ease-out) both',
          }}>
            <Icon name="check" size={13} /> Cita agendada para mañana 10am
          </div>
        )}
      </div>

      <div style={{
        padding: '12px 18px',
        background: '#fff',
        borderTop: '1px solid var(--border)',
        fontSize: 12, color: 'var(--fg3)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <Icon name="sparkles" size={13} style={{ color: CA.coral }} />
          Fase {['P', 'P', 'T', 'T'][step]} de la secuencia P-T-N
        </span>
        <span style={{ fontWeight: 600, color: CA.coral }}>11:42 PM, un martes</span>
      </div>
    </div>
  );
}

// ============================================================
// PROBLEM
// ============================================================
function CaProblem() {
  const w = useWindowWidth();
  const stack = w < 860;
  return (
    <section style={{ background: '#fff', borderTop: '1px solid var(--border)' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div style={{ maxWidth: 1080, margin: '0 auto' }}>
          <Eyebrow color={CA.coral}>El problema</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(30px, 4vw, 56px)',
            lineHeight: 1.05, letterSpacing: '-0.035em',
            margin: '18px 0 40px', color: 'var(--fg1)',
            maxWidth: 980,
          }}>
            Tu canal más rentable se está convirtiendo en <span style={{ color: CA.coral, fontStyle: 'italic' }}>tu mayor gasto operativo.</span>
          </h2>

          <div style={{ display: 'grid', gridTemplateColumns: stack ? '1fr' : '1.1fr 1fr', gap: 48, alignItems: 'start' }}>
            <div>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--fg2)', margin: '0 0 18px' }}>
                Inviertes en pauta, en SEO, en un equipo comercial que cierra bien. Generas leads. Pero tienes una fuga silenciosa: los pierdes a las 10:00 PM cuando un cliente pregunta y nadie responde, o el domingo por la tarde cuando un prospecto calificado está listo para pagar.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--fg2)', margin: '0 0 18px' }}>
                Cada "Hola, ¿me dan informes?" sin respuesta en los primeros 5 minutos es un lead que se va con la competencia.
              </p>
              <p style={{
                fontSize: 22, lineHeight: 1.3, color: CA.coral,
                fontWeight: 700, fontStyle: 'italic',
                margin: 0, fontFamily: 'var(--font-heading)',
                letterSpacing: '-0.02em',
              }}>
                Es un problema de M2I: Message to Invoice.
              </p>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <ResponseRow label="10:00 PM · pregunta un cliente" value="Sin respuesta hasta el día siguiente" active={false} />
              <ResponseRow label="Domingo · lead listo para pagar" value="Nadie contesta hasta el lunes" active={false} />
              <ResponseRow label="Cualquier hora, con Closer AI" value="Respuesta en menos de 8 segundos" active={true} />
              <div style={{
                marginTop: 8, padding: '14px 16px',
                background: CA.bg, borderRadius: 14,
                borderLeft: `3px solid ${CA.coral}`,
                fontSize: 13.5, lineHeight: 1.5, color: CA.deep,
              }}>
                El tiempo que pasa entre el primer mensaje de un prospecto y la factura que genera es lo que decide si compite contigo o con la competencia.
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

function ResponseRow({ label, value, active }) {
  return (
    <div style={{
      padding: '14px 18px',
      border: active ? `1px solid ${CA.coral}` : '1px solid var(--border)',
      background: active ? CA.bg : '#fff',
      borderRadius: 14,
      display: 'flex', flexDirection: 'column', gap: 4,
    }}>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 11,
        fontWeight: 600, color: active ? CA.coral : 'var(--fg3)',
        letterSpacing: '0.02em',
      }}>{label}</div>
      <div style={{
        fontSize: 14.5, fontWeight: 600,
        color: active ? CA.deep : 'var(--fg1)',
      }}>{value}</div>
    </div>
  );
}

// ============================================================
// EL ERROR COMÚN — bot vs Ingeniería Conversacional
// ============================================================
function CaMistake() {
  const w = useWindowWidth();
  const stack = w < 860;
  const bot = [
    'Menú de "Presiona 1 para ventas, 2 para soporte"',
    'No califica, solo redirige',
    'Se detiene ante la primera objeción',
    'Nadie agenda nada',
  ];
  const engineered = [
    'Preguntas de dolor y presupuesto en los primeros 40 segundos',
    'Playbook de objeciones reales de tu equipo',
    'Reencuadra y agenda en el momento de mayor intención',
    'Vive dentro de tu propio CRM: Soberanía de Datos',
  ];

  return (
    <section style={{ background: 'var(--ink-25)', position: 'relative', overflow: 'hidden' }}>
      <Droplets style={{ right: -120, top: 60 }} color={CA.warm} opacity={0.16} size={280} />
      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <Eyebrow color={CA.coral}>El error común</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(30px, 3.6vw, 48px)',
            lineHeight: 1.05, letterSpacing: '-0.03em',
            margin: '14px 0 18px', color: 'var(--fg1)',
          }}>
            Automatizar sin ingeniería no resuelve nada.<br/>
            <span style={{ color: CA.coral, fontStyle: 'italic' }}>Solo cambia dónde se pierde el lead.</span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: 0 }}>
            En ventas de alto valor, un bot que solo "atiende" no es suficiente. Lo que resuelve esto es Ingeniería Conversacional: implementamos el Meta Business Agent bajo una arquitectura de ventas real, no un menú genérico.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: stack ? '1fr' : '1fr 1fr', gap: 24, alignItems: 'stretch' }}>
          <CompareCard
            tag="LO QUE INSTALA TODO EL MUNDO"
            title="Chatbot convencional"
            subtitle="Atiende. No vende."
            items={bot}
            dark={false}
          />
          <CompareCard
            tag="LO QUE HACE CLOSER AI"
            title="Ingeniería Conversacional"
            subtitle="Califica, objeta y cierra."
            items={engineered}
            dark={true}
          />
        </div>
      </Container>
    </section>
  );
}

function CompareCard({ tag, title, subtitle, items, dark }) {
  return (
    <div style={{
      background: dark ? `linear-gradient(180deg, ${CA.coral} 0%, ${CA.deep} 100%)` : '#fff',
      color: dark ? '#fff' : 'var(--fg1)',
      border: dark ? `1px solid ${CA.coral}` : '1px solid var(--border)',
      borderRadius: 28,
      padding: '36px 36px',
      position: 'relative', overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
    }}>
      {dark && <Droplets style={{ right: -60, top: -40 }} color={CA.warm} opacity={0.3} size={200} />}
      <div style={{ position: 'relative' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', color: dark ? '#FFE0D6' : CA.coral, marginBottom: 18 }}>{tag}</div>
        <h3 style={{
          fontFamily: 'var(--font-heading)', fontWeight: 700,
          fontSize: 'clamp(22px, 2.4vw, 28px)', letterSpacing: '-0.02em',
          margin: '0 0 8px', color: dark ? '#fff' : 'var(--fg1)', lineHeight: 1.1,
        }}>{title}</h3>
        <p style={{ fontSize: 14.5, lineHeight: 1.5, color: dark ? '#FFE0D6' : CA.coral, fontStyle: 'italic', margin: '0 0 24px' }}>{subtitle}</p>

        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
          {items.map((it, i) => (
            <li key={i} style={{
              display: 'flex', gap: 12, alignItems: 'flex-start',
              paddingBottom: 14,
              borderBottom: i < items.length - 1 ? (dark ? '1px solid rgba(255,255,255,0.18)' : '1px solid var(--border)') : 'none',
            }}>
              <Icon name={dark ? 'check' : 'arrow-right'} size={15} stroke={2.2}
                style={{ color: dark ? '#fff' : 'var(--ink-400)', transform: dark ? '' : 'rotate(45deg)', marginTop: 2, flexShrink: 0 }} />
              <span style={{ fontSize: 14.5, lineHeight: 1.5, color: dark ? 'rgba(255,255,255,0.92)' : 'var(--fg2)' }}>{it}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

// ============================================================
// CÓMO FUNCIONA — Secuencia P-T-N
// ============================================================
function CaHowItWorks() {
  const w = useWindowWidth();
  const stack = w < 760;
  const steps = [
    {
      n: '01', letter: 'P',
      title: 'Profiling y Propósito',
      tag: '40 segundos',
      body: 'El agente no pregunta "¿en qué te ayudo?". Califica con preguntas de dolor y presupuesto, identificando quién es un lead real y quién es un curioso.',
      ui: <MiniQualify />,
    },
    {
      n: '02', letter: 'T',
      title: 'Tracción y Objeciones',
      tag: 'Playbook real',
      body: 'Cargamos el playbook de objeciones reales de tu equipo. "Está caro" o "lo tengo que pensar" ya no detienen la conversación.',
      ui: <MiniObjection />,
    },
    {
      n: '03', letter: 'N',
      title: 'Nurturing y Conversión',
      tag: 'Seguimiento vivo',
      body: 'El lead que no agendó hoy no se olvida. Una secuencia de seguimiento contextual convierte el silencio en una nueva oportunidad de cierre.',
      ui: <MiniFollowup />,
    },
  ];

  return (
    <section id="como-funciona" style={{ background: '#fff' }}>
      <Container style={{ padding: 'clamp(52px, 7vw, 84px) 32px' }}>
        <Reveal>
          <div style={{ maxWidth: 760, marginBottom: 48 }}>
            <Eyebrow color={CA.coral}>Cómo funciona</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 'clamp(30px, 3.6vw, 48px)',
              lineHeight: 1.05, letterSpacing: '-0.03em',
              margin: '14px 0 0', color: 'var(--fg1)',
            }}>
              Tres fases, de "Hola" a cita agendada.
            </h2>
          </div>
        </Reveal>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {steps.map((step, i) => (
            <Reveal key={step.n} delay={i + 1}>
              <article style={{
                display: 'grid',
                gridTemplateColumns: stack ? '64px 1fr' : '80px 1fr 260px',
                gap: stack ? 18 : 28,
                alignItems: stack ? 'flex-start' : 'center',
                padding: stack ? '22px 20px' : '28px 30px',
                border: '1px solid var(--border)', borderRadius: 24,
                background: 'var(--ink-25)',
              }}>
                <div style={{ textAlign: 'center' }}>
                  <div style={{
                    width: stack ? 48 : 56, height: stack ? 48 : 56, borderRadius: 16, margin: '0 auto 8px',
                    background: CA.coral, color: '#fff',
                    display: 'grid', placeItems: 'center',
                    fontFamily: 'var(--font-heading)', fontWeight: 800, fontSize: stack ? 20 : 24,
                  }}>{step.letter}</div>
                  {!stack && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--fg3)' }}>Fase {step.n}</span>}
                </div>
                <div>
                  <div style={{
                    fontFamily: 'var(--font-mono)', fontSize: 11, color: CA.coral,
                    letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6,
                  }}>{step.tag}</div>
                  <h3 style={{
                    fontFamily: 'var(--font-heading)', fontWeight: 700,
                    fontSize: 22, letterSpacing: '-0.015em',
                    margin: '0 0 8px', color: 'var(--fg1)',
                  }}>{step.title}</h3>
                  <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--fg2)', margin: 0, maxWidth: 480 }}>{step.body}</p>
                </div>
                <div style={stack ? { gridColumn: '1 / -1', marginTop: 4 } : {}}>{step.ui}</div>
              </article>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

function MiniQualify() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      {['Dolor identificado', 'Presupuesto validado', 'Urgencia confirmada'].map(t => (
        <div key={t} style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '7px 12px', borderRadius: 10,
          background: '#fff', border: '1px solid var(--border)',
          fontSize: 12.5, color: 'var(--fg1)',
        }}>
          <Icon name="check" size={13} style={{ color: CA.coral }} /> {t}
        </div>
      ))}
    </div>
  );
}

function MiniObjection() {
  return (
    <div style={{ background: '#fff', border: '1px solid var(--border)', borderRadius: 14, padding: '12px 14px' }}>
      <div style={{ fontSize: 12, color: 'var(--fg3)', marginBottom: 6 }}>"Está caro"</div>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 6,
        fontSize: 12.5, color: CA.deep, fontWeight: 600,
      }}>
        <Icon name="arrow-right" size={13} style={{ color: CA.coral }} />
        Reencuadre + agenda de cita
      </div>
    </div>
  );
}

function MiniFollowup() {
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      {['Día 0', 'Día 2', 'Día 5'].map((d, i) => (
        <div key={d} style={{
          flex: 1, textAlign: 'center', padding: '10px 6px',
          borderRadius: 10, background: i === 0 ? CA.coral : '#fff',
          color: i === 0 ? '#fff' : 'var(--fg2)',
          border: i === 0 ? 'none' : '1px solid var(--border)',
          fontSize: 11.5, fontWeight: 600,
        }}>{d}</div>
      ))}
    </div>
  );
}

Object.assign(window, { CaHero, CaProblem, CaMistake, CaHowItWorks });