function Hero({ heroStyle, onNav }) {
  const D = (window.SITE && window.SITE.hero) || {};
  const settings = (window.SITE && window.SITE.settings) || {};
  const waDigits = (settings.contact && settings.contact.whatsappDigits) || '5544999451010';
  const stats = D.stats || [];
  const ctas = D.ctas || {};
  return (
    <section id="home" style={{ position: 'relative', paddingTop: 40, paddingBottom: 80, overflow: 'hidden' }}>
      <HeroBackground style={heroStyle} />

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div className="hero-grid" style={{
          display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 60, alignItems: 'center',
          minHeight: 580,
        }}>
          <div>
            {D.badge && (
              <span className="badge" style={{ marginBottom: 24 }}>
                <span className="dot" />
                {D.badge}
              </span>
            )}

            <h1 style={{ marginBottom: 24 }}>
              {D.titleLine1}<br/>
              <em style={{ fontStyle: 'italic', color: 'var(--hero-accent)' }}>{D.titleLine2}</em>
            </h1>

            <p style={{ fontSize: 19, lineHeight: 1.55, maxWidth: 540, marginBottom: 36, color: 'var(--ink-2)' }}>
              {D.subtitle}
            </p>

            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 48 }}>
              <button className="btn btn-primary" onClick={() => onNav('cotacao')}>
                {ctas.primary || 'Solicitar cotação'}
                <Icon.Arrow width="16" height="16" />
              </button>
              <a className="btn btn-ghost" href={`https://wa.me/${waDigits}`} target="_blank" rel="noopener">
                <Icon.Whatsapp width="16" height="16" />
                {ctas.secondary || 'Falar no WhatsApp'}
              </a>
            </div>

            <div style={{
              display: 'grid', gridTemplateColumns: `repeat(${Math.max(1, stats.length)}, 1fr)`, gap: 28,
              paddingTop: 28, borderTop: '1px solid var(--line)', maxWidth: 520,
            }}>
              {stats.map((s, i) => <Stat key={i} n={s.n} l={s.l} />)}
            </div>
          </div>

          <div style={{ position: 'relative' }}>
            <HeroCard data={D.card} />
          </div>
        </div>
      </div>

      <PartnerStrip />

      <style>{`
        @media (max-width: 900px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
}

function Stat({ n, l }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--serif)', fontSize: 36, fontWeight: 500, color: 'var(--ink)', lineHeight: 1 }}>{n}</div>
      <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 6 }}>{l}</div>
    </div>
  );
}

function HeroBackground({ style }) {
  if (style === 'solid') {
    return <div style={{ position: 'absolute', inset: 0, background: 'var(--primary-50)' }} />;
  }
  if (style === 'gradient') {
    return (
      <div style={{ position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at top right, color-mix(in oklab, var(--accent) 18%, transparent), transparent 55%), radial-gradient(ellipse at bottom left, color-mix(in oklab, var(--primary) 14%, transparent), transparent 60%)',
      }} />
    );
  }
  // photo / default
  return (
    <>
      <div style={{ position: 'absolute', inset: 0, background: 'var(--bg)' }} />
      <div style={{
        position: 'absolute', top: -120, right: -80, width: 620, height: 620, borderRadius: '50%',
        background: 'radial-gradient(circle, color-mix(in oklab, var(--accent) 12%, transparent) 0%, transparent 70%)',
      }} />
      <div style={{
        position: 'absolute', bottom: -200, left: -120, width: 540, height: 540, borderRadius: '50%',
        background: 'radial-gradient(circle, color-mix(in oklab, var(--primary) 14%, transparent) 0%, transparent 70%)',
      }} />
    </>
  );
}

function HeroCard({ data }) {
  const D = data || {};
  const policy = D.policy || {};
  const lines = policy.lines || [];
  const testimonial = D.testimonial || {};
  return (
    <div style={{ position: 'relative' }}>
      {/* Main photo */}
      <div className="ph" style={{
        aspectRatio: '4/5', borderRadius: 'var(--radius-lg)',
        boxShadow: 'var(--shadow-lg)',
        border: 'none', background: 'var(--primary)',
        backgroundImage: 'linear-gradient(135deg, var(--primary) 0%, var(--primary-700) 100%)',
        color: 'rgba(255,255,255,.65)',
        position: 'relative', overflow: 'hidden',
      }}>
        <div className="grain" />
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 6 }}>
          {D.image ? (
            <img src={D.image} alt={D.alt || ''} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          ) : (
            <>
              <Icon.Shield width="48" height="48" style={{ opacity: .35 }} />
              <span style={{ fontFamily: 'var(--mono)', fontSize: 11, opacity: .55 }}>foto · {D.placeholder || 'família protegida'}</span>
            </>
          )}
        </div>

        {/* Floating policy card */}
        <div style={{
          position: 'absolute', left: 24, bottom: 24, right: 24,
          background: 'rgba(255,255,255,.96)', backdropFilter: 'blur(8px)',
          borderRadius: 14, padding: '18px 20px',
          boxShadow: '0 20px 40px -20px rgba(0,0,0,.4)',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10, color: '#6B7589', textTransform: 'uppercase', letterSpacing: '.14em' }}>{policy.label || 'Apólice ativa'}</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 18, color: '#0E1726', marginTop: 4 }}>{policy.name || 'Família Souza'}</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 10px', background: 'var(--tag-blog-bg)', borderRadius: 999 }}>
              <span style={{ width: 6, height: 6, background: 'var(--accent)', borderRadius: '50%' }} />
              <span style={{ fontSize: 11, color: 'var(--tag-blog-fg)', fontWeight: 600 }}>{policy.status || 'Coberta'}</span>
            </div>
          </div>
          <div style={{ height: 1, background: '#E6E2D9', margin: '14px 0' }} />
          <div style={{ display: 'grid', gridTemplateColumns: `repeat(${Math.max(1, lines.length)},1fr)`, gap: 12, fontSize: 11.5, color: '#34415A' }}>
            {lines.map((ln, i) => (
              <div key={i}>{ln.label}<br/><strong style={{ color: '#0E1726', fontSize: 13 }}>{ln.value}</strong></div>
            ))}
          </div>
        </div>
      </div>

      {/* Floating testimonial */}
      <div style={{
        position: 'absolute', top: -22, left: -32,
        background: 'var(--surface)', borderRadius: 14, padding: '14px 16px',
        boxShadow: 'var(--shadow-md)', border: '1px solid var(--line)',
        maxWidth: 220, display: 'flex', gap: 10,
      }} className="hero-floater-1">
        <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'var(--accent-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent)', flexShrink: 0 }}>
          <Icon.Check width="18" height="18" />
        </div>
        <div>
          <div style={{ fontSize: 12.5, color: 'var(--ink)', lineHeight: 1.35 }}>{testimonial.quote ? <MD text={testimonial.quote} /> : '"Resolveram meu sinistro em 4h."'}</div>
          <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 4 }}>{testimonial.author || ''}</div>
        </div>
      </div>

      <style>{`
        @media (max-width: 600px) {
          .hero-floater-1 { display: none; }
        }
      `}</style>
    </div>
  );
}

function PartnerStrip() {
  const D = (window.SITE && window.SITE.hero && window.SITE.hero.partnerStrip) || {};
  const partners = D.partners || ['HDI', 'Liberty', 'Bradesco Seguros', 'Porto Seguro', 'Itaú Seguros', 'SulAmérica', 'Allianz', 'Tokio Marine'];
  return (
    <div className="container" style={{ marginTop: 80, paddingTop: 32, borderTop: '1px solid var(--line)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 18 }}>
        <span className="eyebrow">{D.label || 'Seguradoras parceiras'}</span>
        <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
        <span style={{ fontSize: 12, color: 'var(--muted)' }}>{D.note || '10+ companhias'}</span>
      </div>
      <div style={{ display: 'flex', gap: 36, flexWrap: 'wrap', alignItems: 'center', opacity: .8 }}>
        {partners.map(p => (
          <span key={p} style={{ fontFamily: 'var(--serif)', fontSize: 18, color: 'var(--ink-2)', fontWeight: 500, letterSpacing: '-0.01em' }}>
            {p}
          </span>
        ))}
      </div>
    </div>
  );
}

window.Hero = Hero;