// New strategic sections: Problema, BigIdea, Oferta, Bonos, Garantia

const Problema = () => {
  const items = [
    "Presupuestos olvidados",
    "WhatsApp desordenado",
    "Respuestas lentas",
    "Cero seguimiento",
    "Todo depende del dueño",
    "Oportunidades frías",
  ];
  return (
    <section className="section" style={{ background: 'var(--bg)', borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="reveal" style={{ marginBottom: 56, maxWidth: 720 }}>
          <span className="eyebrow">01 · El problema</span>
          <h2 className="h2" style={{ marginTop: 22 }}>
            Tu taller ya tiene consultas.<br/>
            <span style={{ fontStyle: 'italic', color: 'var(--fg-2)' }}>El problema es otro.</span>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
          {items.map((t, i) => (
            <div key={i} className="card reveal" style={{ animationDelay: `${i*60}ms`, transitionDelay: `${i*60}ms`, padding: 24, display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <span style={{ flexShrink: 0, width: 28, height: 28, borderRadius: '50%', border: '1px solid rgba(255,68,68,0.35)', background: 'rgba(255,68,68,0.08)', color: '#FF7070', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 500 }}>✕</span>
              <span style={{ fontSize: 15, color: 'var(--fg)', lineHeight: 1.45 }}>{t}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const BigIdea = () => (
  <section className="section" style={{ background: 'var(--bg-2)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)', textAlign: 'center', padding: '120px 0' }}>
    <div className="container" style={{ position: 'relative' }}>
      <div className="reveal" style={{ marginBottom: 32 }}>
        <span className="eyebrow">La idea central</span>
      </div>
      <h2 className="display reveal d1" style={{ fontSize: 'clamp(36px, 6vw, 80px)', lineHeight: 1.08, maxWidth: '18ch', margin: '0 auto', letterSpacing: '-0.02em' }}>
        No necesitás más <span style={{ fontStyle: 'italic', color: 'var(--fg-2)' }}>consultas.</span> Necesitás <span style={{ fontStyle: 'italic', color: 'var(--accent-2)' }}>convertir mejor</span> las que ya tenés.
      </h2>
      <p className="body reveal d2" style={{ marginTop: 36, maxWidth: 480, marginLeft: 'auto', marginRight: 'auto', fontStyle: 'italic', color: 'var(--fg-2)' }}>
        Buena producción, ventas desordenadas. Ahí se pierde plata.
      </p>
    </div>
  </section>
);

const Oferta = () => {
  const entregables = [
    { t: "Diagnóstico Comercial", d: "Auditoría del proceso actual." },
    { t: "CRM para Talleres",     d: "Clientes, consultas y presupuestos en un solo lugar." },
    { t: "Pipeline de Trabajos",  d: "Estado real de cada oportunidad." },
    { t: "Seguimiento Automático",d: "Recordatorios y reactivación automática." },
    { t: "Biblioteca de Respuestas", d: "Mensajes listos para cerrar más rápido." },
    { t: "Dashboard Comercial",   d: "Consultas, cierres y oportunidades perdidas." },
    { t: "Reactivación",          d: "Recuperamos presupuestos fríos." },
    { t: "Manual Operativo",      d: "Para que el equipo opere sin trabarse." },
  ];
  return (
    <section id="oferta" className="section" style={{ position: 'relative' }}>
      <div className="container">
        <div className="reveal" style={{ marginBottom: 64, maxWidth: 720 }}>
          <span className="eyebrow">05 · La implementación</span>
          <h2 className="h2" style={{ marginTop: 22 }}>
            Sistema Comercial™<br/>
            <span style={{ fontStyle: 'italic', color: 'var(--fg-2)' }}>llave en mano.</span>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 14 }}>
          {entregables.map((it, i) => (
            <div key={i} className="card reveal" style={{ animationDelay: `${i*50}ms`, transitionDelay: `${i*50}ms`, padding: 22 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.16em', color: 'var(--fg-3)' }}>0{i+1}</span>
                <span style={{ width: 22, height: 22, borderRadius: 6, background: 'rgba(91,217,166,0.15)', border: '1px solid rgba(91,217,166,0.3)', color: '#5BD9A6', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12 }}>✓</span>
              </div>
              <h3 style={{ fontFamily: 'var(--serif-display)', fontSize: 20, fontWeight: 500, lineHeight: 1.2, marginBottom: 8 }}>{it.t}</h3>
              <p style={{ fontSize: 13.5, color: 'var(--fg-2)', lineHeight: 1.5 }}>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Bonos = () => {
  const items = [
    "Pack de mensajes comerciales para talleres",
    "Auditoría de pérdida de oportunidades",
    "Plantilla de presupuestos con seguimiento",
    "Mini dashboard de control semanal",
    "Script de atención comercial",
  ];
  return (
    <section className="section" style={{ background: 'var(--bg-2)', borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div className="reveal" style={{ marginBottom: 48, textAlign: 'center', maxWidth: 720, marginLeft: 'auto', marginRight: 'auto' }}>
          <span className="eyebrow">06 · Bonos incluidos</span>
          <h2 className="h2" style={{ marginTop: 22 }}>
            Qué incluye la <br/>
            <span style={{ fontStyle: 'italic', color: 'var(--fg-2)' }}>implementación.</span>
          </h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0, maxWidth: 760, margin: '0 auto' }}>
          {items.map((t, i) => (
            <div key={i} className="reveal" style={{ animationDelay: `${i*80}ms`, transitionDelay: `${i*80}ms`, display: 'flex', alignItems: 'center', gap: 20, padding: '22px 0', borderBottom: '1px solid var(--border)' }}>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.16em', color: 'var(--accent-2)', minWidth: 40 }}>+0{i+1}</span>
              <span style={{ fontFamily: 'var(--serif-display)', fontStyle: 'italic', fontSize: 'clamp(18px, 2vw, 24px)', color: 'var(--fg)', flex: 1 }}>{t}</span>
              <span style={{ fontSize: 11, fontFamily: 'var(--mono)', letterSpacing: '0.14em', color: '#5BD9A6', textTransform: 'uppercase' }}>Incluido</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Garantia = () => (
  <section className="section" style={{ position: 'relative', textAlign: 'center', padding: '100px 0' }}>
    <div className="container" style={{ maxWidth: 760 }}>
      <div className="reveal" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '10px 18px', borderRadius: 999, border: '1px solid rgba(91,217,166,0.3)', background: 'rgba(91,217,166,0.06)', marginBottom: 28, fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.16em', color: '#5BD9A6', textTransform: 'uppercase' }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#5BD9A6' }} /> Garantía
      </div>
      <h2 className="h2 reveal d1" style={{ marginBottom: 20 }}>
        Garantía de <br/>
        <span style={{ fontStyle: 'italic', color: 'var(--fg-2)' }}>Implementación Funcional™</span>
      </h2>
      <p className="lead reveal d2" style={{ maxWidth: 520, marginLeft: 'auto', marginRight: 'auto' }}>
        Si el sistema no queda operativo, seguimos trabajando hasta dejarlo funcionando. Sin costo adicional.
      </p>
    </div>
  </section>
);

Object.assign(window, { Problema, BigIdea, Oferta, Bonos, Garantia });
