// hero.jsx — three hero variations

function Hero({ theme, heroStyle, showAnniversary }) {
  const [active, setActive] = useState(0);
  const onDark = theme.headerOnDark;

  return (
    <section id="top" style={{
      background: theme.heroBg, color: theme.heroInk,
      paddingTop: 'clamp(120px, 14vw, 168px)',
      paddingBottom: 'clamp(48px, 7vw, 92px)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Subtle radial decoration */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        backgroundImage: onDark
          ? 'radial-gradient(60% 50% at 85% 10%, rgba(245,197,24,0.10), transparent 70%)'
          : (theme.label === 'Amarelo vibrante'
              ? 'radial-gradient(60% 50% at 90% 0%, rgba(255,255,255,0.45), transparent 60%)'
              : 'radial-gradient(60% 50% at 90% 0%, rgba(245,197,24,0.10), transparent 70%)'),
      }} />

      <Container style={{ position: 'relative' }}>
        <Eyebrow color={theme.heroMuted}>
          {showAnniversary ? 'Corretora · desde 1991 · 35 anos' : 'Corretora de seguros · Campo Grande / MS'}
        </Eyebrow>

        <div style={{
          display: 'grid',
          gridTemplateColumns: heroStyle === 'editorial' ? '1fr' : 'minmax(0, 1.15fr) minmax(0, 1fr)',
          gap: 'clamp(32px, 5vw, 72px)',
          alignItems: 'end',
          marginTop: 28,
        }} className="hero-grid">

          {/* Left: headline + CTAs */}
          <div>
            <h1 style={{
              fontFamily: 'var(--font-serif)',
              fontWeight: 400,
              fontSize: 'clamp(40px, 6.6vw, 86px)',
              lineHeight: 1.02,
              letterSpacing: '-0.02em',
              margin: '12px 0 0',
              color: theme.heroInk,
              textWrap: 'pretty',
            }}>
              Tradição que protege.
              <br />
              <span style={{ fontStyle: 'italic', color: onDark ? theme.accent : (theme.label === 'Amarelo vibrante' ? theme.heroInk : '#7a6310') }}>
                Inovação
              </span>{' '}
              que cuida.
            </h1>

            <p style={{
              fontFamily: 'var(--font-sans)',
              fontSize: 'clamp(16px, 1.4vw, 19px)',
              lineHeight: 1.55,
              color: theme.heroMuted,
              maxWidth: 540,
              margin: '28px 0 0',
              textWrap: 'pretty',
            }}>
              Há 35 anos a Imperatriz cuida do patrimônio, da família e do negócio
              de quem confia em quem conhece o seguro de verdade. Atendimento humano,
              cotação ágil, sinistro resolvido.
            </p>

            <div style={{ display: 'flex', gap: 12, marginTop: 40, flexWrap: 'wrap' }}>
              <Button variant="primary" theme={theme} href={wppLink()}>
                <IconWhatsApp size={16} /> Cotar pelo WhatsApp
              </Button>
              <Button variant="ghost" theme={theme} href="#seguros">
                Conheça os seguros <IconArrow />
              </Button>
            </div>

            {/* Stats strip — only in split layout */}
            {heroStyle === 'split' && (
              <div style={{
                marginTop: 'clamp(40px, 6vw, 64px)',
                display: 'grid',
                gridTemplateColumns: 'repeat(4, 1fr)',
                gap: 24,
                paddingTop: 28,
                borderTop: `1px solid ${theme.heroRule}`,
              }} className="hero-stats">
                {PILLARS.map((p) => (
                  <div key={p.label}>
                    <div style={{
                      fontFamily: 'var(--font-serif)', fontSize: 'clamp(28px, 3.6vw, 44px)',
                      lineHeight: 1, fontWeight: 400, color: theme.heroInk,
                    }}>{p.num}</div>
                    <div style={{
                      fontFamily: 'var(--font-sans)', fontSize: 12.5, marginTop: 8,
                      color: theme.heroMuted, lineHeight: 1.4,
                    }}>{p.label}</div>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* Right: product preview — varies by hero style */}
          {heroStyle === 'split' && (
            <HeroProductStack theme={theme} active={active} setActive={setActive} />
          )}
          {heroStyle === 'showcase' && (
            <HeroProductShowcase theme={theme} />
          )}
        </div>

        {/* Editorial: full-width chips strip below */}
        {heroStyle === 'editorial' && (
          <HeroProductChips theme={theme} />
        )}
      </Container>
    </section>
  );
}

// --- Variation A: vertical stack with rotating highlight ----------------------

function HeroProductStack({ theme, active, setActive }) {
  const onDark = theme.headerOnDark;
  useEffect(() => {
    const t = setInterval(() => setActive((a) => (a + 1) % PRODUCTS.length), 3800);
    return () => clearInterval(t);
  }, [setActive]);

  return (
    <div style={{
      borderRadius: 16, overflow: 'hidden',
      border: `1px solid ${theme.heroRule}`,
      background: onDark ? 'rgba(255,255,255,0.03)' : (theme.label === 'Amarelo vibrante' ? 'rgba(255,255,255,0.6)' : 'rgba(255,255,255,0.5)'),
      backdropFilter: 'blur(10px)',
    }}>
      {PRODUCTS.map((p, i) => {
        const isActive = i === active;
        return (
          <a key={p.id} href={`#prod-${p.id}`} onMouseEnter={() => setActive(i)} style={{
            display: 'flex', alignItems: 'center', gap: 16,
            padding: '18px 22px',
            borderBottom: i < PRODUCTS.length - 1 ? `1px solid ${theme.heroRule}` : 'none',
            background: isActive ? (onDark ? 'rgba(245,197,24,0.08)' : 'rgba(245,197,24,0.16)') : 'transparent',
            color: theme.heroInk, textDecoration: 'none',
            transition: 'background .25s ease',
            cursor: 'pointer',
          }}>
            <div style={{
              width: 44, height: 44, borderRadius: 10,
              display: 'grid', placeItems: 'center',
              background: isActive ? theme.accent : (onDark ? 'rgba(255,255,255,0.06)' : 'rgba(31,31,34,0.06)'),
              color: isActive ? theme.accentInk : theme.heroInk,
              transition: 'all .25s ease',
              flexShrink: 0,
            }}>
              <p.Icon />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontFamily: 'var(--font-serif)', fontSize: 21, lineHeight: 1.1,
                fontWeight: 400, marginBottom: 4,
              }}>{p.name}</div>
              <div style={{
                fontFamily: 'var(--font-sans)', fontSize: 13, color: theme.heroMuted,
                lineHeight: 1.3,
                overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
              }}>{p.tagline}</div>
            </div>
            <span style={{
              opacity: isActive ? 1 : 0.4,
              transform: isActive ? 'translateX(0)' : 'translateX(-4px)',
              transition: 'all .25s ease',
              color: theme.heroInk,
            }}><IconArrow /></span>
          </a>
        );
      })}
    </div>
  );
}

// --- Variation B: editorial chips row -----------------------------------------

function HeroProductChips({ theme }) {
  return (
    <div style={{
      marginTop: 'clamp(48px, 7vw, 80px)',
      paddingTop: 32,
      borderTop: `1px solid ${theme.heroRule}`,
      display: 'grid',
      gridTemplateColumns: 'repeat(5, 1fr)',
      gap: 16,
    }} className="hero-chips">
      {PRODUCTS.map((p) => (
        <a key={p.id} href={`#prod-${p.id}`} style={{
          display: 'flex', flexDirection: 'column', gap: 16,
          padding: '24px 22px 22px',
          borderRadius: 14,
          border: `1px solid ${theme.heroRule}`,
          color: theme.heroInk, textDecoration: 'none',
          background: theme.headerOnDark ? 'rgba(255,255,255,0.03)' : 'rgba(255,255,255,0.4)',
          transition: 'transform .2s ease, background .2s ease',
        }}
          onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.background = theme.headerOnDark ? 'rgba(255,255,255,0.06)' : '#fff'; }}
          onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.background = theme.headerOnDark ? 'rgba(255,255,255,0.03)' : 'rgba(255,255,255,0.4)'; }}
        >
          <div style={{ color: theme.accent === '#1F1F22' ? theme.heroInk : theme.accent }}><p.Icon /></div>
          <div>
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 400, lineHeight: 1.1 }}>
              {p.short}
            </div>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12.5, color: theme.heroMuted, marginTop: 6, lineHeight: 1.4 }}>
              {p.tagline.split(',').slice(0, 2).join(',')}
            </div>
          </div>
        </a>
      ))}
    </div>
  );
}

// --- Variation C: large showcase card -----------------------------------------

function HeroProductShowcase({ theme }) {
  const [idx, setIdx] = useState(0);
  const p = PRODUCTS[idx];
  const onDark = theme.headerOnDark;
  return (
    <div style={{
      borderRadius: 18, overflow: 'hidden',
      border: `1px solid ${theme.heroRule}`,
      background: onDark ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.5)',
      backdropFilter: 'blur(10px)',
      display: 'flex', flexDirection: 'column',
      minHeight: 380,
    }}>
      <div style={{
        padding: '32px 32px 24px', flex: 1,
        display: 'flex', flexDirection: 'column', gap: 16,
      }}>
        <div style={{
          width: 56, height: 56, borderRadius: 14,
          display: 'grid', placeItems: 'center',
          background: theme.accent, color: theme.accentInk,
        }}>
          <p.Icon />
        </div>
        <div style={{ fontFamily: 'var(--font-serif)', fontSize: 'clamp(24px, 2.8vw, 34px)', lineHeight: 1.1, color: theme.heroInk }}>
          {p.headline}
        </div>
        <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14.5, color: theme.heroMuted, lineHeight: 1.5 }}>
          {p.tagline}
        </div>
      </div>
      <div style={{
        display: 'grid', gridTemplateColumns: `repeat(${PRODUCTS.length}, 1fr)`,
        borderTop: `1px solid ${theme.heroRule}`,
      }}>
        {PRODUCTS.map((q, i) => (
          <button key={q.id} onClick={() => setIdx(i)} style={{
            padding: '14px 8px', background: i === idx ? theme.accent : 'transparent',
            color: i === idx ? theme.accentInk : theme.heroInk,
            border: 'none', cursor: 'pointer',
            borderLeft: i === 0 ? 'none' : `1px solid ${theme.heroRule}`,
            fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 500,
            transition: 'all .2s ease',
          }}>{q.short}</button>
        ))}
      </div>
    </div>
  );
}

window.Hero = Hero;