/* Plans, Comparison table, Proof metrics, FAQ condensed, CTA final, Footer */

const PlansSection = ({highlightPlan='Advanced'}) => {
  const plansBase = [
    {
      name: 'Essential',
      price: 'R$ 5.800',
      tagline: 'Pra quem quer começar a gerar demanda e vende a própria consulta.',
      cta: 'Começar com Essential',
      roi: '8,0x',
      features: [
        'R$ 1.000/mês em tráfego pago incluso',
        '1 médico',
        'Plataforma HubMed completa',
        <>Você agenda e vende <span className="text-textMuted">(a gente traz o lead qualificado)</span></>,
        'Vendas esperadas: 7 por mês',
      ],
    },
    {
      name: 'Advanced',
      price: 'R$ 11.600',
      tagline: 'Pra quem quer escalar sem responder WhatsApp.',
      cta: 'Escolher Advanced',
      roi: '9,0x',
      features: [
        'R$ 2.500/mês em tráfego pago incluso',
        '1 médico',
        'Plataforma HubMed completa',
        <><strong className="text-midnight font-semibold">SDR dedicado</strong> agenda as consultas</>,
        <><strong className="text-midnight font-semibold">Closer dedicado</strong> fecha as vendas</>,
        'Vendas esperadas: 16 por mês',
      ],
    },
    {
      name: 'Premium',
      price: 'R$ 19.600',
      tagline: 'Pra clínicas com 2 médicos ou alto volume.',
      cta: 'Escalar com Premium',
      roi: '10,2x',
      features: [
        'R$ 5.000/mês em tráfego pago incluso',
        'Até 2 médicos',
        'Plataforma HubMed completa',
        <><strong className="text-midnight font-semibold">SDR dedicado</strong> agenda as consultas</>,
        <><strong className="text-midnight font-semibold">Closer dedicado</strong> fecha as vendas</>,
        'Vendas esperadas: 32 por mês',
      ],
    },
  ];
  return (
    <Section id="planos">
      <div className="text-center max-w-[780px] mx-auto">
        <div className="flex items-center gap-2 mb-4 justify-center">
          <span className="dot-gold"/>
          <span className="eyebrow" style={{color:'#C9A063'}}>Planos</span>
        </div>
        <h2 className="font-serif font-semibold text-[28px] md:text-[40px] leading-[1.15] text-midnight">
          Escolha o tamanho <em className="italic" style={{color:'#C9A063'}}>da sua máquina.</em>
        </h2>
        <p className="mt-4 text-[17px]">
          Setup único em todos os planos. Sem fidelidade de 12 meses.
        </p>
      </div>

      <div className="mt-14 grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
        {plansBase.map((p0, i) => {
          const p = {...p0, highlight: p0.name === highlightPlan, badge: 'Mais escolhido'};
          return (
          <div key={i}
               className={`relative rounded-xl bg-white p-8 transition ${p.highlight ? '' : 'border border-borderLine hover:border-gold'}`}
               style={p.highlight ? {border:'2px solid #C9A063', boxShadow:'0 10px 40px rgba(201,160,99,0.15)'} : {}}>
            {p.highlight && (
              <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                <span className="pill pill-gold" style={{background:'#C9A063', color:'#0F172A', border:'none', fontWeight:600}}>
                  <IconSpark size={12}/> {p.badge}
                </span>
              </div>
            )}
            <div className="flex items-baseline justify-between">
              <h3 className="text-[22px] text-midnight">{p.name}</h3>
              <span className="text-[12px] text-textMuted">ROI <span className="num text-[15px] text-midnight">{p.roi}</span></span>
            </div>
            <p className="mt-2 text-[14px] text-textSecondary min-h-[42px]">{p.tagline}</p>
            <div className="mt-6 flex items-baseline gap-1">
              <span className="num text-[44px] text-midnight" style={{fontWeight:700, filter:'blur(8px)', userSelect:'none'}} aria-hidden="true">{p.price}</span>
              <span className="text-[14px] text-textMuted">/mês</span>
            </div>
            <div className="my-6 hairline opacity-40"/>
            <ul className="space-y-3">
              {p.features.map((f, j) => (
                <li key={j} className="flex items-start gap-3 text-[14.5px] text-textSecondary">
                  <span className="mt-0.5 text-gold shrink-0"><IconCheck size={16}/></span>
                  <span>{f}</span>
                </li>
              ))}
            </ul>
            <a href="#qualif-popup" className={`mt-8 block text-center ${p.highlight ? 'btn-primary w-full justify-center' : 'btn-secondary w-full justify-center'}`}>
              {p.cta}
            </a>
          </div>
          );
        })}
      </div>

      <div className="mt-12 max-w-[820px] mx-auto p-6 rounded-xl" style={{background:'#fff', border:'1px solid #EDE0C7'}}>
        <div className="flex items-start gap-4">
          <div className="pill pill-gold shrink-0 mt-0.5" style={{fontSize:11}}>Como o ROI funciona</div>
          <p className="text-[14.5px]" style={{color:'#44403C'}}>
            Considerando ticket médio de <span className="text-midnight font-medium">R$ 2.500 por paciente</span> (primeira consulta + retorno),
            o plano Advanced recupera o investimento em aproximadamente <span className="text-midnight font-medium">45 dias</span>
            {' '}e gera <span className="text-midnight font-medium">R$ 240.000</span> em receita nos primeiros 6 meses.
          </p>
        </div>
      </div>
    </Section>
  );
};

const ComparisonSection = () => {
  const rows = [
    ['Gera leads', true, true, true],
    ['Responde WhatsApp com IA', false, false, true],
    ['Qualifica leads', false, 'raro', true],
    ['Agenda a consulta', false, false, true],
    ['Fecha a venda', false, false, 'adv'],
    ['CRM próprio incluído', false, false, true],
    ['API Oficial do WhatsApp', false, false, true],
    ['Integração com Google Agenda', false, false, true],
    ['Lembrete automático de consulta', false, false, true],
    ['Dashboard em tempo real', false, 'planilha', true],
  ];
  const Cell = ({v, hub}) => {
    if (v === true) return (
      <span className={`inline-flex items-center justify-center w-7 h-7 rounded-full ${hub ? 'bg-gold/15 text-gold' : 'text-okGreen'}`}>
        <IconCheck size={16}/>
      </span>
    );
    if (v === false) return <span className="inline-flex items-center justify-center w-7 h-7 x-mute"><IconX size={16}/></span>;
    if (v === 'adv') return <span className="text-[12px] text-midnight font-medium">Sim <span className="text-textMuted">(Adv/Prem)</span></span>;
    if (v === 'raro') return <span className="text-[12px] text-textMuted italic">Raro</span>;
    if (v === 'planilha') return <span className="text-[12px] text-textMuted italic">Planilha</span>;
    return null;
  };
  return (
    <Section id="diferenciais" className="bg-white">
      <SectionHead
        eyebrow="Diferenciais"
        title={<>Por que a HubMed<br/>e não <em className="italic" style={{color:'#C9A063'}}>um freelancer de tráfego</em></>}
        kicker="Um lado a lado sincero do que você recebe com cada caminho."
      />
      <div className="mt-12 overflow-x-auto no-scrollbar">
        <table className="w-full min-w-[720px] border-collapse">
          <thead>
            <tr>
              <th className="text-left py-4 text-[13px] uppercase tracking-wider text-textMuted font-medium" style={{letterSpacing:'0.08em'}}>O que o serviço cobre</th>
              <th className="py-4 text-[14px] font-medium text-textSecondary w-[170px]">Freelancer</th>
              <th className="py-4 text-[14px] font-medium text-textSecondary w-[170px]">Agência genérica</th>
              <th className="py-4 text-[14px] font-semibold w-[200px]" style={{background:'#FAF8F3', border:'1px solid #C9A063', borderBottom:'none', borderRadius:'12px 12px 0 0', color:'#0F172A'}}>
                <div className="flex items-center justify-center gap-2">
                  <IconSpark size={14}/> HubMed
                </div>
              </th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i} className="border-t border-borderLine">
                <td className="py-4 pr-4 text-[15px] text-textPrimary">{r[0]}</td>
                <td className="py-4 text-center"><Cell v={r[1]}/></td>
                <td className="py-4 text-center"><Cell v={r[2]}/></td>
                <td className="py-4 text-center" style={{background:'#FAF8F3', borderLeft:'1px solid #C9A063', borderRight:'1px solid #C9A063'}}>
                  <Cell v={r[3]} hub/>
                </td>
              </tr>
            ))}
            <tr>
              <td colSpan="3"></td>
              <td style={{background:'#FAF8F3', border:'1px solid #C9A063', borderTop:'none', borderRadius:'0 0 12px 12px', height:12}}></td>
            </tr>
          </tbody>
        </table>
      </div>
    </Section>
  );
};

const ProofSection = () => {
  const metrics = [
    { num: 'R$ 8,50', label: 'custo médio por lead qualificado em dermatologia' },
    { num: '50%', label: 'conversão de lead pra consulta agendada (Essential)' },
    { num: '~35%', label: 'conversão de consulta pra venda (Advanced/Premium)' },
    { num: '<30s', label: 'tempo médio de primeira resposta no WhatsApp' },
    { num: '<5%', label: 'taxa de no-show com lembrete automático ativo' },
  ];
  return (
    <Section id="prova">
      <SectionHead
        eyebrow="Prova"
        title={<>Números que a gente <em className="italic" style={{color:'#C9A063'}}>já entrega.</em></>}
      />
      <div className="mt-12 grid grid-cols-2 md:grid-cols-5 gap-px bg-borderLine rounded-xl overflow-hidden border border-borderLine">
        {metrics.map((m, i) => (
          <div key={i} className="bg-cream p-6 md:p-8">
            <div className="num text-[32px] md:text-[44px] leading-none text-midnight">{m.num}</div>
            <div className="mt-3 w-6 h-px" style={{background:'#C9A063'}}/>
            <div className="mt-3 text-[13px] text-textSecondary leading-snug">{m.label}</div>
          </div>
        ))}
      </div>
    </Section>
  );
};

const FaqMini = () => {
  const qs = [
    { q: 'Em quanto tempo começo a receber pacientes?',
      a: 'Primeira campanha no ar em até 14 dias. Primeiros leads no primeiro mês. Agendamentos (Advanced/Premium), no segundo.' },
    { q: 'O investimento em tráfego pago já está incluso na mensalidade?',
      a: 'Sim. R$ 1.000 (Essential), R$ 2.500 (Advanced) e R$ 5.000 (Premium) vão direto pro Meta Ads. Você não paga nada à parte.' },
    { q: 'E se eu cancelar? Perco os dados?',
      a: 'Não. Você exporta toda a base de pacientes, conversas e métricas a qualquer momento.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <Section id="faq">
      <div className="grid grid-cols-1 lg:grid-cols-[1fr_1.2fr] gap-10">
        <SectionHead
          eyebrow="Perguntas que sempre aparecem"
          title={<>Dúvidas rápidas <em className="italic" style={{color:'#C9A063'}}>antes da reunião.</em></>}
        />
        <div className="divide-y divide-borderLine border-y border-borderLine">
          {qs.map((it, i) => {
            const isOpen = open === i;
            return (
              <button key={i} onClick={()=>setOpen(isOpen ? -1 : i)} className="w-full text-left py-5 group">
                <div className="flex items-start justify-between gap-6">
                  <span className="text-[17px] md:text-[18px] text-midnight font-serif" style={{fontWeight:500}}>{it.q}</span>
                  <span className={`shrink-0 w-8 h-8 rounded-full border border-borderLine flex items-center justify-center transition ${isOpen ? 'bg-midnight text-cream border-midnight' : 'text-midnight'}`}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{transform: isOpen?'rotate(45deg)':'none', transition:'transform 200ms'}}>
                      <path d="M12 5v14M5 12h14"/>
                    </svg>
                  </span>
                </div>
                {isOpen && <p className="mt-3 text-[15px] pr-10">{it.a}</p>}
              </button>
            );
          })}
        </div>
      </div>
    </Section>
  );
};

const FinalCTA = () => (
  <section id="cta-final" className="relative overflow-hidden" style={{background:'#0F172A'}}>
    {/* subtle glow */}
    <div className="absolute inset-0 pointer-events-none" style={{background:'radial-gradient(ellipse at 50% 40%, rgba(201,160,99,0.18), transparent 60%)'}}/>
    <div className="relative max-w-[900px] mx-auto px-6 md:px-10 py-24 md:py-32 text-center">
      <div className="flex items-center gap-2 mb-6 justify-center">
        <span className="dot-gold"/>
        <span className="eyebrow" style={{color:'#C9A063'}}>Reunião de diagnóstico</span>
      </div>
      <h2 className="font-serif font-semibold text-[32px] md:text-[48px] leading-[1.1] text-cream">
        Pare de captar paciente só no direct. <em className="italic" style={{color:'#C9A063'}}>Construa sua máquina na HubMed.</em>
      </h2>
      <p className="mt-6 text-[17px] md:text-[18px] text-cream/75 max-w-[640px] mx-auto">
        Em uma reunião de 30 minutos, sem compromisso, a gente olha pro seu negócio,
        calcula projeção real de ROI com seus números, e você decide se faz sentido contratar a HubMed.
      </p>
      <div className="mt-10 flex flex-wrap justify-center gap-4">
        <a href="#qualif-popup" className="btn-primary" style={{fontSize:17, padding:'16px 32px'}}>
          Agendar reunião de diagnóstico <IconArrow size={16}/>
        </a>
        <a href="https://wa.me/5511552971235" className="inline-flex items-center gap-2 text-cream/80 hover:text-cream transition border-b border-cream/30 hover:border-cream pb-1">
          <IconWhatsapp size={18}/> Ou mande um "oi": (11) 5297-1235
        </a>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="bg-cream border-t border-borderLine">
    <div className="max-w-[1200px] mx-auto px-6 md:px-10 py-14">
      <div className="grid grid-cols-1 md:grid-cols-[1.4fr_1fr_1fr_1fr] gap-10">
        <div>
          <HubLogo/>
          <p className="mt-4 text-[14px] text-textSecondary max-w-[280px]">
            Plataforma de resultados para clínicas médicas.
          </p>
          <p className="mt-4 text-[13px] text-textMuted">
            hubmed.online · falecom@hubmed.online
          </p>
        </div>
        <div>
          <div className="eyebrow text-textMuted mb-3">Produto</div>
          <ul className="space-y-2 text-[14px] text-textSecondary">
            <li><a href="#como-funciona" className="hover:text-midnight">Como funciona</a></li>
            <li><a href="#plataforma" className="hover:text-midnight">Plataforma</a></li>
            <li><a href="#planos" className="hover:text-midnight">Planos</a></li>
            <li><a href="#faq" className="hover:text-midnight">FAQ</a></li>
          </ul>
        </div>
        <div>
          <div className="eyebrow text-textMuted mb-3">Empresa</div>
          <ul className="space-y-2 text-[14px] text-textSecondary">
            <li><a href="#" className="hover:text-midnight">Sobre</a></li>
            <li><a href="#" className="hover:text-midnight">Blog</a></li>
            <li><a href="#" className="hover:text-midnight">Carreiras</a></li>
            <li><a href="#" className="hover:text-midnight">Contato</a></li>
          </ul>
        </div>
        <div>
          <div className="eyebrow text-textMuted mb-3">Redes</div>
          <ul className="space-y-2 text-[14px] text-textSecondary">
            <li><a href="#" className="hover:text-midnight">Instagram</a></li>
            <li><a href="https://wa.me/5511552971235" className="hover:text-midnight">WhatsApp</a></li>
          </ul>
        </div>
      </div>
      <div className="hairline opacity-40 mt-12"/>
      <div className="mt-6 flex flex-col md:flex-row items-start md:items-center justify-between gap-4 text-[12.5px] text-textMuted">
        <div>
          Operado por Agência Insideout · CNPJ 12.900.168/0001-32
        </div>
        <div className="flex gap-5">
          <a href="#" className="hover:text-midnight">Política de Privacidade</a>
          <a href="#" className="hover:text-midnight">Termos de Uso</a>
          <a href="#" className="hover:text-midnight">LGPD</a>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { PlansSection, ComparisonSection, ProofSection, FaqMini, FinalCTA, Footer });