/* ============================================================================
   Bradesco Saúde · Seguros Plano B — ATOMS + chrome
   Shared building blocks: Icon (Lucide geometry, inlined for React safety),
   Wordmark, Btn, Eyebrow, Chapter, Pill, Badge, Header, Footer.
   Exposed on window at the bottom of the file.
   ========================================================================== */

const WHATSAPP_URL = 'https://wa.me/5514991282926?text=' + encodeURIComponent('Olá! Gostaria de uma cotação do plano de saúde Bradesco Saúde PME.');

const { useState, useEffect, useRef } = React;

/* ---- Icons: real Lucide path geometry, inlined so React owns the DOM ----- */
const LUCIDE = {
  check:        '<polyline points="20 6 9 17 4 12"/>',
  'arrow-right':'<line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>',
  'chevron-down':'<polyline points="6 9 12 15 18 9"/>',
  x:            '<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>',
  plus:         '<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>',
  menu:         '<line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/>',
  phone:        '<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>',
  'map-pin':    '<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/>',
  users:        '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
  'shield-check':'<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/>',
  'heart-pulse':'<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z"/><path d="M3.22 12H9.5l.5-1 2 4.5 2-7 1.5 3.5h5.27"/>',
  activity:     '<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>',
  scan:         '<path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><line x1="7" x2="17" y1="12" y2="12"/>',
  'building-2': '<path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/>',
  hospital:     '<path d="M12 6v4"/><path d="M14 14h-4"/><path d="M14 18h-4"/><path d="M14 8h-4"/><path d="M18 12h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2h2"/><path d="M18 22V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v18"/>',
  'message-circle':'<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>',
  'badge-check':'<path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/>',
  clock:        '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
  send:         '<path d="M14.54 21.69a.5.5 0 0 0 .94-.03l6.5-19a.5.5 0 0 0-.64-.63l-19 6.5a.5.5 0 0 0-.02.94l7.93 3.18a2 2 0 0 1 1.11 1.11z"/><path d="m21.85 2.15-10.94 10.94"/>',
  headphones:   '<path d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M21 14h-3a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2z"/><path d="M3 14a9 9 0 0 1 18 0"/>',
  globe:        '<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>',
  award:        '<circle cx="12" cy="8" r="6"/><path d="M15.48 12.89 17 22l-5-3-5 3 1.52-9.11"/>',
  eye:          '<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>',
  star:         '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>',
  'circle-check':'<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>',
  'trending-up':'<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/>',
  whatsapp:     '<path d="M3 21l1.65-4.8a9 9 0 1 1 3.4 2.9z"/><path d="M9 10a.5.5 0 0 0 1 0V9a.5.5 0 0 0-1 0v1a5 5 0 0 0 5 5h1a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1"/>',
};

function Icon({ name, size = 22, stroke = 2, fill = 'none', style, className }) {
  const d = LUCIDE[name] || '';
  return (
    <svg
      className={className}
      width={size} height={size} viewBox="0 0 24 24"
      fill={name === 'star' ? 'currentColor' : fill}
      stroke="currentColor" strokeWidth={stroke}
      strokeLinecap="round" strokeLinejoin="round"
      style={{ flexShrink: 0, display: 'block', ...style }}
      dangerouslySetInnerHTML={{ __html: d }}
    />
  );
}

/* ---- Wordmark (typographic — NOT the trademarked Bradesco symbol) -------- */
function Wordmark({ light = false, compact = false, subtitle = true }) {
  return (
    <a href="#top" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 4, textDecoration: 'none' }}>
      <img
        src="assets/logo-bradesco-saude.svg"
        alt="Bradesco Saúde"
        style={{ height: compact ? 32 : 38, width: 'auto', display: 'block' }}
      />
      {!compact && subtitle && (
        <span style={{
          display: 'block', fontFamily: 'var(--font-text)', fontWeight: 700,
          fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase',
          color: light ? 'rgba(255,255,255,0.7)' : 'var(--brad-red)',
        }}>por Seguros Plano B</span>
      )}
    </a>
  );
}

/* ---- Buttons ------------------------------------------------------------- */
function Btn({ children, variant = 'primary', size = 'md', icon, iconLeft, onClick, href, full, light, target, rel }) {
  const [hover, setHover] = useState(false);
  const [press, setPress] = useState(false);
  const pads = size === 'lg' ? '15px 26px' : size === 'sm' ? '9px 16px' : '13px 22px';
  const fs = size === 'lg' ? 16 : size === 'sm' ? 14 : 15;
  const base = {
    fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: fs,
    padding: pads, borderRadius: 'var(--r-pill)', border: '1.5px solid transparent',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9,
    cursor: 'pointer', textDecoration: 'none', whiteSpace: 'nowrap',
    transition: 'all .18s cubic-bezier(.22,1,.36,1)', width: full ? '100%' : 'auto',
    transform: press ? 'scale(0.975)' : 'none', lineHeight: 1.1,
  };
  const styles = {
    primary: {
      background: hover ? 'var(--brad-red-600)' : 'var(--brad-red)', color: '#fff',
      boxShadow: hover ? '0 18px 40px rgba(204,9,47,0.34)' : 'var(--sh-red)',
      transform: press ? 'scale(0.975)' : (hover ? 'translateY(-1px)' : 'none'),
    },
    secondary: {
      background: hover ? (light ? 'rgba(255,255,255,0.12)' : 'var(--bg-mute)') : 'transparent',
      color: light ? '#fff' : 'var(--ink)',
      borderColor: light ? 'rgba(255,255,255,0.5)' : 'var(--line-strong)',
    },
    ghost: {
      background: 'transparent', color: 'var(--brad-red)', padding: size === 'sm' ? '6px 8px' : '8px 10px',
      textDecoration: hover ? 'underline' : 'none', textUnderlineOffset: 4,
    },
  };
  const Tag = href ? 'a' : 'button';
  return (
    <Tag href={href} target={target} rel={rel} onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => { setHover(false); setPress(false); }}
      onMouseDown={() => setPress(true)} onMouseUp={() => setPress(false)}
      style={{ ...base, ...styles[variant] }}>
      {iconLeft && <Icon name={iconLeft} size={fs + 3} stroke={2.2} />}
      {children}
      {icon && <Icon name={icon} size={fs + 3} stroke={2.2} />}
    </Tag>
  );
}

/* ---- Labels -------------------------------------------------------------- */
function Eyebrow({ children, dot = true, light }) {
  return (
    <span className="brad-eyebrow" style={light ? { color: 'rgba(255,255,255,0.9)' } : null}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: 99, background: 'currentColor', display: 'inline-block' }} />}
      {children}
    </span>
  );
}
function Chapter({ children }) {
  return <span className="brad-chapter">{children}</span>;
}
function Pill({ children, tone = 'red' }) {
  const tones = {
    red:    { bg: 'var(--brad-red)', fg: '#fff' },
    soft:   { bg: 'var(--brad-red-100)', fg: 'var(--brad-red-700)' },
    ink:    { bg: 'var(--ink)', fg: '#fff' },
    line:   { bg: 'transparent', fg: 'var(--slate-600)', border: '1px solid var(--line-strong)' },
  }[tone];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 11.5,
      letterSpacing: '0.06em', textTransform: 'uppercase',
      padding: '6px 12px', borderRadius: 999, whiteSpace: 'nowrap',
      background: tones.bg, color: tones.fg, border: tones.border || 'none',
    }}>{children}</span>
  );
}

/* ---- Header -------------------------------------------------------------- */
function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [menu, setMenu] = useState(false);
  useEffect(() => {
    const el = document.querySelector('.kit-scroll') || window;
    const onScroll = () => setScrolled((el.scrollTop || window.scrollY) > 24);
    el.addEventListener('scroll', onScroll); return () => el.removeEventListener('scroll', onScroll);
  }, []);
  const links = [['Hospital Santa Lúcia', '#hospital'], ['Planos PME', '#planos'], ['Como funciona', '#como'], ['Dúvidas', '#duvidas']];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.96)',
      backdropFilter: 'saturate(160%) blur(14px)', WebkitBackdropFilter: 'saturate(160%) blur(14px)',
      borderBottom: `1px solid ${scrolled ? 'var(--line)' : 'transparent'}`,
      transition: 'all .25s ease',
    }}>
      <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '14px 24px', display: 'flex', alignItems: 'center', gap: 24 }}>
        <Wordmark subtitle={false} />
        <nav style={{ display: 'flex', gap: 26, marginLeft: 'auto' }} className="kit-nav">
          {links.map(([t, h]) => <NavLink key={t} href={h}>{t}</NavLink>)}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <a href="tel:+5514991282926" className="kit-phone" style={{
            display: 'inline-flex', alignItems: 'center', gap: 7, textDecoration: 'none',
            fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 14, color: 'var(--ink)',
          }}>
            <Icon name="phone" size={16} stroke={2.2} style={{ color: 'var(--brad-red)' }} />
            (14) 99128-2926
          </a>
          <Btn size="sm" iconLeft="message-circle" href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">Falar Agora</Btn>
        </div>
      </div>
    </header>
  );
}
function NavLink({ href, children }) {
  const [h, setH] = useState(false);
  return (
    <a href={href} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        fontFamily: 'var(--font-text)', fontWeight: 600, fontSize: 14.5,
        color: h ? 'var(--brad-red)' : 'var(--ink-700)', textDecoration: 'none',
        transition: 'color .15s ease',
      }}>{children}</a>
  );
}

/* ---- Footer -------------------------------------------------------------- */
function Footer() {
  const col = (title, items) => (
    <div>
      <h4 style={{ fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', margin: '0 0 14px' }}>{title}</h4>
      <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((it, i) => (
          <li key={i} style={{ fontFamily: 'var(--font-text)', fontSize: 14.5, color: 'rgba(255,255,255,0.82)' }}>{it}</li>
        ))}
      </ul>
    </div>
  );
  return (
    <footer style={{ background: 'var(--ink)', color: '#fff', padding: '64px 24px 28px' }}>
      <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40, paddingBottom: 40, borderBottom: '1px solid rgba(255,255,255,0.12)' }} className="kit-foot-grid">
          <div>
            <Wordmark light />
            <p style={{ fontFamily: 'var(--font-text)', fontSize: 14, lineHeight: 1.6, color: 'rgba(255,255,255,0.7)', marginTop: 16, maxWidth: 300 }}>
              Corretora habilitada Bradesco Saúde, conectando empresas de Bauru e região ao plano de saúde ideal há mais de 20 anos.
            </p>
          </div>
          {col('Navegação', ['Hospital Santa Lúcia', 'Planos PME', 'Como funciona', 'Dúvidas'])}
          {col('Contato', [
            <a href="tel:+5514991282926" style={{ color: 'inherit', textDecoration: 'none' }}>(14) 99128-2926</a>,
            <a href="mailto:contato@segurosplanob.com.br" style={{ color: 'inherit', textDecoration: 'none' }}>contato@segurosplanob.com.br</a>,
            <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'none' }}>Falar no WhatsApp</a>,
            <span style={{ color: 'rgba(255,255,255,0.82)' }}>Rua Anvar Dabus, 9-84 · Jardim Dona Sarah · Bauru – SP · CEP 17012-380</span>,
          ])}
          {col('Operadora', ['Bradesco Saúde S/A', 'CNPJ 92.693.118/0001-60', 'ANS nº 005711 / 421715'])}
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16, justifyContent: 'space-between', alignItems: 'center', paddingTop: 24 }}>
          <p style={{ fontFamily: 'var(--font-text)', fontSize: 12.5, color: 'rgba(255,255,255,0.55)', margin: 0, maxWidth: 620, lineHeight: 1.6 }}>
            © 2026 Seguros Plano B · CNPJ 49.918.633/0001-72 · Corretora habilitada Bradesco Saúde S/A.<br/>
            Esta página é informativa. A contratação está sujeita à análise da operadora.
          </p>
          <div style={{ display: 'flex', gap: 10 }}>
            <FootBadge>Termos de Uso</FootBadge>
            <FootBadge>Privacidade</FootBadge>
            <FootBadge>Cookies</FootBadge>
          </div>
        </div>
      </div>
    </footer>
  );
}
function FootBadge({ children }) {
  return <span style={{ fontFamily: 'var(--font-text)', fontSize: 12.5, color: 'rgba(255,255,255,0.7)', border: '1px solid rgba(255,255,255,0.18)', borderRadius: 999, padding: '6px 12px' }}>{children}</span>;
}

Object.assign(window, { WHATSAPP_URL, Icon, Wordmark, Btn, Eyebrow, Chapter, Pill, Header, NavLink, Footer });