const HERO_SCRIPT = [
  { side: "in", text: "Hola 👋 ¿Tienen turnos disponibles para corte esta semana?", time: "14:22", delay: 200 },
  { side: "out", text: "¡Hola! Soy el asistente de Salón Oliva. Sí, tengo disponibilidad. ¿Preferís mañana a las 11 o el jueves a las 16?", time: "14:22", check: true, typingBefore: 1400 },
  { side: "in", text: "Jueves a las 16 me viene bárbaro", time: "14:23", delay: 1200 },
  { side: "out", text: "Listo, reservado a nombre de Cami ✂️. Te mando recordatorio el mismo día. ¿Querés que te anote también retoque de color?", time: "14:23", check: true, typingBefore: 1600 },
  { side: "in", text: "Sí, dale!", time: "14:24", delay: 1400 },
];

const HERO_VARIANTS = {
  criterio: {
    pre: "Tu negocio,",
    strike: "revolucionado",
    main: "automatizado",
    italic: "con criterio",
  },
  uno_x_uno: {
    pre: "Agentes de IA",
    strike: "genéricos",
    main: "diseñados",
    italic: "uno por uno",
  },
  medida: {
    pre: "IA hecha",
    strike: "en serie",
    main: "a medida",
    italic: "para pymes de LATAM",
  },
};

function Hero({ variant = "criterio", onWhatsApp }) {
  const v = HERO_VARIANTS[variant] || HERO_VARIANTS.criterio;
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <span className="eyebrow">Estudio boutique · Argentina / LATAM</span>
            <h1>
              {v.pre}<br />
              <span className="strike">{v.strike}</span> {v.main}<br />
              <span className="accent-word">{v.italic}</span>.
            </h1>
            <p className="hero-sub">
              Diseñamos e implementamos agentes de IA a medida para que tu equipo deje de repetir tareas, no pierdas ventas por no contestar a tiempo, y tus procesos dejen de vivir en cabezas y planillas.
            </p>
            <div className="hero-ctas">
              <button className="btn btn-primary" onClick={onWhatsApp}>
                Agendá un diagnóstico gratuito <IconArrow size={16} />
              </button>
              <a className="btn btn-secondary" href="#servicios">
                Ver servicios
              </a>
            </div>

            <div className="counter-row">
              <div className="counter-cell">
                <div className="counter-num"><em>1×1</em></div>
                <div className="counter-lbl">Diseño artesanal</div>
              </div>
              <div className="counter-cell">
                <div className="counter-num">~<em>14</em> días</div>
                <div className="counter-lbl">Del brief al bot vivo</div>
              </div>
              <div className="counter-cell">
                <div className="counter-num">USD <em>400</em>+</div>
                <div className="counter-lbl">Setup desde</div>
              </div>
            </div>
          </div>

          <div className="hero-chat-wrap">
            <AnimatedChat
              name="Salón Oliva"
              status="asistente · responde en segundos"
              avatar="✂"
              script={HERO_SCRIPT}
              badge="en vivo"
            />
          </div>
        </div>
      </div>

      <div className="hero-marquee">
        <div className="marquee-track">
          <span>WhatsApp Business</span>
          <span>Instagram DM</span>
          <span>Google Sheets</span>
          <span>Calendly</span>
          <span>Tiendanube</span>
          <span>Mercado Pago</span>
          <span>HubSpot</span>
          <span>Notion</span>
          <span>Airtable</span>
          <span>Make / n8n</span>
          <span>WhatsApp Business</span>
          <span>Instagram DM</span>
          <span>Google Sheets</span>
          <span>Calendly</span>
          <span>Tiendanube</span>
          <span>Mercado Pago</span>
          <span>HubSpot</span>
          <span>Notion</span>
          <span>Airtable</span>
          <span>Make / n8n</span>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Hero });