// V2 — Copy Agressiva (estrutura do briefing .md)
// Tom: vendas direto, urgência, comparativo destrutivo, prova social

const V3 = ({ tweaks, isMobile = false }) => {
  const { brandName, productName, price, oldPrice, ctaLabel, accentColor } = tweaks;
  const oldP = parseFloat(oldPrice.replace(',','.'));
  const p = parseFloat(price.replace(',','.'));
  const desc = Math.round((1 - p/oldP) * 100);
  const parc = (p/12).toFixed(2).replace('.',',');
  const pix = Math.round(p*0.9).toString();

  // ============== HEADER — estilo AirLumi oficial (promo + logo centralizado) ==============
  const Header = () => (
    <>
      {/* Barra promo preta */}
      <div style={{
        background: '#1a1a1a',
        color: '#fff',
        textAlign: 'center',
        padding: isMobile ? '8px 10px' : '10px 60px',
        fontSize: isMobile ? 10 : 11.5,
        letterSpacing: '0.08em',
        fontWeight: 600,
        textTransform: 'uppercase',
      }}>
        POSTAGEM IMEDIATA · FRETE GRÁTIS PARA TODO BRASIL · 12× SEM JUROS
      </div>

      {/* Barra principal: menu / logo centralizado / ícones */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr auto 1fr',
        alignItems: 'center',
        padding: isMobile ? '12px 16px' : '18px 48px',
        background: '#fff',
        borderBottom: '1px solid var(--line)',
      }}>
        {/* Esquerda */}
        <div style={{ display: 'flex', alignItems: 'center', gap: isMobile ? 12 : 26, color: 'var(--ink-2)' }}>
          {isMobile ? (
            <IconMenu />
          ) : (
            <>
              <a style={{ fontSize: 13, fontWeight: 500, cursor: 'pointer' }}>Produto</a>
              <a style={{ fontSize: 13, fontWeight: 500, cursor: 'pointer' }}>Como instalar</a>
              <a style={{ fontSize: 13, fontWeight: 500, cursor: 'pointer' }}>Avaliações</a>
              <a style={{ fontSize: 13, fontWeight: 500, cursor: 'pointer' }}>Suporte</a>
            </>
          )}
        </div>

        {/* Centro — logo */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'center' }}>
          <Logo />
          <span style={{
            fontFamily: 'var(--font-display)',
            fontSize: isMobile ? 18 : 24,
            fontWeight: 600,
            letterSpacing: '-0.015em',
          }}>{brandName}</span>
        </div>

        {/* Direita */}
        <div style={{ display: 'flex', gap: isMobile ? 14 : 20, justifyContent: 'flex-end', color: 'var(--ink-2)' }}>
          <IconSearch />
          {!isMobile && <IconUser />}
          <IconBag />
        </div>
      </div>
    </>
  );

  // ============== HERO PDP (Mobile + Desktop) — mesmo conceito nos dois ==============
  const HeroPDP = () => {
    const GALLERY = [
      { k: 'ultra-silencioso-quarto', ext: 'jpg' },
      { k: 'hero-hand', ext: 'webp' },
      { k: 'caixa-flower', ext: 'webp' },
      { k: 'controle', ext: 'webp' },
      { k: 'temperaturas', ext: 'webp' },
      { k: 'silent-motor-mae', ext: 'webp' },
    ];

    const ImageCol = () => {
      const [imgIdx, setImgIdx] = React.useState(0);
      const prev = () => setImgIdx(i => (i - 1 + GALLERY.length) % GALLERY.length);
      const next = () => setImgIdx(i => (i + 1) % GALLERY.length);
      const cur = GALLERY[imgIdx];

      return (
        <div>
          {/* Imagem principal */}
          <div style={{
            background: '#f1f0ee',
            aspectRatio: '1/1',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            position: 'relative',
            borderRadius: isMobile ? 0 : 14,
            overflow: 'hidden',
          }}>
            <img src={`img/${cur.k}.${cur.ext}`} style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'opacity .2s' }} />
            <button onClick={prev} aria-label="Anterior" style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', width: isMobile ? 32 : 40, height: isMobile ? 32 : 40, borderRadius: 999, background: 'rgba(255,255,255,0.9)', border: 0, display: 'grid', placeItems: 'center', cursor: 'pointer', boxShadow: '0 2px 8px rgba(0,0,0,0.08)' }}>
              <svg width={isMobile ? 14 : 16} height={isMobile ? 14 : 16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m15 18-6-6 6-6"/></svg>
            </button>
            <button onClick={next} aria-label="Próximo" style={{ position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)', width: isMobile ? 32 : 40, height: isMobile ? 32 : 40, borderRadius: 999, background: 'rgba(255,255,255,0.9)', border: 0, display: 'grid', placeItems: 'center', cursor: 'pointer', boxShadow: '0 2px 8px rgba(0,0,0,0.08)' }}>
              <svg width={isMobile ? 14 : 16} height={isMobile ? 14 : 16} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m9 18 6-6-6-6"/></svg>
            </button>
            <div style={{ position: 'absolute', bottom: 12, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 5 }}>
              {GALLERY.map((_, i) => (
                <div key={i} style={{ width: i===imgIdx ? 18 : 5, height: 5, borderRadius: 999, background: i===imgIdx ? '#1a1a1a' : 'rgba(0,0,0,0.25)', transition: 'all .2s' }} />
              ))}
            </div>
          </div>

          {/* Galeria de thumbnails */}
          <div style={{ display: 'flex', gap: isMobile ? 6 : 10, padding: isMobile ? '12px 16px' : '14px 0 0', overflowX: 'auto' }}>
            {GALLERY.map((x, i) => (
              <div key={i} onClick={() => setImgIdx(i)} style={{
                width: isMobile ? 56 : 80,
                height: isMobile ? 56 : 80,
                flexShrink: 0,
                background: '#f1f0ee',
                borderRadius: isMobile ? 6 : 8,
                overflow: 'hidden',
                border: i===imgIdx ? '2px solid #1a1a1a' : '2px solid transparent',
                cursor: 'pointer',
                transition: 'border-color .15s ease',
              }}>
                <img src={`img/${x.k}.${x.ext}`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
            ))}
          </div>
        </div>
      );
    };

    const InfoCol = () => (
      <div style={{ padding: isMobile ? '12px 20px 28px' : 0 }}>
        <div style={{ fontSize: isMobile ? 10.5 : 11.5, letterSpacing: '0.12em', color: 'var(--ink-3)', textTransform: 'uppercase', fontWeight: 600 }}>Lançamento 2026</div>

        <h1 style={{
          fontFamily: 'var(--font-display)',
          fontSize: isMobile ? 22 : 40,
          fontWeight: 600,
          lineHeight: 1.15,
          letterSpacing: '-0.02em',
          margin: isMobile ? '8px 0 10px' : '10px 0 14px',
        }}>{productName}</h1>

        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: isMobile ? 16 : 22 }}>
          <Stars value={5} size={isMobile ? 13 : 15} />
          <span style={{ color: 'var(--ink-3)', fontSize: isMobile ? 12 : 13 }}>(2.387 avaliações)</span>
        </div>

        {/* Preço */}
        <div style={{ padding: isMobile ? '14px 0' : '18px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: isMobile ? 8 : 12, flexWrap: 'wrap' }}>
            <span style={{ color: 'var(--ink-4)', fontSize: isMobile ? 13 : 15, textDecoration: 'line-through' }}>R$ {oldPrice}</span>
            <span style={{ fontFamily: 'var(--font-sans)', fontSize: isMobile ? 30 : 46, fontWeight: 700, letterSpacing: '-0.02em' }}>R$ {price}</span>
            <span style={{ background: '#fff3e0', color: '#c4541b', fontSize: isMobile ? 10.5 : 12, padding: isMobile ? '3px 7px' : '4px 9px', borderRadius: 4, fontWeight: 700, letterSpacing: '0.04em' }}>{desc}% OFF</span>
          </div>
          <div style={{ fontSize: isMobile ? 12 : 13.5, color: 'var(--ink-3)', marginTop: 6 }}>
            ou <strong style={{ color: 'var(--ink)' }}>12× R$ {parc}</strong> sem juros · <strong style={{ color: '#2d7a4f' }}>R$ {pix} no Pix</strong>
          </div>
        </div>

        {/* Variantes de cor */}
        <div style={{ marginTop: isMobile ? 18 : 22 }}>
          <div style={{ fontSize: isMobile ? 10.5 : 11.5, letterSpacing: '0.12em', color: 'var(--ink-3)', textTransform: 'uppercase', marginBottom: 10, fontWeight: 600 }}>Cor: Branco</div>
          <div style={{ display: 'flex', gap: isMobile ? 8 : 10 }}>
            <div style={{ width: isMobile ? 30 : 36, height: isMobile ? 30 : 36, borderRadius: 999, background: '#fff', border: '1px solid var(--line)', boxShadow: '0 0 0 2px var(--ink)', cursor: 'pointer' }} />
            <div style={{ width: isMobile ? 30 : 36, height: isMobile ? 30 : 36, borderRadius: 999, background: '#1a1a1a', cursor: 'pointer' }} />
            <div style={{ width: isMobile ? 30 : 36, height: isMobile ? 30 : 36, borderRadius: 999, background: '#d6cdb8', cursor: 'pointer' }} />
          </div>
        </div>

        {/* Botão */}
        <button style={{
          width: '100%',
          marginTop: isMobile ? 22 : 28,
          padding: isMobile ? '15px 16px' : '18px',
          background: '#c4541b',
          color: '#fff',
          fontWeight: 700,
          fontSize: isMobile ? 14.5 : 16,
          border: 0,
          borderRadius: 999,
          cursor: 'pointer',
          letterSpacing: '0.02em',
        }} onClick={() => window.location.href = '/checkout/checkout.html'}>{ctaLabel} →</button>
        <div style={{ fontSize: isMobile ? 11.5 : 12.5, color: 'var(--ink-3)', marginTop: 10, textAlign: 'center' }}>
          ⚠️ Restam apenas <strong style={{ color: '#c4541b' }}>27 unidades</strong> em estoque
        </div>

        {/* Selos */}
        <div style={{ marginTop: isMobile ? 22 : 26, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
            { icon: <IconTruck />, t: 'Frete grátis', d: 'Para todo o Brasil' },
            { icon: <IconShield />, t: '30 dias de garantia', d: 'Satisfação ou seu dinheiro de volta' },
            { icon: <IconLock />, t: 'Compra 100% segura', d: 'Pagamento criptografado SSL' },
          ].map((x,i) => (
            <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <div style={{ flexShrink: 0, color: 'var(--ink-2)', marginTop: 2 }}>{x.icon}</div>
              <div>
                <div style={{ fontWeight: 700, fontSize: isMobile ? 13 : 14 }}>{x.t}</div>
                <div style={{ color: 'var(--ink-3)', fontSize: isMobile ? 12 : 13, marginTop: 1 }}>{x.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );

    if (isMobile) {
      return (
        <section>
          <ImageCol />
          <InfoCol />
        </section>
      );
    }

    // Desktop: 2 colunas lado a lado
    return (
      <section style={{ padding: '32px 60px 80px' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 60,
          alignItems: 'start',
          maxWidth: 1320,
          margin: '0 auto',
        }}>
          <ImageCol />
          <InfoCol />
        </div>
      </section>
    );
  };

  // ============== SECTION 1: HERO ==============
  const Hero = () => (
    <section style={{ padding: isMobile ? '0' : '40px 60px 80px' }}>
      {/* tag de urgência */}
      <div style={{ display: 'flex', justifyContent: 'center', padding: isMobile ? '14px 16px 8px' : '0 0 24px' }}>
        <span style={{ background: '#fff3e0', color: '#c4541b', fontSize: isMobile ? 10.5 : 12, fontWeight: 700, padding: '6px 12px', borderRadius: 999, letterSpacing: '0.05em' }}>
          🔥 MAIS VENDIDO DO MÊS · ENVIO IMEDIATO
        </span>
      </div>

      <div style={{
        display: isMobile ? 'block' : 'grid',
        gridTemplateColumns: '1.2fr 1fr',
        gap: isMobile ? 0 : 60,
        alignItems: 'center'
      }}>
        {/* Imagem hero */}
        <div style={{ background: 'var(--bg-cream)', aspectRatio: isMobile ? '1/1' : '4/5', overflow: 'hidden', borderRadius: isMobile ? 0 : 18 }}>
          <img src="img/ultra-silencioso-quarto.jpg" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>

        <div style={{ padding: isMobile ? '24px 20px 32px' : 0 }}>
          <h1 style={{
            fontFamily: 'var(--font-display)',
            fontSize: isMobile ? 32 : 56,
            fontWeight: 600,
            lineHeight: 1.02,
            letterSpacing: '-0.025em',
            margin: 0,
          }}>
            Transforme qualquer lâmpada em um <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>ventilador de teto com LED</em> em 30 segundos.
          </h1>
          <p style={{ color: 'var(--ink-2)', fontSize: isMobile ? 15 : 18, lineHeight: 1.55, marginTop: isMobile ? 16 : 24, fontWeight: 500 }}>
            Sem obra. Sem eletricista. Sem fiação. Basta rosquear no soquete e pronto — você tem ventilação potente + iluminação inteligente no mesmo lugar.
          </p>

          <div style={{ marginTop: isMobile ? 22 : 32, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              'Instalação em segundos no soquete E27 (igual lâmpada comum)',
              'Apenas R$ 5/mês de conta de luz usando 12h por dia',
              'Ultra silencioso (30dB) — durma sem ruído nenhum',
            ].map((t,i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                <div style={{ flexShrink: 0, marginTop: 3, width: 20, height: 20, background: '#e8f4ec', color: '#2d7a4f', borderRadius: 999, display: 'grid', placeItems: 'center' }}>
                  <IconCheck color="#2d7a4f" />
                </div>
                <div style={{ fontSize: isMobile ? 14 : 15.5, fontWeight: 500 }}>{t}</div>
              </div>
            ))}
          </div>

          {/* Preço hero */}
          <div style={{ marginTop: isMobile ? 24 : 36, padding: isMobile ? '18px 0' : '24px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
              <span style={{ color: 'var(--ink-4)', fontSize: 14, textDecoration: 'line-through' }}>R$ {oldPrice}</span>
              <span style={{ fontFamily: 'var(--font-sans)', fontSize: isMobile ? 38 : 50, fontWeight: 700, letterSpacing: '-0.02em' }}>R$ {price}</span>
              <span style={{ background: '#1a1a1a', color: '#fff', fontSize: 11, padding: '4px 8px', borderRadius: 4, fontWeight: 700 }}>−{desc}%</span>
            </div>
            <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 6 }}>
              ou <strong>12× R$ {parc}</strong> sem juros · <strong style={{ color: '#2d7a4f' }}>R$ {pix} no Pix</strong>
            </div>
          </div>

          <button style={{
            width: '100%',
            marginTop: 18,
            padding: isMobile ? '17px' : '22px',
            background: accentColor,
            color: '#1a1a1a',
            fontWeight: 700,
            fontSize: isMobile ? 15 : 17,
            border: 0,
            borderRadius: 999,
            cursor: 'pointer',
            letterSpacing: '0.02em',
          }} onClick={() => window.location.href = '/checkout/checkout.html'}>{ctaLabel} →</button>
          <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 10, textAlign: 'center' }}>⚠️ Restam apenas <strong style={{ color: '#c4541b' }}>27 unidades</strong> em estoque</div>
        </div>
      </div>
    </section>
  );

  // ============== SECTION 2: DOR ==============
  const Pain = () => (
    <section style={{
      background: '#1a1a1a',
      color: '#fff',
      padding: isMobile ? '56px 24px' : '120px 80px',
      textAlign: 'center',
    }}>
      <div style={{ maxWidth: 900, margin: '0 auto' }}>
        <span style={{ display: 'inline-block', fontSize: isMobile ? 10 : 11, letterSpacing: '0.15em', textTransform: 'uppercase', color: accentColor, fontWeight: 700, marginBottom: 18 }}>O problema</span>
        <h2 style={{
          fontFamily: 'var(--font-display)',
          fontSize: isMobile ? 30 : 60,
          fontWeight: 500,
          lineHeight: 1.05,
          letterSpacing: '-0.025em',
          margin: 0,
        }}>
          Cansado de escolher entre ter <em style={{ fontStyle: 'italic', color: accentColor }}>luz</em> ou ter <em style={{ fontStyle: 'italic', color: accentColor }}>vento</em> no teto?
        </h2>
        <div style={{ marginTop: isMobile ? 28 : 40, fontSize: isMobile ? 15 : 19, lineHeight: 1.7, color: 'rgba(255,255,255,0.75)', textAlign: 'left', maxWidth: 720, margin: isMobile ? '28px auto 0' : '40px auto 0' }}>
          <p style={{ margin: 0 }}>
            Você já tentou instalar um ventilador de teto e descobriu que ia gastar <strong style={{ color: '#fff' }}>mais de R$ 800</strong> com eletricista, fiação nova e quebra-quebra na parede?
          </p>
          <p style={{ marginTop: 18 }}>
            Ou comprou um ventilador de mesa que ocupa espaço, faz barulho e ainda atrapalha a decoração?
          </p>
          <p style={{ marginTop: 24, fontFamily: 'var(--font-display)', fontSize: isMobile ? 22 : 32, color: '#fff', fontStyle: 'italic', lineHeight: 1.2 }}>
            Chega. A solução existe — e cabe na palma da sua mão.
          </p>
        </div>
      </div>
    </section>
  );

  // ============== SECTION 3: APRESENTAÇÃO ==============
  const Reveal = () => (
    <section style={{ padding: isMobile ? '56px 0 40px' : '120px 60px' }}>
      <div style={{ textAlign: 'center', maxWidth: 900, margin: '0 auto', padding: isMobile ? '0 24px' : 0 }}>
        <span className="kicker">A virada</span>
        <h2 style={{
          fontFamily: 'var(--font-display)',
          fontSize: isMobile ? 30 : 56,
          fontWeight: 500,
          lineHeight: 1.05,
          letterSpacing: '-0.025em',
          marginTop: 14,
        }}>
          Conheça o <em style={{ fontStyle: 'italic' }}>AirLumi</em> — a revolução que está mudando milhares de casas no Brasil.
        </h2>
        <p style={{ color: 'var(--ink-2)', fontSize: isMobile ? 15 : 19, lineHeight: 1.55, marginTop: isMobile ? 18 : 26, fontWeight: 500 }}>
          2 em 1: ventilador potente + luminária LED dimerizável no mesmo dispositivo. Rosqueia no soquete comum e pronto.
        </p>
      </div>

      {/* Imagem produto na mão */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
        gap: isMobile ? 0 : 40,
        alignItems: 'center',
        marginTop: isMobile ? 32 : 80,
        padding: isMobile ? 0 : '0 60px',
      }}>
        <div style={{ background: 'var(--bg-cream)', aspectRatio: '1/1', overflow: 'hidden', borderRadius: isMobile ? 0 : 18 }}>
          <img src="img/hero-hand.webp" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>

        <div style={{ padding: isMobile ? '32px 24px 0' : 0, display: 'flex', flexDirection: 'column', gap: isMobile ? 18 : 24 }}>
          {[
            { i: '🌬️', t: 'VENTO PODEROSO, SOM QUASE ZERO', d: 'Motor silencioso de apenas 30dB. Mais quieto que uma conversa sussurrada.' },
            { i: '💸', t: 'R$ 5/MÊS DE CONTA DE LUZ', d: 'Usando 12h por dia. Mesma potência de um ventilador de teto comum, com fração do consumo.' },
            { i: '💡', t: '3 TEMPERATURAS DE LUZ', d: 'Quente (3000K), Natural (4000K) e Branca (6000K). Escolha o clima ideal pra cada momento.' },
            { i: '🎛️', t: '100% DIMERIZÁVEL', d: 'Brilho de 10% a 100% pelo controle. Luz noturna suave ou iluminação plena.' },
            { i: '⏰', t: 'TIMER INTELIGENTE 4H', d: 'Programe pra desligar em 1h, 2h ou 4h. Perfeito pra dormir.' },
            { i: '🔌', t: 'INSTALAÇÃO EM 30 SEGUNDOS', d: 'Soquete E27 universal. Sem eletricista, sem obra, sem fiação.' },
            { i: '🎮', t: 'CONTROLE REMOTO COMPLETO', d: 'Luz, ventilador, velocidade, temperatura, brilho e timer — tudo na mão.' },
          ].map((x,i) => (
            <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <div style={{ fontSize: isMobile ? 22 : 26, flexShrink: 0, marginTop: -2 }}>{x.i}</div>
              <div>
                <div style={{ fontWeight: 700, fontSize: isMobile ? 13 : 14.5, letterSpacing: '0.02em', marginBottom: 4 }}>{x.t}</div>
                <div style={{ color: 'var(--ink-3)', fontSize: isMobile ? 13.5 : 14.5, lineHeight: 1.55 }}>{x.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );

  // ============== SECTION: BIG NUMBERS ==============
  const Numbers = () => (
    <section style={{ padding: isMobile ? '64px 24px' : '110px 60px', background: '#fff', borderTop: '1px solid var(--line)' }}>
      <div style={{ textAlign: 'center', maxWidth: 820, margin: '0 auto 48px' }}>
        <span className="kicker">Números que importam</span>
        <h2 style={{
          fontFamily: 'var(--font-display)',
          fontSize: isMobile ? 30 : 48,
          fontWeight: 500,
          lineHeight: 1.05,
          letterSpacing: '-0.025em',
          marginTop: 14,
        }}>
          A engenharia em <em style={{ fontStyle: 'italic' }}>4 números.</em>
        </h2>
      </div>
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)',
        gap: isMobile ? 16 : 24,
        maxWidth: 1200,
        margin: '0 auto',
      }}>
        {[
          ['30s', 'Instalação', 'Rosqueia e pronto'],
          ['30dB', 'Silêncio', 'Mais silencioso que uma conversa'],
          ['50 mil h', 'Vida útil', 'LED dura +10 anos'],
          ['42 cm', 'Diâmetro', 'Pás em formato flor'],
        ].map(([n,t,d],i) => (
          <div key={i} style={{
            padding: isMobile ? '24px 16px' : '40px 28px',
            background: 'var(--bg-cream)',
            borderRadius: 14,
            textAlign: 'center',
          }}>
            <div style={{
              fontFamily: 'var(--font-display)',
              fontSize: isMobile ? 34 : 52,
              fontWeight: 600,
              lineHeight: 1,
              letterSpacing: '-0.03em',
            }}>{n}</div>
            <div style={{ fontWeight: 700, fontSize: isMobile ? 13 : 15, marginTop: 14 }}>{t}</div>
            <div style={{ color: 'var(--ink-3)', fontSize: isMobile ? 12 : 13, marginTop: 4 }}>{d}</div>
          </div>
        ))}
      </div>
    </section>
  );

  // ============== SECTION: ECONOMIA ==============
  const Savings = () => (
    <section style={{
      padding: isMobile ? '64px 24px' : '120px 60px',
      background: '#0d0d0d',
      color: '#fff',
      borderTop: '1px solid var(--line)',
      textAlign: 'center',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <span style={{ display: 'inline-block', fontSize: isMobile ? 10 : 11, letterSpacing: '0.15em', textTransform: 'uppercase', color: accentColor, fontWeight: 700, marginBottom: 18 }}>Economia · consumo</span>
        <h2 style={{
          fontFamily: 'var(--font-display)',
          fontSize: isMobile ? 32 : 60,
          fontWeight: 500,
          lineHeight: 1.05,
          letterSpacing: '-0.025em',
          margin: 0,
        }}>
          Liga 12 horas por dia<br/>e paga só <em style={{ fontStyle: 'italic', color: accentColor }}>R$ 5 de luz no mês.</em>
        </h2>
        <p style={{ color: 'rgba(255,255,255,0.65)', fontSize: isMobile ? 15 : 18, lineHeight: 1.6, marginTop: 22, maxWidth: 660, margin: '22px auto 0' }}>
          Mesma potência de um ventilador de teto comum — com fração do consumo. O motor brushless e o LED de alta eficiência fazem o trabalho pesado <strong style={{ color: '#fff' }}>gastando até 80% menos energia</strong> que ventiladores convencionais.
        </p>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: isMobile ? 14 : 20,
          marginTop: isMobile ? 36 : 56,
          textAlign: 'left',
        }}>
          {[
            { val: 'R$ 5', sub: '/mês', t: 'AirLumi', d: '12h por dia · 30 dias', highlight: true },
            { val: 'R$ 18', sub: '/mês', t: 'Ventilador de teto comum', d: 'Mesmo uso, motor convencional' },
            { val: 'R$ 240', sub: '/mês', t: 'Ar condicionado split', d: '12h por dia em 22°C' },
          ].map((x,i) => (
            <div key={i} style={{
              background: x.highlight ? accentColor : 'rgba(255,255,255,0.04)',
              color: x.highlight ? '#1a1a1a' : '#fff',
              padding: isMobile ? '24px 22px' : '32px 28px',
              borderRadius: 14,
              border: x.highlight ? 'none' : '1px solid rgba(255,255,255,0.08)',
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: isMobile ? 48 : 64, fontWeight: 600, lineHeight: 1, letterSpacing: '-0.03em' }}>{x.val}</span>
                <span style={{ fontSize: isMobile ? 16 : 18, opacity: x.highlight ? 0.7 : 0.5, fontWeight: 500 }}>{x.sub}</span>
              </div>
              <div style={{ fontWeight: 700, fontSize: isMobile ? 14 : 15, marginTop: 14, letterSpacing: '0.01em' }}>{x.t}</div>
              <div style={{ fontSize: 12.5, marginTop: 4, opacity: x.highlight ? 0.7 : 0.55, lineHeight: 1.5 }}>{x.d}</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 28, fontSize: 11, color: 'rgba(255,255,255,0.4)', maxWidth: 600, margin: '28px auto 0', lineHeight: 1.6 }}>
          *Estimativa baseada em tarifa média residencial de R$ 0,75/kWh. Consumo do AirLumi: ~22W em uso médio (motor + LED). Valores reais podem variar conforme tarifa local e modo de uso.
        </div>
      </div>
    </section>
  );

  // ============== SECTION 4: VENTILAÇÃO ==============
  const Ventilation = () => (
    <section style={{
      display: isMobile ? 'block' : 'grid',
      gridTemplateColumns: '1fr 1fr',
      borderTop: '1px solid var(--line)',
    }}>
      <div style={{ background: '#ece8e1', aspectRatio: isMobile ? '1/1' : 'auto', minHeight: isMobile ? 'auto' : 600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img src="img/dorme-silencio.webp" style={{ width: '100%', height: '100%', objectFit: 'contain', padding: isMobile ? 0 : 40 }} />
      </div>
      <div style={{ padding: isMobile ? '40px 24px 48px' : '100px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <span className="kicker">Benefício 1 · Ventilação</span>
        <h3 style={{
          fontFamily: 'var(--font-display)',
          fontSize: isMobile ? 28 : 44,
          fontWeight: 500,
          lineHeight: 1.08,
          letterSpacing: '-0.02em',
          marginTop: 14,
          marginBottom: 18,
        }}>
          Ventilação potente e silenciosa — durma melhor, sem ruídos.
        </h3>
        <p style={{ color: 'var(--ink-3)', fontSize: isMobile ? 14.5 : 16, lineHeight: 1.65 }}>
          Enquanto ventiladores comuns fazem barulho de turbina, o AirLumi opera em apenas <strong style={{ color: 'var(--ink)' }}>30dB</strong> — mais silencioso que o som da sua própria respiração.
        </p>
        <ul style={{ margin: '24px 0 0', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
            ['🌀', '3 velocidades de vento — Suave, Médio e Forte'],
            ['🍃', 'Ampla superfície — 6 pás em formato flor (420mm)'],
            ['🤫', 'Tecnologia ultra silenciosa — perfeito pra quarto de bebê'],
            ['💪', 'Motor de 60W de alta performance'],
          ].map(([i,t],k) => (
            <li key={k} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: isMobile ? 14 : 15 }}>
              <span style={{ flexShrink: 0 }}>{i}</span><span>{t}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );

  // ============== SECTION 5: ILUMINAÇÃO ==============
  const Lighting = () => (
    <section style={{
      display: isMobile ? 'block' : 'grid',
      gridTemplateColumns: '1fr 1fr',
      borderTop: '1px solid var(--line)',
      direction: isMobile ? 'ltr' : 'rtl',
    }}>
      <div style={{ direction: 'ltr', background: '#eaf1f8', aspectRatio: isMobile ? '1/1' : 'auto', minHeight: isMobile ? 'auto' : 600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img src="img/instale-segundos.webp" style={{ width: '100%', height: '100%', objectFit: 'contain', padding: isMobile ? 0 : 40 }} />
      </div>
      <div style={{ direction: 'ltr', padding: isMobile ? '40px 24px 48px' : '100px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <span className="kicker">Benefício 2 · Iluminação</span>
        <h3 style={{
          fontFamily: 'var(--font-display)',
          fontSize: isMobile ? 28 : 44,
          fontWeight: 500,
          lineHeight: 1.08,
          letterSpacing: '-0.02em',
          marginTop: 14,
          marginBottom: 14,
        }}>
          Uma lâmpada que se adapta ao seu momento.
        </h3>
        <div style={{ fontSize: isMobile ? 13.5 : 14.5, fontWeight: 600, color: 'var(--ink-2)', marginBottom: 16 }}>3 temperaturas de cor + brilho totalmente ajustável</div>
        <p style={{ color: 'var(--ink-3)', fontSize: isMobile ? 14.5 : 16, lineHeight: 1.65 }}>
          <strong style={{ color: 'var(--ink)' }}>Luz quente</strong> pra relaxar no sofá. <strong style={{ color: 'var(--ink)' }}>Natural</strong> pra trabalhar concentrado. <strong style={{ color: 'var(--ink)' }}>Branca</strong> pra iluminar a cozinha. Tudo no mesmo dispositivo, controlado pelo remoto.
        </p>
        <p style={{ color: 'var(--ink-3)', fontSize: isMobile ? 14.5 : 16, lineHeight: 1.65, marginTop: 12 }}>
          <strong>Esqueça</strong> ter que trocar de lâmpada. <strong>Esqueça</strong> ter que levantar pra apagar a luz.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginTop: 24 }}>
          {[
            { c: '#fff5e0', t: '🔥 3000K', l: 'Quente' },
            { c: '#fafaf5', t: '⚪ 4000K', l: 'Natural' },
            { c: '#e8f0ff', t: '❄️ 6000K', l: 'Branca' },
          ].map((x,i) => (
            <div key={i} style={{ background: x.c, padding: '14px 10px', borderRadius: 10, textAlign: 'center', border: '1px solid var(--line-2)' }}>
              <div style={{ fontWeight: 700, fontSize: isMobile ? 12 : 13 }}>{x.t}</div>
              <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 4 }}>{x.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );

  // ============== SECTION 6: INSTALAÇÃO ==============
  const Install = () => (
    <section style={{ padding: isMobile ? '56px 24px' : '120px 60px', background: 'var(--bg-cream)', borderTop: '1px solid var(--line)', textAlign: 'center' }}>
      <span className="kicker">Quebra de objeção · Instalação</span>
      <h2 style={{
        fontFamily: 'var(--font-display)',
        fontSize: isMobile ? 30 : 56,
        fontWeight: 500,
        lineHeight: 1.05,
        letterSpacing: '-0.025em',
        marginTop: 14,
        maxWidth: 1000,
        margin: '14px auto 0',
      }}>
        Instalação mais fácil impossível — literalmente você <em style={{ fontStyle: 'italic' }}>rosqueia como uma lâmpada.</em>
      </h2>
      <p style={{ color: 'var(--ink-2)', fontSize: isMobile ? 15 : 19, fontWeight: 500, marginTop: 20, lineHeight: 1.55 }}>
        Zero obra. Zero eletricista. Zero dor de cabeça.<br/>
        Se você sabe trocar uma lâmpada, você sabe instalar o AirLumi.
      </p>

      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
        gap: isMobile ? 16 : 24,
        marginTop: isMobile ? 36 : 60,
        maxWidth: 1100,
        margin: isMobile ? '36px auto 0' : '60px auto 0',
        textAlign: 'left',
      }}>
        {[
          { n: '1', t: 'Desligue a energia', d: 'Da sala, na chave geral. Segurança em primeiro lugar.' },
          { n: '2', t: 'Rosqueie o produto', d: 'No soquete E27 como se fosse uma lâmpada comum. Aperto firme.' },
          { n: '3', t: 'Ligue e use', d: 'Religue a chave, pegue o controle remoto e aproveite.' },
        ].map((s,i) => (
          <div key={i} style={{ background: '#fff', padding: isMobile ? 24 : 32, borderRadius: 14, border: '1px solid var(--line)' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: isMobile ? 56 : 80, fontWeight: 500, color: accentColor, lineHeight: 0.9, letterSpacing: '-0.05em' }}>{s.n}</div>
            <div style={{ fontWeight: 600, fontSize: isMobile ? 17 : 19, marginTop: 14, marginBottom: 6 }}>{s.t}</div>
            <div style={{ color: 'var(--ink-3)', fontSize: 14, lineHeight: 1.55 }}>{s.d}</div>
          </div>
        ))}
      </div>

      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: isMobile ? '12px 16px' : '14px 24px', background: '#1a1a1a', color: '#fff', borderRadius: 999, marginTop: 36, fontSize: isMobile ? 12 : 13.5, fontWeight: 600 }}>
        ⚡ Bivolt automático 85V–265V · Funciona em qualquer tomada do Brasil
      </div>
    </section>
  );

  // ============== SECTION 7: COMPARATIVO ==============
  const Compare = () => (
    <section style={{ padding: isMobile ? '56px 20px' : '120px 60px', background: '#fff', borderTop: '1px solid var(--line)' }}>
      <div style={{ textAlign: 'center', maxWidth: 800, margin: '0 auto 40px' }}>
        <span className="kicker">Comparativo</span>
        <h2 style={{
          fontFamily: 'var(--font-display)',
          fontSize: isMobile ? 28 : 50,
          fontWeight: 500,
          lineHeight: 1.05,
          letterSpacing: '-0.02em',
          marginTop: 14,
        }}>
          Por que milhares estão trocando o ventilador comum por este?
        </h2>
      </div>

      {isMobile ? (
        <div style={{ background: '#fff', borderRadius: 14, border: '1px solid var(--line)', overflow: 'hidden' }}>
          {[
            ['Preço', 'Acessível', 'R$ 400+', 'R$ 2.500+'],
            ['Instalação', '30 segundos', 'Eletricista', 'Obra completa'],
            ['Iluminação integrada', 'LED dimerizável', 'Não', 'Não'],
            ['Controle remoto', 'Completo', 'Às vezes', 'Sim'],
            ['Ruído', '30dB', 'Alto', 'Médio'],
            ['Consumo', '60W', 'Alto', 'Altíssimo'],
            ['Timer automático', '1h / 2h / 4h', 'Não', 'Sim'],
          ].map(([l, a, b, c],i) => (
            <div key={i} style={{ padding: '14px 16px', borderTop: i === 0 ? 'none' : '1px solid var(--line-2)' }}>
              <div style={{ fontSize: 11, letterSpacing: '0.08em', color: 'var(--ink-3)', textTransform: 'uppercase', marginBottom: 8, fontWeight: 600 }}>{l}</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 6, fontSize: 13.5 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontWeight: 600 }}><IconCheck color="#2d7a4f" /> AirLumi: {a}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--ink-3)' }}><IconX /> Ventilador comum: {b}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--ink-3)' }}><IconX /> Ar condicionado: {c}</div>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div style={{ background: '#fff', borderRadius: 18, border: '1px solid var(--line)', overflow: 'hidden', maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1.3fr', padding: '20px 0', background: '#faf8f4' }}>
            <div style={{ padding: '0 24px', fontSize: 12, letterSpacing: '0.1em', color: 'var(--ink-3)', textTransform: 'uppercase' }}>Característica</div>
            <div style={{ padding: '0 24px', color: 'var(--ink-3)', fontSize: 14 }}>Ventilador comum</div>
            <div style={{ padding: '0 24px', color: 'var(--ink-3)', fontSize: 14 }}>Ar condicionado</div>
            <div style={{ padding: '0 24px', fontWeight: 700, fontSize: 14, display: 'flex', alignItems: 'center', gap: 6, background: '#1a1a1a', color: '#fff', margin: '-20px -1px -20px 0' }}><Logo /> AirLumi</div>
          </div>
          {[
            ['Preço', 'R$ 400+', 'R$ 2.500+', '💰 Acessível'],
            ['Instalação', 'Precisa eletricista', 'Obra completa', '✅ 30 segundos'],
            ['Iluminação integrada', '❌', '❌', '✅ LED dimerizável'],
            ['Controle remoto', 'Às vezes', 'Sim', '✅ Completo'],
            ['Ruído', 'Alto', 'Médio', '✅ 30dB'],
            ['Consumo', 'Alto', 'Altíssimo', '✅ Apenas 60W'],
            ['Timer automático', '❌', 'Sim', '✅ 1h / 2h / 4h'],
          ].map(([a,b,c,d],i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1.3fr', padding: '18px 0', borderTop: '1px solid var(--line-2)', alignItems: 'center', fontSize: 14 }}>
              <div style={{ padding: '0 24px', fontWeight: 600 }}>{a}</div>
              <div style={{ padding: '0 24px', color: 'var(--ink-3)' }}>{b}</div>
              <div style={{ padding: '0 24px', color: 'var(--ink-3)' }}>{c}</div>
              <div style={{ padding: '0 24px', fontWeight: 600, background: '#fafaf7' }}>{d}</div>
            </div>
          ))}
        </div>
      )}
    </section>
  );

  // ============== SECTION 8: CONTROLE REMOTO ==============
  const Remote = () => {
    const Text = () => (
      <div style={{ padding: isMobile ? '40px 24px 48px' : '120px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <span className="kicker">Controle remoto</span>
        <h2 style={{
          fontFamily: 'var(--font-display)',
          fontSize: isMobile ? 30 : 50,
          fontWeight: 500,
          lineHeight: 1.05,
          letterSpacing: '-0.025em',
          marginTop: 14,
          marginBottom: 14,
        }}>
          Tudo no seu controle. <em style={{ fontStyle: 'italic' }}>Literalmente.</em>
        </h2>
        <p style={{ color: 'var(--ink-2)', fontSize: isMobile ? 15 : 17, fontWeight: 500, lineHeight: 1.55 }}>
          Um controle remoto, 10 funções essenciais. Comande tudo sem sair do sofá.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: isMobile ? 8 : 10, marginTop: isMobile ? 24 : 28 }}>
          {[
            ['🔘', 'Ligar/desligar geral'],
            ['💡', 'Liga/desliga luz'],
            ['🌀', 'Liga/desliga ventilador'],
            ['🌡️', 'Temperatura de cor'],
            ['☀️', 'Ajuste de brilho'],
            ['🌬️', '3 velocidades'],
            ['⏲️', 'Timer 2h e 4h'],
            ['🌙', 'Modo luz noturna'],
          ].map(([i,t],k) => (
            <div key={k} style={{ display: 'flex', gap: 8, alignItems: 'center', fontSize: isMobile ? 12.5 : 14, padding: isMobile ? '6px 0' : '8px 0' }}>
              <span style={{ fontSize: isMobile ? 15 : 16, flexShrink: 0 }}>{i}</span>
              <span style={{ fontWeight: 500 }}>{t}</span>
            </div>
          ))}
        </div>
      </div>
    );

    const Image = () => (
      <div style={{
        aspectRatio: isMobile ? '1/1' : 'auto',
        minHeight: isMobile ? 0 : 500,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: '#fff',
      }}>
        <img src="img/controle.webp" style={{ width: '100%', height: '100%', objectFit: 'contain', padding: isMobile ? 32 : 40 }} />
      </div>
    );

    return (
      <section style={{
        display: isMobile ? 'block' : 'grid',
        gridTemplateColumns: '1fr 1fr',
        background: 'var(--bg-cream)',
        borderTop: '1px solid var(--line)',
      }}>
        {isMobile ? <><Image /><Text /></> : <><Text /><Image /></>}
      </section>
    );
  };

  // ============== SECTION 9: AMBIENTES ==============
  const Rooms = () => (
    <section style={{ padding: isMobile ? '56px 0 40px' : '120px 60px', borderTop: '1px solid var(--line)' }}>
      <div style={{ textAlign: 'center', maxWidth: 800, margin: '0 auto 40px', padding: isMobile ? '0 24px' : 0 }}>
        <span className="kicker">Pra quem é</span>
        <h2 style={{
          fontFamily: 'var(--font-display)',
          fontSize: isMobile ? 28 : 50,
          fontWeight: 500,
          lineHeight: 1.05,
          letterSpacing: '-0.02em',
          marginTop: 14,
        }}>
          Ideal para qualquer ambiente da sua casa.
        </h2>
      </div>
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(3, 1fr)',
        gap: isMobile ? 1 : 16,
        background: isMobile ? 'var(--line)' : 'transparent',
        padding: isMobile ? '0 0 0 0' : '0',
      }}>
        {[
          ['🛏️', 'Quarto de Casal', 'Durma com vento fresco e sem barulho.'],
          ['👶', 'Quarto de Bebê', 'Ultra silencioso, não acorda a criança.'],
          ['🛋️', 'Sala de Estar', 'Visual moderno e funcional.'],
          ['💻', 'Home Office', 'Luz branca pra focar + vento pra render.'],
          ['🍳', 'Cozinha', 'Espanta o calor do fogão com estilo.'],
          ['🏠', 'República / Kitnet', 'Sem precisar avisar o proprietário.'],
        ].map(([i,t,d],k) => (
          <div key={k} style={{
            background: '#fff',
            padding: isMobile ? '24px 18px' : '32px',
            border: isMobile ? 'none' : '1px solid var(--line)',
            borderRadius: isMobile ? 0 : 14,
          }}>
            <div style={{ fontSize: isMobile ? 28 : 36 }}>{i}</div>
            <div style={{ fontWeight: 700, fontSize: isMobile ? 15 : 18, marginTop: 12 }}>{t}</div>
            <div style={{ color: 'var(--ink-3)', fontSize: isMobile ? 12.5 : 14, lineHeight: 1.5, marginTop: 6 }}>{d}</div>
          </div>
        ))}
      </div>
    </section>
  );

  // ============== SECTION 10: PROVA SOCIAL ==============
  const Social = () => (
    <section style={{ padding: isMobile ? '56px 24px' : '120px 60px', background: 'var(--bg-soft)', borderTop: '1px solid var(--line)' }}>
      <div style={{ textAlign: 'center', maxWidth: 800, margin: '0 auto 40px' }}>
        <span className="kicker">Avaliações</span>
        <h2 style={{
          fontFamily: 'var(--font-display)',
          fontSize: isMobile ? 28 : 50,
          fontWeight: 500,
          lineHeight: 1.05,
          letterSpacing: '-0.02em',
          marginTop: 14,
        }}>
          Veja o que quem já comprou está falando.
        </h2>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, marginTop: 18 }}>
          <Stars value={5} size={20} />
          <span style={{ fontWeight: 600, fontSize: 16 }}>4.9 · 2.847 avaliações</span>
        </div>
      </div>
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
        gap: isMobile ? 14 : 24,
        maxWidth: 1200,
        margin: '0 auto',
      }}>
        {[
          { t: 'Instalei em 1 minuto. Literalmente rosqueei e funcionou. Meu quarto ficou uma maravilha, o barulho é zero.', n: 'Juliana M.', l: 'São Paulo / SP' },
          { t: 'Comprei pra substituir o ar condicionado no quarto das crianças e não me arrependo. Gasto muito menos energia.', n: 'Ricardo P.', l: 'Belo Horizonte / MG' },
          { t: 'A luz dimerizável é um luxo. De manhã boto forte, de noite boto quente e suave. Parece outro quarto.', n: 'Fernanda L.', l: 'Curitiba / PR' },
        ].map((r,i) => (
          <div key={i} style={{ background: '#fff', padding: isMobile ? 22 : 28, borderRadius: 14, border: '1px solid var(--line)' }}>
            <Stars value={5} size={16} />
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, marginTop: 14, fontWeight: 500 }}>"{r.t}"</p>
            <div style={{ marginTop: 18, paddingTop: 14, borderTop: '1px solid var(--line-2)' }}>
              <div style={{ fontWeight: 600, fontSize: 13.5 }}>{r.n}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2, display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 14, height: 14, background: '#2d7a4f', color: '#fff', borderRadius: 999, display: 'grid', placeItems: 'center', fontSize: 9 }}>✓</span>
                Compra verificada · {r.l}
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );

  // ============== SECTION 11: FICHA TÉCNICA ==============
  const Specs = () => (
    <section style={{ background: '#1a1a1a', color: '#fff', padding: isMobile ? '56px 24px' : '120px 60px', borderTop: '1px solid var(--line)' }}>
      <div style={{ display: isMobile ? 'block' : 'grid', gridTemplateColumns: '1fr 2fr', gap: isMobile ? 24 : 80, maxWidth: 1300, margin: '0 auto' }}>
        <div>
          <span style={{ display: 'inline-block', fontSize: 11, letterSpacing: '0.15em', textTransform: 'uppercase', color: accentColor, fontWeight: 700 }}>Ficha técnica</span>
          <h2 style={{
            fontFamily: 'var(--font-display)',
            fontSize: isMobile ? 28 : 46,
            fontWeight: 500,
            lineHeight: 1.05,
            letterSpacing: '-0.02em',
            marginTop: 14,
          }}>
            Tudo que você precisa antes de comprar.
          </h2>
          <div style={{ marginTop: 24, padding: 22, background: 'rgba(255,255,255,0.04)', borderRadius: 12, border: '1px solid rgba(255,255,255,0.1)', maxWidth: 360 }}>
            <div style={{ fontSize: 11, letterSpacing: '0.12em', color: accentColor, textTransform: 'uppercase', fontWeight: 700, marginBottom: 10 }}>Na caixa</div>
            <div style={{ fontSize: 14, lineHeight: 1.85 }}>
              1 × AirLumi Ventilador de Teto<br/>
              1 × Controle remoto<br/>
              2 × Pilhas AAA<br/>
              1 × Manual em português
            </div>
          </div>
        </div>
        <div style={{ marginTop: isMobile ? 28 : 0 }}>
          {[
            ['Tensão', 'Bivolt 85V–265V / 50–60Hz'],
            ['Potência', '40W LED + 60W motor'],
            ['Temperatura de cor', '3000K – 6500K (CCT)'],
            ['Base', 'E27 (soquete universal)'],
            ['Diâmetro', '420mm'],
            ['Altura', '135mm'],
            ['Vida útil LED', '50.000 horas'],
            ['Cor', 'Branco'],
            ['Material das pás', 'ABS resistente'],
            ['Abajur', 'Acrílico de alta translucidez'],
            ['Ruído', '< 30 dB'],
            ['Garantia', '12 meses fabricante'],
          ].map(([k,v],i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', padding: isMobile ? '12px 0' : '16px 0', borderTop: '1px solid rgba(255,255,255,0.08)', fontSize: isMobile ? 13 : 14.5, gap: 10 }}>
              <div style={{ color: 'rgba(255,255,255,0.5)' }}>{k}</div>
              <div style={{ fontWeight: 500 }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );

  // ============== SECTION 12: FAQ ==============
  const FaqSec = () => (
    <section style={{ padding: isMobile ? '56px 24px' : '120px 60px', borderTop: '1px solid var(--line)' }}>
      <div style={{ display: isMobile ? 'block' : 'grid', gridTemplateColumns: '1fr 2fr', gap: 60, maxWidth: 1300, margin: '0 auto' }}>
        <div>
          <span className="kicker">Dúvidas</span>
          <h2 style={{
            fontFamily: 'var(--font-display)',
            fontSize: isMobile ? 28 : 46,
            fontWeight: 500,
            lineHeight: 1.05,
            letterSpacing: '-0.02em',
            marginTop: 14,
          }}>
            Dúvidas frequentes — respondidas.
          </h2>
        </div>
        <div style={{ marginTop: isMobile ? 24 : 0 }}>
          {[
            ['Funciona em qualquer soquete?', 'Sim, em qualquer soquete E27 — o padrão da maioria das lâmpadas brasileiras. Se a sua lâmpada do teto tem rosca grossa, funciona.'],
            ['Precisa de eletricista para instalar?', 'Não. Você desliga a chave geral, rosqueia o produto no soquete (igual lâmpada) e religa. Pronto.'],
            ['É bivolt?', 'Sim. Bivolt automático (85V–265V). Funciona em qualquer região do Brasil sem mexer em chave nenhuma.'],
            ['Quanto tempo dura?', 'O LED tem vida útil de 50.000 horas (cerca de 17 anos acesa 8h/dia). Garantia de 12 meses contra defeitos de fábrica.'],
            ['E se eu não gostar?', 'Você tem 7 dias de garantia da loja para devolver sem custo nenhum. Devolvemos 100% do valor.'],
            ['Qual o prazo de entrega?', 'Envio em até 24h úteis após confirmação do pagamento. Capitais: 2–4 dias úteis. Demais regiões: 3–7 dias úteis.'],
          ].map(([q,a],i) => <FaqItem key={i} q={q} a={a} open={i===0} />)}
        </div>
      </div>
    </section>
  );

  // ============== SECTION 13: OFERTA FINAL ==============
  const FinalOffer = () => (
    <section style={{ background: '#0d0d0d', color: '#fff', padding: isMobile ? '56px 24px' : '120px 60px', textAlign: 'center' }}>
      <div style={{ maxWidth: 800, margin: '0 auto' }}>
        <span style={{ display: 'inline-block', background: '#c4541b', color: '#fff', padding: '6px 14px', borderRadius: 999, fontSize: isMobile ? 11 : 12.5, fontWeight: 700, letterSpacing: '0.05em' }}>
          ⚠️ ESTOQUE LIMITADO · ENVIO IMEDIATO
        </span>
        <h2 style={{
          fontFamily: 'var(--font-display)',
          fontSize: isMobile ? 36 : 72,
          fontWeight: 500,
          lineHeight: 0.98,
          letterSpacing: '-0.03em',
          marginTop: 22,
          color: '#fff',
        }}>
          A cada semana, <em style={{ fontStyle: 'italic', color: accentColor }}>centenas saem.</em> Os novos lotes demoram 45 dias.
        </h2>
        <p style={{ fontSize: isMobile ? 15 : 18, color: 'rgba(255,255,255,0.7)', marginTop: 22, lineHeight: 1.55 }}>
          Se você quer transformar sua casa <strong style={{ color: '#fff' }}>ainda essa semana</strong>, garanta o seu agora enquanto há estoque.
        </p>

        <div style={{
          background: 'rgba(255,255,255,0.06)',
          border: '1px solid rgba(255,255,255,0.18)',
          borderRadius: 18,
          padding: isMobile ? 24 : 36,
          marginTop: 36,
          textAlign: 'left',
        }}>
          <div style={{ fontSize: isMobile ? 11 : 12.5, letterSpacing: '0.1em', color: accentColor, fontWeight: 700, textTransform: 'uppercase' }}>Oferta especial de hoje</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginTop: 14, flexWrap: 'wrap' }}>
            <span style={{ color: 'rgba(255,255,255,0.4)', fontSize: 16, textDecoration: 'line-through' }}>De R$ {oldPrice}</span>
            <span style={{ fontFamily: 'var(--font-sans)', fontSize: isMobile ? 48 : 72, fontWeight: 800, letterSpacing: '-0.02em', color: '#fff' }}>R$ {price}</span>
            <span style={{ background: accentColor, color: '#1a1a1a', fontSize: 12, padding: '4px 8px', borderRadius: 4, fontWeight: 700 }}>−{desc}%</span>
          </div>
          <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.75)', marginTop: 8 }}>
            ou <strong style={{ color: '#fff' }}>12× de R$ {parc}</strong> sem juros
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 10, marginTop: 22 }}>
            {[
              '✅ Frete grátis para todo Brasil',
              '✅ Envio em até 24h',
              '✅ 7 dias de garantia da loja',
              '✅ Controle remoto incluso',
            ].map((t,i) => <div key={i} style={{ fontSize: isMobile ? 13 : 14, color: 'rgba(255,255,255,0.85)' }}>{t}</div>)}
          </div>
          <button style={{
            width: '100%',
            marginTop: 28,
            padding: isMobile ? 18 : 22,
            background: accentColor,
            color: '#1a1a1a',
            fontWeight: 700,
            fontSize: isMobile ? 15 : 17,
            border: 0,
            borderRadius: 999,
            cursor: 'pointer',
          }} onClick={() => window.location.href = '/checkout/checkout.html'}>{ctaLabel} →</button>
        </div>
      </div>
    </section>
  );

  // ============== SECTION 14: GARANTIA ==============
  const Trust = () => (
    <section style={{ padding: isMobile ? '48px 24px' : '80px 60px', background: 'var(--bg-cream)' }}>
      <div style={{ textAlign: 'center', maxWidth: 700, margin: '0 auto 32px' }}>
        <h3 style={{
          fontFamily: 'var(--font-display)',
          fontSize: isMobile ? 24 : 36,
          fontWeight: 500,
          lineHeight: 1.1,
          letterSpacing: '-0.02em',
          margin: 0,
        }}>
          Compra 100% segura ou seu dinheiro de volta.
        </h3>
      </div>
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(5, 1fr)',
        gap: isMobile ? 12 : 16,
        maxWidth: 1100,
        margin: '0 auto',
      }}>
        {[
          ['🛡️', 'Garantia 7 dias', 'Devolvemos seu dinheiro'],
          ['🔐', '100% Seguro', 'Pagamento criptografado'],
          ['📦', 'Envio rastreado', 'Acompanhe pelo código'],
          ['💬', 'Suporte humano', 'WhatsApp direto'],
          ['💳', 'Parcelamento', 'Em até 12× no cartão'],
        ].map(([i,t,d],k) => (
          <div key={k} style={{ background: '#fff', padding: isMobile ? 16 : 22, borderRadius: 12, border: '1px solid var(--line)', textAlign: 'center' }}>
            <div style={{ fontSize: isMobile ? 24 : 32 }}>{i}</div>
            <div style={{ fontWeight: 700, fontSize: isMobile ? 12.5 : 14, marginTop: 8 }}>{t}</div>
            <div style={{ color: 'var(--ink-3)', fontSize: isMobile ? 11 : 12, marginTop: 4, lineHeight: 1.4 }}>{d}</div>
          </div>
        ))}
      </div>
    </section>
  );

  const Footer = () => (
    <footer style={{ background: '#0d0d0d', color: '#fff' }}>
      {/* Newsletter / CTA final */}
      <div style={{
        background: '#1a1a1a',
        padding: isMobile ? '36px 24px' : '56px 60px',
        borderBottom: '1px solid #2a2a2a',
      }}>
        <div style={{
          display: isMobile ? 'block' : 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 40,
          maxWidth: 1300,
          margin: '0 auto',
        }}>
          <div>
            <h3 style={{
              fontFamily: 'var(--font-display)',
              fontSize: isMobile ? 22 : 30,
              fontWeight: 500,
              margin: 0,
              letterSpacing: '-0.02em',
              color: '#fff',
            }}>
              Receba promoções exclusivas.
            </h3>
            <p style={{ color: 'rgba(255,255,255,0.55)', fontSize: 13.5, marginTop: 6 }}>
              5% de desconto na sua primeira compra quando você se cadastrar.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: isMobile ? 18 : 0, flexShrink: 0 }}>
            <input
              type="email"
              placeholder="seu@email.com"
              style={{
                padding: '12px 14px',
                background: 'rgba(255,255,255,0.06)',
                border: '1px solid rgba(255,255,255,0.15)',
                borderRadius: 8,
                color: '#fff',
                fontSize: 13.5,
                minWidth: isMobile ? 0 : 280,
                flex: isMobile ? 1 : 'initial',
                outline: 'none',
              }}
            />
            <button style={{
              padding: '12px 18px',
              background: accentColor,
              color: '#1a1a1a',
              border: 0,
              borderRadius: 8,
              fontWeight: 700,
              fontSize: 13.5,
              cursor: 'pointer',
              whiteSpace: 'nowrap',
            }}>Cadastrar</button>
          </div>
        </div>
      </div>

      {/* Grid de links */}
      <div style={{
        padding: isMobile ? '36px 24px 24px' : '60px 60px 32px',
        maxWidth: 1300,
        margin: '0 auto',
      }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr 1fr' : '1.4fr 1fr 1fr 1.2fr',
          gap: isMobile ? 28 : 40,
        }}>
          {/* Coluna 1: Marca */}
          <div style={{ gridColumn: isMobile ? 'span 2' : 'auto' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <Logo />
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600 }}>{brandName}</span>
            </div>
            <p style={{ color: 'rgba(255,255,255,0.55)', fontSize: 13.5, lineHeight: 1.6, marginTop: 14, maxWidth: 320 }}>
              Casa iluminada, ar fresco, sem obra. Transformamos qualquer soquete em ventilação + luz LED.
            </p>
          </div>

          {/* Coluna 2: Loja */}
          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', fontWeight: 700, marginBottom: 14 }}>Loja</div>
            {['Produto', 'Como instalar', 'Avaliações', 'Blog', 'Revendedores'].map((t,i) => (
              <a key={i} style={{ display: 'block', color: 'rgba(255,255,255,0.75)', fontSize: 13.5, padding: '5px 0', cursor: 'pointer' }}>{t}</a>
            ))}
          </div>

          {/* Coluna 3: Suporte */}
          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', fontWeight: 700, marginBottom: 14 }}>Suporte</div>
            {[
              'Central de ajuda',
              'Rastrear pedido',
              'Trocas e devoluções',
              'Garantia',
              'Fale conosco',
            ].map((t,i) => (
              <a key={i} style={{ display: 'block', color: 'rgba(255,255,255,0.75)', fontSize: 13.5, padding: '5px 0', cursor: 'pointer' }}>{t}</a>
            ))}
          </div>

          {/* Coluna 4: Contato */}
          <div style={{ gridColumn: isMobile ? 'span 2' : 'auto' }}>
            <div style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', fontWeight: 700, marginBottom: 14 }}>Contato</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div>
                <div style={{ fontSize: 11.5, color: 'rgba(255,255,255,0.45)', marginBottom: 2 }}>WhatsApp · Seg a Sex · 9h–18h</div>
                <a style={{ color: '#fff', fontSize: 14, fontWeight: 600 }}>(11) 9 8765-4321</a>
              </div>
              <div>
                <div style={{ fontSize: 11.5, color: 'rgba(255,255,255,0.45)', marginBottom: 2 }}>E-mail</div>
                <a style={{ color: '#fff', fontSize: 14, fontWeight: 600 }}>contato@airlumi.com.br</a>
              </div>
              <div>
                <div style={{ fontSize: 11.5, color: 'rgba(255,255,255,0.45)', marginBottom: 2 }}>Endereço</div>
                <div style={{ color: 'rgba(255,255,255,0.85)', fontSize: 13.5, lineHeight: 1.55 }}>
                  Av. Paulista, 1.000 · 10º andar<br/>
                  Bela Vista · São Paulo/SP<br/>
                  CEP 01310-100
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Selos de pagamento + segurança */}
        <div style={{
          marginTop: isMobile ? 32 : 48,
          paddingTop: 24,
          borderTop: '1px solid rgba(255,255,255,0.08)',
          display: isMobile ? 'block' : 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          gap: 20,
        }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', fontWeight: 700, marginBottom: 10 }}>Formas de pagamento</div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {/* Pix */}
              <div style={{ width: 44, height: 30, background: '#fff', borderRadius: 5, display: 'grid', placeItems: 'center' }}>
                <svg width="22" height="22" viewBox="0 0 32 32"><path fill="#32BCAD" d="M21.3 20.7a3.2 3.2 0 0 1-2.3-.9l-3.3-3.3a.6.6 0 0 0-.9 0l-3.3 3.3a3.2 3.2 0 0 1-2.3.9H8.6l4.2 4.2a3.3 3.3 0 0 0 4.6 0l4.2-4.2h-.3zM8.6 11.3a3.2 3.2 0 0 1 2.3 1l3.3 3.3a.6.6 0 0 0 .9 0l3.3-3.3a3.2 3.2 0 0 1 2.3-1h.3L16.7 7a3.3 3.3 0 0 0-4.6 0l-4.2 4.3h.7zm16.1 2.4-2.5-2.5h-1.3a2.2 2.2 0 0 0-1.6.7l-3.3 3.3a1.6 1.6 0 0 1-2.3 0l-3.3-3.3a2.2 2.2 0 0 0-1.6-.7H7.3l-2.5 2.5a3.3 3.3 0 0 0 0 4.6l2.5 2.5H8.8a2.2 2.2 0 0 0 1.6-.7l3.3-3.3a1.7 1.7 0 0 1 2.3 0l3.3 3.3a2.2 2.2 0 0 0 1.6.7h1.3l2.5-2.5a3.3 3.3 0 0 0 0-4.6z"/></svg>
              </div>
              {/* Visa */}
              <div style={{ width: 44, height: 30, background: '#fff', borderRadius: 5, display: 'grid', placeItems: 'center', fontFamily: 'Georgia, serif', fontWeight: 900, fontSize: 13, color: '#1A1F71', letterSpacing: '-0.5px', fontStyle: 'italic' }}>VISA</div>
              {/* Mastercard */}
              <div style={{ width: 44, height: 30, background: '#fff', borderRadius: 5, display: 'grid', placeItems: 'center' }}>
                <svg width="32" height="20" viewBox="0 0 32 20"><circle cx="12" cy="10" r="8" fill="#EB001B"/><circle cx="20" cy="10" r="8" fill="#F79E1B"/><path fill="#FF5F00" d="M16 4.2A8 8 0 0 1 16 15.8 8 8 0 0 1 16 4.2z"/></svg>
              </div>
              {/* Elo */}
              <div style={{ width: 44, height: 30, background: '#000', borderRadius: 5, display: 'grid', placeItems: 'center' }}>
                <svg width="30" height="14" viewBox="0 0 60 24"><circle cx="22" cy="12" r="10" fill="none" stroke="#fff" strokeWidth="2.5"/><circle cx="22" cy="12" r="4" fill="#FFE600"/><text x="34" y="16" fontFamily="Arial Black" fontSize="11" fontWeight="900" fill="#fff">elo</text></svg>
              </div>
              {/* Amex */}
              <div style={{ width: 44, height: 30, background: '#006FCF', borderRadius: 5, display: 'grid', placeItems: 'center', fontFamily: 'Arial, sans-serif', fontWeight: 900, fontSize: 8, color: '#fff', letterSpacing: '0.3px', textAlign: 'center', lineHeight: 1 }}>AMERICAN<br/>EXPRESS</div>
              {/* Boleto */}
              <div style={{ width: 44, height: 30, background: '#fff', borderRadius: 5, display: 'grid', placeItems: 'center' }}>
                <svg width="28" height="18" viewBox="0 0 28 18"><rect x="0" y="2" width="2" height="14" fill="#1a1a1a"/><rect x="3" y="2" width="1" height="14" fill="#1a1a1a"/><rect x="5" y="2" width="3" height="14" fill="#1a1a1a"/><rect x="9" y="2" width="1" height="14" fill="#1a1a1a"/><rect x="11" y="2" width="2" height="14" fill="#1a1a1a"/><rect x="14" y="2" width="1" height="14" fill="#1a1a1a"/><rect x="16" y="2" width="3" height="14" fill="#1a1a1a"/><rect x="20" y="2" width="1" height="14" fill="#1a1a1a"/><rect x="22" y="2" width="2" height="14" fill="#1a1a1a"/><rect x="25" y="2" width="1" height="14" fill="#1a1a1a"/></svg>
              </div>
            </div>
          </div>
          <div style={{ marginTop: isMobile ? 24 : 0 }}>
            <div style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', fontWeight: 700, marginBottom: 10 }}>Compra segura</div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {/* SSL */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, background: 'rgba(34, 197, 94, 0.12)', border: '1px solid rgba(34, 197, 94, 0.3)', padding: '6px 10px', borderRadius: 6 }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2.5"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                <span style={{ color: '#86efac', fontSize: 11.5, fontWeight: 600 }}>SSL 256-bit</span>
              </div>
              {/* Site blindado */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, background: 'rgba(59, 130, 246, 0.12)', border: '1px solid rgba(59, 130, 246, 0.3)', padding: '6px 10px', borderRadius: 6 }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="#3b82f6" stroke="#3b82f6" strokeWidth="1"><path d="M12 2 4 5v6c0 5 3.4 9.6 8 11 4.6-1.4 8-6 8-11V5l-8-3z"/><path d="M9 12l2 2 4-4" stroke="#fff" strokeWidth="2" fill="none"/></svg>
                <span style={{ color: '#93c5fd', fontSize: 11.5, fontWeight: 600 }}>Site blindado</span>
              </div>
              {/* Reclame Aqui */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, background: 'rgba(16, 185, 129, 0.12)', border: '1px solid rgba(16, 185, 129, 0.3)', padding: '6px 10px', borderRadius: 6 }}>
                <div style={{ width: 14, height: 14, borderRadius: 999, background: '#10b981', display: 'grid', placeItems: 'center' }}>
                  <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="4"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <span style={{ color: '#6ee7b7', fontSize: 11.5, fontWeight: 600 }}>RA1000</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Barra legal */}
      <div style={{
        background: '#080808',
        padding: isMobile ? '22px 24px' : '24px 60px',
        borderTop: '1px solid rgba(255,255,255,0.06)',
      }}>
        <div style={{
          maxWidth: 1300,
          margin: '0 auto',
          display: isMobile ? 'block' : 'flex',
          justifyContent: 'space-between',
          gap: 20,
          alignItems: 'center',
          fontSize: 11.5,
          color: 'rgba(255,255,255,0.45)',
          lineHeight: 1.6,
        }}>
          <div>
            © 2026 {brandName} Comércio Eletrônico LTDA · CNPJ 42.518.937/0001-05<br/>
            Todos os direitos reservados · Preços e estoque sujeitos a alteração sem aviso prévio.
          </div>
          <div style={{ display: 'flex', gap: 18, marginTop: isMobile ? 14 : 0, flexWrap: 'wrap' }}>
            <a style={{ color: 'rgba(255,255,255,0.7)', cursor: 'pointer' }}>Política de Privacidade</a>
            <a style={{ color: 'rgba(255,255,255,0.7)', cursor: 'pointer' }}>Termos de Uso</a>
            <a style={{ color: 'rgba(255,255,255,0.7)', cursor: 'pointer' }}>Trocas e Devoluções</a>
          </div>
        </div>
      </div>
    </footer>
  );

  return (
    <div className={isMobile ? 'frame-mobile' : 'frame-desktop'} style={{ background: '#fff' }}>
      <Header />
      <HeroPDP />
      <Pain />
      <Reveal />
      <Savings />
      <Numbers />
      <Compare />
      <Rooms />
      <Ventilation />
      <Lighting />
      <Install />
      <Remote />
      <Social />
      <Specs />
      <FaqSec />
      <FinalOffer />
      <Trust />
      <Footer />
    </div>
  );
};

window.V3Desktop = (props) => <V3 {...props} isMobile={false} />;
window.V3Mobile = (props) => <V3 {...props} isMobile={true} />;