/* global React */
const OS = window.FlavioCorretoraDesignSystem_9d5869;
const OD = window.FCS_DATA;
const O = window.FCS;
const { Button, Icon, Card, Field, Input, Select, Textarea, Checkbox, Alert } = OS;

const oparams = new URLSearchParams(location.search);
const preProd = OD.productBySlug(oparams.get('p'));

/* Ordem do formulário: os 4 principais primeiro */
const PRIORITY = ['seguro-automovel', 'seguro-residencial', 'seguro-de-vida', 'seguro-viagem'];
const FORM_PRODUCTS = PRIORITY.map((s) => OD.productBySlug(s)).filter(Boolean).concat(OD.PRODUCTS.filter((p) => PRIORITY.indexOf(p.slug) === -1));

const TRUST = [
  { icon: 'clock', t: 'Retorno em até 1 dia útil', d: 'Um consultor entra em contato com as melhores opções.' },
  { icon: 'git-compare', t: 'Comparação real', d: 'Cotamos entre 10+ seguradoras, você recebe opções, não uma só.' },
  { icon: 'users', t: 'Consultoria humana', d: 'Você fala com gente, não com robô.' },
  { icon: 'lock', t: 'Dados protegidos', d: 'Tratamos suas informações conforme a LGPD.' },
];

function OrcamentoApp() {
  const [step, setStep] = React.useState(preProd ? 1 : 0);
  const [prodSlug, setProdSlug] = React.useState(preProd ? preProd.slug : OD.PRODUCTS[0].slug);
  const prod = OD.productBySlug(prodSlug) || OD.PRODUCTS[0];
  const steps = ['Modalidade', 'Seus dados', 'Detalhes'];
  const [data, setData] = React.useState({});
  const [sending, setSending] = React.useState(false);
  const captureStep = (ids) => setData((d) => { const n = { ...d }; ids.forEach((id) => { const el = document.getElementById(id); if (el) n[id] = (el.value || '').trim(); }); return n; });

  function buildFields(all) {
    const v = (id) => (all[id] || '').trim();
    const fields = { Modalidade: prod.title };
    [['Nome', 'o-nome'], ['WhatsApp', 'o-tel'], ['E-mail', 'o-mail'], ['Cidade', 'o-cid']].forEach(([label, id]) => { if (v(id)) fields[label] = v(id); });
    (prod.fields || []).slice(0, 2).forEach((f) => { if (v(f.id)) fields[f.label] = v(f.id); });
    if (v('o-msg')) fields['Detalhes'] = v('o-msg');
    return fields;
  }
  function sendEmail(latest) {
    const fields = buildFields(latest || data);
    const subject = 'Cotação ' + prod.title + (fields['Nome'] ? ' — ' + fields['Nome'] : '') + ' [' + new Date().toLocaleString('pt-BR') + ']';
    setSending(true);
    return O.sendQuoteEmail(subject, fields)
      .catch(() => {
        const body = Object.entries(fields).map(([k, val]) => k + ': ' + val).join('\n');
        window.open('mailto:' + (OD.CONTACT.emailQuote || OD.CONTACT.email) + '?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body), '_blank');
      })
      .finally(() => setSending(false));
  }

  return (
    <section style={{ background: 'var(--surface-inverse)', position: 'relative', overflow: 'hidden', marginTop: 'calc(-1 * var(--header-h))' }}>
      <O.Blobs tone="dark" />
      <div aria-hidden="true" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 420, background: 'linear-gradient(to bottom, transparent, var(--surface-inverse) 58%)', pointerEvents: 'none', zIndex: 0 }} />
      <div aria-hidden="true" style={{ position: 'absolute', left: '50%', bottom: -320, transform: 'translateX(-50%)', width: 900, height: 600, borderRadius: '50%', background: 'radial-gradient(circle, rgba(198,154,91,0.26), rgba(198,154,91,0) 66%)', filter: 'blur(50px)', pointerEvents: 'none', zIndex: 0 }} />
      <div style={{ ...O.wrap, position: 'relative', ...O.sectionPad, paddingTop: 'calc(var(--header-h) + 2rem)', display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 56, alignItems: 'start' }} className="fcs-quote-grid">
        <O.HeroCrumbs items={[{ label: 'Início', href: 'index.html' }, { label: 'Solicite uma cotação' }]} style={{ gridColumn: '1 / -1' }} />
        {/* coluna de confiança */}
        <div>
          <O.Eyebrow tone="dark">Solicite uma cotação</O.Eyebrow>
          <h1 style={{ margin: '18px 0 16px', fontSize: 'var(--fs-display-2)', fontWeight: 300, color: 'var(--neutral-0)', lineHeight: 1.08, letterSpacing: 'var(--ls-tight)' }}>Uma proposta <em style={{ fontStyle: 'normal', color: 'var(--gold-300)' }}>sob medida</em> para você</h1>
          <p style={{ margin: '0 0 36px', fontSize: 'var(--fs-lead)', color: 'var(--blue-200)', maxWidth: '42ch', lineHeight: 'var(--lh-relaxed)' }}>
            Conte o que precisa proteger. Comparamos mais de 10 seguradoras e retornamos com a melhor recomendação, sem compromisso.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            {TRUST.map((t) => (
              <div key={t.t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <span style={{ width: 44, height: 44, flex: '0 0 auto', borderRadius: 'var(--radius-md)', background: 'rgba(198,154,91,0.14)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={t.icon} size={20} strokeWidth={1.6} color="var(--gold-300)" /></span>
                <div>
                  <h3 style={{ margin: '2px 0 4px', fontSize: 'var(--fs-body)', color: 'var(--neutral-0)', fontWeight: 600 }}>{t.t}</h3>
                  <p style={{ margin: 0, fontSize: 'var(--fs-sm)', color: 'var(--blue-200)', lineHeight: 'var(--lh-snug)' }}>{t.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* card do formulário */}
        <div style={{ ...O.glassStyle, background: 'rgba(255,255,255,0.96)', padding: '32px 34px' }}>
          {step < 3 && (
            <div style={{ display: 'flex', gap: 8, marginBottom: 26 }}>
              {steps.map((s, i) => (
                <div key={s} style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
                  <span style={{ height: 4, borderRadius: 2, background: i <= step ? 'var(--gold-500)' : 'var(--border-strong)' }} />
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-xs)', fontWeight: i === step ? 600 : 400, color: i <= step ? 'var(--blue-800)' : 'var(--text-muted)' }}>{i + 1}. {s}</span>
                </div>
              ))}
            </div>
          )}

          {step === 0 && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <h2 style={{ margin: 0, fontSize: 'var(--fs-h3)', fontWeight: 500 }}>Qual seguro você procura?</h2>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }} className="fcs-2col">
                {FORM_PRODUCTS.map((p) => (
                  <button key={p.slug} onClick={() => setProdSlug(p.slug)} style={{
                    cursor: 'pointer', textAlign: 'left', padding: '15px 16px', borderRadius: 'var(--radius-md)',
                    border: '1.5px solid ' + (prodSlug === p.slug ? 'var(--blue-800)' : 'var(--border-subtle)'),
                    background: prodSlug === p.slug ? 'var(--blue-50)' : 'var(--surface-card)',
                    display: 'flex', alignItems: 'center', gap: 12, transition: 'all var(--dur-fast) var(--ease-standard)',
                  }}>
                    <Icon name={p.icon} size={22} strokeWidth={1.6} color={prodSlug === p.slug ? 'var(--blue-800)' : 'var(--neutral-500)'} />
                    <span style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)', fontWeight: 600, color: 'var(--text-strong)' }}>{p.title}</span>
                  </button>
                ))}
              </div>
              <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                <Button onClick={() => setStep(1)} iconTrailing="arrow-right">Continuar</Button>
              </div>
            </div>
          )}

          {step === 1 && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <h2 style={{ margin: 0, fontSize: 'var(--fs-h3)', fontWeight: 500 }}>Seus dados de contato</h2>
              <Field label="Nome completo" htmlFor="o-nome"><Input id="o-nome" placeholder="Seu nome" defaultValue={data['o-nome'] || ''} /></Field>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }} className="fcs-2col">
                <Field label="WhatsApp" htmlFor="o-tel"><Input id="o-tel" icon="phone" placeholder="(31) 90000-0000" defaultValue={data['o-tel'] || ''} /></Field>
                <Field label="E-mail" htmlFor="o-mail"><Input id="o-mail" type="email" icon="mail" placeholder="voce@email.com" defaultValue={data['o-mail'] || ''} /></Field>
              </div>
              <Field label="Cidade" htmlFor="o-cid"><Input id="o-cid" icon="map-pin" placeholder="Belo Horizonte" defaultValue={data['o-cid'] || ''} /></Field>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <Button variant="ghost" onClick={() => setStep(0)} icon="arrow-left">Voltar</Button>
                <Button onClick={() => { captureStep(['o-nome', 'o-tel', 'o-mail', 'o-cid']); setStep(2); }} iconTrailing="arrow-right">Continuar</Button>
              </div>
            </div>
          )}

          {step === 2 && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <h2 style={{ margin: 0, fontSize: 'var(--fs-h3)', fontWeight: 500 }}>Detalhes do seguro</h2>
              <Field label="Modalidade" htmlFor="o-mod"><Select id="o-mod" value={prodSlug} onChange={(e) => setProdSlug(e.target.value)}>{FORM_PRODUCTS.map((p) => <option key={p.slug} value={p.slug}>{p.title}</option>)}</Select></Field>
              {prod.fields && prod.fields.slice(0, 2).map((f) => (
                <Field key={f.id} label={f.label} htmlFor={f.id}>
                  {f.select ? <Select id={f.id}>{f.select.map((o) => <option key={o}>{o}</option>)}</Select> : <Input id={f.id} placeholder={f.ph} />}
                </Field>
              ))}
              <Field label="Conte um pouco mais (opcional)" htmlFor="o-msg"><Textarea id="o-msg" placeholder="O que você quer proteger e prioridades..." rows={3} defaultValue={data['o-msg'] || ''} /></Field>
              <Checkbox label="Concordo em ser contatado e com a Política de Privacidade (LGPD)." defaultChecked />
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <Button variant="ghost" onClick={() => setStep(1)} icon="arrow-left">Voltar</Button>
                <Button disabled={sending} onClick={() => { const latest = { ...data }; ['o-mod', 'o-msg'].concat((prod.fields || []).slice(0, 2).map((f) => f.id)).forEach((id) => { const el = document.getElementById(id); if (el) latest[id] = (el.value || '').trim(); }); setData(latest); sendEmail(latest).then(() => setStep(3)); }} iconTrailing="check">{sending ? 'Enviando...' : 'Enviar solicitação'}</Button>
              </div>
            </div>
          )}

          {step === 3 && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'center', textAlign: 'center', padding: '16px 0' }}>
              <span style={{ width: 68, height: 68, borderRadius: '50%', background: 'var(--success-bg)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="check" size={34} strokeWidth={2} color="var(--success-fg)" /></span>
              <h2 style={{ margin: 0, fontSize: 'var(--fs-h2)', fontWeight: 400 }}>Solicitação enviada!</h2>
              <p style={{ margin: 0, color: 'var(--text-body)', maxWidth: '38ch', lineHeight: 'var(--lh-relaxed)' }}>Recebemos o seu pedido de cotação para <strong style={{ color: 'var(--blue-800)' }}>{prod.title}</strong> por e-mail. Um consultor responde em até 1 dia útil.</p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
                <Button href="index.html" variant="secondary">Voltar ao início</Button>
                <Button href="#" onClick={(e) => { e.preventDefault(); O.openWhats(e); }}><O.WhatsIcon size={18} color="#fff" />Falar no WhatsApp</Button>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* Monta apenas em contexto standalone (não dentro do _ds_bundle.js). */
if (typeof __ds_ns === 'undefined')
O.mount(() => (
  <React.Fragment>
    <OrcamentoApp />
  </React.Fragment>
));