/* ── Vitrium Óticas — Home Page Sections ─────────────────────── */

/* ── Hero Visual (right side) — conteúdo por slide ─────────── */
const HeroVisual = ({ slideIdx, isDark }) => {
  const gold = C.gold;
  const stroke = isDark ? gold : C.darkBrown;
  const wordColor = isDark ? gold : C.darkBrown;
  const subColor = isDark ? 'rgba(207,184,152,0.7)' : 'rgba(127,91,40,0.6)';

  /* Slide 0 — Ver com Confiança: logo Vitrium vertical + óculos oval */
  const verticalLogoSrc = isDark
    ? 'assets/logos/marcas/vitrium-vertical-dourado-branco.webp'
    : 'assets/logos/marcas/vitrium-vertical-dourado.webp';
  const slide0 = (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20 }}>
      <img src={verticalLogoSrc} alt="Vitrium Óticas" style={{ height: 180, width: 'auto' }} />
      <svg width="230" height="92" viewBox="0 0 230 92" fill="none">
        <ellipse cx="52" cy="46" rx="46" ry="32" stroke={stroke} strokeWidth="2.4" fill="rgba(214,170,109,0.07)"/>
        <ellipse cx="178" cy="46" rx="46" ry="32" stroke={stroke} strokeWidth="2.4" fill="rgba(214,170,109,0.07)"/>
        <line x1="98" y1="46" x2="132" y2="46" stroke={stroke} strokeWidth="2.4"/>
        <line x1="6" y1="34" x2="0" y2="16" stroke={stroke} strokeWidth="2" strokeLinecap="round"/>
        <line x1="224" y1="34" x2="230" y2="16" stroke={stroke} strokeWidth="2" strokeLinecap="round"/>
      </svg>
    </div>
  );

  /* Slide 1 — Óculos de Sol: ilustração solar (sem logo, sem óculos) */
  const slide1 = (
    <svg width="300" height="300" viewBox="0 0 300 300" fill="none">
      {/* Sol com raios */}
      {Array.from({ length: 16 }, (_, i) => {
        const a = (i / 16) * Math.PI * 2;
        const r1 = i % 2 === 0 ? 82 : 72, r2 = i % 2 === 0 ? 108 : 95;
        return <line key={i} x1={150 + r1 * Math.cos(a)} y1={150 + r1 * Math.sin(a)} x2={150 + r2 * Math.cos(a)} y2={150 + r2 * Math.sin(a)} stroke="white" strokeWidth={i % 2 === 0 ? 2.5 : 1.5} strokeLinecap="round" opacity={i % 2 === 0 ? 0.55 : 0.35}/>;
      })}
      <circle cx="150" cy="150" r="62" stroke="white" strokeWidth="2" fill="rgba(255,255,255,0.06)" opacity="0.5"/>
      <circle cx="150" cy="150" r="42" fill="rgba(255,255,255,0.1)" stroke="white" strokeWidth="1.5" opacity="0.45"/>
      <circle cx="150" cy="150" r="18" fill="rgba(255,255,255,0.18)" opacity="0.7"/>
      {/* UV400 label */}
      <text x="150" y="244" textAnchor="middle" fontFamily="'Jost', sans-serif" fontSize="12" fill="white" opacity="0.5" letterSpacing="4">UV400</text>
    </svg>
  );

  /* Slide 2 — Precisão: logo Vitrium vertical + anéis de lente elegantes */
  const slide2 = (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18 }}>
      <img src={verticalLogoSrc} alt="Vitrium Óticas" style={{ height: 170, width: 'auto' }} />
      <svg width="200" height="160" viewBox="0 0 200 160" fill="none">
        {[68,52,38,24,12].map((r, i) => (
          <circle key={i} cx="100" cy="80" r={r} stroke={stroke} strokeWidth={i === 0 ? 1.6 : 0.9} opacity={0.15 + i * 0.1}/>
        ))}
        <circle cx="100" cy="80" r="5" fill={stroke} opacity="0.35"/>
        <line x1="100" y1="10" x2="100" y2="150" stroke={stroke} strokeWidth="0.6" opacity="0.15"/>
        <line x1="30" y1="80" x2="170" y2="80" stroke={stroke} strokeWidth="0.6" opacity="0.15"/>
        <text x="100" y="148" textAnchor="middle" fontFamily="'Jost', sans-serif" fontSize="8" fill={stroke} opacity="0.4" letterSpacing="4">PRECISION LENS</text>
      </svg>
    </div>
  );

  /* Slide 3 — Promoções: óculos em destaque com badge de desconto */
  const slide3 = (
    <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20 }}>
      <svg width="260" height="110" viewBox="0 0 260 110" fill="none">
        <rect x="4" y="18" width="104" height="70" rx="8" stroke="white" strokeWidth="3" fill="rgba(255,255,255,0.08)"/>
        <rect x="152" y="18" width="104" height="70" rx="8" stroke="white" strokeWidth="3" fill="rgba(255,255,255,0.08)"/>
        <line x1="108" y1="53" x2="152" y2="53" stroke="white" strokeWidth="3"/>
        <line x1="4" y1="38" x2="0" y2="16" stroke="white" strokeWidth="2.5" strokeLinecap="round"/>
        <line x1="256" y1="38" x2="260" y2="16" stroke="white" strokeWidth="2.5" strokeLinecap="round"/>
      </svg>
      {/* Badge de desconto */}
      <div style={{ background: C.gold, color: C.charcoal, fontFamily: 'var(--font-ui)', fontSize: 13, fontWeight: 800, letterSpacing: '0.06em', padding: '8px 24px', borderRadius: 6 }}>
        30% OFF
      </div>
      <img src="assets/logos/marcas/vitrium-horizontal-dourado-branco.webp" alt="Vitrium Óticas" style={{ height: 56, width: 'auto' }} />
    </div>
  );

  const visuals = [slide0, slide1, slide2, slide3];
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', filter: 'drop-shadow(0 4px 24px rgba(0,0,0,0.15))' }}>
      {visuals[slideIdx % 4]}
    </div>
  );
};

/* ── Hero Carousel ────────────────────────────────────────────── */
const HERO_INTERVAL_MS = 7000;

const HeroCarousel = ({ setPage }) => {
  const [active, setActive] = useState(0);
  const [transitioning, setTransitioning] = useState(false);
  /* UX: auto-rotate pausa em hover (transient) ou após interação do usuário (sticky).
     Veja chat/brief/20260511-1500-BRIEF-carrossel-ux-eval.md */
  const [hovered, setHovered] = useState(false);
  const [userPaused, setUserPaused] = useState(false);
  const timerRef = useRef(null);

  const slides = [
    {
      headline: 'Ver com\nConfiança.',
      sub: 'Óculos completo (armação + lente) a partir de R$ 390. Tecnologia óptica e elegância em Bacaxá, Saquarema.',
      cta: 'Ver Coleções',
      ctaPage: 'grau',
      cta2: 'Sobre a Vitrium',
      cta2Page: 'sobre',
      bg: `linear-gradient(120deg, #2C2416 0%, #4A3520 55%, #7F5B28 100%)`,
      accent: C.gold,
      eyebrow: 'Coleção 2026 · Saquarema – RJ',
    },
    {
      headline: 'Óculos de Sol\nPara Cada\nMomento.',
      sub: 'Modelos sofisticados com proteção UV400. Das praias de Saquarema aos encontros mais elegantes.',
      cta: 'Ver Óculos de Sol',
      ctaPage: 'sol',
      cta2: 'Saiba Mais',
      cta2Page: 'sobre',
      bg: `linear-gradient(125deg, #5C3A10 0%, #8B5A20 45%, #C49A5A 100%)`,
      accent: C.goldLight,
      eyebrow: 'Proteção UV400 · Estilo & Conforto',
    },
    {
      headline: 'Precisão em\nCada Detalhe.',
      sub: 'Lentes de alta tecnologia das melhores marcas: Augen, Varilux, Zeiss e Hoya. Perfeitas para a sua visão.',
      cta: 'Ver Óculos de Grau',
      ctaPage: 'grau',
      cta2: 'Agendar Exame',
      cta2Url: 'https://wa.me/5522996246783?text=Ol%C3%A1%2C%20gostaria%20de%20mais%20informa%C3%A7%C3%B5es%20para%20agendar%20um%20exame%20de%20vista.',
      bg: `linear-gradient(115deg, #E8E4DE 0%, #D4C8B8 40%, #CFB898 100%)`,
      accent: C.darkBrown,
      eyebrow: 'Augen · Varilux · Zeiss · Hoya',
      dark: false,
    },
    {
      headline: 'Lentes 2x1\nAugen.',
      sub: 'Na compra de uma lente Augen, leve a segunda de graça. Promoção exclusiva por tempo limitado.',
      cta: 'Quero aproveitar',
      ctaUrl: 'https://wa.me/5522996246783?text=Ol%C3%A1%20time%20Vitrium%2C%20gostaria%20de%20saber%20mais%20sobre%20a%20promo%C3%A7%C3%A3o%202x1%20das%20lentes%20Augen.',
      cta2: 'Ver Coleções',
      cta2Page: 'grau',
      bg: `linear-gradient(120deg, #3D2008 0%, #6B3A10 50%, #9E6030 100%)`,
      accent: C.gold,
      eyebrow: 'Promoção 2x1 · Augen',
    },
    {
      headline: 'Mês de\nAniversário.',
      sub: 'Já é cliente Vitrium? Ganhe 15% de desconto em qualquer óculos completo no mês do seu aniversário.',
      cta: 'Resgatar 15%',
      ctaUrl: 'https://wa.me/5522996246783?text=Ol%C3%A1%20time%20Vitrium%2C%20%C3%A9%20meu%20m%C3%AAs%20de%20anivers%C3%A1rio%20e%20queria%20aproveitar%20o%20desconto%20de%2015%25.',
      cta2: 'Sobre a Vitrium',
      cta2Page: 'sobre',
      bg: `linear-gradient(125deg, #1F1808 0%, #4A2E10 50%, #7F5B28 100%)`,
      accent: C.goldLight,
      eyebrow: 'Clientes Vitrium · Aniversário',
    },
  ];

  const goTo = useCallback((idx, { userInitiated = false } = {}) => {
    if (transitioning) return;
    if (userInitiated) setUserPaused(true);
    setTransitioning(true);
    setTimeout(() => {
      setActive(idx);
      setTransitioning(false);
    }, 350);
  }, [transitioning]);

  useEffect(() => {
    if (hovered || userPaused) return;
    timerRef.current = setInterval(() => {
      setActive(prev => (prev + 1) % slides.length);
    }, HERO_INTERVAL_MS);
    return () => clearInterval(timerRef.current);
  }, [hovered, userPaused]);

  const slide = slides[active];
  const isDark = slide.dark !== false;

  const paused = hovered || userPaused;

  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{ position: 'relative', height: '94vh', minHeight: 560, overflow: 'hidden' }}
    >
      {/* Background */}
      <div style={{
        position: 'absolute', inset: 0,
        background: slide.bg,
        transition: 'background 0.8s ease',
      }} />

      {/* Subtle sunburst watermark — símbolo Vitrium isolado (oficial) */}
      <div style={{ position: 'absolute', right: '6%', top: '50%', transform: 'translateY(-50%)', opacity: 0.06, pointerEvents: 'none' }}>
        <img src={isDark ? 'assets/logos/marcas/vitrium-simbolo-dourado.webp' : 'assets/logos/marcas/vitrium-simbolo-marrom.webp'} alt="" aria-hidden="true" style={{ width: 500, height: 'auto', display: 'block' }} />
      </div>

      {/* Geometric line accent */}
      <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 4, background: C.gold, opacity: 0.6 }} />

      {/* Content */}
      <div data-vit="hero-row" style={{
        position: 'relative', height: '100%', display: 'flex', alignItems: 'center',
        maxWidth: 1200, margin: '0 auto', padding: '108px 32px 60px',
        opacity: transitioning ? 0 : 1,
        transform: transitioning ? 'translateY(8px)' : 'translateY(0)',
        transition: 'opacity 0.35s ease, transform 0.35s ease',
      }}>
        <div style={{ maxWidth: 560, flex: '0 0 auto' }}>
          <div style={{
            fontFamily: 'var(--font-ui)', fontSize: 10.5, letterSpacing: '0.22em',
            textTransform: 'uppercase',
            color: isDark ? C.gold : C.darkBrown,
            marginBottom: 22,
          }}>{slide.eyebrow}</div>

          <h1 style={{
            fontFamily: 'var(--font-display)',
            fontSize: 'clamp(44px, 4vw, 68px)',
            fontWeight: 600,
            lineHeight: 1.06,
            letterSpacing: '0.02em',
            color: isDark ? C.white : C.charcoal,
            marginBottom: 24,
            whiteSpace: 'pre-line',
          }}>{slide.headline}</h1>

          <p style={{
            fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.7,
            color: isDark ? 'rgba(245,241,235,0.72)' : 'rgba(44,36,22,0.68)',
            marginBottom: 38, maxWidth: 460,
          }}>{slide.sub}</p>

          <div style={{ display: 'flex', gap: 14 }}>
            <Btn variant="primary" size="lg" onClick={() => { setUserPaused(true); slide.ctaUrl ? window.open(slide.ctaUrl, '_blank') : setPage(slide.ctaPage); }}>{slide.cta}</Btn>
            <Btn variant={isDark ? 'ghost' : 'outline'} size="lg" onClick={() => { setUserPaused(true); slide.cta2Url ? window.open(slide.cta2Url, '_blank') : setPage(slide.cta2Page); }}>{slide.cta2}</Btn>
          </div>
        </div>

        {/* Right visual */}
        <div data-vit="hero-visual" style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', paddingLeft: 60 }}>
          <HeroVisual slideIdx={active} isDark={isDark} />
        </div>
      </div>

      {/* Slide dots + pause indicator */}
      <div style={{ position: 'absolute', bottom: 36, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 10, alignItems: 'center' }}>
        {slides.map((_, i) => (
          <button key={i} aria-label={`Ir para slide ${i + 1}`} aria-current={i === active ? 'true' : undefined} onClick={() => goTo(i, { userInitiated: true })} style={{
            width: i === active ? 28 : 8, height: 8,
            borderRadius: 4, border: 'none', cursor: 'pointer',
            background: i === active ? C.gold : 'rgba(255,255,255,0.3)',
            transition: 'all 0.3s ease', padding: 0,
          }} />
        ))}
        {userPaused && (
          <button
            type="button"
            onClick={() => setUserPaused(false)}
            aria-label="Retomar rotação automática do carrossel"
            title="Retomar rotação"
            style={{
              marginLeft: 10, fontFamily: 'var(--font-ui)', fontSize: 9, letterSpacing: '0.18em',
              textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)',
              display: 'inline-flex', alignItems: 'center', gap: 5,
              padding: '4px 8px', borderRadius: 4,
              background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)',
              cursor: 'pointer', transition: 'all 0.2s',
            }}
            onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.12)'; e.currentTarget.style.color = 'rgba(255,255,255,0.85)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.06)'; e.currentTarget.style.color = 'rgba(255,255,255,0.55)'; }}
          >
            <svg width="9" height="10" viewBox="0 0 10 10" fill="currentColor" aria-hidden="true"><polygon points="2,1 9,5 2,9"/></svg>
            retomar
          </button>
        )}
      </div>

      {/* Progress bar — anima só quando rolando; pausa quando hover/click */}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 2, background: 'rgba(255,255,255,0.1)' }}>
        <div key={`${active}-${paused ? 'p' : 'r'}`} style={{
          height: '100%', background: C.gold,
          animation: paused ? 'none' : `heroProgress ${HERO_INTERVAL_MS}ms linear forwards`,
          width: paused ? 0 : undefined,
        }} />
      </div>
    </div>
  );
};

/* ── Product Cards ────────────────────────────────────────────── */
const GlassesFrame = ({ style = 'rect', color = C.warmBrown }) => {
  const frames = {
    rect: (
      <svg width="130" height="56" viewBox="0 0 130 56" fill="none">
        <rect x="2" y="12" width="52" height="32" rx="8" stroke={color} strokeWidth="2"/>
        <rect x="76" y="12" width="52" height="32" rx="8" stroke={color} strokeWidth="2"/>
        <line x1="54" y1="28" x2="76" y2="28" stroke={color} strokeWidth="2"/>
        <line x1="2" y1="20" x2="0" y2="8" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
        <line x1="128" y1="20" x2="130" y2="8" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
      </svg>
    ),
    oval: (
      <svg width="130" height="56" viewBox="0 0 130 56" fill="none">
        <ellipse cx="30" cy="28" rx="26" ry="18" stroke={color} strokeWidth="2"/>
        <ellipse cx="100" cy="28" rx="26" ry="18" stroke={color} strokeWidth="2"/>
        <line x1="56" y1="28" x2="74" y2="28" stroke={color} strokeWidth="2"/>
        <line x1="4" y1="20" x2="0" y2="10" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
        <line x1="126" y1="20" x2="130" y2="10" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
      </svg>
    ),
    cat: (
      <svg width="130" height="56" viewBox="0 0 130 56" fill="none">
        <path d="M2 32 Q4 12 28 10 Q52 8 54 28 Q52 38 28 40 Q4 40 2 32Z" stroke={color} strokeWidth="2" fill="none"/>
        <path d="M76 32 Q78 12 102 10 Q126 8 128 28 Q126 38 102 40 Q78 40 76 32Z" stroke={color} strokeWidth="2" fill="none"/>
        <line x1="54" y1="28" x2="76" y2="28" stroke={color} strokeWidth="2"/>
        <line x1="2" y1="22" x2="0" y2="10" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
        <line x1="128" y1="22" x2="130" y2="10" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
      </svg>
    ),
  };
  return frames[style] || frames.rect;
};

const ProductHomeCard = ({ title, sub, price, priceLabel = 'A partir de', desc, dark, setPage, pageKey, frameStyle }) => {
  const [hov, setHov] = useState(false);
  return (
    <div onClick={() => setPage(pageKey)}
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        flex: 1, background: dark ? C.charcoal : C.white, borderRadius: 12,
        overflow: 'hidden', cursor: 'pointer',
        boxShadow: hov ? '0 12px 36px rgba(127,91,40,0.18)' : '0 2px 16px rgba(127,91,40,0.08)',
        transform: hov ? 'translateY(-5px)' : 'none',
        transition: 'all 0.3s ease',
      }}>
      <div style={{
        height: 220, display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: dark ? '#3A2810' : C.creamLight,
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ transform: hov ? 'scale(1.06)' : 'scale(1)', transition: 'transform 0.4s ease' }}>
          <GlassesFrame style={frameStyle} color={dark ? C.gold : C.warmBrown} />
        </div>
      </div>
      <div style={{ padding: '26px 28px' }}>
        <div style={{ fontFamily: 'var(--font-ui)', fontSize: 9.5, fontWeight: 600, letterSpacing: '0.2em', textTransform: 'uppercase', color: C.gold, marginBottom: 8 }}>{sub}</div>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, color: dark ? C.white : C.charcoal, marginBottom: 8 }}>{title}</h3>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: dark ? 'rgba(207,184,152,0.7)' : C.warmBrown, lineHeight: 1.6, marginBottom: 18 }}>
          {desc ?? (dark ? 'Modelos elegantes com proteção UV400 para todos os estilos.' : 'Armações em acetato e metal, dos clássicos aos contemporâneos.')}
        </p>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontFamily: 'var(--font-ui)', fontSize: 18, fontWeight: 700, color: dark ? C.goldLight : C.darkBrown }}>{priceLabel} {price}</div>
          <Btn variant={dark ? 'primary' : 'outline'} size="sm">Saiba mais</Btn>
        </div>
      </div>
    </div>
  );
};

/* ── Promos Section ───────────────────────────────────────────── */
const PromoSection = ({ setPage }) => {
  const promos = [
    { tag: 'Promoção', title: 'Armação + Lente Vitrium', desc: 'Combo armações Vitrium e lentes simples por apenas R$ 390.', badge: 'R$ 390', bg: C.charcoal, light: true, waUrl: 'https://wa.me/5522996246783?text=Ol%C3%A1%20time%20Vitrium%2C%20gostaria%20de%20saber%20mais%20sobre%20o%20combo%20de%20R%24%20390.' },
    { tag: 'Novidade', title: 'Coleção Vitrium 2026', desc: 'Os ícones chegaram. Conheça nossos modelos da coleção 2026.', badge: 'Novo', bg: C.white, light: false, waUrl: 'https://wa.me/5522996246783?text=Ol%C3%A1%20time%20Vitrium%2C%20gostaria%20de%20ver%20modelos%20da%20cole%C3%A7%C3%A3o%20Vitrium%202026.' },
    { tag: 'Destaque', title: 'Lentes 2x1', desc: 'Na compra de uma lente, leve o segundo par de graça. Saiba mais.', badge: 'Exclusivo', bg: C.cream, light: false, waUrl: 'https://wa.me/5522996246783?text=Ol%C3%A1%20time%20Vitrium%2C%20gostaria%20de%20saber%20mais%20sobre%20a%20promo%C3%A7%C3%A3o%20do%20segundo%20par%20de%20lentes.' },
  ];
  return (
    <section data-vit="section-pad" style={{ background: C.creamLight, padding: '80px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div data-vit="section-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40 }}>
          <div>
            <div style={{ fontFamily: 'var(--font-ui)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: C.gold, marginBottom: 10 }}>Ofertas especiais</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 38, fontWeight: 600, color: C.charcoal, letterSpacing: '0.02em' }}>Promoções em Destaque</h2>
          </div>
          <Btn variant="outline" onClick={() => setPage('grau')}>Ver todos os produtos</Btn>
        </div>
        <div data-vit="grid-3" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24 }}>
          {promos.map((p, i) => (
            <div key={i} style={{
              background: p.bg, borderRadius: 12,
              border: `1px solid rgba(207,184,152,0.25)`,
              padding: '32px 28px',
              boxShadow: '0 2px 12px rgba(127,91,40,0.07)',
              position: 'relative', overflow: 'hidden',
              cursor: 'pointer', transition: 'transform 0.25s, box-shadow 0.25s',
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(127,91,40,0.14)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = '0 2px 12px rgba(127,91,40,0.07)'; }}>
              <div style={{ position: 'absolute', top: 20, right: 20, background: C.gold, color: C.charcoal, fontFamily: 'var(--font-ui)', fontSize: 10.5, fontWeight: 700, letterSpacing: '0.06em', padding: '4px 12px', borderRadius: 4 }}>{p.badge}</div>
              <div style={{ fontFamily: 'var(--font-ui)', fontSize: 9.5, letterSpacing: '0.2em', textTransform: 'uppercase', color: C.gold, marginBottom: 12 }}>{p.tag}</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, color: p.light ? C.white : C.charcoal, marginBottom: 12 }}>{p.title}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: p.light ? 'rgba(207,184,152,0.75)' : C.warmBrown, lineHeight: 1.65 }}>{p.desc}</p>
              <div style={{ marginTop: 22 }}>
                <Btn variant={p.light ? 'primary' : 'outline'} size="sm" onClick={() => window.open(p.waUrl, '_blank')}>Saiba mais</Btn>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ── Brand Marquee ────────────────────────────────────────────── */
const BrandLogo = ({ name, logoSrc }) => {
  const textStyle = {
    fontFamily: 'var(--font-ui)', fontWeight: 600, color: C.warmBrown,
    letterSpacing: '0.04em', opacity: 0.65, whiteSpace: 'nowrap',
    display: 'flex', alignItems: 'center', gap: 6,
  };
  const special = {
    'Vitrium': { fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 600, letterSpacing: '0.18em' },
    'Calvin Klein': { fontFamily: 'var(--font-ui)', fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase' },
    'Ana Hickmann': { fontFamily: 'Georgia, serif', fontSize: 14, fontStyle: 'italic', letterSpacing: '0.04em' },
    'Lacoste': { fontFamily: 'var(--font-ui)', fontSize: 13, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' },
    'Reserva': { fontFamily: 'var(--font-ui)', fontSize: 13, fontWeight: 600, letterSpacing: '0.06em' },
    'Speedo': { fontFamily: 'var(--font-ui)', fontSize: 13, fontWeight: 700, letterSpacing: '0.04em' },
    'Silmo Kids': { fontFamily: 'var(--font-ui)', fontSize: 12, fontWeight: 600, letterSpacing: '0.08em' },
    'ZEISS': { fontFamily: 'var(--font-ui)', fontSize: 14, fontWeight: 700, letterSpacing: '0.08em' },
    'HOYA': { fontFamily: 'var(--font-ui)', fontSize: 14, fontWeight: 700, letterSpacing: '0.06em' },
    'Varilux': { fontFamily: 'Georgia, serif', fontSize: 14, fontStyle: 'italic' },
    'Augen': { fontFamily: 'var(--font-ui)', fontSize: 13, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase' },
    'Acuvue 2': { fontFamily: 'var(--font-ui)', fontSize: 13, fontWeight: 700, letterSpacing: '0.04em' },
  };
  if (logoSrc) {
    // Logos wide (Nike, Speedo, Lacoste etc.) precisam altura menor pra não dominar.
    // Logos quadrados (Zeiss, Augen, Silmo Kids) ganham boost de altura pra ficar visível.
    // Default é altura 26 (referência Speedo). Override per-logo via tabela.
    const heightOverride = {
      'Nike': 22,
      'Lacoste': 36,           // crocodilo + texto vertical
      'Silmo Kids': 42,        // texto cursivo + KIDS empilhados
      'ZEISS': 42,             // escudo azul ≈ quadrado
      'Augen': 30,             // ícone triangular + texto
      'Vitrium': 28,
    };
    const h = heightOverride[name] || 26;
    return <img src={logoSrc} alt={name} loading="lazy" decoding="async" style={{ height: h, width: 'auto', maxWidth: 150, objectFit: 'contain' }} />;
  }
  return <span style={{ ...textStyle, fontSize: 13, ...(special[name] || {}) }}>{name}</span>;
};

const BrandMarquee = () => {
  const brands = [
    { name: 'Ana Hickmann', logoSrc: 'assets/logos/marcas/ana-hickmann.webp' },
    { name: 'Calvin Klein', logoSrc: 'assets/logos/marcas/calvin-klein.svg' },
    { name: 'Lacoste',      logoSrc: 'assets/logos/marcas/lacoste.webp' },
    { name: 'Nike',         logoSrc: 'assets/logos/marcas/nike.svg' },
    { name: 'Reserva' },
    { name: 'Speedo',       logoSrc: 'assets/logos/marcas/speedo.webp' },
    { name: 'Silmo Kids',   logoSrc: 'assets/logos/marcas/silmo-kids.webp' },
    { name: 'Augen',        logoSrc: 'assets/logos/laboratorios/augen.webp' },
    { name: 'Varilux',      logoSrc: 'assets/logos/laboratorios/varilux.webp' },
    { name: 'ZEISS',        logoSrc: 'assets/logos/laboratorios/zeiss.webp' },
    { name: 'HOYA',         logoSrc: 'assets/logos/laboratorios/hoya.webp' },
    { name: 'Acuvue 2',     logoSrc: 'assets/logos/lentes/johnson-johnson.webp' },
  ];
  const doubled = [...brands, ...brands];
  return (
    <div style={{ background: C.white, borderTop: `1px solid rgba(207,184,152,0.2)`, borderBottom: `1px solid rgba(207,184,152,0.2)`, padding: '24px 0', overflow: 'hidden' }}>
      <div style={{ fontFamily: 'var(--font-ui)', fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase', color: C.sand, textAlign: 'center', marginBottom: 16 }}>Marcas & Parceiros</div>
      <div style={{ overflow: 'hidden', position: 'relative' }}>
        <div style={{ display: 'flex', gap: 52, alignItems: 'center', animation: 'marquee 32s linear infinite', width: 'max-content' }}>
          {doubled.map((b, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center' }}>
              <BrandLogo name={b.name} logoSrc={b.logoSrc} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

/* ── Instagram Grid ───────────────────────────────────────────── */
const InstaPost = ({ src, alt }) => {
  const [hov, setHov] = useState(false);
  return (
    <a href="https://instagram.com/vitriumoticas" target="_blank" rel="noreferrer"
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ aspectRatio: '1', background: C.cream, borderRadius: 8, overflow: 'hidden', cursor: 'pointer', position: 'relative', transition: 'transform 0.25s', display: 'block' }}>
      <img src={src} alt={alt} loading="lazy" decoding="async" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transform: hov ? 'scale(1.04)' : 'scale(1)', transition: 'transform 0.45s ease' }} />
      <div style={{
        position: 'absolute', inset: 0, background: 'rgba(44,36,22,0.55)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        opacity: hov ? 1 : 0, transition: 'opacity 0.25s',
      }}>
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <rect x="2" y="2" width="20" height="20" rx="5"/>
          <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z"/>
          <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
        </svg>
      </div>
    </a>
  );
};

const InstagramSection = () => {
  const posts = [
    { src: 'assets/instagram/sunset-cristal.webp',    alt: 'Óculos Vitrium acetato cristal ao pôr do sol em Saquarema' },
    { src: 'assets/instagram/jardim-redondo.webp',    alt: 'Óculos Vitrium redondo cristal com listras vermelhas no jardim' },
    { src: 'assets/instagram/agua-peixes.webp',       alt: 'Óculos Vitrium tartaruga sobre água cristalina com peixes' },
    { src: 'assets/instagram/tronco-flores.webp',     alt: 'Óculos Vitrium acetato tartaruga em tronco com flores' },
    { src: 'assets/instagram/folhas-bege.webp',       alt: 'Óculos Vitrium acetato bege sobre folhas verdes' },
    { src: 'assets/instagram/sunset-cristal-02.webp', alt: 'Óculos Vitrium cristal e dourado na praia ao pôr do sol' },
  ];
  return (
    <section data-vit="section-pad" style={{ background: C.creamLight, padding: '80px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div data-vit="section-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 36 }}>
          <div>
            <div style={{ fontFamily: 'var(--font-ui)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: C.gold, marginBottom: 10 }}>Siga-nos</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 38, fontWeight: 600, color: C.charcoal }}>Nos siga nas redes sociais</h2>
          </div>
          <a href="https://instagram.com/vitriumoticas" target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
            <Btn variant="outline">Ver no Instagram</Btn>
          </a>
        </div>
        <div data-vit="grid-insta" style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12 }}>
          {posts.map((p, i) => <InstaPost key={i} src={p.src} alt={p.alt} />)}
        </div>
      </div>
    </section>
  );
};

/* ── Location & Contact ───────────────────────────────────────── */
const LocationSection = () => (
  <section data-vit="section-pad" style={{ background: C.charcoal, padding: '88px 32px' }}>
    <div data-vit="grid-2" style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
      <div>
        <div style={{ fontFamily: 'var(--font-ui)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: C.gold, marginBottom: 14 }}>Visite-nos</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 42, fontWeight: 600, color: C.white, marginBottom: 28, lineHeight: 1.1 }}>Venha nos conhecer pessoalmente.</h2>
        <div style={{ display: 'grid', gap: 22 }}>
          {[
            { icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>, label: 'Endereço', val: 'Rua Segisfredo Bravo, 105, Loja 04\nBacaxá, Saquarema – RJ\nCEP 28994-627' },
            { icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 01.04 1.18 2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z"/></svg>, label: 'Telefone', val: '(22) 99624-6783' },
            { icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>, label: 'Horário', val: 'Segunda a Sexta: 9h às 18h\nSábado: 9h às 13h' },
          ].map(({ icon, label, val }) => (
            <div key={label} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
              <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'rgba(214,170,109,0.12)', border: `1px solid rgba(214,170,109,0.2)`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.gold, flexShrink: 0 }}>{icon}</div>
              <div>
                <div style={{ fontFamily: 'var(--font-ui)', fontSize: 9.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.gold, marginBottom: 4 }}>{label}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'rgba(245,241,235,0.7)', lineHeight: 1.7, whiteSpace: 'pre-line' }}>{val}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 36 }}>
          <Btn variant="whatsapp" size="lg" onClick={() => window.open('https://wa.me/5522996246783?text=Ol%C3%A1%20time%20Vitrium%2C%20gostaria%20de%20falar%20com%20uma%20consultora.', '_blank')}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
            Fale conosco pelo WhatsApp
          </Btn>
        </div>
      </div>

      {/* Map embed */}
      <div style={{ borderRadius: 12, overflow: 'hidden', border: `1px solid rgba(214,170,109,0.15)`, height: 380 }}>
        <iframe
          title="Mapa Vitrium Óticas"
          src="https://maps.google.com/maps?q=Vitrium%20%C3%93ticas%2C%20Rua%20Segisfredo%20Bravo%2C%20105%2C%20Bacax%C3%A1%2C%20Saquarema%20-%20RJ%2C%2028994-627&t=&z=17&ie=UTF8&iwloc=&output=embed"
          width="100%" height="100%" style={{ border: 0 }} allowFullScreen loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
        />
      </div>
    </div>
  </section>
);

/* ── HomePage ─────────────────────────────────────────────────── */
const HomePage = ({ setPage }) => (
  <>
    <HeroCarousel setPage={setPage} />
    <section data-vit="section-pad" style={{ background: C.creamLight, padding: '80px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div data-vit="flex-cards" style={{ display: 'flex', gap: 24 }}>
          <ProductHomeCard title="Óculos de Grau" sub="Visão & Estilo" price="R$ 435,00" dark={false} setPage={setPage} pageKey="grau" frameStyle="rect" />
          <ProductHomeCard title="Óculos de Sol" sub="Proteção UV400" price="R$ 345,00" dark={true} setPage={setPage} pageKey="sol" frameStyle="cat" />
          <ProductHomeCard title="Lentes Acuvue 2" sub="Lentes de Contato" price="R$ 209,90" priceLabel="Por" desc="Lentes de contato Acuvue 2. Faixa de grau de −6,00 a −0,50 (miopia) e +1,50 a +6,00 (hipermetropia)." dark={false} setPage={setPage} pageKey="lentes" frameStyle="oval" />
        </div>
      </div>
    </section>
    <BrandMarquee />
    <PromoSection setPage={setPage} />
    <InstagramSection />
    <LocationSection />
  </>
);

Object.assign(window, { HomePage, GlassesFrame });