// sections.jsx — Products, Why Us, Partners, Blog, Contact, Footer

// ─── PRODUCTS DETAIL ─────────────────────────────────────────────────────────

function ProductsSection({ theme }) {
  const [open, setOpen] = useState(null);
  return (
    <section id="seguros" style={{ padding: 'clamp(72px, 10vw, 120px) 0', background: theme.pageBg, color: theme.pageInk }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(32px, 5vw, 80px)', alignItems: 'end', marginBottom: 56 }} className="two-col">
          <div>
            <Eyebrow>Nossos seguros</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-serif)', fontWeight: 400,
              fontSize: 'clamp(32px, 4.4vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.015em',
              margin: '20px 0 0', textWrap: 'pretty',
            }}>
              Cinco coberturas pensadas para o seu dia a dia — <span style={{ fontStyle: 'italic' }}>sem letras miúdas, sem surpresa no sinistro.</span>
            </h2>
          </div>
          <p style={{
            fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.6,
            color: theme.pageMuted, maxWidth: 460, textWrap: 'pretty',
          }}>
            Trabalhamos com as principais seguradoras do Brasil. Comparamos coberturas,
            franquias e preços, e indicamos a melhor combinação para o seu momento.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 1, background: theme.pageRule, border: `1px solid ${theme.pageRule}`, borderRadius: 18, overflow: 'hidden' }}>
          {PRODUCTS.map((p) => {
            const isOpen = open === p.id;
            return (
              <div key={p.id} id={`prod-${p.id}`} style={{
                background: theme.cardBg, padding: '32px 28px',
                display: 'flex', flexDirection: 'column', gap: 18,
                minHeight: 320,
                position: 'relative',
              }}>
                <div style={{
                  width: 48, height: 48, borderRadius: 12,
                  display: 'grid', placeItems: 'center',
                  background: theme.accent, color: theme.accentInk,
                }}>
                  <p.Icon />
                </div>
                <div>
                  <h3 style={{
                    fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 26,
                    margin: 0, lineHeight: 1.1,
                  }}>{p.name}</h3>
                  <p style={{
                    fontFamily: 'var(--font-sans)', fontSize: 13, color: theme.pageMuted,
                    margin: '8px 0 0', lineHeight: 1.5,
                  }}>{p.tagline}</p>
                </div>

                <ul style={{
                  listStyle: 'none', padding: 0, margin: '4px 0 0',
                  display: 'flex', flexDirection: 'column', gap: 8,
                  fontFamily: 'var(--font-sans)', fontSize: 13.5, color: theme.pageInk,
                }}>
                  {p.coverage.slice(0, isOpen ? p.coverage.length : 3).map((c) => (
                    <li key={c} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, lineHeight: 1.4 }}>
                      <span style={{ color: theme.accent === '#1F1F22' ? theme.pageInk : theme.accent, marginTop: 2, flexShrink: 0 }}>
                        <IconCheck size={14} />
                      </span>
                      {c}
                    </li>
                  ))}
                </ul>

                <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, paddingTop: 8 }}>
                  <button onClick={() => setOpen(isOpen ? null : p.id)} style={{
                    background: 'transparent', border: 0, padding: 0, cursor: 'pointer',
                    fontFamily: 'var(--font-sans)', fontSize: 12, color: theme.pageMuted,
                    display: 'inline-flex', alignItems: 'center', gap: 6,
                  }}>
                    {isOpen ? 'Menos' : 'Ver cobertura completa'}
                  </button>
                  <a href={wppLink(`Olá, gostaria de uma cotação de ${p.name}.`)} target="_blank" rel="noopener noreferrer" style={{
                    fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 500,
                    color: theme.pageInk, textDecoration: 'none',
                    display: 'inline-flex', alignItems: 'center', gap: 6,
                  }}>
                    Cotar <IconArrow size={14} />
                  </a>
                </div>
              </div>
            );
          })}
        </div>
      </Container>
    </section>
  );
}

// ─── WHY US ──────────────────────────────────────────────────────────────────

function WhyUsSection({ theme }) {
  const items = [
    {
      title: 'Atendimento humano, do orçamento ao sinistro',
      body: 'Você fala com a mesma pessoa do início ao fim. Sem call center, sem URA — alguém em Campo Grande, que conhece seu nome.',
    },
    {
      title: 'Comparamos as principais seguradoras',
      body: 'Não somos braço de uma seguradora. Trabalhamos com Porto, Itaú, Bradesco, Allianz, Tokio, Yelum, HDI, Icatu, AXA, Zurich e Azul — e indicamos a melhor combinação para o seu perfil.',
    },
    {
      title: 'Sinistro acompanhado de ponta a ponta',
      body: 'Quando o pior acontece, a gente liga, abre o aviso, monitora o pagamento e cobra o que estiver atrasado.',
    },
    {
      title: '35 anos de relacionamento',
      body: 'Uma corretora dura quando o cliente permanece. Atendemos a segunda e terceira geração de famílias que começaram em 1991.',
    },
  ];

  return (
    <section id="porque" style={{
      padding: 'clamp(72px, 10vw, 120px) 0',
      background: theme.pageBg,
      color: theme.pageInk,
      borderTop: `1px solid ${theme.pageRule}`,
    }}>
      <Container>
        <div style={{ maxWidth: 720 }}>
          <Eyebrow>Por que a Imperatriz</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-serif)', fontWeight: 400,
            fontSize: 'clamp(32px, 4.4vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.015em',
            margin: '20px 0 0', textWrap: 'pretty',
          }}>
            Uma corretora não vende apólice. <span style={{ fontStyle: 'italic' }}>Cuida de pessoas.</span>
          </h2>
        </div>

        <div style={{
          marginTop: 'clamp(48px, 7vw, 80px)',
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 0,
          borderTop: `1px solid ${theme.pageRule}`,
        }}>
          {items.map((item, i) => (
            <div key={item.title} style={{
              padding: '36px 32px 36px 0',
              borderBottom: `1px solid ${theme.pageRule}`,
              borderRight: i < items.length - 1 ? `1px solid ${theme.pageRule}` : 'none',
              paddingLeft: i === 0 ? 0 : 32,
            }} className="why-card">
              <div style={{
                fontFamily: 'var(--font-serif)', fontStyle: 'italic',
                fontSize: 14, color: theme.pageMuted, marginBottom: 16,
              }}>0{i + 1}</div>
              <h3 style={{
                fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 22,
                margin: 0, lineHeight: 1.2, letterSpacing: '-0.005em',
                textWrap: 'pretty',
              }}>{item.title}</h3>
              <p style={{
                fontFamily: 'var(--font-sans)', fontSize: 14, color: theme.pageMuted,
                margin: '14px 0 0', lineHeight: 1.55, textWrap: 'pretty',
              }}>{item.body}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ─── PARTNERS ────────────────────────────────────────────────────────────────

function PartnersSection({ theme }) {
  return (
    <section id="parceiras" style={{
      padding: 'clamp(72px, 10vw, 120px) 0',
      background: theme.headerOnDark ? '#1A1A1D' : '#1F1F22',
      color: '#FAF8F2',
    }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(32px, 5vw, 80px)', alignItems: 'end', marginBottom: 56 }} className="two-col">
          <div>
            <Eyebrow color="rgba(250,248,242,0.6)">Seguradoras parceiras</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-serif)', fontWeight: 400,
              fontSize: 'clamp(32px, 4.4vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.015em',
              margin: '20px 0 0', textWrap: 'pretty',
            }}>
              11 seguradoras. <span style={{ fontStyle: 'italic', color: theme.accent }}>Uma corretora só.</span>
            </h2>
          </div>
          <p style={{
            fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.6,
            color: 'rgba(250,248,242,0.66)', maxWidth: 460, textWrap: 'pretty',
          }}>
            Trabalhamos com as principais seguradoras do Brasil para encontrar a apólice
            certa, com o preço justo. Algumas das marcas com quem operamos:
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(170px, 1fr))',
          border: '1px solid rgba(250,248,242,0.08)',
          borderRadius: 16, overflow: 'hidden',
        }}>
          {PARTNERS.map((p, i) => (
            <div key={p.name} style={{
              padding: '34px 24px', display: 'grid', placeItems: 'center',
              minHeight: 110,
              borderRight: '1px solid rgba(250,248,242,0.08)',
              borderBottom: '1px solid rgba(250,248,242,0.08)',
              fontFamily: p.style.font === 'serif' ? 'var(--font-serif)' : 'var(--font-sans)',
              fontWeight: p.style.weight,
              fontStyle: p.style.italic ? 'italic' : 'normal',
              fontSize: p.name.length > 7 ? 18 : 21,
              color: 'rgba(250,248,242,0.78)',
              letterSpacing: p.style.letterSpacing || (p.style.font === 'sans' ? '-0.01em' : '0'),
              textTransform: 'none',
              transition: 'color .2s ease',
              cursor: 'default',
            }}
              onMouseEnter={(e) => e.currentTarget.style.color = '#FAF8F2'}
              onMouseLeave={(e) => e.currentTarget.style.color = 'rgba(250,248,242,0.72)'}
            >{p.name}</div>
          ))}
        </div>
        <div style={{
          fontFamily: 'var(--font-sans)', fontSize: 12, color: 'rgba(250,248,242,0.45)',
          marginTop: 18, textAlign: 'center',
        }}>
          Lista parcial. Consulte-nos para a parceria mais adequada à sua necessidade.
        </div>
      </Container>
    </section>
  );
}

// ─── BLOG ────────────────────────────────────────────────────────────────────

function BlogSection({ theme }) {
  return (
    <section id="blog" style={{
      padding: 'clamp(72px, 10vw, 120px) 0',
      background: theme.pageBg, color: theme.pageInk,
    }}>
      <Container>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, gap: 32, flexWrap: 'wrap' }}>
          <div>
            <Eyebrow>Conteúdo</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-serif)', fontWeight: 400,
              fontSize: 'clamp(32px, 4.4vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.015em',
              margin: '20px 0 0',
            }}>
              No nosso blog, seguro <span style={{ fontStyle: 'italic' }}>sem juridiquês.</span>
            </h2>
          </div>
          <a href="#" style={{
            fontFamily: 'var(--font-sans)', fontSize: 14, color: theme.pageInk,
            textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8,
            paddingBottom: 8, borderBottom: `1px solid ${theme.pageInk}`,
          }}>
            Ver todos os artigos <IconArrow size={14} />
          </a>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 0,
          borderTop: `1px solid ${theme.pageRule}`,
        }}>
          {BLOG_POSTS.map((post, i) => (
            <article key={post.title} style={{
              padding: '36px 36px 36px 0',
              paddingLeft: i === 0 ? 0 : 36,
              borderRight: i < BLOG_POSTS.length - 1 ? `1px solid ${theme.pageRule}` : 'none',
              borderBottom: `1px solid ${theme.pageRule}`,
              display: 'flex', flexDirection: 'column', gap: 16,
              cursor: 'pointer', transition: 'background .2s ease',
            }} className="blog-card">
              {/* Editorial image placeholder */}
              <div style={{
                aspectRatio: '4 / 3', borderRadius: 10,
                background: `linear-gradient(135deg, ${theme.accent}22, ${theme.accent}08)`,
                border: `1px solid ${theme.pageRule}`,
                display: 'grid', placeItems: 'center',
                fontFamily: 'var(--font-sans)', fontSize: 11, color: theme.pageMuted,
                letterSpacing: '0.1em', textTransform: 'uppercase',
              }}>
                <span style={{ opacity: 0.5 }}>imagem · {post.category.toLowerCase()}</span>
              </div>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 12,
                fontFamily: 'var(--font-sans)', fontSize: 11.5, letterSpacing: '0.08em',
                textTransform: 'uppercase', color: theme.pageMuted,
              }}>
                <span style={{ color: theme.pageInk, fontWeight: 500 }}>{post.category}</span>
                <span style={{ opacity: 0.4 }}>·</span>
                <span>{post.date}</span>
                <span style={{ opacity: 0.4 }}>·</span>
                <span>{post.read}</span>
              </div>
              <h3 style={{
                fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 22,
                margin: 0, lineHeight: 1.2, letterSpacing: '-0.005em',
                textWrap: 'pretty',
              }}>{post.title}</h3>
              <p style={{
                fontFamily: 'var(--font-sans)', fontSize: 13.5, color: theme.pageMuted,
                margin: 0, lineHeight: 1.55, textWrap: 'pretty',
              }}>{post.excerpt}</p>
              <div style={{ marginTop: 'auto', paddingTop: 4 }}>
                <span style={{
                  fontFamily: 'var(--font-sans)', fontSize: 13, color: theme.pageInk,
                  display: 'inline-flex', alignItems: 'center', gap: 6, fontWeight: 500,
                }}>
                  Ler artigo <IconArrow size={14} />
                </span>
              </div>
            </article>
          ))}
        </div>
      </Container>
    </section>
  );
}

window.ProductsSection = ProductsSection;
window.WhyUsSection = WhyUsSection;
window.PartnersSection = PartnersSection;
window.BlogSection = BlogSection;
