/* ============================================================================
   Sections part 2 — v2 Copy Squad copy.
   Updates: plan features, "Mais contratado em Bauru", steps copy, Plano B
   rewrite, corrected FAQ answers, stronger FinalCTA.
   ========================================================================== */

/* ---- PLANS (Seção 5) ----------------------------------------------------- */
function PlansSection() {
  const plans = [
    {
      name: 'Nacional Flex', tag: 'Entrada equilibrada para PMEs', featured: false,
      feats: [
        'Atendimento em todas as regiões do Brasil',
        'Reembolso nacional de despesas',
        'Acesso à rede em Bauru e região, incluindo Hospital Santa Lúcia',
        'Preço competitivo para o porte da sua empresa',
      ],
      cta: 'Quero saber mais sobre o Nacional Flex',
    },
    {
      name: 'Nacional Plus', tag: 'O equilíbrio certo entre cobertura e custo', featured: true,
      feats: [
        'Tudo do Nacional Flex, mais:',
        'Bradesco Concierge — agendamento exclusivo para sua equipe',
        'Reembolso nacional e internacional',
        'Acesso à rede premium com Hospital Santa Lúcia incluído',
      ],
      cta: 'Quero saber mais sobre o Nacional Plus',
    },
    {
      name: 'Premium', tag: 'O topo da carteira Bradesco', featured: false,
      feats: [
        'Rede de excelência em todo o Brasil',
        'Bradesco Concierge prioritário',
        'Reembolso amplo nacional e exterior',
        'Ideal para diretoria e cargos sênior',
      ],
      cta: 'Quero saber mais sobre o Premium',
    },
  ];
  return (
    <Section id="planos" bg="var(--bg-mute)">
      <Container>
        <SectionHead chapter="Os planos"
          title="Qual é o porte da sua empresa?"
          lead="Em vez de jogar uma tabela com 40 planos, listamos os três mais contratados pelas PMEs de Bauru. No WhatsApp, refinamos com base no perfil dos colaboradores, faixa etária e orçamento — e você recebe a proposta certa, não a mais genérica." center maxw={780} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20, alignItems: 'start' }} className="plan-grid">
          {plans.map(p => <PlanCard key={p.name} {...p} />)}
        </div>
        <div style={{ textAlign: 'center', marginTop: 36 }}>
          <p className="brad-sm" style={{ marginBottom: 14 }}>
            Também temos os planos <strong style={{ color: 'var(--ink)' }}>Nacional</strong>, <strong style={{ color: 'var(--ink)' }}>Ideal</strong>, <strong style={{ color: 'var(--ink)' }}>Efetivo</strong> e <strong style={{ color: 'var(--ink)' }}>Saúde+</strong>. Para empresas acima de 200 vidas, entramos com a carteira Empresarial — condições negociadas individualmente.
          </p>
          <Btn variant="secondary" icon="arrow-right" href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">Ver todos os planos com um consultor</Btn>
        </div>
      </Container>
    </Section>
  );
}

function PlanCard({ name, tag, feats, featured, cta }) {
  const [h, setH] = useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{
      background: '#fff', borderRadius: 'var(--r-xl)', padding: featured ? '8px 0 0' : 0, overflow: 'hidden',
      border: featured ? '2px solid var(--brad-red)' : '1px solid var(--line)',
      boxShadow: featured ? 'var(--sh-lg)' : (h ? 'var(--sh-md)' : 'var(--sh-sm)'),
      transform: (featured || h) ? 'translateY(-4px)' : 'none',
      transition: 'all .22s cubic-bezier(.22,1,.36,1)', position: 'relative',
    }}>
      {featured && <div style={{ textAlign: 'center', paddingBottom: 6 }}><Pill tone="red">⭐ Mais contratado em Bauru</Pill></div>}
      <div style={{ padding: featured ? '14px 26px 28px' : '28px 26px' }}>
        <span style={{ fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 11.5, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--slate-500)' }}>SPG · 3 a 199 vidas</span>
        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 26, color: 'var(--ink)', margin: '10px 0 4px' }}>{name}</h3>
        <p className="brad-sm" style={{ margin: '0 0 20px' }}>{tag}</p>
        <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 24 }}>
          {feats.map((f, i) => (
            <li key={i} style={{ display: 'flex', gap: 11, fontFamily: 'var(--font-text)', fontSize: 14.5, lineHeight: 1.45, color: i === 0 && f.startsWith('Tudo') ? 'var(--slate-500)' : 'var(--ink-700)', fontStyle: i === 0 && f.startsWith('Tudo') ? 'italic' : 'normal' }}>
              {!(i === 0 && f.startsWith('Tudo')) && (
                <span style={{ flexShrink: 0, width: 22, height: 22, borderRadius: 99, background: 'var(--brad-red-100)', display: 'grid', placeItems: 'center', marginTop: 1 }}>
                  <Icon name="check" size={14} stroke={2.6} style={{ color: 'var(--brad-red)' }} />
                </span>
              )}
              {f}
            </li>
          ))}
        </ul>
        <Btn variant={featured ? 'primary' : 'secondary'} full icon="arrow-right" href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">{cta}</Btn>
      </div>
    </div>
  );
}

/* ---- HOW IT WORKS (Seção 6) ---------------------------------------------- */
function StepsSection() {
  const steps = [
    ['Você inicia a conversa', 'Diga em 2 linhas o que precisa: quantas vidas, porte da empresa, o que mais importa para a sua equipe. Sem cadastro, sem espera.'],
    ['A Plano B mapeia seu perfil', 'Faixa etária dos colaboradores, especialidades mais usadas, orçamento. Sem suposição, sem proposta genérica que não serve para ninguém.'],
    ['Você recebe propostas comparadas', 'Um comparativo direto dos planos que fazem sentido — com cobertura no Hospital Santa Lúcia especificada.'],
    ['Implantação sem dor de cabeça', 'Cuidamos dos cadastros e da implantação com seu RH. Você só assina.'],
  ];
  const badges = [
    ['badge-check', 'Corretora habilitada Bradesco Saúde', 'Seguros Plano B'],
    ['award', '+ 20 anos no mercado', 'Conectando empresas e famílias ao plano ideal'],
    ['map-pin', 'Atendimento local em Bauru', 'Especialistas que conhecem o mercado paulista'],
    ['eye', 'Transparência total', 'Cobertura, carências e custos explicados antes de assinar'],
  ];
  return (
    <Section id="como" bg="#fff">
      <Container>
        <SectionHead chapter="Como funciona"
          title="Sem formulário. Sem ligação fria. Direto na conversa."
          lead="Nosso atendimento é consultivo. Você nos chama no WhatsApp — a Plano B faz o trabalho pesado. A proposta certa chega no mesmo dia." maxw={720} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 18 }} className="step-grid">
          {steps.map(([t, d], i) => (
            <div key={t} style={{ position: 'relative', paddingTop: 8 }}>
              <div style={{ width: 48, height: 48, borderRadius: 14, background: 'var(--grad-red)', color: '#fff', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20, boxShadow: 'var(--sh-red)' }}>{i + 1}</div>
              <h4 className="brad-h4" style={{ margin: '16px 0 6px' }}>{t}</h4>
              <p className="brad-sm" style={{ margin: 0 }}>{d}</p>
            </div>
          ))}
        </div>

        {/* quote + CTA strip */}
        <div style={{ background: 'var(--grad-ink)', borderRadius: 'var(--r-xl)', padding: '36px 40px', marginTop: 48, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
          <div>
            <p style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, color: '#fff', margin: '0 0 6px', fontStyle: 'italic' }}>"A conversa leva 3 minutos. O comparativo chega no mesmo dia."</p>
            <p style={{ fontFamily: 'var(--font-text)', fontSize: 14.5, color: 'rgba(255,255,255,0.7)', margin: 0 }}>Sem formulário. Sem ligação fria. Só você, o consultor, e a proposta certa.</p>
          </div>
          <Btn size="lg" icon="arrow-right" href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">Começar agora</Btn>
        </div>

        {/* trust badges */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16, marginTop: 32 }} className="badge-grid">
          {badges.map(([ic, t, d]) => (
            <div key={t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <Icon name={ic} size={26} stroke={1.9} style={{ color: 'var(--brad-red)', marginTop: 2 }} />
              <div>
                <h4 style={{ fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 14.5, color: 'var(--ink)', margin: '0 0 3px' }}>{t}</h4>
                <p style={{ fontFamily: 'var(--font-text)', fontSize: 13, lineHeight: 1.5, color: 'var(--slate-500)', margin: 0 }}>{d}</p>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </Section>
  );
}

/* ---- A PLANO B (Seção 7) --------------------------------------------------- */
function CorretoraSection() {
  const attrs = [
    ['award', '+20 anos no mercado', 'Histórico no mercado paulista, com empresas que renovam há mais de uma década.'],
    ['badge-check', 'Habilitada Bradesco Saúde', 'Autorizada a operar toda a carteira da operadora, da SPG ao Empresarial.'],
    ['map-pin', 'Atendimento local em Bauru', 'Especialistas que conhecem a região, não atendentes de call center lendo script.'],
    ['eye', 'Transparência total', 'Cobertura, carências e custos explicados antes de assinar. Sem letra miúda na hora da urgência.'],
  ];
  return (
    <Section bg="var(--bg-mute)">
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} className="corr-grid">
          <div>
            <SectionHead chapter="A corretora"
              title="Quem cuida do seu plano é quem entende do mercado de Bauru." />
            <p className="brad-body" style={{ marginTop: -12 }}>
              A Plano B tem mais de 20 anos conectando empresas da região ao plano ideal — não ao mais caro, não ao mais barato, ao certo. Somos corretora habilitada Bradesco Saúde: nossa obrigação é com o seu interesse, não com a quota de venda de ninguém.
            </p>
            <p className="brad-body">
              Acompanhamos sua empresa do primeiro orçamento até a renovação anual. E corrigimos rota sempre que o cenário mudar.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 28 }}>
              {attrs.map(([ic, t, d]) => (
                <div key={t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <Icon name={ic} size={22} stroke={2} style={{ color: 'var(--brad-red)', flexShrink: 0, marginTop: 2 }} />
                  <div>
                    <strong style={{ fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 15, color: 'var(--ink)' }}>{t}</strong>
                    <span style={{ fontFamily: 'var(--font-text)', fontSize: 14.5, color: 'var(--slate-600)' }}> — {d}</span>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 28 }}><Btn icon="arrow-right" href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">Falar com a Plano B Bauru</Btn></div>
          </div>
          <Photo h={440} label="Equipe Seguros Plano B · Bauru" />
        </div>
      </Container>
    </Section>
  );
}

/* ---- FAQ (Seção 8) ------------------------------------------------------- */
function FAQSection() {
  const faqs = [
    ['O Hospital Santa Lúcia já está na rede credenciada Bradesco?', 'A integração do Santa Lúcia Bauru à rede credenciada está sendo formalizada com a operadora. No WhatsApp, confirmamos em tempo real qual plano já oferece acesso à unidade e como funciona o atendimento — sem surpresa na hora em que o colaborador precisar usar.'],
    ['Quais planos têm cobertura mais ampla aqui em Bauru?', 'Os planos Nacional Plus e Premium oferecem a rede mais robusta para Bauru e região — com Bradesco Concierge, reembolso internacional e acesso prioritário a hospitais de referência, incluindo o Hospital Santa Lúcia.'],
    ['Posso contratar tendo só 3 colaboradores?', 'Sim. A partir de 3 vidas você já contrata na carteira SPG (Pequenas e Médias Empresas), com acesso à rede completa Bradesco Saúde. Para empresas acima de 200 vidas, a carteira Empresarial tem condições negociadas individualmente.'],
    ['Posso migrar do meu plano atual sem perder as carências já cumpridas?', 'Em muitos casos, sim. A Bradesco Saúde possui regras de Compatibilidade Operacional Total (COT) que permitem a portabilidade de carências. No WhatsApp, a Plano B valida o seu cenário específico antes de você tomar qualquer decisão.'],
    ['Os planos têm coparticipação? Como funciona?', 'Depende do plano e da modalidade. Alguns planos SPG incluem coparticipação — um percentual pago na utilização — como forma de reduzir o custo mensal fixo. Outros não têm. No WhatsApp, explicamos os modelos com e sem coparticipação e qual faz mais sentido para o perfil dos seus colaboradores.'],
    ['O plano inclui odontológico?', 'O plano de saúde e o odontológico são produtos separados na Bradesco Saúde. É possível contratar os dois de forma combinada, com condições especiais para empresas. No WhatsApp, verificamos disponibilidade e custo para o tamanho da sua equipe.'],
  ];
  const [open, setOpen] = useState(0);
  return (
    <Section id="duvidas" bg="#fff">
      <Container style={{ maxWidth: 880 }}>
        <SectionHead chapter="Dúvidas"
          title="O que toda empresa em Bauru está perguntando antes de contratar."
          lead="Reunimos as perguntas mais frequentes sobre o Hospital Santa Lúcia e a contratação de Bradesco Saúde PME na região." center />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {faqs.map(([q, a], i) => <FAQItem key={i} q={q} a={a} open={open === i} onClick={() => setOpen(open === i ? -1 : i)} />)}
        </div>
        <div style={{ textAlign: 'center', marginTop: 30 }}>
          <Btn variant="ghost" icon="arrow-right" href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">Outra dúvida? Pergunte ao consultor</Btn>
        </div>
      </Container>
    </Section>
  );
}

function FAQItem({ q, a, open, onClick }) {
  return (
    <div style={{ border: '1px solid var(--line)', borderRadius: 'var(--r-md)', background: open ? 'var(--brad-red-50)' : '#fff', overflow: 'hidden', transition: 'background .2s' }}>
      <button onClick={onClick} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 16, padding: '18px 22px', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left' }}>
        <span style={{ flex: 1, fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 16, color: 'var(--ink)' }}>{q}</span>
        <Icon name="chevron-down" size={20} stroke={2.4} style={{ color: 'var(--brad-red)', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .25s', flexShrink: 0 }} />
      </button>
      <div style={{ maxHeight: open ? 300 : 0, overflow: 'hidden', transition: 'max-height .3s ease' }}>
        <p style={{ fontFamily: 'var(--font-text)', fontSize: 14.5, lineHeight: 1.65, color: 'var(--slate-600)', margin: 0, padding: '0 22px 22px' }}>{a}</p>
      </div>
    </div>
  );
}

/* ---- FINAL CTA ----------------------------------------------------------- */
function FinalCTA() {
  return (
    <section style={{ background: 'var(--grad-red)', padding: '96px 24px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(700px 360px at 85% 120%, rgba(255,255,255,0.14), transparent 60%)' }} />
      <Container style={{ position: 'relative', textAlign: 'center', maxWidth: 820 }}>
        <Eyebrow light dot={false}>Pronto para começar</Eyebrow>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(2rem,1.3rem+2.6vw,3rem)', lineHeight: 1.12, letterSpacing: '-0.02em', color: '#fff', margin: '16px 0 0', textWrap: 'balance' }}>
          2026 é o ano de dar à sua equipe um plano à altura do novo Bauru.
        </h2>
        <p style={{ fontFamily: 'var(--font-text)', fontSize: 17, lineHeight: 1.65, color: 'rgba(255,255,255,0.92)', margin: '24px auto 0', maxWidth: 660 }}>
          O Hospital Santa Lúcia chegou. A rede Bradesco cobre. A Plano B cuida do resto.
        </p>
        <p style={{ fontFamily: 'var(--font-text)', fontSize: 16, lineHeight: 1.65, color: 'rgba(255,255,255,0.82)', margin: '16px auto 0', maxWidth: 620 }}>
          Não existe hora certa para contratar um plano de saúde decente. O que existe é a hora em que você decide parar de deixar seus colaboradores com cobertura que não cobre — e colocar no lugar um benefício que eles vão notar na primeira consulta, no primeiro exame, na primeira emergência.
        </p>
        <p style={{ fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 16, color: 'rgba(255,255,255,0.95)', margin: '20px auto 0', fontStyle: 'italic' }}>
          A conversa começa agora. O comparativo chega hoje.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 34, flexWrap: 'wrap' }}>
          <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer" style={{ fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 16, padding: '16px 30px', borderRadius: 999, border: 'none', background: '#fff', color: 'var(--brad-red)', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 10, boxShadow: '0 16px 40px rgba(0,0,0,0.22)', textDecoration: 'none' }}>
            <Icon name="message-circle" size={20} stroke={2.2} /> Conversar com um especialista agora
          </a>
        </div>
        <p style={{ fontFamily: 'var(--font-text)', fontSize: 13.5, color: 'rgba(255,255,255,0.65)', margin: '18px auto 0' }}>
          Sem formulário. Sem ligação fria. Só você, o consultor, e a proposta certa para a sua empresa.
        </p>
      </Container>
    </section>
  );
}

Object.assign(window, { PlansSection, PlanCard, StepsSection, CorretoraSection, FAQSection, FAQItem, FinalCTA });
