// Mid sections: Sticky-scroll demo, IA Clínica showcase, Personas, Metrics, Migration timeline
const { Reveal: Reveal_m, Stagger: Stagger_m, StaggerItem: StaggerItem_m, Container: Container_m, Section: Section_m, Eyebrow: Eyebrow_m, Pill: Pill_m, CountUp: CountUp_m, Button: Button_m } = window.UI;
const { motion: mm, useScroll: useScroll_m, useTransform: useTransform_m, AnimatePresence: AP_m } = window.framerMotion || {};
const { ProntuarioMockup, AudiometriaMockup, RepasseMockup, CheckinMockup } = window.Mockups;

// ===== STICKY-SCROLL DEMO =====
function StickyDemo() {
  const ref = React.useRef(null);
  const steps = [
    {
      n: '01',
      title: 'Recepcionista faz check-in via QR Code',
      desc: 'Paciente escaneia o QR no balcão ou totem, foto opcional, plano e dados validados em segundos. Pré-cadastro vira paciente completo no mesmo fluxo.',
      mock: 'checkin',
    },
    {
      n: '02',
      title: 'Médico atende e a IA sugere CID',
      desc: 'Editor TipTap com templates por especialidade. IA Clínica lê o histórico, propõe CID-10 com nível de confiança e ainda sugere conduta. Você aplica ou descarta — sempre você decide.',
      mock: 'prontuario',
    },
    {
      n: '03',
      title: 'Audiometria assinada digitalmente',
      desc: 'Gráfico interativo, tritonal calculado, classificação automática. Assinatura ICP-Brasil em 1 clique torna o laudo imutável e juridicamente válido.',
      mock: 'audio',
    },
    {
      n: '04',
      title: 'Fechamento de repasse · 1 clique',
      desc: 'Regra prioritária resolve procedimento → grupo → tipo de atendimento → tabela. Snapshot imutável, NFS-e emitida automaticamente, relatório linha-a-linha pronto pra enviar pra cada profissional.',
      mock: 'repasse',
    },
  ];

  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    if (!ref.current) return;
    const onScroll = () => {
      const rect = ref.current.getBoundingClientRect();
      const total = rect.height - window.innerHeight;
      const progress = Math.max(0, Math.min(1, -rect.top / total));
      const idx = Math.min(steps.length - 1, Math.floor(progress * steps.length));
      setActive(idx);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const renderMock = (key) => {
    if (key === 'checkin') return <div className="flex justify-center"><div style={{ transform: 'scale(0.95)', transformOrigin: 'center' }}><CheckinMockup/></div></div>;
    if (key === 'prontuario') return <div style={{ transform: 'scale(0.65)', transformOrigin: 'top left', width: '154%' }}><ProntuarioMockup/></div>;
    if (key === 'audio') return <div className="flex justify-center"><AudiometriaMockup/></div>;
    if (key === 'repasse') return <div style={{ transform: 'scale(0.65)', transformOrigin: 'top left', width: '154%' }}><RepasseMockup/></div>;
  };

  return (
    <Section_m id="demo" ref={ref} className="relative lg:h-[400vh]">
      <div className="lg:sticky lg:top-20 lg:h-[calc(100vh-5rem)] flex items-center py-16 lg:py-0">
        <Container_m className="w-full">
          <div className="grid lg:grid-cols-[0.85fr_1.15fr] gap-12 lg:gap-16 items-center">
            {/* Left: numbered list */}
            <div>
              <Eyebrow_m>Demonstração</Eyebrow_m>
              <h2 className="font-display font-bold text-[clamp(1.8rem,3.6vw,2.8rem)] tracking-tight leading-[1.05] mt-3 text-pretty">Do check-in ao repasse, em 4 passos.</h2>
              <p className="mt-3 text-[15px] text-ink-600 dark:text-ink-300">Role para acompanhar como uma consulta passa pelo sistema.</p>

              <div className="mt-8 space-y-1.5">
                {steps.map((s, i) => {
                  const isActive = i === active;
                  return (
                    <button
                      key={i}
                      onClick={() => {
                        const rect = ref.current.getBoundingClientRect();
                        const top = window.scrollY + rect.top + (rect.height / steps.length) * i + 100;
                        window.scrollTo({ top, behavior: 'smooth' });
                      }}
                      className={`w-full text-left flex gap-4 p-4 rounded-xl border transition-all ${isActive ? 'border-cyan-500/30 bg-cyan-500/5' : 'border-transparent hover:bg-ink-50 dark:hover:bg-ink-800/40'}`}
                    >
                      <div className={`w-8 h-8 rounded-lg flex items-center justify-center font-mono text-[12px] font-semibold flex-shrink-0 transition-colors ${isActive ? 'bg-cyan-500 text-white' : 'bg-ink-100 dark:bg-ink-800 text-ink-500 dark:text-ink-400'}`}>{s.n}</div>
                      <div className="flex-1">
                        <div className={`text-[15px] font-semibold ${isActive ? 'text-ink-900 dark:text-white' : 'text-ink-700 dark:text-ink-300'}`}>{s.title}</div>
                        {AP_m && (
                          <AP_m initial={false}>
                            {isActive && (
                              <mm.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} exit={{ opacity: 0, height: 0 }} className="overflow-hidden">
                                <p className="mt-2 text-[13px] text-ink-600 dark:text-ink-400 leading-relaxed">{s.desc}</p>
                              </mm.div>
                            )}
                          </AP_m>
                        )}
                      </div>
                    </button>
                  );
                })}
              </div>
            </div>

            {/* Right: mockup */}
            <div className="relative">
              <div className="rounded-2xl bg-gradient-to-br from-ink-100 to-ink-50 dark:from-ink-800/40 dark:to-ink-900 border border-ink-200/60 dark:border-ink-800 p-6 lg:p-10 overflow-hidden min-h-[480px] lg:min-h-[600px] flex items-center justify-center">
                {AP_m && (
                  <AP_m mode="wait">
                    <mm.div
                      key={active}
                      initial={{ opacity: 0, y: 20, scale: 0.97 }}
                      animate={{ opacity: 1, y: 0, scale: 1 }}
                      exit={{ opacity: 0, y: -20, scale: 0.97 }}
                      transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
                      className="w-full"
                    >
                      {renderMock(steps[active].mock)}
                    </mm.div>
                  </AP_m>
                )}
              </div>
              {/* Step indicator */}
              <div className="absolute -bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5 bg-white dark:bg-ink-800 rounded-full px-3 py-2 border border-ink-200 dark:border-ink-700 shadow-card">
                {steps.map((_, i) => (
                  <div key={i} className={`h-1.5 rounded-full transition-all ${i === active ? 'w-8 bg-cyan-500' : 'w-1.5 bg-ink-200 dark:bg-ink-700'}`}/>
                ))}
              </div>
            </div>
          </div>
        </Container_m>
      </div>
    </Section_m>
  );
}

// ===== IA CLÍNICA SHOWCASE =====
function IAShowcase() {
  const [step, setStep] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setStep(s => (s + 1) % 3), 3500);
    return () => clearInterval(id);
  }, []);

  const examples = [
    {
      input: 'Paciente refere zumbido em orelha direita há 3 semanas, com piora gradual. Nega vertigem.',
      cid: [['H93.1', 'Zumbido subjetivo', 92], ['H81.1', 'Vertigem postural benigna', 12]],
      action: 'Solicitar audiometria tonal limiar e impedanciometria.',
    },
    {
      input: 'Criança de 4 anos com atraso de fala, dificuldade de compreensão e troca de fonemas /r/ /l/.',
      cid: [['F80.1', 'Transtorno expressivo de linguagem', 88], ['R47.0', 'Disfasia e afasia', 34]],
      action: 'Avaliação fonoaudiológica completa + teste de processamento auditivo central.',
    },
    {
      input: 'Otalgia bilateral aguda com febre, secreção em ouvido direito após resfriado de 5 dias.',
      cid: [['H66.0', 'Otite média supurativa aguda', 95], ['J00', 'Nasofaringite aguda', 41]],
      action: 'Otoscopia bilateral, antibioticoterapia + retorno em 7 dias para reavaliação.',
    },
  ];

  return (
    <Section_m id="ia" className="py-24 lg:py-32 relative overflow-hidden">
      <div className="absolute inset-0 bg-grid bg-radial-fade opacity-50 pointer-events-none"/>
      <Container_m>
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
          <div>
            <Reveal_m>
              <Pill_m tone="cyan"><I.Sparkles className="w-3 h-3"/> IA Clínica · Powered by Claude</Pill_m>
              <h2 className="font-display font-bold text-[clamp(2rem,4.4vw,3.4rem)] tracking-tight leading-[1.05] mt-4 text-pretty">A primeira IA pensada para clínicas brasileiras de Otorrino e Fono.</h2>
              <p className="mt-5 text-[16px] text-ink-600 dark:text-ink-300 leading-relaxed">Não é chatbot genérico. É uma IA treinada no contexto clínico que <span className="text-ink-900 dark:text-white font-medium">lê o histórico do paciente, conhece CID-10 e protocolos da sua especialidade</span>. Sugere — você decide. Tudo auditado, nada sai do ambiente da sua clínica.</p>
              <Stagger_m className="mt-7 grid sm:grid-cols-2 gap-3" staggerChildren={0.06}>
                {[
                  ['Lock', 'Privacidade total', 'Os dados ficam no Cliniset. Nada é usado para treinar modelos.'],
                  ['Shield', 'Auditável', 'Todo input/output é registrado com timestamp e usuário.'],
                  ['Zap', 'Em tempo real', 'Sugestões aparecem enquanto você digita o prontuário.'],
                  ['CheckCircle', 'Sempre opcional', 'Você pode desligar a IA por usuário ou clínica.'],
                ].map(([ic, t, d], i) => {
                  const Ic = I[ic];
                  return (
                    <StaggerItem_m key={i}>
                      <div className="rounded-xl border border-ink-200/60 dark:border-ink-800 p-4">
                        <div className="flex items-center gap-2 mb-1.5"><Ic className="w-4 h-4 text-cyan-500"/><div className="text-[13px] font-semibold">{t}</div></div>
                        <div className="text-[12px] text-ink-500 dark:text-ink-400 leading-snug">{d}</div>
                      </div>
                    </StaggerItem_m>
                  );
                })}
              </Stagger_m>
            </Reveal_m>
          </div>

          {/* Right: live IA demo */}
          <div className="relative">
            <div className="absolute -inset-6 bg-gradient-to-br from-cyan-500/20 via-transparent to-brand-600/20 blur-3xl pointer-events-none"/>
            <div className="relative rounded-2xl bg-ink-900 border border-ink-700/60 shadow-float-dark overflow-hidden">
              <div className="flex items-center justify-between px-4 h-10 border-b border-ink-700/60">
                <div className="flex items-center gap-2">
                  <div className="w-5 h-5 rounded bg-gradient-to-br from-cyan-400 to-brand-600 flex items-center justify-center"><I.Sparkles className="w-3 h-3 text-white"/></div>
                  <span className="text-[12px] font-semibold text-ink-100">IA Clínica</span>
                  <span className="px-1.5 py-0.5 rounded text-[9px] font-mono bg-emerald-500/10 text-emerald-300 border border-emerald-500/20">ao vivo</span>
                </div>
                <div className="flex gap-1">{[0,1,2].map(i => <span key={i} className={`w-1.5 h-1.5 rounded-full ${i === step ? 'bg-cyan-400' : 'bg-ink-700'}`}/>)}</div>
              </div>
              {AP_m && (
                <AP_m mode="wait">
                  <mm.div key={step} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.4 }} className="p-5">
                    <div className="text-[10px] uppercase tracking-wider text-ink-400 mb-2">Texto do prontuário</div>
                    <div className="rounded-lg bg-ink-800/60 border border-ink-700 p-3 text-[13px] text-ink-100 leading-relaxed font-mono">
                      {examples[step].input}<span className="inline-block w-1.5 h-3.5 bg-cyan-400 ml-0.5 align-middle animate-pulse"/>
                    </div>

                    <div className="mt-4">
                      <div className="text-[10px] uppercase tracking-wider text-cyan-300 mb-2 flex items-center gap-1.5"><I.Sparkles className="w-3 h-3"/> CID-10 sugeridos</div>
                      <div className="space-y-1.5">
                        {examples[step].cid.map(([c, n, p], i) => (
                          <mm.div key={c} initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.2 + i * 0.1 }} className="rounded-lg bg-ink-800/60 border border-ink-700 px-3 py-2 flex items-center justify-between">
                            <div className="flex items-center gap-2">
                              <span className="font-mono text-[12px] text-cyan-300">{c}</span>
                              <span className="text-[12px] text-ink-200">{n}</span>
                            </div>
                            <div className="flex items-center gap-2">
                              <div className="w-16 h-1.5 rounded-full bg-ink-700 overflow-hidden">
                                <mm.div initial={{ width: 0 }} animate={{ width: `${p}%` }} transition={{ duration: 0.8, delay: 0.3 + i * 0.1 }} className="h-full bg-gradient-to-r from-cyan-500 to-cyan-300"/>
                              </div>
                              <span className="font-mono text-[11px] text-ink-300 tabular w-8 text-right">{p}%</span>
                            </div>
                          </mm.div>
                        ))}
                      </div>
                    </div>

                    <div className="mt-4">
                      <div className="text-[10px] uppercase tracking-wider text-cyan-300 mb-2">Conduta sugerida</div>
                      <div className="rounded-lg bg-cyan-500/5 border border-cyan-500/20 p-3 text-[13px] text-ink-100 leading-relaxed">{examples[step].action}</div>
                    </div>

                    <div className="flex items-center gap-2 mt-4 text-[11px] text-ink-400">
                      <I.Lock className="w-3 h-3"/> Conversação criptografada · auditada · sem treinamento de modelos
                    </div>
                  </mm.div>
                </AP_m>
              )}
            </div>
          </div>
        </div>
      </Container_m>
    </Section_m>
  );
}

// ===== PERSONAS =====
function Personas() {
  const list = [
    { emoji: '👨‍⚕️', label: 'Médico / Fonoaudiólogo', quote: 'Quero atender mais e burocratizar menos.', body: 'Templates por especialidade, IA que sugere CID, assinatura digital, receita controlada — tudo em uma interface que abre rápido. Você sai da consulta com o prontuário fechado.' },
    { emoji: '🏥', label: 'Dono de clínica', quote: 'Quero ver o financeiro real, não a planilha defasada.', body: 'Repasse calculado por regra, fechamento mensal automático, NFS-e emitida, fluxo de caixa em tempo real. O número que você vê é o número que entra na conta.' },
    { emoji: '💼', label: 'Recepcionista', quote: 'Quero a fila no controle sem stress.', body: 'Check-in via QR, fila ao vivo no header, atrasados pintados de vermelho, confirmação por WhatsApp 1 dia antes. Manhã de segunda sem ligação de paciente perdido.' },
  ];
  return (
    <Section_m id="personas" className="py-24 lg:py-32">
      <Container_m>
        <Reveal_m>
          <div className="max-w-2xl">
            <Eyebrow_m>Para quem é</Eyebrow_m>
            <h2 className="font-display font-bold text-[clamp(2rem,4vw,3.2rem)] tracking-tight leading-[1.05] mt-3 text-pretty">Construído para os três papéis que mantêm uma clínica viva.</h2>
          </div>
        </Reveal_m>
        <Stagger_m className="grid md:grid-cols-3 gap-5 mt-12" staggerChildren={0.1}>
          {list.map((p, i) => (
            <StaggerItem_m key={i}>
              <div className="h-full rounded-2xl border border-ink-200/70 dark:border-ink-800 bg-white dark:bg-ink-900/60 p-7 hover:shadow-card transition-shadow">
                <div className="text-4xl">{p.emoji}</div>
                <div className="text-[12px] uppercase tracking-wider text-ink-500 dark:text-ink-400 mt-4">{p.label}</div>
                <div className="text-[20px] font-display font-semibold tracking-tight mt-2 text-pretty">"{p.quote}"</div>
                <p className="text-[14px] text-ink-600 dark:text-ink-300 leading-relaxed mt-3">{p.body}</p>
              </div>
            </StaggerItem_m>
          ))}
        </Stagger_m>
      </Container_m>
    </Section_m>
  );
}

// ===== METRICS + TESTIMONIAL =====
function Metrics() {
  const kpis = [
    { v: 156, suffix: 'k+', label: 'Pacientes migrados', tone: 'text-cyan-500' },
    { v: 460, suffix: 'k+', label: 'Evoluções clínicas', tone: 'text-emerald-500' },
    { v: 35,  suffix: 'k',  label: 'Agendamentos / mês', tone: 'text-amber-500' },
    { v: 99,  suffix: '.9%', label: 'Uptime do sistema', tone: 'text-violet-500' },
  ];
  return (
    <Section_m className="py-24 lg:py-28">
      <Container_m>
        <Stagger_m className="grid grid-cols-2 lg:grid-cols-4 gap-4" staggerChildren={0.08}>
          {kpis.map((k, i) => (
            <StaggerItem_m key={i}>
              <div className="rounded-2xl border border-ink-200/70 dark:border-ink-800 bg-white dark:bg-ink-900/60 p-7">
                <div className={`font-display font-bold text-[clamp(2.4rem,4.5vw,3.4rem)] tracking-tight tabular leading-none ${k.tone}`}>
                  <CountUp_m to={k.v}/>{k.suffix}
                </div>
                <div className="text-[13px] text-ink-500 dark:text-ink-400 mt-2">{k.label}</div>
              </div>
            </StaggerItem_m>
          ))}
        </Stagger_m>

        <Reveal_m delay={0.2}>
          <div className="mt-10 rounded-2xl bg-gradient-to-br from-brand-700 to-brand-800 dark:from-brand-800 dark:to-brand-900 p-8 lg:p-12 border border-brand-500/20 relative overflow-hidden">
            <div className="absolute top-0 right-0 w-96 h-96 conic-glow opacity-30 blur-3xl"/>
            <div className="relative max-w-4xl">
              <svg className="w-10 h-10 text-cyan-400 mb-4" viewBox="0 0 24 24" fill="currentColor"><path d="M3 17h6V7H3v10zm12 0h6V7h-6v10z"/></svg>
              <p className="font-display text-[clamp(1.4rem,2.6vw,2rem)] leading-snug tracking-tight text-white text-pretty">"Migrei <span className="text-cyan-300">17 anos de prontuário em 1 semana</span>. A fono entrou no sistema e nem percebeu — todo o histórico estava lá, ainda mais organizado."</p>
              <div className="flex items-center gap-3 mt-6">
                <div className="w-11 h-11 rounded-full bg-gradient-to-br from-cyan-400 to-brand-500 flex items-center justify-center text-white font-semibold">EM</div>
                <div>
                  <div className="text-[14px] font-semibold text-white">Dr. Emerson Monteiro</div>
                  <div className="text-[12px] text-cyan-200/80">Otorrinolaringologista · Clínica Dr Emerson Monteiro</div>
                </div>
              </div>
            </div>
          </div>
        </Reveal_m>
      </Container_m>
    </Section_m>
  );
}

// ===== MIGRATION =====
function Migration() {
  const phases = [
    { n: 1, label: 'Assinatura', desc: 'Contrato fechado e ambiente staging dedicado provisionado em até 24h.', icon: <I.FileText className="w-4 h-4"/> },
    { n: 2, label: 'Mapeamento', desc: 'Conexão ao banco do sistema atual. Mapeamento de campos, validação de integridade e amostragem com sua equipe.', icon: <I.Database className="w-4 h-4"/> },
    { n: 3, label: 'Migração', desc: 'Importação completa em ambiente espelho. Conferência manual de prontuários, exames e faturas. Ajustes finos.', icon: <I.Activity className="w-4 h-4"/> },
    { n: 4, label: 'Go-live', desc: 'Cutover em horário planejado — fim de semana ou madrugada. Suporte dedicado nos primeiros 30 dias.', icon: <I.Zap className="w-4 h-4"/> },
  ];
  return (
    <Section_m id="migracao" className="py-24 lg:py-32">
      <Container_m>
        <div className="grid lg:grid-cols-[0.85fr_1.15fr] gap-12 lg:gap-16">
          <div>
            <Reveal_m>
              <Eyebrow_m>Migração</Eyebrow_m>
              <h2 className="font-display font-bold text-[clamp(2rem,4.4vw,3.4rem)] tracking-tight leading-[1.05] mt-3 text-pretty">Você não vai perder 17 anos de histórico.</h2>
              <p className="mt-5 text-[16px] text-ink-600 dark:text-ink-300 leading-relaxed">A maior objeção a trocar de sistema é o medo de perder dados. CliniSet migra <span className="text-ink-900 dark:text-white font-medium">100%</span> do seu sistema atual — prontuários, audiometrias, receitas, faturas e anexos. Sem downtime, sem perda de histórico, com conferência manual ao seu lado.</p>
              <ul className="mt-7 space-y-2.5 text-[14px]">
                {['Importação automática via scripts auditados', 'Conversão de prontuários, exames, receitas e faturas', 'Teste em staging antes do go-live', 'Suporte de migração dedicado, sem custo extra'].map(t => (
                  <li key={t} className="flex items-start gap-2.5"><I.CheckCircle className="w-4 h-4 text-emerald-500 mt-1 flex-shrink-0"/><span>{t}</span></li>
                ))}
              </ul>
            </Reveal_m>
          </div>

          {/* Timeline */}
          <Stagger_m className="relative" staggerChildren={0.12}>
            <div className="absolute left-6 top-6 bottom-6 w-px bg-gradient-to-b from-cyan-500 via-cyan-500/30 to-transparent"/>
            {phases.map((p, i) => (
              <StaggerItem_m key={p.n}>
                <div className="relative flex gap-5 pb-8 last:pb-0">
                  <div className="relative z-10 w-12 h-12 rounded-2xl bg-white dark:bg-ink-900 border border-ink-200/60 dark:border-ink-700 shadow-card flex items-center justify-center text-cyan-500 flex-shrink-0">
                    {p.icon}
                  </div>
                  <div className="flex-1 pt-1">
                    <div className="text-[11px] font-mono text-cyan-500">PHASE {p.n}</div>
                    <div className="text-[18px] font-semibold tracking-tight mt-0.5">{p.label}</div>
                    <p className="text-[14px] text-ink-600 dark:text-ink-300 mt-1.5 leading-relaxed">{p.desc}</p>
                  </div>
                </div>
              </StaggerItem_m>
            ))}
          </Stagger_m>
        </div>
      </Container_m>
    </Section_m>
  );
}

window.SectionsMid = { StickyDemo, IAShowcase, Personas, Metrics, Migration };