/* global React */
const HS = window.FlavioCorretoraDesignSystem_9d5869;
const HD = window.FCS_DATA;
const F = window.FCS;
const { Button, Icon, Card, Accordion, Testimonial } = HS;

/* ===================================================================== HERO
   Composição cinematográfica: numeral "1987" gigante em parallax ao fundo,
   headline revelada em máscara, visual 3D flutuando com profundidade. */
function HomeHero({ numeral }) {
  return (
    <section data-parallax-scope style={{ background: 'var(--surface-inverse)', position: 'relative', overflow: 'hidden', marginTop: 'calc(-1 * var(--header-h))', minHeight: '100svh', display: 'flex', alignItems: 'center' }}>
      <F.Blobs tone="dark" />
      {numeral !== 'ocultar' && (
        <span aria-hidden="true" data-parallax="0.16" style={{ position: 'absolute', right: '-2%', top: '2%', fontFamily: 'var(--font-serif)', fontWeight: 300, fontSize: 'clamp(15rem, 33vw, 40rem)', lineHeight: 0.8, color: 'rgba(255,255,255,0.035)', letterSpacing: '-0.05em', pointerEvents: 'none', userSelect: 'none' }}>1987</span>
      )}
      <div className="fcs-hero-inner" style={{ ...F.wrap, width: '100%', position: 'relative', paddingTop: 'calc(var(--header-h) + clamp(1.25rem, 1rem + 2.5vw, 3rem))', paddingBottom: 'clamp(4rem, 3rem + 6vw, 7rem)' }}>
        <div className="fcs-hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.08fr 0.92fr', gap: 56, alignItems: 'center' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 26 }}>
            <div className="fcs-hin" style={{ animationDelay: '0.05s' }}><F.Eyebrow tone="dark">Consultoria de seguros desde 1987</F.Eyebrow></div>
            <h1 data-mask style={{ margin: 0, fontSize: 'var(--fs-display-1)', fontWeight: 300, color: 'var(--neutral-0)', lineHeight: 1.04, letterSpacing: 'var(--ls-tight)' }}>
              <span className="ml"><span>Há quatro décadas</span></span>
              <span className="ml"><span>protegendo</span></span>
              <span className="ml"><span style={{ color: 'var(--gold-300)', fontWeight: 400 }}>histórias.</span></span>
            </h1>
            <p className="fcs-hin" style={{ animationDelay: '0.5s', margin: 0, fontSize: 'var(--fs-lead)', color: 'var(--blue-200)', maxWidth: 'none', lineHeight: 'var(--lh-relaxed)', fontWeight: 400 }}>
              <strong style={{ fontWeight: 700 }}>Precisão técnica, atenção humana.<br />Tradição que protege.</strong><br /> Da proposta ao sinistro, consultoria de verdade.
            </p>
            <div className="fcs-hin" style={{ animationDelay: '0.62s', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Button size="lg" href="orcamento.html" iconTrailing="arrow-right">Solicite uma cotação</Button>
              <Button size="lg" variant="inverse" href="#" onClick={(e) => { e.preventDefault(); F.openWhats(e); }}><F.WhatsIcon size={20} color="#1EA952" />Falar no WhatsApp</Button>
            </div>
            <div className="fcs-hin" style={{ animationDelay: '0.74s', display: 'flex', alignItems: 'center', gap: 24, marginTop: 4, flexWrap: 'wrap' }}>
              {[['shield-check', '+10 seguradoras parceiras'], ['users', 'Atendimento humano e próximo']].map(([ic, tx]) => (
                <span key={tx} style={{ display: 'inline-flex', alignItems: 'center', gap: 9, color: 'var(--blue-200)', fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)' }}><Icon name={ic} size={18} color="var(--gold-300)" /> {tx}</span>
              ))}
            </div>
          </div>
          <div className="fcs-hero-visual" data-parallax="-0.05"><F.Hero3D /></div>
        </div>
      </div>
      <span className="fcs-scrollcue fcs-hin" style={{ animationDelay: '1s' }}><span className="bar" /> Role para explorar</span>
    </section>
  );
}

/* ================================================================== NÚMEROS
   Barra de confiança tipográfica com contadores animados (sem cards iguais). */
function NumerosBand() {
  const items = [
    { v: '40', dec: 0, suf: null, label: 'anos de mercado, em Belo Horizonte' },
    { v: '2396', dec: 0, sep: true, label: 'clientes atendidos ao longo da história' },
    { v: '2600', dec: 0, sep: true, label: 'apólices administradas' },
    { v: '96', dec: 0, suf: '%', label: 'de retenção dos nossos clientes' },
  ];
  return (
    <section style={{ background: 'var(--surface-card)', borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ ...F.wrap, padding: '58px var(--gutter)' }}>
        <div className="fcs-nums" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
          {items.map((it, i) => (
            <div key={i} className="rise" style={{ padding: '4px 36px', borderLeft: i === 0 ? 'none' : '1px solid var(--border-subtle)' }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 3 }}>
                <span data-count={it.v} data-count-dec={it.dec} data-count-sep={it.sep ? '1' : undefined} style={{ fontFamily: 'var(--font-serif)', fontWeight: 300, fontSize: 'clamp(3rem, 5vw, 4.6rem)', lineHeight: 1, color: 'var(--blue-800)', letterSpacing: '-0.03em' }}>0</span>
                {it.suf && <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 300, fontSize: 'clamp(1.6rem, 2.4vw, 2.2rem)', color: 'var(--gold-500)' }}>{it.suf}</span>}
              </div>
              <p style={{ margin: '14px 0 0', fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)', color: 'var(--text-muted)', lineHeight: 1.45, maxWidth: '22ch' }}>{it.label}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ========================================================== LINHA DE SEGURO */
function SegRow({ p }) {
  return (
    <a href={'produto.html?p=' + p.slug} className="fcs-segrow" style={{ display: 'grid', gridTemplateColumns: '46px 1fr auto', alignItems: 'center', gap: 20, padding: '20px 12px', borderTop: '1px solid var(--border-subtle)', textDecoration: 'none' }}>
      <span className="fcs-segrow-ic" style={{ width: 46, height: 46, borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--blue-700)' }}><Icon name={p.icon} size={20} strokeWidth={1.6} color="currentColor" /></span>
      <span>
        <span className="fcs-segrow-title" style={{ display: 'block', fontFamily: 'var(--font-serif)', fontSize: 'var(--fs-h4)', fontWeight: 500, color: 'var(--text-strong)', transition: 'color var(--dur-normal)' }}>{p.title}</span>
        <span style={{ display: 'block', fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)', color: 'var(--text-muted)', marginTop: 3 }}>{p.one}</span>
      </span>
      <span className="fcs-segrow-arw" style={{ display: 'inline-flex' }}><Icon name="arrow-right" size={20} color="var(--blue-600)" /></span>
    </a>
  );
}

function FeaturedSeguro({ p, badge }) {
  return (
    <a href={'produto.html?p=' + p.slug} className="fcs-feat rise" style={{ display: 'flex', flexDirection: 'column', textDecoration: 'none' }}>
      <div style={{ position: 'relative', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
        <F.Photo className="fcs-feat-img" src={p.photo} icon={p.icon} caption={p.title} ratio="16 / 11" />
        <span style={{ position: 'absolute', top: 16, left: 16, display: 'inline-flex', alignItems: 'center', gap: 7, padding: '6px 13px', borderRadius: 'var(--radius-pill)', background: 'rgba(198,154,91,0.92)', color: 'var(--blue-950)', fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-xs)', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{badge}</span>
      </div>
      <div style={{ padding: '24px 4px 4px' }}>
        <h3 style={{ margin: '0 0 8px', fontSize: 'var(--fs-h3)', fontWeight: 400, color: 'var(--text-strong)' }}>{p.title}</h3>
        <p style={{ margin: '0 0 16px', fontSize: 'var(--fs-body)', color: 'var(--text-body)', lineHeight: 'var(--lh-relaxed)', maxWidth: '46ch' }}>{p.tagline}</p>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)', fontWeight: 600, color: 'var(--blue-700)' }}>Ver cobertura <span className="fcs-feat-arw" style={{ display: 'inline-flex' }}><Icon name="arrow-right" size={16} strokeWidth={2} /></span></span>
      </div>
    </a>
  );
}

/* ================================================================== SEGUROS
   Editorial: um seguro em destaque + lista tipográfica dos demais, alternado. */
function SegurosEditorial({ segLayout }) {
  const groups = [
    { eyebrow: 'Para você', title: 'Proteção para cada fase da vida', list: HD.pf(), badge: 'Mais procurado' },
    { eyebrow: 'Para sua empresa', title: 'Solidez para o seu negócio crescer', list: HD.pj(), badge: 'Para empresas' },
  ];
  return (
    <section id="seguros" style={{ ...F.sectionPad }}>
      <div style={F.wrap}>
        <F.SectionHead eyebrow="Seguros" title="Muito além do automóvel" accent="além"
          intro="Uma só consultoria para pessoas e empresas, encontramos a solução certa entre mais de 10 seguradoras parceiras." max="52ch" />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 84 }}>
          {groups.map((g, gi) => {
            const feat = g.list[0]; const rest = g.list.slice(1, 4);
            const listCol = (
              <div style={{ display: 'flex', flexDirection: 'column', order: gi % 2 === 0 ? 2 : 1 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 16, marginBottom: 10, flexWrap: 'wrap' }}>
                  <h3 style={{ margin: 0, fontSize: 'var(--fs-h3)', fontWeight: 400, color: 'var(--text-strong)', maxWidth: '16ch' }}>{g.title}</h3>
                  <F.Eyebrow>{g.eyebrow}</F.Eyebrow>
                </div>
                <div className="rise">
                  {rest.map((p) => <SegRow key={p.slug} p={p} />)}
                  <a href="seguros.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 22, fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)', fontWeight: 600, color: 'var(--blue-700)', textDecoration: 'none' }}>
                    Ver todos os seguros {g.eyebrow.toLowerCase()} <Icon name="arrow-right" size={16} strokeWidth={2} />
                  </a>
                </div>
              </div>
            );
            if (segLayout === 'lista') {
              return (
                <div key={g.eyebrow}>
                  <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 16, marginBottom: 12, flexWrap: 'wrap' }}>
                    <h3 style={{ margin: 0, fontSize: 'var(--fs-h3)', fontWeight: 400, color: 'var(--text-strong)' }}>{g.title}</h3>
                    <F.Eyebrow>{g.eyebrow}</F.Eyebrow>
                  </div>
                  <div className="rise">{g.list.slice(0, 4).map((p) => <SegRow key={p.slug} p={p} />)}</div>
                </div>
              );
            }
            return (
              <div key={g.eyebrow} className="fcs-seg-ed" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 52, alignItems: 'center' }}>
                <div style={{ order: gi % 2 === 0 ? 1 : 2 }}><FeaturedSeguro p={feat} badge={g.badge} /></div>
                {listCol}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ========================================================= PULL-QUOTE (ritmo) */
function PullQuote() {
  return (
    <section style={{ ...F.sectionPad, background: 'var(--blue-950)', position: 'relative', overflow: 'hidden' }}>
      <F.Blobs tone="dark" />
      <div style={{ ...F.wrap, position: 'relative', maxWidth: 980, textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 28 }}>
        <p data-mask style={{ margin: 0, fontFamily: 'var(--font-serif)', fontWeight: 300, fontSize: 'clamp(1.7rem, 3.4vw, 2.9rem)', lineHeight: 1.28, color: 'var(--neutral-0)', letterSpacing: '-0.01em' }}>
          <span className="ml"><span>Seguro não é papel. É a certeza de que</span></span>
          <span className="ml"><span><em style={{ fontStyle: 'normal', color: 'var(--gold-300)' }}>alguém responde</em> quando você precisa.</span></span>
        </p>
        <span className="rise" style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--blue-300)' }}>Flavio Seguros</span>
      </div>
    </section>
  );
}

/* =========================================================== COMO FUNCIONA
   Título fixo (sticky) + timeline com linha dourada que se desenha no scroll. */
function ComoFunciona() {
  return (
    <section style={{ ...F.sectionPad, background: 'var(--surface-subtle)' }}>
      <div style={{ ...F.wrap, display: 'grid', gridTemplateColumns: '0.82fr 1.18fr', gap: 60, alignItems: 'start' }} className="fcs-cf-grid">
        <div style={{ position: 'sticky', top: 120, display: 'flex', flexDirection: 'column', gap: 26 }}>
          <F.SectionHead eyebrow="Como funciona" title="Do diagnóstico ao suporte no sinistro"
            intro="Um método consultivo em quatro passos. Nossa diferença aparece no momento mais delicado, o sinistro." />
          <div><Button variant="secondary" href="orcamento.html" iconTrailing="arrow-right">Começar meu diagnóstico</Button></div>
        </div>
        <div data-draw-scope style={{ position: 'relative' }}>
          <span aria-hidden="true" style={{ position: 'absolute', left: 25, top: 8, bottom: 8, width: 2, background: 'var(--border-default)' }} />
          <span aria-hidden="true" data-draw style={{ position: 'absolute', left: 25, top: 8, bottom: 8, width: 2, background: 'var(--gold-500)', transformOrigin: 'top' }} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 38 }}>
            {HD.STEPS.map((s) => (
              <div key={s.n} className="rise" style={{ display: 'grid', gridTemplateColumns: '52px 1fr', gap: 24, alignItems: 'start' }}>
                <span style={{ width: 52, height: 52, borderRadius: '50%', background: 'var(--blue-800)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', position: 'relative', zIndex: 1, boxShadow: '0 0 0 6px var(--surface-subtle)' }}><Icon name={s.icon} size={22} strokeWidth={1.6} color="var(--neutral-0)" /></span>
                <div style={{ paddingTop: 3 }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--gold-600)', letterSpacing: '0.08em' }}>{s.n}</span>
                  <h4 style={{ margin: '5px 0 7px', fontSize: 'var(--fs-h4)', fontWeight: 500 }}>{s.t}</h4>
                  <p style={{ margin: 0, color: 'var(--text-body)', maxWidth: '52ch', lineHeight: 'var(--lh-relaxed)' }}>{s.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================= SEGURADORAS */
function SeguradorasMarquee() {
  const withLogo = HD.SEG_LOGOS.filter(function (s) { return s.src; });
  const row = withLogo.concat(withLogo);
  return (
    <section style={{ ...F.sectionPad, overflow: 'hidden' }}>
      <div style={F.wrap}>
        <F.SectionHead eyebrow="Seguradoras parceiras" title="Comparamos as melhores para indicar a ideal" align="center"
          intro="Trabalhamos com as principais seguradoras do país. A cada cotação, comparamos coberturas, prazos e preço para recomendar o melhor custo-benefício, não o que dá mais comissão." max="56ch" />
      </div>
      <div className="fcs-marquee" style={{ marginTop: 8 }}>
        <div className="fcs-marquee-track">
          {row.map((s, i) => <a key={i} className="fcs-mchip" 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>
      <div style={{ ...F.wrap, textAlign: 'center', marginTop: 40 }}>
        <Button variant="secondary" href="a-corretora.html" iconTrailing="arrow-right">Conheça nossos critérios de escolha</Button>
      </div>
    </section>
  );
}

/* ============================================================= DEPOIMENTOS */
function Depoimentos({ depoStyle }) {
  const list = HD.TESTIMONIALS;

  if (depoStyle === 'grade') {
    return (
      <section style={{ ...F.sectionPad, background: 'var(--surface-sunken)' }}>
        <div style={F.wrap}>
          <F.SectionHead eyebrow="Depoimentos" title="A confiança de quem é cliente há décadas" align="center" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="fcs-dep-grid">
            {list.map((t, k) => <div key={k} className="rise"><Testimonial {...t} rating={5} /></div>)}
          </div>
        </div>
      </section>
    );
  }

  // Mural em mosaico inclinado, colunas em rolagem automática (fundo azul).
  const cols = [[], [], []];
  list.forEach((t, k) => cols[k % 3].push(t));
  const colClass = ['up', 'down slow', 'up slow'];
  const [paused, setPaused] = React.useState(false);
  return (
    <section style={{ ...F.sectionPad, background: 'var(--surface-inverse)', position: 'relative', overflow: 'hidden' }}>
      <F.Blobs tone="dark" />
      <div style={{ ...F.wrap, position: 'relative' }}>
        <F.SectionHead eyebrow="Depoimentos" title="A confiança de quem é cliente há décadas" intro="Histórias reais de quem confiou a sua proteção à Flavio Seguros." align="center" tone="dark" />
        <div className={'fcs-depo-vp' + (paused ? ' is-paused' : '')} onClick={() => setPaused((p) => !p)}>
          <div className="fcs-depo-stage">
            {cols.map((col, ci) => (
              <div key={ci} className={'fcs-depo-col ' + colClass[ci]}>
                {col.concat(col).map((t, k) => (
                  <Testimonial key={k} {...t} rating={5} tone="dark" />
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ====================================================================== FAQ */
function HomeFAQ() {
  return (
    <section style={{ ...F.sectionPad }}>
      <div style={{ ...F.wrap, display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 56, alignItems: 'start' }} className="fcs-faq-grid">
        <F.SectionHead eyebrow="Dúvidas frequentes" title="Perguntas que ouvimos com frequência" intro="Não encontrou sua dúvida? Fale com um consultor pelo WhatsApp, respondemos rápido." />
        <div className="rise"><Card padding="8px 28px"><Accordion items={HD.FAQ_HOME} defaultOpen={[0]} /></Card></div>
      </div>
    </section>
  );
}

/* ===================================================================== PAGE */
const HOME_TWEAKS = /*EDITMODE-BEGIN*/{
  "heroNumeral": "mostrar",
  "segLayout": "destaque",
  "depoStyle": "rotativo"
}/*EDITMODE-END*/;

function HomeApp() {
  const { useTweaks, TweaksPanel, TweakSection, TweakRadio } = window;
  const [t, setTweak] = useTweaks(HOME_TWEAKS);
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  return (
    <React.Fragment>
      <F.Header />
      <main>
        <HomeHero numeral={t.heroNumeral} />
        <NumerosBand />
        <SegurosEditorial segLayout={t.segLayout} />
        <PullQuote />
        <ComoFunciona />
        <SeguradorasMarquee />
        <Depoimentos depoStyle={t.depoStyle} />
        <HomeFAQ />
        <F.FinalCTA />
      </main>
      <F.Footer />
      <F.FloatingWhats label="Fale conosco" />
      <F.WhatsPicker />
      <TweaksPanel>
        <TweakSection label="Herói" />
        <TweakRadio label="Numeral 1987 ao fundo" value={t.heroNumeral} options={['mostrar', 'ocultar']} onChange={(v) => setTweak('heroNumeral', v)} />
        <TweakSection label="Seções" />
        <TweakRadio label="Seguros" value={t.segLayout} options={['destaque', 'lista']} onChange={(v) => setTweak('segLayout', v)} />
        <TweakRadio label="Depoimentos" value={t.depoStyle} options={['rotativo', 'grade']} onChange={(v) => setTweak('depoStyle', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

function bootHome() {
  if (!window.FCS || !window.FCS.Footer || !window.FCS.Hero3D || !window.FCS.motion || !window.useTweaks) { setTimeout(bootHome, 30); return; }
  ReactDOM.createRoot(document.getElementById('root')).render(<HomeApp />);
  const tick = () => window.lucide && window.lucide.createIcons();
  [80, 300, 800, 1500].forEach((ms) => setTimeout(tick, ms));
  setTimeout(() => F.motion.init({ smoothScroll: true, cursor: true }), 180);
}
if (typeof __ds_ns === 'undefined') { bootHome(); }
