/* global React */
const US = window.FlavioCorretoraDesignSystem_9d5869;
const UD = window.FCS_DATA;
const U = window.FCS;
const { Button, Icon, Card, Accordion } = US;

const CANAIS = [
  { icon: 'message-circle', title: 'WhatsApp', text: 'A forma mais rápida de falar com um consultor.', action: 'Abrir conversa', onWhats: true },
  { icon: 'phone', title: 'Telefone', text: UD.CONTACT.phone + ' · ' + UD.CONTACT.hours, action: 'Ligar agora', href: UD.CONTACT.phoneHref },
  { icon: 'mail', title: 'E-mail', text: UD.CONTACT.email, action: 'Enviar e-mail', href: 'mailto:' + UD.CONTACT.email },
];

const SINISTRO = [
  { icon: 'phone-call', t: 'Comunique', d: 'Avise a Flavio Seguros assim que possível. Estamos aqui para orientar cada passo.' },
  { icon: 'camera', t: 'Documente', d: 'Reúna fotos, boletim de ocorrência (se houver) e documentos do bem segurado.' },
  { icon: 'file-text', t: 'Abra o processo', d: 'Cuidamos da abertura junto à seguradora e organizamos toda a documentação.' },
  { icon: 'check-circle-2', t: 'Acompanhe', d: 'Acompanhamos a análise e a indenização do seu lado, até a resolução completa.' },
];

const SERVICOS = [
  { icon: 'file-search', t: 'Segunda via de apólice', d: 'Solicite a cópia da sua apólice a qualquer momento.' },
  { icon: 'refresh-cw', t: 'Renovação', d: 'Reavaliamos coberturas e o mercado antes de renovar.' },
  { icon: 'pencil', t: 'Alteração de cadastro', d: 'Atualize dados, endereço ou beneficiários.' },
  { icon: 'credit-card', t: '2ª via de boleto', d: 'Precisa do boleto? A gente providencia rapidinho.' },
  { icon: 'car', t: 'Inclusão de condutor', d: 'Adicione ou remova condutores no seguro auto.' },
  { icon: 'help-circle', t: 'Dúvidas de cobertura', d: 'Explicamos o que está e o que não está coberto.' },
];

const SUP_FAQ = [
  { q: 'Tive um sinistro. O que faço primeiro?', a: 'Entre em contato imediatamente com a central da sua seguradora e com a Flavio Seguros, para intermediarmos e acompanharmos a resolução. Mantenha sempre os dados de contato da seguradora e da corretora à mão, de preferência junto ao veículo.' },
  { q: 'Qual o prazo para comunicar um sinistro?', a: 'No seguro de automóvel você tem até 1 ano, a partir da data comprovada do fato, para fazer o aviso. Ainda assim, quanto antes nos comunicar, mais rápido resolvemos, e menor o risco de perder direitos.' },
  { q: 'O boletim de ocorrência é obrigatório?', a: 'É obrigatório em casos de furto, roubo e acidentes envolvendo vítimas ou terceiros. Nos demais casos, orientamos exatamente o que reunir para o seu sinistro.' },
  { q: 'Posso escolher a oficina para o conserto?', a: 'Sim, o segurado tem livre escolha. Ao optar por uma oficina da rede credenciada, porém, você costuma ter benefícios exclusivos e um processo mais ágil.' },
  { q: 'Em quanto tempo recebo a indenização?', a: 'Por lei, a indenização integral deve ser paga em até 30 dias após a entrega de toda a documentação solicitada. O prazo pode variar conforme a seguradora.' },
  { q: 'Em quais situações pago franquia?', a: 'A franquia é paga à oficina quando há indenização parcial do veículo segurado, conserto de acessórios contratados ou sinistro de vidros. Se o reparo for apenas do veículo de terceiro, não há franquia.' },
  { q: 'Perda total cancela a apólice?', a: 'Sim. Após uma indenização integral a apólice é encerrada, pois toda a cobertura contratada foi utilizada.' },
  { q: 'Colisão com veículo de um parente tem cobertura?', a: 'Não. A cobertura não se aplica a sinistros entre ascendentes, descendentes, cônjuge, irmãos e pessoas que dependam economicamente do segurado, entre outros vínculos previstos em apólice.' },
  { q: 'Como peço a segunda via da minha apólice?', a: 'Fale conosco pelo WhatsApp ou e-mail com seu nome e CPF/CNPJ, enviamos a cópia rapidamente.' },
];

/* Monta apenas em contexto standalone (não dentro do _ds_bundle.js). */
if (typeof __ds_ns === 'undefined')
U.mount(() => (
  <React.Fragment>
    <U.PageHero crumbs={[{ label: 'Início', href: 'index.html' }, { label: 'Suporte' }]} eyebrow="Suporte" title="Estamos aqui quando você mais precisa" accent="quando você mais precisa"
      intro="Da dúvida simples ao sinistro complexo, nosso time acompanha você com orientação técnica e atenção humana."
      cta={<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
        <Button size="lg" href="#" onClick={(e) => { e.preventDefault(); U.openWhats(e); }}><U.WhatsIcon size={20} color="#fff" />Acionar no WhatsApp</Button>
        <Button size="lg" variant="inverse" icon="phone" href={UD.CONTACT.phoneHref}>Ligar agora</Button>
      </div>} />

    {/* CANAIS */}
    <section style={{ ...U.sectionPad }}>
      <div style={U.wrap}>
        <U.SectionHead eyebrow="Fale conosco" title="Escolha o canal que preferir" align="center" max="36ch" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="fcs-steps-grid">
          {CANAIS.map((c) => (
            <U.Reveal key={c.title}>
              <Card padding="30px 28px" style={{ height: '100%', display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-start' }}>
                <span style={{ width: 50, height: 50, borderRadius: 'var(--radius-md)', background: 'var(--blue-50)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{c.onWhats ? <U.WhatsIcon size={24} color="#1EA952" /> : <Icon name={c.icon} size={24} strokeWidth={1.6} color="var(--blue-700)" />}</span>
                <h3 style={{ margin: 0, fontSize: 'var(--fs-h3)', fontWeight: 500 }}>{c.title}</h3>
                <p style={{ margin: 0, fontSize: 'var(--fs-sm)', color: 'var(--text-body)', lineHeight: 'var(--lh-relaxed)', flex: 1 }}>{c.text}</p>
                {c.onWhats
                  ? <Button variant="secondary" iconTrailing="arrow-right" href="#" onClick={(e) => { e.preventDefault(); U.openWhats(e); }}><U.WhatsIcon size={18} color="#1EA952" />{c.action}</Button>
                  : <Button variant="secondary" href={c.href} iconTrailing="arrow-right">{c.action}</Button>}
              </Card>
            </U.Reveal>
          ))}
        </div>
      </div>
    </section>

    {/* SINISTRO 24H */}
    <section style={{ ...U.sectionPad, background: 'var(--surface-inverse)', position: 'relative', overflow: 'hidden' }}>
      <U.Blobs tone="dark" />
      <div style={{ ...U.wrap, position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 48, alignItems: 'start' }} className="fcs-faq-grid">
          <U.SectionHead eyebrow="Sinistro 24h" tone="dark" title="Aconteceu um sinistro? Respire, cuidamos disso." accent="cuidamos disso"
            intro="É aqui que fazemos a diferença. Siga os passos abaixo e conte com a gente em cada etapa." />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
            {SINISTRO.map((s, i) => (
              <div key={s.t} style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 'var(--radius-lg)', padding: '22px 22px', display: 'flex', flexDirection: 'column', gap: 10 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <Icon name={s.icon} size={24} strokeWidth={1.6} color="var(--gold-300)" />
                  <span style={{ fontFamily: 'var(--font-serif)', fontSize: 28, fontWeight: 300, color: 'rgba(255,255,255,0.3)' }}>{String(i + 1).padStart(2, '0')}</span>
                </div>
                <h3 style={{ margin: 0, fontSize: 'var(--fs-h4)', fontWeight: 500, color: 'var(--neutral-0)' }}>{s.t}</h3>
                <p style={{ margin: 0, fontSize: 'var(--fs-sm)', color: 'var(--blue-200)', lineHeight: 'var(--lh-relaxed)' }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>

    {/* SERVIÇOS RÁPIDOS */}
    <section style={{ ...U.sectionPad }}>
      <div style={U.wrap}>
        <U.SectionHead eyebrow="Serviços rápidos" title="O que você resolve com a gente" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }} className="fcs-seg-grid-3">
          {SERVICOS.map((s) => (
            <U.Reveal key={s.t}>
              <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start', padding: '20px 22px', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-subtle)', background: 'var(--surface-card)', height: '100%' }}>
                <Icon name={s.icon} size={22} strokeWidth={1.6} color="var(--gold-600)" style={{ flex: '0 0 auto', marginTop: 2 }} />
                <div>
                  <h3 style={{ margin: '0 0 4px', fontSize: 'var(--fs-body)', fontWeight: 600 }}>{s.t}</h3>
                  <p style={{ margin: 0, fontSize: 'var(--fs-sm)', color: 'var(--text-muted)', lineHeight: 'var(--lh-snug)' }}>{s.d}</p>
                </div>
              </div>
            </U.Reveal>
          ))}
        </div>
      </div>
    </section>

    {/* CENTRAL 24H, TELEFONES DAS SEGURADORAS */}
    <section id="telefones-seguradoras" style={{ ...U.sectionPad, scrollMarginTop: 'calc(var(--header-h) + 24px)' }}>
      <div style={U.wrap}>
        <U.SectionHead eyebrow="Central de assistência 24h" title="Telefones diretos das seguradoras"
          intro="Guarde os números da sua seguradora. Em qualquer situação, você também pode acionar a Flavio Seguros, acompanhamos cada etapa ao seu lado." max="52ch" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }} className="fcs-seg-grid-3">
          {UD.ASSIST_24H.map((s) => (
            <U.Reveal key={s.name}>
              <div style={{ padding: '20px 22px', borderRadius: 'var(--radius-lg)', border: '1px solid var(--border-subtle)', background: 'var(--surface-card)', height: '100%', display: 'flex', flexDirection: 'column', gap: 8 }}>
                <h3 style={{ margin: 0, fontFamily: 'var(--font-serif)', fontSize: 'var(--fs-h4)', fontWeight: 500, color: 'var(--text-strong)' }}>{s.name}</h3>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                  {s.lines.map((ln) => <span key={ln} style={{ fontSize: 'var(--fs-sm)', color: 'var(--text-body)', lineHeight: 'var(--lh-snug)' }}>{ln}</span>)}
                </div>
              </div>
            </U.Reveal>
          ))}
        </div>
      </div>
    </section>

    {/* FAQ */}
    <section style={{ ...U.sectionPad, background: 'var(--surface-subtle)' }}>
      <div style={{ ...U.wrap, display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 56, alignItems: 'start' }} className="fcs-faq-grid">
        <U.SectionHead eyebrow="Dúvidas frequentes" title="Perguntas sobre atendimento e sinistro" intro="Não encontrou sua dúvida? Fale com um consultor pelo WhatsApp." />
        <Card padding="8px 28px"><Accordion items={SUP_FAQ} defaultOpen={[0]} /></Card>
      </div>
    </section>

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