// Hero — mobile-first. Mockup vai SEMPRE abaixo do conteúdo de texto.
// Tipografia escalonada via classes globais (.t-display, .t-lead).
// CTA principal em largura total no mobile; benefícios em coluna no mobile, linha no desktop.

const heroStyles = {
  section: {
    position: 'relative', overflow: 'hidden',
    background: 'var(--hero-grad)',
    padding: 'clamp(40px, 8vw, 80px) 0 clamp(56px, 12vw, 100px)',
  },
  bgGlow: {
    position: 'absolute', top: '-20%', right: '-20%', width: 500, height: 500,
    background: 'radial-gradient(circle, var(--accent-soft-bg) 0%, transparent 60%)',
    pointerEvents: 'none',
  },
  eyebrow: {
    display: 'inline-flex', alignItems: 'center', gap: 10,
    background: 'white', padding: '7px 14px', borderRadius: 999,
    fontSize: 12, fontWeight: 600, color: 'var(--navy-700)',
    boxShadow: 'var(--shadow-sm)', border: '1px solid var(--silver-100)',
    marginBottom: 18, maxWidth: '100%',
  },
  dot: { width: 7, height: 7, borderRadius: 50, background: 'var(--success)', boxShadow: '0 0 0 4px rgba(31,169,113,.2)', flexShrink: 0 },

  card: {
    background: 'white', borderRadius: 22, padding: 'clamp(16px, 4vw, 26px)',
    boxShadow: 'var(--shadow-lg)',
    border: '1px solid var(--silver-100)',
    width: '100%', maxWidth: 420, position: 'relative',
  },
  msg: { padding: '11px 14px', borderRadius: 14, fontSize: 14.5, lineHeight: 1.45, maxWidth: '85%', marginBottom: 8 },
  msgIn: { background: 'var(--bg-2)', color: 'var(--navy-800)', borderBottomLeftRadius: 4 },
  msgOut: { background: 'var(--whatsapp)', color: 'white', borderBottomRightRadius: 4, marginLeft: 'auto' },

  badgeFloat: {
    position: 'absolute', background: 'white',
    borderRadius: 12, padding: '9px 12px',
    boxShadow: 'var(--shadow)', border: '1px solid var(--silver-100)',
    display: 'flex', alignItems: 'center', gap: 9,
  },
};

function HeroVisualChat() {
  return (
    <div style={heroStyles.card}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
        <div style={{ width: 40, height: 40, borderRadius: 50, background: 'linear-gradient(135deg, var(--navy-700), var(--navy-500))', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontWeight: 800, fontFamily: 'Archivo', fontSize: 16 }}>P</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 700, color: 'var(--navy-800)', fontSize: 14.5 }}>PiterTech • Suporte</div>
          <div style={{ fontSize: 12, color: 'var(--success)', fontWeight: 600, display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ width: 6, height: 6, borderRadius: 50, background: 'var(--success)' }}></span>online agora
          </div>
        </div>
        <IconWhatsApp size={20} color="var(--whatsapp)"/>
      </div>
      <div style={{ ...heroStyles.msg, ...heroStyles.msgIn }}>Oi! Meu notebook tá muito lento, demora uns 5 min pra abrir... 😩</div>
      <div style={{ ...heroStyles.msg, ...heroStyles.msgOut }}>Oi! Isso é super comum 😉 Consigo ir aí hoje ainda, tudo bem?</div>
      <div style={{ ...heroStyles.msg, ...heroStyles.msgIn }}>Sério?! Quanto fica?</div>
      <div style={{ ...heroStyles.msg, ...heroStyles.msgOut, background: 'var(--whatsapp-dark)' }}>Passo sem custo depois de ver. Orçamento é grátis 👍</div>
      <div style={{ display: 'flex', gap: 6, alignItems: 'center', color: 'var(--silver-500)', fontSize: 12, marginTop: 4 }}>
        <span style={{ display: 'inline-flex', gap: 3 }}>
          <span className="typing-dot"></span><span className="typing-dot"></span><span className="typing-dot"></span>
        </span>
        digitando...
      </div>
    </div>
  );
}

function HeroVisualStats() {
  const stats = [
    { num: '15min', label: 'Tempo médio\nde resposta', icon: <IconBolt size={20} color="var(--navy-700)"/> },
    { num: '100%', label: 'Orçamento\ngratuito', icon: <IconWallet size={20} color="var(--navy-700)"/> },
    { num: '24h', label: 'Atendimento em\ndomicílio', icon: <IconHome size={20} color="var(--navy-700)"/> },
    { num: '5★', label: 'Avaliação dos\nclientes', icon: <IconStar size={20}/> },
  ];
  return (
    <div style={heroStyles.card}>
      <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--silver-500)', textTransform: 'uppercase', letterSpacing: '.08em', marginBottom: 14 }}>PiterTech em números</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {stats.map((s, i) => (
          <div key={i} style={{ background: 'var(--bg)', borderRadius: 12, padding: 14, border: '1px solid var(--silver-100)' }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--accent-soft-bg)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 8 }}>{s.icon}</div>
            <div style={{ fontSize: 24, fontFamily: 'Archivo', fontWeight: 800, color: 'var(--navy-800)', lineHeight: 1 }}>{s.num}</div>
            <div style={{ fontSize: 12, color: 'var(--silver-700)', marginTop: 4, whiteSpace: 'pre-line', lineHeight: 1.3 }}>{s.label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function HeroVisualQuestion() {
  const items = ['Meu PC tá lento demais', 'Tenho medo de perder as fotos', 'Aparecem anúncios estranhos', 'Não sei o que fazer'];
  return (
    <div style={{ ...heroStyles.card, background: 'linear-gradient(160deg, var(--navy-800), var(--navy-700))', color: 'white', border: 'none' }}>
      <div className="t-h3" style={{ color: 'white', marginBottom: 16 }}>Você se identifica com alguma dessas?</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
        {items.map((q, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 11, background: 'rgba(255,255,255,.08)', padding: '11px 13px', borderRadius: 12, border: '1px solid rgba(255,255,255,.12)', fontSize: 14 }}>
            <span style={{ width: 22, height: 22, borderRadius: 6, background: 'var(--success)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <IconCheck size={14} color="white"/>
            </span>
            <span>{q}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 16, padding: '12px 14px', background: 'rgba(37,211,102,.15)', borderRadius: 12, border: '1px solid rgba(37,211,102,.3)', fontSize: 13.5, display: 'flex', alignItems: 'center', gap: 10 }}>
        <IconCheckCircle size={18} color="#6EE7A8"/>
        <span>A gente identifica a causa e resolve com método.</span>
      </div>
    </div>
  );
}

function Hero({ heroStyle = 'chat' }) {
  const visual = heroStyle === 'stats' ? <HeroVisualStats />
               : heroStyle === 'question' ? <HeroVisualQuestion />
               : <HeroVisualChat />;

  return (
    <section style={heroStyles.section} id="hero">
      <div className="circuit-bg"></div>
      <div style={heroStyles.bgGlow}></div>
      <div className="container">
        <div className="hero-grid">
          <div className="hero-content">
            <div style={heroStyles.eyebrow}>
              <span style={heroStyles.dot}></span>
              <span>Maricá-RJ • Hoje disponível</span>
            </div>

            <h1 className="hero-h1 t-display">
              Computador lento?{' '}
              <span style={{ color: 'var(--navy-700)' }}>A PiterTech resolve.</span>
            </h1>

            <p className="hero-lead t-lead">
              Assistência técnica de PC e notebook em domicílio. PC lento, vírus, tela azul, formatação, upgrade e suporte para casa, comércio ou escritório.
              <strong style={{ color: 'var(--navy-800)' }}> Orçamento é grátis pelo WhatsApp.</strong>
            </p>

            <div className="hero-cta">
              <a href={waLink()} target="_blank" rel="noopener" className="hero-primary">
                <IconWhatsApp size={20} color="white"/>
                <span>Chamar no WhatsApp</span>
              </a>
              <a href="#servicos" onClick={(e) => { e.preventDefault(); const el = document.getElementById('servicos'); if (el) window.scrollTo({ top: el.offsetTop - 72, behavior: 'smooth' }); }} className="hero-secondary">
                <span>Ver serviços</span>
                <IconArrowRight size={16} color="var(--navy-800)"/>
              </a>
            </div>

            <ul className="hero-trust">
              <li><IconCheckCircle size={16} color="var(--success)"/><span>Orçamento sem compromisso</span></li>
              <li><IconCheckCircle size={16} color="var(--success)"/><span>Atendimento em domicílio</span></li>
              <li><IconCheckCircle size={16} color="var(--success)"/><span>Garantia em todo serviço</span></li>
            </ul>
          </div>

          <div className="hero-visual">
            {visual}

            <div className="hero-badge-1" style={heroStyles.badgeFloat}>
              <div style={{ width: 32, height: 32, borderRadius: 9, background: 'rgba(31,169,113,.15)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <IconBolt size={16} color="var(--success)"/>
              </div>
              <div>
                <div style={{ fontSize: 10.5, color: 'var(--silver-500)', fontWeight: 600, lineHeight: 1.2 }}>Resposta em</div>
                <div style={{ fontWeight: 800, color: 'var(--navy-800)', fontSize: 14, fontFamily: 'Archivo' }}>até 15 min</div>
              </div>
            </div>

            <div className="hero-badge-2" style={heroStyles.badgeFloat}>
              <div style={{ width: 32, height: 32, borderRadius: 9, background: 'var(--accent-soft-bg)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <IconShield size={16} color="var(--navy-700)"/>
              </div>
              <div>
                <div style={{ fontSize: 10.5, color: 'var(--silver-500)', fontWeight: 600, lineHeight: 1.2 }}>Serviço com</div>
                <div style={{ fontWeight: 800, color: 'var(--navy-800)', fontSize: 14, fontFamily: 'Archivo' }}>garantia</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        /* ─────── Mobile-first: text first, mock below ─────── */
        .hero-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 36px;
          align-items: center;
          position: relative;
          z-index: 1;
        }
        .hero-content { order: 1; }
        .hero-visual {
          order: 2;
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 14px;
        }
        .hero-h1 { color: var(--navy-800); margin: 0 0 14px; }
        .hero-lead { margin: 0 0 22px; max-width: 540px; }

        /* ─────── CTA: full-width on mobile, inline on desktop ─────── */
        .hero-cta { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
        .hero-primary, .hero-secondary {
          display: inline-flex; align-items: center; justify-content: center; gap: 10px;
          padding: 15px 18px; border-radius: 14px;
          font-weight: 700; font-size: 15.5px;
          min-height: 52px;
          transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
          white-space: nowrap;
        }
        .hero-primary { background: var(--whatsapp); color: white; box-shadow: 0 10px 24px rgba(37,211,102,.4); }
        .hero-secondary { background: white; color: var(--navy-800); border: 2px solid var(--silver-100); }
        .hero-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(37,211,102,.5); }
        .hero-primary:active { transform: translateY(0); }
        .hero-secondary:hover { border-color: var(--navy-500); color: var(--navy-700); }

        /* ─────── Trust list: stack on mobile, inline on desktop ─────── */
        .hero-trust {
          list-style: none; margin: 0; padding: 0;
          display: flex; flex-direction: column; gap: 8px;
          color: var(--silver-700); font-size: 14px;
        }
        .hero-trust li { display: flex; align-items: center; gap: 8px; font-weight: 500; }

        /* ─────── Floating badges: positioned relative to .hero-visual ─────── */
        .hero-badge-1 { position: absolute; top: 0; left: 0; }
        .hero-badge-2 { position: absolute; bottom: 0; right: 0; }

        .typing-dot {
          width: 5px; height: 5px; border-radius: 50%; background: var(--silver-500);
          display: inline-block; animation: typing 1.4s infinite;
        }
        .typing-dot:nth-child(2) { animation-delay: .2s; }
        .typing-dot:nth-child(3) { animation-delay: .4s; }
        @keyframes typing {
          0%, 60%, 100% { opacity: .3; transform: translateY(0); }
          30% { opacity: 1; transform: translateY(-3px); }
        }

        /* ─────── Tablet+ ─────── */
        @media (min-width: 640px) {
          .hero-cta { flex-direction: row; flex-wrap: wrap; }
          .hero-primary, .hero-secondary { flex: 0 1 auto; padding: 16px 22px; font-size: 16px; }
          .hero-trust { flex-direction: row; flex-wrap: wrap; gap: 8px 22px; }
        }

        /* ─────── Desktop: side-by-side ─────── */
        @media (min-width: 960px) {
          .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 60px; }
          .hero-content { order: 0; }
          .hero-visual { order: 0; padding: 20px; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Hero });