/* global React */

// =====================================================================
// HERO — Editorial dark, full-bleed interior + UI overlay + brand glow
// Localizado 2026-05-02: detecta idioma desde location.pathname y usa
// HERO_T para ES/EN/CA. Master = ES, EN/CA son traducciones nativas.
// =====================================================================

// Helper local — evita depender del orden de carga de sections.jsx
function _heroLang() {
  const p = (typeof location !== 'undefined' ? location.pathname : '/') || '/';
  if (p.startsWith('/en/')) return 'en';
  if (p.startsWith('/ca/')) return 'ca';
  return 'es';
}

const WA_URL_BY_LANG = {
  es: 'https://wa.me/34601920198?text=Hola%2C%20me%20gustar%C3%ADa%20informaci%C3%B3n%20sobre%20dom%C3%B3tica.',
  en: 'https://wa.me/34601920198?text=Hi%2C%20I%27d%20like%20info%20about%20home%20automation.',
  ca: 'https://wa.me/34601920198?text=Hola%2C%20m%27agradaria%20informaci%C3%B3%20sobre%20dom%C3%B2tica.',
};

const HERO_T = {
  es: {
    eyebrow:        'Domótica + agentes IA · Lloret de Mar · oficio desde 1999',
    eyebrowMobile:  'Domótica + IA · Lloret de Mar',
    titleA:         'Domótica con',
    titleGradient:  'inteligencia',
    titleItalic:    <>para vivienda y negocio<br/>en la Costa Brava</>,
    kicker:         <>Diseñamos e integramos sistemas de iluminación, climatización, seguridad y control. Y los hacemos <strong style={{ color: 'var(--text-0)', fontWeight: 500 }}>conversacionales</strong>: agentes de IA que entienden tu casa, tu negocio y a tus clientes — desde la primera llamada hasta la décima escena.</>,
    kickerMobile:   <>Iluminación, clima, seguridad y control con <strong style={{ color: 'var(--text-0)', fontWeight: 500 }}>agentes IA</strong>. Vivienda y negocio en la Costa Brava.</>,
    waBtn:          'Hablar con nuestro Agente IA',
    callBtn:        'Solicitar llamada',
    microcopy:      'Nuestro agente IA puede atenderte por WhatsApp. Si prefieres llamada, deja tus datos y Comfortek preparará el contacto.',
    trust: [
      { k: '1999', l: 'oficio desde' },
      { k: '2024', l: 'comfortek nace' },
      { k: '24/7', l: 'soporte técnico' },
    ],
    tickerLeft:    'LLORET DE MAR · COSTA BRAVA',
    tickerCenter1: '+50 PROYECTOS',
    tickerCenter2: 'LOXONE · KNX · HOME ASSISTANT',
    tickerRight:   'Aceptando proyectos 2026',
    online:        'En línea',
    today:         'HOY',
    placeholder:   'Escribe un mensaje…',
    waBadge:       'Abrir en WhatsApp',
    miniCTA:       'Continúa la conversación con nuestro Agente IA',
    chatMsgs: [
      { from: 'ambrosio', text: 'Hola 👋 Soy el asistente IA de Comfortek. ¿En qué puedo ayudarte hoy?' },
      { from: 'client',   text: 'Quiero automatizar mi vivienda en Lloret. Clima y persianas principalmente.' },
      { from: 'ambrosio', text: 'Perfecto. ¿Es una vivienda nueva o quieres hacer una reforma sobre lo existente?' },
      { from: 'client',   text: 'Reforma. Ya tenemos el cableado básico hecho.' },
      { from: 'ambrosio', text: '¡Genial! Con Loxone podemos aprovechar el cableado existente. ¿Quieres que Comfortek te llame para valorarlo sin compromiso? Dime tu nombre y teléfono 📞' },
      { from: 'client',   text: 'Sí, me llamo Marc. 601 234 567' },
      { from: 'ambrosio', text: '✅ Anotado, Marc. Comfortek te contactará lo antes posible. ¡Hasta pronto!', tick: true },
    ],
    miniMsgs: [
      { from: 'ambrosio', text: 'Hola 👋 Soy el asistente IA de Comfortek. ¿Vivienda o negocio?', t: '10:14' },
      { from: 'client',   text: 'Vivienda en Lloret. Quiero clima e iluminación.', t: '10:14' },
      { from: 'ambrosio', text: 'Perfecto. Te paso valoración sin compromiso esta semana.', t: '10:15', tick: true },
    ],
  },
  en: {
    eyebrow:        'Smart home + AI agents · Lloret de Mar · trade since 1999',
    eyebrowMobile:  'Smart home + AI · Lloret de Mar',
    titleA:         'Smart home with',
    titleGradient:  'intelligence',
    titleItalic:    <>for villas and business<br/>on the Costa Brava</>,
    kicker:         <>We design and integrate lighting, climate, security and control systems. And we make them <strong style={{ color: 'var(--text-0)', fontWeight: 500 }}>conversational</strong>: AI agents that understand your home, your business and your customers — from the first call to the tenth scene.</>,
    kickerMobile:   <>Lighting, climate, security and control with <strong style={{ color: 'var(--text-0)', fontWeight: 500 }}>AI agents</strong>. Villas and business on the Costa Brava.</>,
    waBtn:          'Chat with our AI Agent',
    callBtn:        'Request a callback',
    microcopy:      'Our AI agent can answer you on WhatsApp. If you prefer a call, leave your details and Comfortek will set it up.',
    trust: [
      { k: '1999', l: 'trade since' },
      { k: '2024', l: 'comfortek born' },
      { k: '24/7', l: 'tech support' },
    ],
    tickerLeft:    'LLORET DE MAR · COSTA BRAVA',
    tickerCenter1: '+50 PROJECTS',
    tickerCenter2: 'LOXONE · KNX · HOME ASSISTANT',
    tickerRight:   'Booking 2026 projects',
    online:        'Online',
    today:         'TODAY',
    placeholder:   'Type a message…',
    waBadge:       'Open in WhatsApp',
    miniCTA:       'Continue the conversation with our AI Agent',
    chatMsgs: [
      { from: 'ambrosio', text: 'Hi 👋 I\'m Comfortek\'s AI assistant. How can I help you today?' },
      { from: 'client',   text: 'I want to automate my villa in Lloret. Mainly climate and blinds.' },
      { from: 'ambrosio', text: 'Got it. Is it a new build or a refurb on existing wiring?' },
      { from: 'client',   text: 'Refurb. We already have the basic wiring in place.' },
      { from: 'ambrosio', text: 'Great! With Loxone we can reuse the existing wiring. Shall Comfortek call you for a free, no-commitment assessment? Tell me your name and phone 📞' },
      { from: 'client',   text: 'Yes, my name is Marc. 601 234 567' },
      { from: 'ambrosio', text: '✅ Noted, Marc. Comfortek will get in touch shortly. Talk soon!', tick: true },
    ],
    miniMsgs: [
      { from: 'ambrosio', text: 'Hi 👋 Comfortek AI assistant. Home or business?', t: '10:14' },
      { from: 'client',   text: 'Villa in Lloret. I want climate and lighting.', t: '10:14' },
      { from: 'ambrosio', text: 'Perfect. I\'ll send you a no-commitment assessment this week.', t: '10:15', tick: true },
    ],
  },
  ca: {
    eyebrow:        'Domòtica + agents IA · Lloret de Mar · ofici des de 1999',
    eyebrowMobile:  'Domòtica + IA · Lloret de Mar',
    titleA:         'Domòtica amb',
    titleGradient:  'intel·ligència',
    titleItalic:    <>per a habitatge i negoci<br/>a la Costa Brava</>,
    kicker:         <>Dissenyem i integrem sistemes d'il·luminació, climatització, seguretat i control. I els fem <strong style={{ color: 'var(--text-0)', fontWeight: 500 }}>conversacionals</strong>: agents d'IA que entenen casa teva, el teu negoci i els teus clients — des de la primera trucada fins a la desena escena.</>,
    kickerMobile:   <>Il·luminació, clima, seguretat i control amb <strong style={{ color: 'var(--text-0)', fontWeight: 500 }}>agents IA</strong>. Habitatge i negoci a la Costa Brava.</>,
    waBtn:          'Parlar amb el nostre Agent IA',
    callBtn:        'Demanar trucada',
    microcopy:      "El nostre agent IA pot atendre't per WhatsApp. Si prefereixes trucada, deixa les teves dades i Comfortek prepararà el contacte.",
    trust: [
      { k: '1999', l: 'ofici des de' },
      { k: '2024', l: 'comfortek neix' },
      { k: '24/7', l: 'suport tècnic' },
    ],
    tickerLeft:    'LLORET DE MAR · COSTA BRAVA',
    tickerCenter1: '+50 PROJECTES',
    tickerCenter2: 'LOXONE · KNX · HOME ASSISTANT',
    tickerRight:   'Acceptem projectes 2026',
    online:        'En línia',
    today:         'AVUI',
    placeholder:   'Escriu un missatge…',
    waBadge:       'Obrir a WhatsApp',
    miniCTA:       'Continua la conversa amb el nostre Agent IA',
    chatMsgs: [
      { from: 'ambrosio', text: 'Hola 👋 Sóc l\'assistent IA de Comfortek. En què et puc ajudar avui?' },
      { from: 'client',   text: "Vull automatitzar el meu habitatge a Lloret. Clima i persianes sobretot." },
      { from: 'ambrosio', text: "Perfecte. És un habitatge nou o vols fer una reforma sobre l'existent?" },
      { from: 'client',   text: 'Reforma. Ja tenim el cablejat bàsic fet.' },
      { from: 'ambrosio', text: 'Genial! Amb Loxone podem aprofitar el cablejat existent. Vols que Comfortek et truqui per a una valoració sense compromís? Digues nom i telèfon 📞' },
      { from: 'client',   text: 'Sí, em dic Marc. 601 234 567' },
      { from: 'ambrosio', text: '✅ Anotat, Marc. Comfortek et contactarà aviat. Fins aviat!', tick: true },
    ],
    miniMsgs: [
      { from: 'ambrosio', text: 'Hola 👋 Assistent IA de Comfortek. Habitatge o negoci?', t: '10:14' },
      { from: 'client',   text: 'Habitatge a Lloret. Vull clima i il·luminació.', t: '10:14' },
      { from: 'ambrosio', text: 'Perfecte. Et passo valoració sense compromís aquesta setmana.', t: '10:15', tick: true },
    ],
  },
};

const Hero = ({ width }) => {
  // Real responsive: detect viewport when width prop isn't passed.
  const [vw, setVw] = React.useState(() => width || (typeof window !== 'undefined' ? window.innerWidth : 1440));
  React.useEffect(() => {
    if (width) return;
    const onR = () => setVw(window.innerWidth);
    window.addEventListener('resize', onR);
    return () => window.removeEventListener('resize', onR);
  }, [width]);
  const isMobile = vw < 720;
  const lang = _heroLang();
  const t = HERO_T[lang] || HERO_T.es;
  const waUrl = WA_URL_BY_LANG[lang] || WA_URL_BY_LANG.es;
  return (
    <section style={{
      position: 'relative',
      width: '100%',
      minHeight: isMobile ? 820 : 920,
      overflow: 'hidden',
      background: 'var(--bg-0)',
    }}>
      {/* Backdrop photo (placeholder via gradient + lighting) */}
      <HeroBackdrop />

      {/* Vignette */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 50% 30%, transparent 0%, rgba(7,7,10,0.4) 55%, rgba(7,7,10,0.95) 100%)',
        pointerEvents: 'none',
      }} />

      {/* Top gradient for nav legibility */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 180,
        background: 'linear-gradient(to bottom, rgba(7,7,10,0.85), transparent)',
        pointerEvents: 'none',
      }} />

      {/* Bottom gradient blend to next section */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, height: 240,
        background: 'linear-gradient(to bottom, transparent, var(--bg-0))',
        pointerEvents: 'none',
      }} />

      {/* Brand glow blobs — Comfortek orange + cyan */}
      <div style={{
        position: 'absolute', top: '15%', right: '-10%', width: 700, height: 700,
        background: 'radial-gradient(circle, rgba(255,106,26,0.22), transparent 60%)',
        filter: 'blur(40px)', pointerEvents: 'none',
      }} />
      <div style={{
        position: 'absolute', bottom: '5%', left: '-15%', width: 800, height: 800,
        background: 'radial-gradient(circle, rgba(25,194,214,0.15), transparent 60%)',
        filter: 'blur(40px)', pointerEvents: 'none',
      }} />

      {/* Hero content */}
      <div className="cmf-hero" style={{
        position: 'relative',
        maxWidth: 1280,
        margin: '0 auto',
        padding: isMobile ? '110px 24px 64px' : '160px 56px 100px',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.15fr 1fr',
        gap: isMobile ? 32 : 64,
        alignItems: 'start',
      }}>
        <div className="cmf-hero-content">
          <div className="eyebrow" style={{ marginBottom: isMobile ? 20 : 28 }}>
            <span>{isMobile ? t.eyebrowMobile : t.eyebrow}</span>
          </div>
          <h1 style={{
            fontSize: isMobile ? 44 : 76,
            lineHeight: isMobile ? 1.05 : 1.0,
            letterSpacing: '-0.035em',
            fontWeight: 500,
            color: 'var(--text-0)',
            textWrap: 'balance',
            marginBottom: isMobile ? 24 : 28,
          }}>
            {t.titleA} <span className="grad-text">{t.titleGradient}</span><br/>
            <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400, letterSpacing: '-0.02em' }}>
              {t.titleItalic}
            </span>
          </h1>

          <p style={{
            fontSize: isMobile ? 15.5 : 18,
            lineHeight: 1.55,
            color: 'var(--text-1)',
            maxWidth: isMobile ? 380 : 560,
            marginBottom: isMobile ? 28 : 36,
            textWrap: 'pretty',
          }}>
            {isMobile ? t.kickerMobile : t.kicker}
          </p>

          {/* Primary CTA — WhatsApp principal (Ambrosio en vivo) + Solicitar llamada secundario (modo demo) */}
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
            <a href={waUrl}
              target="_blank" rel="noopener noreferrer"
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                padding: '14px 22px', borderRadius: 999,
                background: 'linear-gradient(135deg, #25D366 0%, #1ea34c 100%)',
                color: 'white', fontWeight: 600, fontSize: 15, letterSpacing: '-0.01em',
                textDecoration: 'none',
                boxShadow: '0 8px 28px rgba(37,211,102,0.4), inset 0 1px 0 rgba(255,255,255,0.25)',
                border: '1px solid rgba(255,255,255,0.18)',
              }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="white" aria-hidden><path d="M20.52 3.48A11.93 11.93 0 0 0 12 0C5.37 0 0 5.37 0 12c0 2.11.55 4.16 1.6 5.97L0 24l6.18-1.62A11.94 11.94 0 0 0 12 24c6.63 0 12-5.37 12-12 0-3.21-1.25-6.22-3.48-8.52zM12 22c-1.85 0-3.66-.5-5.24-1.44l-.37-.22-3.87 1.02 1.03-3.77-.24-.38A9.94 9.94 0 0 1 2 12c0-5.52 4.48-10 10-10s10 4.48 10 10-4.48 10-10 10zm5.47-7.4c-.3-.15-1.77-.87-2.04-.97-.28-.1-.48-.15-.68.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.68-1.64-.93-2.25-.24-.59-.49-.51-.68-.52h-.58c-.2 0-.52.07-.79.37s-1.04 1.02-1.04 2.48 1.07 2.88 1.22 3.08c.15.2 2.1 3.2 5.08 4.49.71.31 1.27.49 1.7.63.72.23 1.37.2 1.88.12.57-.09 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.07-.12-.27-.2-.57-.35z"/></svg>
              {t.waBtn}
            </a>

            <button type="button" onClick={() => window.openCallbackModal && window.openCallbackModal()}
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '12px 18px', borderRadius: 999, cursor: 'pointer',
                background: 'rgba(255,106,26,0.10)',
                color: '#ffb085',
                border: '1px solid rgba(255,106,26,0.45)',
                fontWeight: 500, fontSize: 13, letterSpacing: '-0.005em',
              }}>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden><path d="M12.5 9.7v2.1c0 .5-.5 1-1 1C5.7 12.5 1.5 8.3 1.5 2.5c0-.5.5-1 1-1h2.1c.5 0 .9.3 1 .8l.5 2.2c.1.4 0 .7-.3 1L4.7 6.6c1 1.8 2.6 3.4 4.4 4.4l1.1-1.1c.3-.3.6-.4 1-.3l2.2.5c.4.1.7.5.7 1z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" fill="none"/></svg>
              {t.callBtn}
            </button>
          </div>

          {/* Microcopy — honesto: WhatsApp es el canal real, llamada es solicitud que Comfortek prepara */}
          <p style={{ marginTop: 12, fontSize: 12.5, color: 'var(--text-2)', lineHeight: 1.5, maxWidth: 460 }}>
            {t.microcopy}
          </p>

          {/* Trust strip — Comfortek real numbers */}
          <div style={{ marginTop: isMobile ? 36 : 72, display: 'flex', gap: isMobile ? 24 : 48, flexWrap: 'wrap' }}>
            {t.trust.map(s => (
              <div key={s.l}>
                <div style={{ fontSize: isMobile ? 28 : 36, fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--text-0)' }}>{s.k}</div>
                <div className="numlabel" style={{ marginTop: 4 }}>{s.l.toUpperCase()}</div>
              </div>
            ))}
          </div>

          {/* Mini AmbrosioCard — solo mobile, después del mensaje principal */}
          {isMobile && <HeroMiniAmbrosio t={t} waUrl={waUrl} />}
        </div>

        {/* Floating UI overlay */}
        {!isMobile && <HeroOverlayUI t={t} waUrl={waUrl} />}
      </div>

      {/* Bottom marquee */}
      <BottomTicker isMobile={isMobile} t={t} />
    </section>
  );
};

// ---------------------------------------------------------------------

const HeroBackdrop = () => (
  // Stylized "premium interior at dusk" — dark warm tones, window light, depth.
  <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
    <div style={{
      position: 'absolute', inset: 0,
      background: 'linear-gradient(180deg, #0a0a10 0%, #14101a 30%, #1a1318 60%, #0d0a0e 100%)',
    }} />
    <div style={{
      position: 'absolute', top: '5%', right: '-5%', width: '55%', height: '70%',
      background: 'radial-gradient(ellipse at right top, rgba(255,106,26,0.22), rgba(255,140,60,0.10) 35%, transparent 65%)',
      filter: 'blur(20px)',
    }} />
    <div style={{
      position: 'absolute', top: '20%', left: '-10%', width: '50%', height: '60%',
      background: 'radial-gradient(ellipse at left center, rgba(25,194,214,0.16), transparent 60%)',
      filter: 'blur(30px)',
    }} />
    <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.18 }} preserveAspectRatio="none" viewBox="0 0 1440 880">
      <line x1="0" y1="540" x2="1440" y2="540" stroke="rgba(255,200,160,0.35)" strokeWidth="1"/>
      <line x1="960" y1="0" x2="960" y2="880" stroke="rgba(255,200,160,0.25)" strokeWidth="1"/>
      <line x1="320" y1="0" x2="320" y2="880" stroke="rgba(255,200,160,0.18)" strokeWidth="1"/>
      <rect x="960" y="100" width="420" height="600" stroke="rgba(255,210,170,0.25)" strokeWidth="1" fill="none"/>
      <rect x="990" y="130" width="180" height="540" stroke="rgba(255,210,170,0.15)" strokeWidth="1" fill="none"/>
      <rect x="1190" y="130" width="180" height="540" stroke="rgba(255,210,170,0.15)" strokeWidth="1" fill="none"/>
    </svg>
    {[
      { x: '38%', y: '30%', s: 8, c: 'rgba(255,180,100,0.9)' },
      { x: '46%', y: '32%', s: 6, c: 'rgba(255,170,100,0.8)' },
      { x: '54%', y: '30%', s: 8, c: 'rgba(255,180,100,0.9)' },
      { x: '62%', y: '32%', s: 6, c: 'rgba(255,170,100,0.8)' },
    ].map((p,i) => (
      <div key={i} style={{
        position: 'absolute', top: p.y, left: p.x, width: p.s, height: p.s, borderRadius: '50%',
        background: p.c, boxShadow: `0 0 40px 8px ${p.c}, 0 0 80px 20px ${p.c.replace('0.9','0.4').replace('0.8','0.3')}`,
      }} />
    ))}
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0, height: '30%',
      background: 'linear-gradient(to bottom, transparent, rgba(20,30,40,0.6))',
    }} />
    <div style={{
      position: 'absolute', bottom: '-10%', right: '20%', width: '40%', height: '30%',
      background: 'radial-gradient(ellipse, rgba(25,194,214,0.12), transparent 70%)',
      filter: 'blur(30px)',
    }} />
    <div style={{
      position: 'absolute', inset: 0,
      background: 'radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px)',
      backgroundSize: '3px 3px', opacity: 0.5, mixBlendMode: 'overlay',
    }} />
  </div>
);

// ---------------------------------------------------------------------

const HeroOverlayUI = ({ t, waUrl }) => {
  const msgs = t.chatMsgs;
  return (
    <div style={{ position: 'relative', height: 560, marginTop: 0, display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
      {/* WhatsApp phone mockup */}
      <div style={{
        width: 320,
        borderRadius: 28,
        overflow: 'hidden',
        border: '1px solid rgba(255,255,255,0.12)',
        boxShadow: '0 40px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04)',
        background: '#0b141a',
        display: 'flex', flexDirection: 'column',
        maxHeight: 540,
      }}>
        {/* WA header */}
        <div style={{
          background: '#1f2c34',
          padding: '10px 14px',
          display: 'flex', alignItems: 'center', gap: 10,
          borderBottom: '1px solid rgba(255,255,255,0.06)',
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{ color: 'rgba(255,255,255,0.4)', cursor: 'pointer' }}><path d="M15 18l-6-6 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          <div style={{
            width: 36, height: 36, borderRadius: '50%', flexShrink: 0,
            background: 'linear-gradient(135deg, #19c2d6, #0a8fa3)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 15, fontWeight: 700, color: 'white',
          }}>A</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13.5, fontWeight: 600, color: '#e9edef', lineHeight: 1.2 }}>Agente IA · Comfortek</div>
            <div style={{ fontSize: 11, color: '#00a884', display: 'flex', alignItems: 'center', gap: 4 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#00a884', display: 'inline-block' }} />
              {t.online}
            </div>
          </div>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{ color: 'rgba(255,255,255,0.5)' }}><circle cx="12" cy="5" r="1.5" fill="currentColor"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/><circle cx="12" cy="19" r="1.5" fill="currentColor"/></svg>
        </div>

        {/* WA background wallpaper pattern */}
        <div style={{
          flex: 1, overflowY: 'auto',
          padding: '10px 10px 6px',
          background: '#0b141a',
          backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='1' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E")`,
          display: 'flex', flexDirection: 'column', gap: 4,
        }}>
          <div style={{ textAlign: 'center', margin: '4px 0 8px' }}>
            <span style={{ fontSize: 11, background: 'rgba(17,27,33,0.8)', color: '#8696a0', padding: '3px 10px', borderRadius: 999 }}>
              {t.today}
            </span>
          </div>

          {msgs.map((m, i) => (
            <div key={i} style={{
              display: 'flex',
              justifyContent: m.from === 'client' ? 'flex-end' : 'flex-start',
              marginBottom: 2,
            }}>
              <div style={{
                maxWidth: '82%',
                padding: '7px 10px 6px',
                borderRadius: m.from === 'client' ? '12px 12px 2px 12px' : '12px 12px 12px 2px',
                background: m.from === 'client' ? '#005c4b' : '#1f2c34',
                color: '#e9edef',
                fontSize: 12.5,
                lineHeight: 1.45,
                boxShadow: '0 1px 2px rgba(0,0,0,0.25)',
                position: 'relative',
              }}>
                {m.text}
                <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 3, marginTop: 2 }}>
                  <span style={{ fontSize: 10, color: 'rgba(134,150,160,0.8)' }}>
                    {['10:21','10:22','10:22','10:23','10:23','10:23','10:24'][i]}
                  </span>
                  {m.from === 'client' && (
                    <svg width="14" height="10" viewBox="0 0 16 11" fill="none">
                      <path d="M1 5.5L5 9.5L11 1.5" stroke={m.tick ? '#53bdeb' : '#8696a0'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                      <path d="M6 5.5L10 9.5L15 1.5" stroke={m.tick ? '#53bdeb' : '#8696a0'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* WA input bar */}
        <div style={{
          background: '#1f2c34',
          padding: '8px 10px',
          display: 'flex', alignItems: 'center', gap: 8,
          borderTop: '1px solid rgba(255,255,255,0.05)',
        }}>
          <div style={{
            flex: 1, background: '#2a3942', borderRadius: 20,
            padding: '8px 14px', fontSize: 12.5, color: '#8696a0',
          }}>{t.placeholder}</div>
          <div style={{
            width: 36, height: 36, borderRadius: '50%', background: '#00a884',
            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
          </div>
        </div>
      </div>

      {/* Floating "wa.me" badge */}
      <a href={waUrl}
        target="_blank" rel="noopener noreferrer"
        style={{
          position: 'absolute', bottom: -16, right: 16,
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '8px 14px', borderRadius: 999,
          background: '#25D366', color: 'white',
          fontSize: 12, fontWeight: 600, textDecoration: 'none',
          boxShadow: '0 6px 24px rgba(37,211,102,0.4)',
        }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="white"><path d="M20.52 3.48A11.93 11.93 0 0 0 12 0C5.37 0 0 5.37 0 12c0 2.11.55 4.16 1.6 5.97L0 24l6.18-1.62A11.94 11.94 0 0 0 12 24c6.63 0 12-5.37 12-12 0-3.21-1.25-6.22-3.48-8.52zM12 22c-1.85 0-3.66-.5-5.24-1.44l-.37-.22-3.87 1.02 1.03-3.77-.24-.38A9.94 9.94 0 0 1 2 12c0-5.52 4.48-10 10-10s10 4.48 10 10-4.48 10-10 10zm5.47-7.4c-.3-.15-1.77-.87-2.04-.97-.28-.1-.48-.15-.68.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.68-1.64-.93-2.25-.24-.59-.49-.51-.68-.52h-.58c-.2 0-.52.07-.79.37s-1.04 1.02-1.04 2.48 1.07 2.88 1.22 3.08c.15.2 2.1 3.2 5.08 4.49.71.31 1.27.49 1.7.63.72.23 1.37.2 1.88.12.57-.09 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.07-.12-.27-.2-.57-.35z"/></svg>
        {t.waBadge}
      </a>
    </div>
  );
};

// ---------------------------------------------------------------------

const BottomTicker = ({ isMobile, t }) => (
  <div style={{
    position: 'absolute', bottom: 0, left: 0, right: 0,
    borderTop: '1px solid var(--line)',
    background: 'rgba(7,7,10,0.6)',
    backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
    padding: isMobile ? '14px 24px' : '16px 56px',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-2)', letterSpacing: '0.12em', textTransform: 'uppercase',
    overflow: 'hidden',
  }}>
    <span>{t.tickerLeft}</span>
    {!isMobile && <span>{t.tickerCenter1}</span>}
    {!isMobile && <span>{t.tickerCenter2}</span>}
    <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#4ade80', boxShadow: '0 0 8px #4ade80' }} />
      {t.tickerRight}
    </span>
  </div>
);

// ---------------------------------------------------------------------
// HeroMiniAmbrosio — solo mobile.
// ---------------------------------------------------------------------
const HeroMiniAmbrosio = ({ t, waUrl }) => {
  const msgs = t.miniMsgs;
  return (
    <a
      href={waUrl}
      target="_blank" rel="noopener noreferrer"
      style={{
        display: 'block', textDecoration: 'none',
        marginTop: 32,
        background: '#0b141a',
        border: '1px solid rgba(37,211,102,0.25)',
        borderRadius: 18,
        overflow: 'hidden',
        boxShadow: '0 16px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04) inset',
      }}
      aria-label={t.waBtn}
    >
      <div style={{
        background: '#1f2c34',
        padding: '10px 12px',
        display: 'flex', alignItems: 'center', gap: 10,
        borderBottom: '1px solid rgba(255,255,255,0.06)',
      }}>
        <div style={{
          width: 32, height: 32, borderRadius: '50%', flexShrink: 0,
          background: 'linear-gradient(135deg, #19c2d6, #0a8fa3)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 14, fontWeight: 700, color: 'white',
        }}>A</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: '#e9edef', lineHeight: 1.1 }}>Agente IA · Comfortek</div>
          <div style={{ fontSize: 10.5, color: '#00a884', display: 'inline-flex', alignItems: 'center', gap: 5, marginTop: 2 }}>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#00a884', display: 'inline-block' }} />
            {t.online}
          </div>
        </div>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="#25D366" aria-hidden style={{ flexShrink: 0 }}>
          <path d="M20.52 3.48A11.93 11.93 0 0 0 12 0C5.37 0 0 5.37 0 12c0 2.11.55 4.16 1.6 5.97L0 24l6.18-1.62A11.94 11.94 0 0 0 12 24c6.63 0 12-5.37 12-12 0-3.21-1.25-6.22-3.48-8.52zM12 22c-1.85 0-3.66-.5-5.24-1.44l-.37-.22-3.87 1.02 1.03-3.77-.24-.38A9.94 9.94 0 0 1 2 12c0-5.52 4.48-10 10-10s10 4.48 10 10-4.48 10-10 10z"/>
        </svg>
      </div>

      <div style={{ padding: '10px 10px 6px', background: '#0b141a', display: 'flex', flexDirection: 'column', gap: 4 }}>
        {msgs.map((m, i) => (
          <div key={i} style={{ display: 'flex', justifyContent: m.from === 'client' ? 'flex-end' : 'flex-start' }}>
            <div style={{
              maxWidth: '82%', padding: '6px 9px 4px',
              borderRadius: m.from === 'client' ? '12px 12px 2px 12px' : '12px 12px 12px 2px',
              background: m.from === 'client' ? '#005c4b' : '#1f2c34',
              color: '#e9edef', fontSize: 12.5, lineHeight: 1.4,
              boxShadow: '0 1px 2px rgba(0,0,0,0.25)',
            }}>
              {m.text}
              <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 3, marginTop: 1 }}>
                <span style={{ fontSize: 9.5, color: 'rgba(134,150,160,0.8)' }}>{m.t}</span>
                {m.from === 'client' && (
                  <svg width="12" height="9" viewBox="0 0 16 11" fill="none" aria-hidden>
                    <path d="M1 5.5L5 9.5L11 1.5" stroke={m.tick ? '#53bdeb' : '#8696a0'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                    <path d="M6 5.5L10 9.5L15 1.5" stroke={m.tick ? '#53bdeb' : '#8696a0'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>

      <div style={{
        background: 'linear-gradient(90deg, #25D366, #1ea34c)',
        padding: '10px 14px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        color: 'white', fontSize: 12.5, fontWeight: 600, letterSpacing: '-0.005em',
      }}>
        <span>{t.miniCTA}</span>
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden>
          <path d="M3 7H11M11 7L7 3M11 7L7 11" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>
    </a>
  );
};

window.Hero = Hero;