/* global React */
const CS = window.FlavioCorretoraDesignSystem_9d5869;
const CD = window.FCS_DATA;
const C = window.FCS;
const { Button, Icon, Card, StatCard, Testimonial } = CS;

/* Monta apenas em contexto standalone (não dentro do _ds_bundle.js). */
if (typeof __ds_ns === 'undefined')
C.mount(() => (
  <React.Fragment>
    <C.PageHero crumbs={[{ label: 'Início', href: 'index.html' }, { label: 'A Corretora' }]} eyebrow="A Corretora" title="Tradição que protege." accent="protege" lead="Precisão técnica, atenção humana."
      intro="Desde 1987, em Belo Horizonte, construímos relações que atravessam gerações, com o mesmo cuidado do primeiro dia."
      cta={<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
        <Button size="lg" href="orcamento.html" iconTrailing="arrow-right">Fale com um consultor</Button>
        <Button size="lg" variant="inverse" href="#" onClick={(e) => { e.preventDefault(); C.openWhats(e); }}><C.WhatsIcon size={20} color="#1EA952" />WhatsApp</Button>
      </div>} />

    {/* HISTÓRIA */}
    <section style={{ ...C.sectionPad }}>
      <div style={{ ...C.wrap, display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 56, alignItems: 'center' }} className="fcs-prod-grid">
        <div style={{ position: 'relative' }}>
          <C.Photo src="assets/fotos/atendimento.png" alt="Atendimento humano da Flavio Seguros" caption="atendimento humano" ratio="1 / 1" />
          <div style={{ position: 'absolute', bottom: -22, right: -22, ...C.glassStyle, background: 'rgba(255,255,255,0.92)', padding: '16px 20px', display: 'flex', alignItems: 'center', gap: 14 }}>
            <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 300, fontSize: 40, color: 'var(--blue-800)', lineHeight: 1 }}>40<span style={{ color: 'var(--gold-500)' }}>+</span></span>
            <span style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)', color: 'var(--text-muted)', maxWidth: '14ch' }}>anos cuidando do que importa</span>
          </div>
        </div>
        <div>
          <C.SectionHead eyebrow="Nossa história" title="Um especialista ao seu lado, não apenas uma apólice" accent="ao seu lado"
            intro="A Flavio Seguros nasceu do desejo de equilibrar a relação entre o segurado e a seguradora, na contratação e, principalmente, no momento do sinistro." />
          <p style={{ margin: 0, color: 'var(--text-body)', lineHeight: 'var(--lh-relaxed)', maxWidth: '54ch' }}>
            Quatro décadas depois, seguimos com a mesma essência: atendimento próximo, transparência e conhecimento aprofundado de cada modalidade. É o que chamamos de <strong style={{ color: 'var(--blue-800)' }}>verdadeira consultoria de seguros</strong>, da confecção da proposta à renovação da apólice.
          </p>
          <div style={{ marginTop: 28, display: 'flex', alignItems: 'center', gap: 16, paddingTop: 24, borderTop: '1px solid var(--border-subtle)' }}>
            <span style={{ fontFamily: 'var(--font-serif)', fontSize: 26, fontWeight: 500, color: 'var(--blue-800)' }}>Flávio Araújo</span>
            <span style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)', color: 'var(--text-muted)' }}>Fundador · Corretor de Seguros</span>
          </div>
        </div>
      </div>
    </section>

    {/* NÚMEROS */}
    <section style={{ background: 'var(--surface-card)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ ...C.wrap, padding: '44px var(--gutter)', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }} className="fcs-stats-grid">
        {CD.STATS.map((d, i) => (
          <C.Reveal key={i} delay={i * 60} style={{ padding: '4px 28px', borderLeft: i === 0 ? 'none' : '1px solid var(--border-subtle)' }}>
            <StatCard {...d} />
          </C.Reveal>
        ))}
      </div>
    </section>

    {/* TIMELINE */}
    <section style={{ ...C.sectionPad, background: 'var(--surface-subtle)' }}>
      <div style={C.wrap}>
        <C.SectionHead eyebrow="Linha do tempo" title="Quatro décadas de história" align="center" max="40ch" />
        <div data-draw-scope style={{ position: 'relative' }}>
          <span aria-hidden="true" className="fcs-tl-line" style={{ background: 'var(--border-default)' }} />
          <span aria-hidden="true" data-draw className="fcs-tl-line" style={{ background: 'var(--gold-500)', transformOrigin: 'top' }} />
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {CD.TIMELINE.map((t, i) => (
              <div key={i} className="rise fcs-tl-row" style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 28, paddingBottom: i === CD.TIMELINE.length - 1 ? 0 : 32 }}>
                <span style={{ fontFamily: 'var(--font-serif)', fontSize: 'var(--fs-h2)', fontWeight: 300, color: 'var(--gold-600)', lineHeight: 1 }}>{t.year}</span>
                <div style={{ position: 'relative', paddingLeft: 28 }}>
                  <span style={{ position: 'absolute', left: -8, top: 4, width: 14, height: 14, borderRadius: '50%', background: 'var(--gold-500)', border: '3px solid var(--surface-subtle)', zIndex: 1 }} />
                  <h3 style={{ margin: '0 0 6px', fontSize: 'var(--fs-h4)', fontWeight: 500 }}>{t.t}</h3>
                  <p style={{ margin: 0, color: 'var(--text-body)', maxWidth: '56ch', lineHeight: 'var(--lh-relaxed)' }}>{t.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>

    {/* VALORES */}
    <section style={{ ...C.sectionPad }}>
      <div style={C.wrap}>
        <C.SectionHead eyebrow="Nossos valores" title="O que nos guia em cada atendimento" align="center" max="42ch" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }} className="fcs-steps-grid">
          {CD.VALUES.map((v, i) => (
            <C.Reveal key={i} delay={i * 60}>
              <Card padding="28px 24px" style={{ height: '100%', display: 'flex', flexDirection: 'column', gap: 14 }}>
                <span style={{ width: 50, height: 50, borderRadius: 'var(--radius-md)', background: 'var(--gold-100)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={v.icon} size={23} strokeWidth={1.6} color="var(--gold-700)" /></span>
                <h3 style={{ margin: 0, fontSize: 'var(--fs-h4)', fontWeight: 500 }}>{v.t}</h3>
                <p style={{ margin: 0, fontSize: 'var(--fs-sm)', color: 'var(--text-body)', lineHeight: 'var(--lh-relaxed)' }}>{v.d}</p>
              </Card>
            </C.Reveal>
          ))}
        </div>
      </div>
    </section>

    {/* METODOLOGIA */}
    <section style={{ ...C.sectionPad, background: 'var(--surface-sunken)' }}>
      <div style={C.wrap}>
        <C.SectionHead eyebrow="Como trabalhamos" title="Metodologia consultiva, do diagnóstico ao sinistro" accent="consultiva" max="46ch" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }} className="fcs-steps-grid">
          {CD.STEPS.map((s, i) => (
            <C.Reveal key={i} delay={i * 60}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <span style={{ width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'var(--blue-800)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={s.icon} size={21} strokeWidth={1.6} color="var(--neutral-0)" /></span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--gold-600)' }}>{s.n}</span>
                </div>
                <h3 style={{ margin: 0, fontSize: 'var(--fs-h4)', fontWeight: 500 }}>{s.t}</h3>
                <p style={{ margin: 0, fontSize: 'var(--fs-sm)', color: 'var(--text-body)', lineHeight: 'var(--lh-relaxed)' }}>{s.d}</p>
              </div>
            </C.Reveal>
          ))}
        </div>
      </div>
    </section>

    {/* DEPOIMENTO DESTAQUE */}
    <section style={{ ...C.sectionPad }}>
      <div style={{ ...C.wrap, maxWidth: 860, textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20 }}>
        <Icon name="quote" size={40} color="var(--gold-400)" />
        <p style={{ margin: 0, fontFamily: 'var(--font-serif)', fontSize: 'var(--fs-h2)', fontWeight: 300, lineHeight: 1.4, color: 'var(--text-strong)' }}>{CD.TESTIMONIALS[2].quote}</p>
        <div>
          <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, color: 'var(--blue-800)' }}>{CD.TESTIMONIALS[2].author}</span>
          <span style={{ fontFamily: 'var(--font-sans)', color: 'var(--text-muted)' }}> · {CD.TESTIMONIALS[2].role}</span>
        </div>
      </div>
    </section>

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