/* Problem, Solution, How-it-works, Features */

const Section = ({id, children, className=""}) => (
  <section id={id} className={`section ${className}`}>
    <div className="max-w-[1200px] mx-auto px-6 md:px-10">{children}</div>
  </section>
);

const SectionHead = ({eyebrow, title, kicker, center=false, dark=false}) => (
  <div className={`max-w-[780px] ${center ? 'mx-auto text-center' : ''}`}>
    {eyebrow && (
      <div className={`flex items-center gap-2 mb-4 ${center ? 'justify-center' : ''}`}>
        <span className="dot-gold"/>
        <span className="eyebrow" style={{color:'#C9A063'}}>{eyebrow}</span>
      </div>
    )}
    <h2 className={`font-serif font-semibold text-[28px] md:text-[40px] leading-[1.15] ${dark ? 'text-cream' : 'text-midnight'}`}>
      {title}
    </h2>
    {kicker && <p className={`mt-4 text-[17px] md:text-[18px] ${dark ? 'text-cream/75' : ''}`}>{kicker}</p>}
  </div>
);

const ProblemSection = () => {
  const pains = [
    'Contratar social media que posta foto bonita mas não gera consulta',
    'Rodar anúncio no Meta Ads e ver o dinheiro sumir sem saber pra onde foi',
    'Pedir indicação para os seus pacientes atuais e esperar o boca a boca funcionar',
    'Responder WhatsApp de madrugada porque "lead esfria"',
    'Olhar planilha de resultados da semana no domingo à noite, tentando entender o que funcionou',
  ];
  return (
    <Section id="problema">
      <div className="grid grid-cols-1 lg:grid-cols-[1fr_1fr] gap-12 items-start">
        <div>
          <SectionHead
            eyebrow="O problema"
            title={<>Você fez Medicina.<br/><em className="italic" style={{color:'#C9A063'}}>Não fez marketing.</em></>}
          />
          <p className="mt-6">
            O problema não é você.
          </p>
          <p className="mt-4">
            É que ninguém te ensinou a ser gestor de tráfego, SDR, copywriter, influencer e analista de dados ao mesmo tempo.
          </p>
          <p className="mt-4">
            E nem deveriam ter ensinado.
          </p>
        </div>
        <div>
          <div className="text-[13px] uppercase tracking-wider text-textMuted mb-4" style={{letterSpacing:'0.08em'}}>
            Você já tentou:
          </div>
          <ul className="space-y-0 divide-y divide-borderLine border-y border-borderLine">
            {pains.map((p, i) => (
              <li key={i} className="py-4 flex items-start gap-4 group">
                <span className="num text-[18px] text-textMuted w-7 shrink-0 pt-0.5">{String(i+1).padStart(2,'0')}</span>
                <span className="text-[16px] text-textSecondary">{p}</span>
              </li>
            ))}
          </ul>
          <p className="mt-6 font-serif italic text-[20px] md:text-[22px] text-midnight">
            E no final do mês, a agenda continua com buraco.
          </p>
        </div>
      </div>
    </Section>
  );
};

const SolutionSection = () => {
  const steps = [
    { n: '01', title: 'Gera demanda', body: 'Tráfego pago no Meta Ads (Facebook e Instagram) com criativos e públicos validados no seu nicho.' },
    { n: '02', title: 'Captura o lead', body: 'Na sua landing page exclusiva, com subdomínio próprio (suaclinica.hubmed.online).' },
    { n: '03', title: 'Qualifica por WhatsApp', body: 'Separa quem tem perfil de comparecimento, de quem só quer saber o preço antes de chegar na sua agenda.' },
    { n: '04', title: 'Agenda a consulta', body: 'Com o paciente já aquecido, nossa IA mostra os horários disponíveis na sua agenda para bloqueio imediato.' },
    { n: '05', title: 'Fecha vendas', body: 'Se a sua clínica tem serviços premium, nosso time de closers atua fazendo consultas e eliminando objeções dos leads.' },
    { n: '06', title: 'Confirma e lembra', body: 'Mensagens no WhatsApp do lead 24/7. Lembretes 24h e 2h antes da consulta. Pra ninguém faltar e gerar gaps na sua agenda.' },
  ];
  return (
    <Section id="solucao" className="bg-white" >
      <div className="max-w-[780px]">
        <SectionHead
          eyebrow="A solução"
          title={<>A HubMed faz o marketing. <em className="italic" style={{color:'#C9A063'}}>Você só atende.</em></>}
          kicker="Um serviço de marketing e vendas completo para médicos, operado dentro da nossa plataforma proprietária. Enquanto você atende, a nossa equipe:"
        />
      </div>
      <div className="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {steps.map(s => (
          <div key={s.n} className="card-base p-6">
            <div className="flex items-baseline justify-between mb-3">
              <span className="num text-[28px] text-midnight">{s.n}</span>
              <span className="w-6 h-px" style={{background:'#C9A063'}}></span>
            </div>
            <h3 className="text-[20px] text-midnight">{s.title}</h3>
            <p className="mt-2 text-[15px] leading-relaxed">{s.body}</p>
          </div>
        ))}
      </div>
      <p className="mt-10 text-[15px] text-textMuted max-w-[700px]">
        E você acompanha tudo em um dashboard em tempo real. Quantos leads entraram, quanto custou cada um,
        quantos viraram consulta e o principal: quantos viraram receita.
      </p>
    </Section>
  );
};

const HowItWorksSection = () => {
  const weeks = [
    { w: 'Semana 1', t: 'Setup', b: 'Configuramos sua landing page, WhatsApp Business, Google Calendar e pipeline de vendas. Você não mexe em nada técnico.' },
    { w: 'Semana 2', t: 'Campanhas no ar', b: 'Nosso time de tráfego sobe campanhas no Meta Ads com criativos, públicos e copy testados. Os primeiros leads começam a entrar.' },
    { w: 'Semana 3', t: 'Qualificação e agendamento', b: 'SDR dedicado responde os leads por WhatsApp, qualifica e agenda consultas. Você começa a receber pacientes pré-qualificados.' },
    { w: 'Semana 4 em diante', t: 'Otimização contínua', b: 'Analisamos o que converte, cortamos o que não funciona e dobramos o que performa. Você só atende.' },
  ];
  return (
    <Section id="como-funciona">
      <SectionHead
        eyebrow="Como funciona"
        title={<>Em 4 semanas, sua máquina de pacientes <em className="italic" style={{color:'#C9A063'}}>está rodando.</em></>}
      />
      <div className="mt-14 relative">
        {/* horizontal line */}
        <div className="hidden md:block absolute left-0 right-0 top-[28px] h-px" style={{background:'linear-gradient(to right, transparent 0, #C9A063 8%, #C9A063 92%, transparent 100%)', opacity:0.4}}/>
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-6 relative">
          {weeks.map((w, i) => (
            <div key={i} className="relative">
              <div className="flex md:block items-center gap-4 md:gap-0 mb-4">
                <div className="w-14 h-14 rounded-full bg-cream border border-gold flex items-center justify-center relative z-10 shrink-0">
                  <span className="num text-[20px] text-midnight">{String(i+1).padStart(2,'0')}</span>
                </div>
                <div className="md:mt-5">
                  <div className="eyebrow" style={{color:'#C9A063'}}>{w.w}</div>
                  <h3 className="text-[22px] text-midnight mt-1">{w.t}</h3>
                </div>
              </div>
              <p className="text-[15px] leading-relaxed md:mt-3">{w.b}</p>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
};

const FeaturesSection = () => {
  const groups = [
    { icon: <IconTarget/>, title: 'Captação de pacientes', items: [
      'Landing page exclusiva com subdomínio próprio',
      'Formulários integrados à plataforma',
      'Captura multicanal (Meta Ads, Google Ads, WhatsApp e indicação)',
      'Facebook Lead Ads configurado pra converter no próprio Instagram',
    ]},
    { icon: <IconKanban/>, title: 'CRM completo pra sua clínica', items: [
      'Pipeline com os estágios da jornada do cliente na sua clínica',
      'Ficha completa por paciente com histórico de contato',
      'Campos personalizáveis e estágios editáveis',
      'Você com controle total dos seus dados',
    ]},
    { icon: <IconChat/>, title: 'WhatsApp dentro do CRM', items: [
      'Chat WhatsApp Business API dentro do CRM',
      'Histórico completo de cada conversa',
      'Notificações em tempo real',
      'Templates aprovados pela Meta pra automações',
    ]},
    { icon: <IconCalendar/>, title: 'Agenda que não dá conflito', items: [
      'Integração bidirecional com Google Calendar',
      'Acesso à agenda pelo CRM',
      'Confirmação automática no WhatsApp do paciente',
      'Lembrete automático 24h e 2h antes',
    ]},
    { icon: <IconChart/>, title: 'Dashboard que você entende', items: [
      'Métricas em tempo real: leads, agendamento e receita',
      'Dashboard de tráfego com dados claros',
      'Funil visual do primeiro clique ao pagamento',
      'Exportação pra contador ou sócio',
    ]},
    { icon: <IconLifeRing/>, title: 'Suporte que responde', items: [
      'Atendimento prioritário para Clinicas Premium',
      'Suporte com IA',
      'Time dedicado pra resolver o que trava',
      'Onboarding guiado nas 2 primeiras semanas',
    ]},
  ];
  return (
    <Section id="plataforma" className="bg-white">
      <SectionHead
        eyebrow="O que está incluso"
        title={<>Tudo dentro de uma plataforma. <em className="italic" style={{color:'#C9A063'}}>Apenas uma ferramenta pra acessar.</em></>}
      />
      <div className="mt-12 grid grid-cols-1 md:grid-cols-2 gap-5">
        {groups.map((g, i) => (
          <div key={i} className="card-base p-8">
            <div className="flex items-start gap-4">
              <div className="w-12 h-12 rounded-xl flex items-center justify-center shrink-0" style={{background:'#FAF8F3', color:'#0F172A', border:'1px solid #E7E5E4'}}>
                {g.icon}
              </div>
              <div className="flex-1">
                <h3 className="text-[22px] text-midnight leading-tight">{g.title}</h3>
                <ul className="mt-4 space-y-2.5">
                  {g.items.map((it, j) => (
                    <li key={j} className="flex items-start gap-3 text-[15px] text-textSecondary">
                      <span className="mt-1.5 w-1 h-1 rounded-full shrink-0" style={{background:'#C9A063'}}></span>
                      <span>{it}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
};

Object.assign(window, { Section, SectionHead, ProblemSection, SolutionSection, HowItWorksSection, FeaturesSection });