function Products({ onQuote }) {
  const D = (window.SITE && window.SITE.products) || {};
  const settings = (window.SITE && window.SITE.settings) || {};
  const PRODS = D.items || [];
  const waDigits = (settings.contact && settings.contact.whatsappDigits) || '5544999451010';

  const [active, setActive] = React.useState((PRODS[0] && PRODS[0].id) || 'auto');
  const current = PRODS.find(p => p.id === active) || PRODS[0];

  if (!current) return null;

  return (
    <section id="produtos" style={{ background: 'var(--surface)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{D.eyebrow}</span>
          <h2>{D.title}<span style={{ color: 'var(--accent)' }}>.</span></h2>
          <p style={{ fontSize: 17, maxWidth: 600 }}>{D.subtitle}</p>
        </div>

        <div className="products-layout" style={{
          display: 'grid', gridTemplateColumns: '320px 1fr', gap: 40, alignItems: 'start',
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {PRODS.map(p => {
              const Ico = Icon[p.icon] || Icon.Shield;
              const isActive = p.id === active;
              return (
                <button
                  key={p.id}
                  onClick={() => setActive(p.id)}
                  className="product-tab"
                  style={{
                    display: 'flex', alignItems: 'center', gap: 14,
                    padding: '14px 16px', borderRadius: 12,
                    background: isActive ? 'var(--primary-50)' : 'transparent',
                    color: 'var(--ink)', textAlign: 'left',
                    border: '1px solid ' + (isActive ? 'color-mix(in oklab, var(--primary) 20%, transparent)' : 'transparent'),
                    transition: 'all .18s ease',
                  }}
                >
                  <span style={{
                    width: 36, height: 36, borderRadius: 10,
                    background: isActive ? 'var(--primary)' : 'var(--warm)',
                    color: isActive ? 'var(--primary-ink)' : 'var(--ink-2)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                  }}>
                    <Ico width="18" height="18" />
                  </span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 600, fontSize: 15 }}>{p.title}</div>
                    <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>{p.from}</div>
                  </div>
                  {isActive && <Icon.Arrow width="16" height="16" style={{ color: 'var(--primary-700)' }} />}
                </button>
              );
            })}
          </div>

          <div style={{
            background: 'var(--bg)',
            border: '1px solid var(--line)',
            borderRadius: 'var(--radius-lg)',
            padding: 36,
            position: 'relative', overflow: 'hidden', minHeight: 460,
          }}>
            <div style={{
              position: 'absolute', top: -60, right: -60, width: 240, height: 240, borderRadius: '50%',
              background: 'radial-gradient(circle, color-mix(in oklab, ' + (current.color || 'var(--primary)') + ' 14%, transparent) 0%, transparent 70%)',
            }} />
            <div style={{ position: 'relative' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24 }}>
                <div style={{
                  width: 56, height: 56, borderRadius: 14,
                  background: current.color || 'var(--primary)', color: 'var(--primary-ink)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  {React.createElement(Icon[current.icon] || Icon.Shield, { width: 26, height: 26 })}
                </div>
                <div>
                  <div className="eyebrow">{current.from}</div>
                  <h3 style={{ marginTop: 4 }}>{current.title}</h3>
                </div>
              </div>

              <p style={{ fontSize: 17, marginBottom: 28, maxWidth: 540 }}>{current.pitch}</p>

              <div style={{ display: 'grid', gap: 12, marginBottom: 32 }}>
                {(current.bullets || []).map((b, i) => (
                  <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                    <span style={{
                      width: 22, height: 22, borderRadius: '50%',
                      background: 'var(--accent-soft)', color: 'var(--accent)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                      marginTop: 1,
                    }}>
                      <Icon.Check width="13" height="13" />
                    </span>
                    <span style={{ fontSize: 15, color: 'var(--ink-2)' }}>{b}</span>
                  </div>
                ))}
              </div>

              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', paddingTop: 24, borderTop: '1px solid var(--line)' }}>
                <button className="btn btn-primary" onClick={() => onQuote && onQuote(current.id)}>
                  Cotar {current.title.replace(/^Seguro\s+/, '').toLowerCase()}
                  <Icon.Arrow width="16" height="16" />
                </button>
                <a className="btn btn-whatsapp"
                  href={`https://wa.me/${waDigits}?text=${encodeURIComponent(current.waMsg || 'Olá! Gostaria de uma cotação.')}`}
                  target="_blank" rel="noopener">
                  <Icon.Whatsapp width="16" height="16" />
                  WhatsApp
                </a>
              </div>
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 900px) {
            .products-layout { grid-template-columns: 1fr !important; }
          }
          .product-tab { cursor: pointer; }
          @media (hover: hover) {
            .product-tab:hover {
              background: color-mix(in oklab, var(--primary) 6%, transparent) !important;
              transform: translateX(2px);
            }
          }
        `}</style>
      </div>
    </section>
  );
}

window.Products = Products;