/* ============================================================================
   Page sections v2 — updated Copy Squad copy.
   New: ProblemaSection + SolucaoSection (previously missing).
   ========================================================================== */

function Container({ children, style }) {
  return <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '0 24px', ...style }}>{children}</div>;
}
function Section({ children, id, bg = '#fff', pad = 'var(--sp-9)' }) {
  return <section id={id} style={{ background: bg, paddingTop: pad, paddingBottom: pad }}>{children}</section>;
}

function Photo({ h = 320, label = 'Imagem', radius = 'var(--r-xl)', src, style }) {
  return (
    <div style={{
      height: h, borderRadius: radius, position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(135deg,#efeaea 0%,#e4dcdd 100%)',
      display: 'grid', placeItems: 'center', border: '1px solid var(--line)', ...style,
    }}>
      {src ? (
        <img src={src} alt={label} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      ) : (
        <div style={{ textAlign: 'center', color: 'var(--slate-400)' }}>
          <Icon name="hospital" size={34} stroke={1.6} style={{ margin: '0 auto 8px' }} />
          <span style={{ fontFamily: 'var(--font-text)', fontWeight: 600, fontSize: 12.5, letterSpacing: '0.05em' }}>{label}</span>
        </div>
      )}
    </div>
  );
}

/* ---- HERO ---------------------------------------------------------------- */
function Hero() {
  return (
    <section id="top" style={{ position: 'relative', overflow: 'hidden', background: 'var(--bg-mute)' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(1100px 520px at 78% -8%, rgba(204,9,47,0.10), transparent 60%)' }} />
      <Container style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 56, alignItems: 'center', paddingTop: 76, paddingBottom: 84 }}>
        <div className="hero-copy">
          <Eyebrow>Bradesco Saúde PME · Bauru e Região</Eyebrow>
          <h1 className="brad-display" style={{ marginTop: 18, marginBottom: 0 }}>
            Bauru finalmente tem o hospital que seus colaboradores merecem.{' '}
            <span style={{ color: 'var(--brad-red)' }}>Agora só falta o plano de saúde certo.</span>
          </h1>
          <p className="brad-lead" style={{ marginTop: 22, maxWidth: 560 }}>
            Com a chegada do Hospital Santa Lúcia — maior grupo hospitalar privado do Centro-Oeste — e a rede Bradesco Saúde, sua empresa pode oferecer cobertura de verdade: próxima, moderna e dentro do orçamento. Sem formulário, sem call center, sem enrolação.
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 30 }}>
            <Btn size="lg" icon="arrow-right" href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">Quero uma cotação agora</Btn>
            <Btn size="lg" variant="secondary" href="#planos">Ver planos PME</Btn>
          </div>
          <p style={{ fontFamily: 'var(--font-text)', fontWeight: 600, fontSize: 14, color: 'var(--slate-500)', margin: '18px 0 0', fontStyle: 'italic' }}>
            A conversa leva 3 minutos. O comparativo chega no mesmo dia.
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 22, marginTop: 22 }}>
            {[['award', '+20 anos de mercado'], ['badge-check', 'Habilitada Bradesco Saúde'], ['shield-check', 'ANS nº 005711']].map(([ic, t]) => (
              <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-text)', fontWeight: 600, fontSize: 13.5, color: 'var(--slate-600)' }}>
                <Icon name={ic} size={18} stroke={2} style={{ color: 'var(--brad-red)' }} />{t}
              </span>
            ))}
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <div style={{ background: '#fff', borderRadius: 'var(--r-xl)', boxShadow: 'var(--sh-lg)', border: '1px solid var(--line)', overflow: 'hidden' }}>
            <Photo h={236} label="Hospital Santa Lúcia · Bauru" radius="0" src="assets/hospital-foto.jpg" />
            <div style={{ padding: '22px 22px 24px' }}>
              <Pill tone="soft">Em destaque · Novo em Bauru</Pill>
              <h3 className="brad-h3" style={{ margin: '12px 0 8px' }}>O hospital que a região nunca teve antes.</h3>
              <p className="brad-sm" style={{ marginBottom: 16 }}>
                O Grupo Santa chegou a Bauru: 12 unidades em 5 estados, 1,5 milhão de atendimentos por ano — e agora o maior complexo hospitalar privado do Centro-Oeste está a poucos quilômetros da sua empresa.
              </p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                {[['clock', 'Pronto-atendimento 24h'], ['activity', '10 salas cirúrgicas'], ['heart-pulse', 'UTI adulto e neonatal'], ['scan', 'Oncologia e imagem']].map(([ic, t]) => (
                  <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-text)', fontWeight: 600, fontSize: 13, color: 'var(--ink-700)' }}>
                    <Icon name={ic} size={17} stroke={2} style={{ color: 'var(--brad-red)' }} />{t}
                  </span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </Container>
      <Marquee />
    </section>
  );
}

function Marquee() {
  const items = ['Atendimento na rede Bradesco Saúde', 'Hospital Santa Lúcia Bauru', 'Cobertura nacional + reembolso', 'Empresas a partir de 3 vidas', 'Consultoria especializada Plano B'];
  const row = [...items, ...items];
  return (
    <div style={{ borderTop: '1px solid var(--line)', background: 'rgba(255,255,255,0.6)', overflow: 'hidden', padding: '14px 0' }}>
      <div style={{ display: 'flex', gap: 40, width: 'max-content', animation: 'marquee 26s linear infinite' }}>
        {row.map((t, i) => (
          <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-text)', fontWeight: 600, fontSize: 14, color: 'var(--slate-600)', whiteSpace: 'nowrap' }}>
            <span style={{ width: 5, height: 5, borderRadius: 99, background: 'var(--brad-red)' }} />{t}
          </span>
        ))}
      </div>
    </div>
  );
}

/* ---- STAT BAND ----------------------------------------------------------- */
function StatBand({ stats }) {
  return (
    <Section bg="#fff" pad="var(--sp-8)">
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 28 }} className="stat-grid">
          {stats.map((s, i) => (
            <div key={i} style={{ paddingLeft: 20, borderLeft: '3px solid var(--brad-red)' }}>
              <div className="brad-stat">{s.value}<span style={{ fontSize: '0.5em', verticalAlign: 'super' }}>{s.suffix}</span></div>
              <p className="brad-sm" style={{ marginTop: 8, maxWidth: 220 }}>{s.label}</p>
            </div>
          ))}
        </div>
      </Container>
    </Section>
  );
}

/* ---- SECTION HEADER ------------------------------------------------------ */
function SectionHead({ chapter, title, lead, center, maxw = 720 }) {
  return (
    <div style={{ maxWidth: maxw, margin: center ? '0 auto' : 0, textAlign: center ? 'center' : 'left', marginBottom: 48 }}>
      <Chapter>{chapter}</Chapter>
      <h2 className="brad-h2" style={{ margin: '12px 0 0' }}>{title}</h2>
      {lead && <p className="brad-lead" style={{ marginTop: 16, marginLeft: center ? 'auto' : 0, marginRight: center ? 'auto' : 0 }}>{lead}</p>}
    </div>
  );
}

/* ---- HOSPITAL (Seção 1 — A Notícia) -------------------------------------- */
function HospitalSection() {
  const feats = [
    ['clock', 'Pronto-atendimento 24h', 'Adulto e infantil, com fluxo ágil para urgências reais — sem espera desnecessária.'],
    ['activity', '10 salas cirúrgicas', 'Incluindo sala híbrida com hemodinâmica e tomografia integradas — referência em procedimentos complexos.'],
    ['heart-pulse', 'UTIs adulto, pediátrica e neonatal', 'Cobertura completa para toda a família do colaborador, com equipes dedicadas por perfil.'],
    ['scan', 'Oncologia e diagnóstico por imagem', 'Centro oncológico próprio e imagem de última geração, no mesmo complexo — sem transferências desnecessárias.'],
    ['hospital', 'Maternidade humanizada', 'Suítes para parto humanizado com equipe multiprofissional dedicada.'],
  ];
  return (
    <Section id="hospital" bg="var(--bg-mute)">
      <Container>
        <SectionHead chapter="A notícia"
          title="O hospital que muda o mapa da saúde no interior paulista."
          lead="O Grupo Santa chegou a Bauru. São 12 unidades em 5 estados, 1,5 milhão de atendimentos por ano — e agora o maior complexo hospitalar privado do Centro-Oeste está a poucos quilômetros da sua empresa. E pela rede Bradesco Saúde, seus colaboradores podem acessar tudo isso no plano da empresa." maxw={800} />
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48, alignItems: 'start' }} className="hosp-grid">
          <div style={{ display: 'grid', gap: 14 }}>
            {feats.map(([ic, t, d]) => (
              <div key={t} style={{ display: 'flex', gap: 16, background: '#fff', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', padding: '18px 20px', boxShadow: 'var(--sh-xs)' }}>
                <span style={{ flexShrink: 0, width: 44, height: 44, borderRadius: 12, background: 'var(--brad-red-100)', display: 'grid', placeItems: 'center' }}>
                  <Icon name={ic} size={22} stroke={2} style={{ color: 'var(--brad-red)' }} />
                </span>
                <div>
                  <h4 className="brad-h4" style={{ marginBottom: 4 }}>{t}</h4>
                  <p className="brad-sm" style={{ margin: 0 }}>{d}</p>
                </div>
              </div>
            ))}
            <Btn variant="secondary" icon="arrow-right" href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer" style={{ marginTop: 8 }}>Quero saber qual plano cobre o Santa Lúcia</Btn>
          </div>
          <div style={{ position: 'sticky', top: 96 }}>
            <Photo h={300} label="Hospital Santa Lúcia · fachada" src="assets/hospital-foto.jpg" />
            <div style={{ background: 'var(--ink)', color: '#fff', borderRadius: 'var(--r-lg)', padding: '26px 28px', marginTop: 16 }}>
              <Pill tone="red">Em operação</Pill>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, margin: '14px 0 8px', color: '#fff' }}>Grupo Santa · Rede One Care</h3>
              <p style={{ fontFamily: 'var(--font-text)', fontSize: 14.5, lineHeight: 1.6, color: 'rgba(255,255,255,0.75)', margin: 0 }}>
                O maior grupo hospitalar privado do Centro-Oeste chega ao interior paulista trazendo padrão de alta complexidade para empresas e famílias da região.
              </p>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12, marginTop: 22 }}>
                {[['12', 'unidades'], ['5', 'estados'], ['1,5M', 'atend./ano']].map(([v, l]) => (
                  <div key={l}>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 26, color: 'var(--brad-red-300)' }}>{v}</div>
                    <div style={{ fontFamily: 'var(--font-text)', fontSize: 12.5, color: 'rgba(255,255,255,0.65)' }}>{l}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </Container>
    </Section>
  );
}

/* ---- O PROBLEMA (Seção 2 — NOVA) ---------------------------------------- */
function ProblemaSection() {
  return (
    <Section bg="#fff">
      <Container style={{ maxWidth: 860 }}>
        <Chapter>O problema</Chapter>
        <h2 className="brad-h2" style={{ margin: '12px 0 28px' }}>O plano de saúde ruim custa mais do que parece.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }} className="prob-grid">
          <div>
            <p className="brad-body" style={{ marginTop: 0 }}>
              Você já sabe que oferecer plano de saúde faz diferença. Talvez já tenha pesquisado. Conversado com algum corretor. Se perdido em tabela de cobertura que parece manual técnico de avião.
            </p>
            <p className="brad-body">
              O problema não é falta de opção. É que a maioria das propostas vem de quem não conhece Bauru — não sabe quais hospitais realmente atendem bem aqui, qual rede vale na prática, e qual plano cabe no perfil dos <em>seus</em> colaboradores.
            </p>
            <div style={{ background: 'var(--brad-red-50)', border: '1px solid var(--brad-red-100)', borderLeft: '3px solid var(--brad-red)', borderRadius: 'var(--r-md)', padding: '20px 24px', margin: '24px 0' }}>
              <p style={{ fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 16, color: 'var(--ink)', margin: 0, lineHeight: 1.5 }}>
                "A equipe reclama. O RH retrabalha. E a renovação anual vira uma dor de cabeça que você preferia não ter."
              </p>
            </div>
            <p className="brad-body" style={{ marginBottom: 0 }}>
              Agora, com o Santa Lúcia em operação e a rede Bradesco consolidada na região, isso muda.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {[
              ['A equipe usa plano que não cobre os hospitais de referência da cidade'],
              ['RH gasta horas em reclamações e retrabalho a cada sinistro'],
              ['O corretor some depois de fechar — o suporte some junto'],
              ['Renovação anual sem análise: o mesmo plano, o mesmo preço mais caro'],
            ].map(([t], i) => (
              <div key={i} style={{ display: 'flex', gap: 14, padding: '16px 18px', background: 'var(--bg-mute)', borderRadius: 'var(--r-md)', border: '1px solid var(--line)' }}>
                <span style={{ flexShrink: 0, width: 28, height: 28, borderRadius: 99, background: 'var(--brad-red-100)', color: 'var(--brad-red)', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 12 }}>{i + 1}</span>
                <span style={{ fontFamily: 'var(--font-text)', fontSize: 14.5, lineHeight: 1.5, color: 'var(--ink-700)' }}>{t}</span>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </Section>
  );
}

/* ---- A SOLUÇÃO (Seção 3 — NOVA) ----------------------------------------- */
function SolucaoSection() {
  return (
    <Section bg="var(--bg-mute)">
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }} className="sol-grid">
          <div>
            <Chapter>A solução</Chapter>
            <h2 className="brad-h2" style={{ margin: '12px 0 24px' }}>Bradesco Saúde em Bauru. Com quem conhece o terreno.</h2>
            <p className="brad-body">
              A Plano B é corretora habilitada Bradesco Saúde com mais de 20 anos no mercado. Não somos representante de operadora empurrando quota. Somos consultores — e nossa obrigação é com o melhor plano para o seu caso, não com o mais caro.
            </p>
            <p className="brad-body">
              Entendemos o perfil da sua empresa: número de vidas, faixa etária dos colaboradores, especialidades que mais usa, orçamento real. Aí mostramos as propostas que fazem sentido — e explicamos cada detalhe antes de você assinar qualquer coisa.
            </p>
            <div style={{ marginTop: 28 }}>
              <Btn icon="arrow-right" href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">Conversar com um especialista</Btn>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            {[
              ['badge-check', 'Habilitada Bradesco Saúde', 'Autorizada a operar toda a carteira da operadora.'],
              ['map-pin', 'Atendimento local em Bauru', 'Quem conhece a região, não atendente de script.'],
              ['eye', 'Transparência total', 'Tudo explicado antes de assinar. Sem letra miúda.'],
              ['award', '+20 anos no mercado', 'Empresas que renovam há mais de uma década.'],
            ].map(([ic, t, d]) => (
              <div key={t} style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', padding: '20px 18px', boxShadow: 'var(--sh-xs)' }}>
                <Icon name={ic} size={26} stroke={2} style={{ color: 'var(--brad-red)', marginBottom: 12 }} />
                <h4 className="brad-h4" style={{ marginBottom: 6 }}>{t}</h4>
                <p className="brad-sm" style={{ margin: 0 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </Section>
  );
}

/* ---- OPERADORA (Seção 4 — Por que Bradesco) ------------------------------ */
function OperadoraSection() {
  const reasons = [
    ['01 / Rede', 'users', 'Rede de +300 mil profissionais em todo o Brasil', 'Seu colaborador viajou? Passou mal em São Paulo? Tem cobertura — mesmos direitos, mesma rede, em qualquer ponto do país.'],
    ['02 / Cobertura', 'globe', 'Reembolso nacional e internacional', 'Nos planos Premium, a cobertura vai onde o colaborador for — inclusive no exterior. Nenhuma outra operadora regional oferece isso.'],
    ['03 / Serviços', 'headphones', 'Concierge e Meu Doutor', 'Central de agendamento exclusiva e médico de referência para acompanhar seu time. Chega de ligar 40 minutos para marcar consulta.'],
    ['04 / Acesso', 'building-2', 'A partir de 3 vidas', 'PMEs de 3 a 199 vidas têm acesso à carteira SPG completa — com os mesmos benefícios de quem tem mais. Sua empresa não precisa ter 50 funcionários.'],
    ['05 / Confiança', 'star', 'Mais de 4 milhões de clientes, 90% de aprovação', 'Bradesco Saúde investe mais de R$10 bilhões por ano na saúde brasileira. Em escala assim, qualidade não é promessa — é estrutura.'],
    ['06 / Local', 'map-pin', 'Atendimento local, não robô de call center', 'Você fala com quem conhece Bauru, sabe como funciona o Santa Lúcia na prática, e entende o que a sua região precisa.'],
  ];
  return (
    <Section bg="#fff">
      <Container>
        <SectionHead chapter="Por que Bradesco Saúde"
          title="6 razões pelas quais as empresas de Bauru estão migrando para Bradesco Saúde."
          lead="" maxw={760} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18 }} className="reason-grid">
          {reasons.map(([n, ic, t, d]) => <ReasonCard key={n} n={n} ic={ic} t={t} d={d} />)}
        </div>
        <div style={{ marginTop: 36 }}><Btn variant="ghost" icon="arrow-right" href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">Conversar com um especialista Plano B</Btn></div>
      </Container>
    </Section>
  );
}

function ReasonCard({ n, ic, t, d }) {
  const [h, setH] = useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{
      background: '#fff', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', padding: '26px 24px',
      boxShadow: h ? 'var(--sh-md)' : 'var(--sh-xs)', transform: h ? 'translateY(-4px)' : 'none',
      transition: 'all .22s cubic-bezier(.22,1,.36,1)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ width: 46, height: 46, borderRadius: 12, background: h ? 'var(--brad-red)' : 'var(--brad-red-100)', display: 'grid', placeItems: 'center', transition: 'background .22s' }}>
          <Icon name={ic} size={23} stroke={2} style={{ color: h ? '#fff' : 'var(--brad-red)' }} />
        </span>
        <span style={{ fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--slate-400)' }}>{n}</span>
      </div>
      <h4 className="brad-h4" style={{ margin: '18px 0 8px' }}>{t}</h4>
      <p className="brad-sm" style={{ margin: 0 }}>{d}</p>
    </div>
  );
}

Object.assign(window, { Container, Section, Photo, Hero, Marquee, StatBand, SectionHead, HospitalSection, ProblemaSection, SolucaoSection, OperadoraSection, ReasonCard });
