// app.jsx — Imperatriz Seguros 35 anos site

const { useState, useEffect, useRef } = React;

const WHATSAPP_NUMBER_RAW = '5567984090410'; // (67) 98409-0410
const WHATSAPP_DISPLAY = '(67) 98409-0410';
const PHONE_DISPLAY = '(67) 3382-0100';
const ADDRESS = 'Rua Eduardo Santos Pereira, 2189 — Campo Grande / MS';
const EMAIL = 'atendimento@imperatrizseguros.com.br';

const wppLink = (msg) =>
  `https://wa.me/${WHATSAPP_NUMBER_RAW}?text=${encodeURIComponent(msg || 'Olá, gostaria de uma cotação de seguro com a Imperatriz.')}`;

// ─────────────────────────────────────────────────────────────────────────────
//  Theme tokens — palette tweak switches between three directions
// ─────────────────────────────────────────────────────────────────────────────

const THEMES = {
  charcoal: { // gray dominant + yellow accent
    pageBg: '#F6F4EF',
    pageInk: '#1F1F22',
    pageMuted: 'rgba(31,31,34,0.62)',
    pageRule: 'rgba(31,31,34,0.10)',
    heroBg: '#222226',
    heroInk: '#FAF8F2',
    heroMuted: 'rgba(250,248,242,0.66)',
    heroRule: 'rgba(250,248,242,0.14)',
    accent: '#F5C518',
    accentInk: '#1F1F22',
    cardBg: '#FFFFFF',
    cardBorder: 'rgba(31,31,34,0.08)',
    headerOnDark: true,
    label: 'Cinza dominante',
  },
  light: { // bright clean white + yellow accent
    pageBg: '#FBFAF6',
    pageInk: '#1F1F22',
    pageMuted: 'rgba(31,31,34,0.62)',
    pageRule: 'rgba(31,31,34,0.10)',
    heroBg: '#FBFAF6',
    heroInk: '#1F1F22',
    heroMuted: 'rgba(31,31,34,0.62)',
    heroRule: 'rgba(31,31,34,0.10)',
    accent: '#F5C518',
    accentInk: '#1F1F22',
    cardBg: '#FFFFFF',
    cardBorder: 'rgba(31,31,34,0.08)',
    headerOnDark: false,
    label: 'Claro minimalista',
  },
  warm: { // yellow as a primary surface
    pageBg: '#FBFAF6',
    pageInk: '#1F1F22',
    pageMuted: 'rgba(31,31,34,0.62)',
    pageRule: 'rgba(31,31,34,0.10)',
    heroBg: '#F5C518',
    heroInk: '#1F1F22',
    heroMuted: 'rgba(31,31,34,0.70)',
    heroRule: 'rgba(31,31,34,0.18)',
    accent: '#1F1F22',
    accentInk: '#F5C518',
    cardBg: '#FFFFFF',
    cardBorder: 'rgba(31,31,34,0.08)',
    headerOnDark: false,
    label: 'Amarelo vibrante',
  },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "charcoal",
  "heroStyle": "split",
  "showAnniversary": true,
  "serif": "newsreader"
}/*EDITMODE-END*/;

// ─────────────────────────────────────────────────────────────────────────────
//  Reusable bits
// ─────────────────────────────────────────────────────────────────────────────

function Container({ children, max = 1240, style }) {
  return (
    <div style={{ maxWidth: max, margin: '0 auto', padding: '0 clamp(20px, 4vw, 48px)', ...style }}>
      {children}
    </div>
  );
}

function Eyebrow({ children, color }) {
  return (
    <div style={{
      fontFamily: 'var(--font-sans)',
      fontSize: 11,
      letterSpacing: '0.22em',
      textTransform: 'uppercase',
      fontWeight: 500,
      color: color || 'var(--muted)',
      display: 'inline-flex',
      alignItems: 'center',
      gap: 10,
    }}>
      <span style={{ width: 24, height: 1, background: 'currentColor', opacity: 0.5 }} />
      {children}
    </div>
  );
}

function Button({ children, variant = 'primary', href, onClick, theme, fullWidth }) {
  const styles = {
    primary: { background: theme.accent, color: theme.accentInk, border: '1px solid transparent' },
    ghost: { background: 'transparent', color: theme.heroInk, border: `1px solid ${theme.heroRule}` },
    inkDark: { background: '#1F1F22', color: '#FAF8F2', border: '1px solid transparent' },
  }[variant];
  const Tag = href ? 'a' : 'button';
  return (
    <Tag
      href={href}
      onClick={onClick}
      target={href && href.startsWith('http') ? '_blank' : undefined}
      rel={href && href.startsWith('http') ? 'noopener noreferrer' : undefined}
      style={{
        ...styles,
        display: 'inline-flex',
        alignItems: 'center',
        gap: 10,
        padding: '14px 22px',
        fontFamily: 'var(--font-sans)',
        fontSize: 14,
        fontWeight: 500,
        letterSpacing: '0.01em',
        borderRadius: 999,
        cursor: 'pointer',
        textDecoration: 'none',
        transition: 'transform .15s ease, background .2s ease, opacity .2s ease',
        width: fullWidth ? '100%' : 'auto',
        justifyContent: fullWidth ? 'center' : 'flex-start',
      }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}
    >
      {children}
    </Tag>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
//  Header
// ─────────────────────────────────────────────────────────────────────────────

function Header({ theme, onDark, showAnniversary }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const ink = onDark ? '#FAF8F2' : '#1F1F22';
  const muted = onDark ? 'rgba(250,248,242,0.7)' : 'rgba(31,31,34,0.62)';
  const bg = scrolled
    ? (onDark ? 'rgba(20,20,22,0.82)' : 'rgba(251,250,246,0.85)')
    : 'transparent';
  const border = scrolled ? (onDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)') : 'transparent';

  const links = [
    ['Seguros', '#seguros'],
    ['Por que a Imperatriz', '#porque'],
    ['Parceiras', '#parceiras'],
    ['Blog', '#blog'],
    ['Contato', '#contato'],
  ];

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: bg,
      backdropFilter: scrolled ? 'blur(16px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(16px) saturate(140%)' : 'none',
      borderBottom: `1px solid ${border}`,
      transition: 'all .25s ease',
      color: ink,
    }}>
      <Container>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 88 }}>
          <a href="#top" style={{ textDecoration: 'none', color: 'inherit' }}>
            <ImperatrizLogo height={48} theme={onDark ? 'light' : 'dark'} showAnniversary={showAnniversary} />
          </a>
          <nav className="desktop-nav" style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
            {links.map(([l, h]) => (
              <a key={l} href={h} style={{
                fontFamily: 'var(--font-sans)',
                fontSize: 13.5,
                color: muted,
                textDecoration: 'none',
                letterSpacing: '0.01em',
                transition: 'color .15s ease',
              }}
                onMouseEnter={(e) => e.currentTarget.style.color = ink}
                onMouseLeave={(e) => e.currentTarget.style.color = muted}
              >{l}</a>
            ))}
            <a href={wppLink()} target="_blank" rel="noopener noreferrer" style={{
              background: theme.accent, color: theme.accentInk,
              padding: '11px 18px', borderRadius: 999,
              fontFamily: 'var(--font-sans)', fontSize: 13.5, fontWeight: 500,
              textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>
              <IconWhatsApp size={15} />
              Cotar pelo WhatsApp
            </a>
          </nav>
          <button className="mobile-trigger" onClick={() => setOpen(!open)} style={{
            display: 'none', background: 'transparent', border: 0, color: ink, cursor: 'pointer', padding: 6,
          }}>
            {open ? <IconClose /> : <IconMenu />}
          </button>
        </div>
        {open && (
          <div className="mobile-menu" style={{
            padding: '12px 0 20px', borderTop: `1px solid ${border}`,
            display: 'flex', flexDirection: 'column', gap: 4,
          }}>
            {links.map(([l, h]) => (
              <a key={l} href={h} onClick={() => setOpen(false)} style={{
                fontFamily: 'var(--font-sans)', fontSize: 16, color: ink,
                textDecoration: 'none', padding: '12px 0', borderBottom: `1px solid ${border}`,
              }}>{l}</a>
            ))}
            <a href={wppLink()} target="_blank" rel="noopener noreferrer" style={{
              marginTop: 12, background: theme.accent, color: theme.accentInk,
              padding: '14px 18px', borderRadius: 999, textAlign: 'center',
              fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500, textDecoration: 'none',
            }}>Cotar pelo WhatsApp</a>
          </div>
        )}
      </Container>
    </header>
  );
}

Object.assign(window, { Container, Eyebrow, Button, Header, THEMES, TWEAK_DEFAULTS,
  WHATSAPP_DISPLAY, PHONE_DISPLAY, ADDRESS, EMAIL, wppLink });