/* global React */

// =====================================================================
// HERO — Editorial dark, full-bleed interior + UI overlay + brand glow
// =====================================================================

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;
  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 ? 'Domótica + IA · Lloret de Mar' : 'Domótica + agentes IA · Lloret de Mar · oficio desde 1999'}</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,
          }}>
            Domótica con <span className="grad-text">inteligencia</span><br/>
            <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400, letterSpacing: '-0.02em' }}>
              para vivienda y negocio<br/>en la Costa Brava
            </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
              ? <>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.</>
              : <>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.</>
            }
          </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="https://wa.me/34601920198?text=Hola%20Ambrosio%2C%20me%20gustar%C3%ADa%20informaci%C3%B3n%20sobre%20dom%C3%B3tica."
              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>
              Hablar con Ambrosio por WhatsApp
            </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>
              Solicitar llamada
            </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 }}>
            Ambrosio puede atenderte por WhatsApp. Si prefieres llamada, deja tus datos y Comfortek preparará el contacto.
          </p>

          {/* Trust strip — Comfortek real numbers */}
          <div style={{ marginTop: isMobile ? 36 : 72, display: 'flex', gap: isMobile ? 24 : 48, flexWrap: 'wrap' }}>
            {[
              { k: '1999', l: 'oficio desde' },
              { k: '2024', l: 'comfortek nace' },
              { k: '24/7', l: 'soporte técnico' },
            ].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 />}
        </div>

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

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

// ---------------------------------------------------------------------
// HeroWordmark — the brand name AS the hero. Editorial scale.
// "comfortek" set at ~14vw (capped), heavy, tight tracking, with the
// power-O glyph swapped in. This is the page's biggest typographic moment.

const HeroWordmark = ({ isMobile }) => {
  const fontSize = isMobile ? 88 : 220;
  return (
    <div style={{
      position: 'absolute',
      top: isMobile ? 56 : 90,
      left: 0, right: 0,
      pointerEvents: 'none',
      zIndex: 2,
      display: 'flex',
      justifyContent: 'center',
    }}>
      <div style={{
        position: 'relative',
        maxWidth: 1280,
        width: '100%',
        padding: isMobile ? '0 24px' : '0 56px',
      }}>
        {/* Eyebrow above the wordmark */}
        <div className="eyebrow" style={{ marginBottom: isMobile ? 16 : 28 }}>
          <span>Domótica · Lloret de Mar · oficio desde 1999</span>
        </div>
        <h1 style={{
          fontFamily: '"Montserrat", system-ui, sans-serif',
          fontWeight: 900,
          fontSize,
          lineHeight: 0.85,
          letterSpacing: '-0.055em',
          color: 'var(--text-0)',
          margin: 0,
          textTransform: 'lowercase',
          display: 'flex',
          alignItems: 'center',
          whiteSpace: 'nowrap',
        }}>
          <span>comf</span>
          <BigPowerO size={fontSize * 0.78} />
          <span>rtek</span>
          <span style={{
            color: 'var(--brand-orange)',
            marginLeft: '-0.02em',
            textShadow: '0 0 60px rgba(255,106,26,0.6)',
          }}>.</span>
        </h1>
      </div>
    </div>
  );
};

// Oversized power-O for the hero wordmark.
const BigPowerO = ({ size }) => {
  const id = React.useId();
  const stroke = size * 0.13;
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 100 100"
      style={{ display: 'inline-block', flex: 'none', margin: `0 ${size * 0.01}px`, filter: 'drop-shadow(0 0 24px rgba(25,194,214,0.45))' }}
      aria-hidden
    >
      <defs>
        <linearGradient id={`bpo-${id}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#1fd0e6" />
          <stop offset="55%" stopColor="#2aa8e6" />
          <stop offset="100%" stopColor="#2563d6" />
        </linearGradient>
        <mask id={`bpo-mask-${id}`}>
          <rect width="100" height="100" fill="white" />
          <rect x="44" y="0" width="12" height="22" fill="black" />
        </mask>
      </defs>
      <circle cx="50" cy="52" r="38" fill="none" stroke={`url(#bpo-${id})`} strokeWidth={stroke} mask={`url(#bpo-mask-${id})`} />
      <line x1="50" y1="14" x2="50" y2="52" stroke={`url(#bpo-${id})`} strokeWidth={stroke} strokeLinecap="round" />
    </svg>
  );
};

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

const HeroBackdrop = () => (
  // Stylized "premium interior at dusk" — dark warm tones, window light, depth.
  // Pure CSS placeholder, evokes the feel without bad AI image vibes.
  <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
    {/* base */}
    <div style={{
      position: 'absolute', inset: 0,
      background: 'linear-gradient(180deg, #0a0a10 0%, #14101a 30%, #1a1318 60%, #0d0a0e 100%)',
    }} />
    {/* warm orange glow from right (Comfortek brand) */}
    <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)',
    }} />
    {/* cyan tech glow from left */}
    <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)',
    }} />
    {/* faint architectural lines */}
    <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>
    {/* warm pendant lights */}
    {[
      { 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')}`,
      }} />
    ))}
    {/* meta floor + bottom edge tint in cyan */}
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0, height: '30%',
      background: 'linear-gradient(to bottom, transparent, rgba(20,30,40,0.6))',
    }} />
    {/* cool bottom highlight (Comfortek cyan undertone) */}
    <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)',
    }} />
    {/* subtle noise/texture */}
    <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 = () => {
  const msgs = [
    { from: 'ambrosio', text: 'Hola 👋 Soy Ambrosio, asistente 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 },
  ];

  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>
          {/* Avatar */}
          <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 }}>Ambrosio · 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' }} />
              En línea
            </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,
        }}>
          {/* Date pill */}
          <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 }}>
              HOY
            </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',
          }}>Escribe un mensaje…</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="https://wa.me/34601920198?text=Hola%20Ambrosio%2C%20me%20gustar%C3%ADa%20informaci%C3%B3n%20sobre%20dom%C3%B3tica."
        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>
        Abrir en WhatsApp
      </a>
    </div>
  );
};

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

const BottomTicker = ({ isMobile }) => (
  <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>LLORET DE MAR · COSTA BRAVA</span>
    {!isMobile && <span>+50 PROYECTOS</span>}
    {!isMobile && <span>LOXONE · KNX · HOME ASSISTANT</span>}
    <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#4ade80', boxShadow: '0 0 8px #4ade80' }} />
      Aceptando proyectos 2026
    </span>
  </div>
);

// ---------------------------------------------------------------------
// HeroMiniAmbrosio — solo mobile. Card premium, ~280px alto, 3 mensajes.
// Aparece después del trust strip del hero, NO se come pantalla completa.
// ---------------------------------------------------------------------
const HeroMiniAmbrosio = () => {
  const msgs = [
    { from: 'ambrosio', text: 'Hola 👋 Soy Ambrosio. ¿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 },
  ];
  return (
    <a
      href="https://wa.me/34601920198?text=Hola%20Ambrosio%2C%20me%20gustar%C3%ADa%20informaci%C3%B3n%20sobre%20dom%C3%B3tica."
      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="Hablar con Ambrosio por WhatsApp"
    >
      {/* Header WhatsApp compacto */}
      <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 }}>Ambrosio · 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' }} />
            En línea
          </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>

      {/* Mensajes */}
      <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>

      {/* CTA strip — coherente, click en toda la card abre WhatsApp */}
      <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>Continúa la conversación con Ambrosio</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;