/* global React */
const GS = window.FlavioCorretoraDesignSystem_9d5869;
const GD = window.FCS_DATA;
const G = window.FCS;
const { Button, Icon, Card, FeatureCard, Accordion } = GS;

function PerfilBlock({ id, eyebrow, title, desc, list, icon }) {
  return (
    <div id={id} style={{ scrollMarginTop: 90 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 40, alignItems: 'center', marginBottom: 28 }} className="fcs-prod-grid">
        <div style={{ ...G.glassStyle, padding: 32, display: 'flex', flexDirection: 'column', gap: 16 }}>
          <span style={{ width: 54, height: 54, borderRadius: 'var(--radius-md)', background: 'var(--blue-800)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={icon} size={26} strokeWidth={1.6} color="var(--neutral-0)" /></span>
          <G.Eyebrow>{eyebrow}</G.Eyebrow>
          <h2 style={{ margin: 0, fontSize: 'var(--fs-h2)', fontWeight: 400 }}>{title}</h2>
          <p style={{ margin: 0, color: 'var(--text-body)', lineHeight: 'var(--lh-relaxed)' }}>{desc}</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }} className="fcs-seg-grid-3">
          {list.map((p) => <G.Reveal key={p.slug} style={{ height: '100%' }}><FeatureCard icon={p.icon} title={p.title} description={p.one} href={'produto.html?p=' + p.slug} linkLabel="Ver cobertura" style={{ height: '100%' }} /></G.Reveal>)}
        </div>
      </div>
    </div>
  );
}

const CHOICE_FAQ = [
  { q: 'Não sei qual seguro preciso. Como decido?', a: 'É exatamente para isso que existe a consultoria. Fazemos um diagnóstico do seu perfil ou da sua empresa e recomendamos as coberturas certas, sem empurrar produto.' },
  { q: 'Posso contratar mais de um seguro com vocês?', a: 'Sim. Muitos clientes concentram auto, vida e patrimônio conosco, o que simplifica o atendimento e o suporte no sinistro.' },
  { q: 'Vocês atendem empresas de qualquer porte?', a: 'Atendemos de MEIs a empresas de médio porte, com soluções de garantia, responsabilidade civil, engenharia e riscos diversos.' },
  { q: 'Qual a diferença de contratar com uma corretora?', a: 'Comparamos 10+ seguradoras por você, explicamos as diferenças com clareza e ficamos ao seu lado no momento do sinistro, o que um canal direto não oferece.' },
];

/* Monta apenas em contexto standalone (não dentro do _ds_bundle.js). */
if (typeof __ds_ns === 'undefined')
G.mount(() => (
  <React.Fragment>
    <G.PageHero crumbs={[{ label: 'Início', href: 'index.html' }, { label: 'Seguros' }]} eyebrow="Seguros" title="Todos os seguros, uma só consultoria" accent="uma só consultoria"
      intro="Muito além do automóvel: proteção sob medida para pessoas e empresas, comparada entre mais de 10 seguradoras parceiras."
      cta={<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
        <Button size="lg" href="#para-voce" variant="inverse">Para você</Button>
        <Button size="lg" href="#para-empresa" variant="inverse">Para sua empresa</Button>
      </div>} />

    <section style={{ ...G.sectionPad }}>
      <div style={{ ...G.wrap, display: 'flex', flexDirection: 'column', gap: 64 }}>
        <PerfilBlock id="para-voce" eyebrow="Para você" icon="user"
          title="Proteção para a vida pessoal e a família"
          desc="Do seu carro à sua renda e ao seu futuro: coberturas que acompanham cada fase da vida, com orientação próxima e transparente."
          list={GD.pf()} />
        <PerfilBlock id="para-empresa" eyebrow="Para sua empresa" icon="building-2"
          title="Solidez para o seu negócio operar sem sustos"
          desc="Contratos, obras, responsabilidade e patrimônio: estruturamos garantias e coberturas que protegem a continuidade da sua empresa."
          list={GD.pj()} />
      </div>
    </section>

    <section style={{ ...G.sectionPad, background: 'var(--surface-subtle)' }}>
      <div style={G.wrap}>
        <G.SectionHead eyebrow="Seguradoras parceiras" title="As melhores do mercado, comparadas por você" align="center"
          intro="Trabalhamos com as principais seguradoras do país para indicar a solução ideal a cada cliente." max="50ch" />
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16, justifyContent: 'center' }} className="fcs-part-grid">
          {GD.SEG_LOGOS.filter((s) => s.src).map((s) => (
            <a key={s.name} className="fcs-logoplate" href={s.url} target="_blank" rel="noopener noreferrer" aria-label={s.name} title={s.name}><img className="fcs-mlogo" src={'assets/seguradoras/' + s.src} alt={s.name} /></a>
          ))}
        </div>
      </div>
    </section>

    <section style={{ ...G.sectionPad }}>
      <div style={{ ...G.wrap, display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 56, alignItems: 'start' }} className="fcs-faq-grid">
        <G.SectionHead eyebrow="Como escolher" title="Dúvidas na hora de decidir" intro="As perguntas que mais ajudam a escolher a proteção certa." />
        <Card padding="8px 28px"><Accordion items={CHOICE_FAQ} defaultOpen={[0]} /></Card>
      </div>
    </section>

    <G.FinalCTA />
  </React.Fragment>
));
