// Comparison, MobileExperience, MidCTA, FAQ, FinalCTA, Footer, FloatingCTA

function ComparisonSection() {
  const before = [
    "Planilhas espalhadas",
    "Grupos de WhatsApp",
    "Boletos manuais",
    "Falta de rastreabilidade",
    "Documentos dispersos",
    "Aprovações lentas",
  ];
  const after = [
    "Plataforma única",
    "Comunicação organizada",
    "Pix e boletos integrados",
    "Indicadores em tempo real",
    "Documentos centralizados",
    "Aprovações digitais",
  ];
  return (
    <Section id="comparacao" label="08 Comparison" className="py-24 md:py-32 bg-paper-50">
      <Container>
        <div className="max-w-[820px]">
          <FadeUp><Pill>Antes & depois</Pill></FadeUp>
          <FadeUp delay={0.05}>
            <h2 className="mt-5 text-[34px] sm:text-[44px] lg:text-[54px] leading-[1.02] tracking-tightest font-semibold text-balance">
              Antes, tudo espalhado.
              <span className="block text-mute-500 font-serif italic font-normal">Agora, tudo conectado.</span>
            </h2>
          </FadeUp>
        </div>

        <div className="mt-12 grid md:grid-cols-2 gap-3 md:gap-4 relative">
          <FadeUp>
            <div className="rounded-3xl border border-ink-950/[0.07] bg-paper-100 p-7 md:p-8 h-full">
              <div className="flex items-center gap-3">
                <span className="w-9 h-9 rounded-full bg-ink-950/5 inline-flex items-center justify-center text-mute-500">
                  <I name="x" size={16}/>
                </span>
                <div className="text-[12px] uppercase tracking-[0.18em] text-mute-500">Antes</div>
              </div>
              <div className="mt-3 text-[22px] font-semibold tracking-tight">Gestão fragmentada</div>
              <ul className="mt-6 flex flex-col gap-3">
                {before.map((b, i) => (
                  <li key={i} className="flex items-center gap-3 text-[15px] text-mute-500 line-through decoration-mute-500/30">
                    <span className="w-1.5 h-1.5 rounded-full bg-mute-500/50"></span>
                    {b}
                  </li>
                ))}
              </ul>
            </div>
          </FadeUp>

          <FadeUp delay={0.06}>
            <div className="relative rounded-3xl bg-ink-950 text-paper-50 p-7 md:p-8 h-full overflow-hidden">
              <div className="absolute inset-0 halo-dark opacity-80 pointer-events-none"></div>
              <div className="relative">
                <div className="flex items-center gap-3">
                  <span className="w-9 h-9 rounded-full bg-brand-500 text-white inline-flex items-center justify-center">
                    <I name="check" size={16}/>
                  </span>
                  <div className="text-[12px] uppercase tracking-[0.18em] text-brand-300">Com CondoClin</div>
                </div>
                <div className="mt-3 text-[22px] font-semibold tracking-tight">Gestão conectada</div>
                <ul className="mt-6 flex flex-col gap-3">
                  {after.map((b, i) => (
                    <li key={i} className="flex items-center gap-3 text-[15px] text-white/90">
                      <span className="w-5 h-5 rounded-full bg-brand-500/20 text-brand-300 inline-flex items-center justify-center">
                        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12l5 5L20 6"/></svg>
                      </span>
                      {b}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </FadeUp>
        </div>

        <FadeUp delay={0.1}>
          <p className="mt-10 text-center text-mute-500 max-w-[640px] mx-auto text-[15px]">
            Uma plataforma para quem administra, decide e vive o condomínio.
          </p>
        </FadeUp>
      </Container>
    </Section>
  );
}

function MobileExperienceSection() {
  const features = [
    { t: "Segunda via de boleto", icon: "doc" },
    { t: "Pagamento via Pix", icon: "pix" },
    { t: "QR Code de visitante", icon: "qrcode" },
    { t: "Comunicados recentes", icon: "msg" },
    { t: "Reservas", icon: "calendar" },
    { t: "Ocorrências", icon: "spark" },
    { t: "Documentos", icon: "doc" },
    { t: "Notificações", icon: "bell" },
  ];
  return (
    <Section id="app" label="09 Mobile experience" className="py-24 md:py-32 bg-paper-100 relative overflow-hidden">
      <div className="absolute inset-0 halo opacity-50 pointer-events-none"></div>
      <Container className="relative">
        <div className="grid lg:grid-cols-12 gap-12 items-center">
          <div className="lg:col-span-6 order-2 lg:order-1">
            <FadeUp><Pill>App do morador</Pill></FadeUp>
            <FadeUp delay={0.05}>
              <h2 className="mt-5 text-[34px] sm:text-[44px] lg:text-[54px] leading-[1.02] tracking-tightest font-semibold text-balance">
                O app que simplifica
                <span className="block text-mute-500 font-serif italic font-normal">a vida do morador.</span>
              </h2>
            </FadeUp>
            <FadeUp delay={0.1}>
              <p className="mt-5 text-[16px] md:text-[17px] text-mute-500 max-w-[520px] text-pretty">
                Uma experiência limpa, rápida e intuitiva para reduzir dúvidas, ligações e solicitações repetidas.
              </p>
            </FadeUp>

            <div className="mt-8 grid grid-cols-2 gap-3">
              {features.map((f, i) => (
                <FadeUp key={i} delay={i * 0.04}>
                  <div className="flex items-center gap-3 rounded-xl bg-white border border-ink-950/[0.06] px-4 py-3 lift">
                    <span className="w-8 h-8 rounded-lg bg-brand-50 text-brand-500 inline-flex items-center justify-center">
                      <I name={f.icon} size={14}/>
                    </span>
                    <span className="text-[14px] font-medium text-ink-950">{f.t}</span>
                  </div>
                </FadeUp>
              ))}
            </div>

            <FadeUp delay={0.2}>
              <div className="mt-8 flex gap-3 items-center">
                <CTA href="#contato">Quero o app no meu condomínio</CTA>
              </div>
            </FadeUp>
          </div>

          <div className="lg:col-span-6 order-1 lg:order-2 relative">
            <FadeUp delay={0.05}>
              <div className="relative mx-auto max-w-[420px]">
                <div className="absolute -inset-10 rounded-full bg-brand-500/15 blur-3xl pointer-events-none"></div>
                <img src="assets/celular-frente.png" alt="App do morador CondoClin" className="relative w-full h-auto drop-shadow-[0_40px_80px_rgba(8,8,8,0.25)]" />
                {/* Floating chips */}
                <div className="hidden md:block absolute -left-6 top-12">
                  <div className="glass rounded-xl px-3 py-2 flex items-center gap-2 lift">
                    <span className="w-7 h-7 rounded-md bg-ok-500/15 text-ok-500 inline-flex items-center justify-center"><I name="check" size={14}/></span>
                    <div className="text-[12px] font-medium">Pago via Pix · 12/05</div>
                  </div>
                </div>
                <div className="hidden md:block absolute -right-4 top-1/3">
                  <div className="glass rounded-xl px-3 py-2 flex items-center gap-2 lift">
                    <span className="w-7 h-7 rounded-md bg-brand-50 text-brand-500 inline-flex items-center justify-center"><I name="qrcode" size={14}/></span>
                    <div className="text-[12px] font-medium">QR de visitante gerado</div>
                  </div>
                </div>
                <div className="hidden md:block absolute -left-2 bottom-20">
                  <div className="glass rounded-xl px-3 py-2 flex items-center gap-2 lift">
                    <span className="w-7 h-7 rounded-md bg-brand-50 text-brand-500 inline-flex items-center justify-center"><I name="bell" size={14}/></span>
                    <div className="text-[12px] font-medium">2 comunicados não lidos</div>
                  </div>
                </div>
              </div>
            </FadeUp>
          </div>
        </div>
      </Container>
    </Section>
  );
}

function MidCTASection() {
  return (
    <Section id="mid-cta" label="10 Mid CTA" className="py-20 md:py-28 bg-paper-50">
      <Container>
        <div className="relative overflow-hidden rounded-[28px] bg-ink-950 text-paper-50 p-8 sm:p-12 md:p-16">
          <div className="absolute inset-0 halo-dark opacity-80 pointer-events-none"></div>
          <div className="absolute -right-20 -top-20 w-[420px] h-[420px] rounded-full bg-brand-500/20 blur-3xl pointer-events-none"></div>
          <div className="relative grid md:grid-cols-12 gap-8 items-end">
            <div className="md:col-span-8">
              <FadeUp><Pill dark>Avaliação personalizada</Pill></FadeUp>
              <FadeUp delay={0.04}>
                <h2 className="mt-5 text-[30px] sm:text-[38px] lg:text-[48px] leading-[1.04] tracking-tightest font-semibold text-balance">
                  Quer entender como o CondoClin se encaixa
                  <span className="block text-white/55 font-serif italic font-normal">na realidade do seu condomínio?</span>
                </h2>
              </FadeUp>
              <FadeUp delay={0.08}>
                <p className="mt-5 text-[15px] md:text-[16px] text-white/65 max-w-[560px] text-pretty">
                  Solicite uma avaliação e veja quais processos podem ser centralizados, automatizados e simplificados.
                </p>
              </FadeUp>
            </div>
            <div className="md:col-span-4 flex md:justify-end">
              <FadeUp delay={0.12}>
                <div className="flex flex-col sm:flex-row md:flex-col gap-3">
                  <CTA href="#contato">Solicitar avaliação</CTA>
                  <CTA href="#contato" variant="ghost-dark" icon={false}>Falar com especialista</CTA>
                </div>
              </FadeUp>
            </div>
          </div>
        </div>
      </Container>
    </Section>
  );
}

function FAQSection() {
  const qa = [
    { q: "O CondoClin serve para administradoras com vários condomínios?", a: "Sim. A plataforma é multi-condomínio, com gestão centralizada de carteira, contratos, financeiro e indicadores comparativos entre as unidades sob sua administração." },
    { q: "O sistema também atende síndicos moradores?", a: "Sim. Oferecemos um painel simplificado para o síndico, com aprovações, comunicados, ocorrências, finanças e portaria em um único lugar." },
    { q: "O morador tem acesso pelo celular?", a: "Sim. O app CondoClin está disponível para iOS e Android, com boletos, Pix, comunicados, reservas, QR de visitante e documentos." },
    { q: "É possível gerar boletos e Pix?", a: "Sim. Emitimos boletos e Pix com conciliação automática, régua de cobrança e relatórios financeiros em tempo real." },
    { q: "O sistema possui controle de portaria?", a: "Sim. Há um módulo completo de portaria com visitantes, encomendas, acessos, ronda e histórico auditável." },
    { q: "Dá para gerenciar documentos e assinaturas?", a: "Sim. Documentos ficam centralizados, com versões, busca e assinatura eletrônica com validade jurídica." },
    { q: "O sistema ajuda no financeiro?", a: "Sim. Receitas, despesas, fluxo de caixa, DRE, prestação de contas e indicadores ficam disponíveis em painéis." },
    { q: "Como funciona a contratação?", a: "Após a avaliação inicial, alinhamos escopo, módulos e implantação. O time CondoClin acompanha onboarding e migração." },
    { q: "É necessário treinamento?", a: "Oferecemos treinamentos curtos e materiais de apoio. A interface é projetada para ser intuitiva e reduzir curva de aprendizado." },
    { q: "Posso solicitar uma avaliação antes de contratar?", a: "Sim. A avaliação é gratuita e ajuda você a entender quais processos podem ser centralizados e automatizados." },
  ];
  return (
    <Section id="faq" label="11 FAQ" className="py-24 md:py-32 bg-paper-50">
      <Container>
        <div className="grid lg:grid-cols-12 gap-10 items-start">
          <div className="lg:col-span-5">
            <FadeUp><Pill>Perguntas frequentes</Pill></FadeUp>
            <FadeUp delay={0.05}>
              <h2 className="mt-5 text-[34px] sm:text-[44px] lg:text-[52px] leading-[1.02] tracking-tightest font-semibold text-balance">
                As dúvidas que mais ouvimos
                <span className="block text-mute-500 font-serif italic font-normal">de quem está avaliando.</span>
              </h2>
            </FadeUp>
            <FadeUp delay={0.1}>
              <p className="mt-5 text-mute-500 text-[15px] max-w-[400px]">
                Não encontrou sua resposta? <a href="#contato" className="text-ink-950 underline decoration-brand-500/60 underline-offset-4">Fale com um especialista</a>.
              </p>
            </FadeUp>
          </div>
          <div className="lg:col-span-7 flex flex-col">
            {qa.map((item, i) => (
              <FadeUp key={i} delay={i * 0.02}>
                <details className="group border-b border-ink-950/[0.08] py-5">
                  <summary className="flex items-start justify-between gap-6 cursor-pointer">
                    <span className="text-[16px] md:text-[18px] font-medium tracking-tight text-ink-950 text-pretty">{item.q}</span>
                    <span className="chev mt-1 w-7 h-7 rounded-full border border-ink-950/10 inline-flex items-center justify-center transition-transform duration-300 shrink-0">
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
                    </span>
                  </summary>
                  <div className="mt-3 text-[15px] text-mute-500 leading-relaxed max-w-[640px]">{item.a}</div>
                </details>
              </FadeUp>
            ))}
          </div>
        </div>
      </Container>
    </Section>
  );
}

function FinalCTA() {
  const [form, setForm] = useState({
    nome: "", empresa: "", perfil: "Administradora", unidades: "", whatsapp: "", email: "", mensagem: ""
  });
  const [sent, setSent] = useState(false);
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
  };
  return (
    <Section id="contato" label="12 Final CTA" className="py-24 md:py-32 bg-ink-950 text-paper-50 relative overflow-hidden">
      <div className="absolute inset-0 halo-dark opacity-80 pointer-events-none"></div>
      <div className="absolute -left-40 top-20 w-[520px] h-[520px] rounded-full bg-brand-500/15 blur-3xl pointer-events-none"></div>

      <Container className="relative">
        <div className="grid lg:grid-cols-12 gap-12 items-start">
          <div className="lg:col-span-6">
            <FadeUp><Pill dark>Solicite sua avaliação</Pill></FadeUp>
            <FadeUp delay={0.05}>
              <h2 className="mt-5 text-[34px] sm:text-[46px] lg:text-[58px] leading-[1.02] tracking-tightest font-semibold text-balance">
                Dê ao seu condomínio uma gestão
                <span className="block text-white/55 font-serif italic font-normal">mais simples, conectada e inteligente.</span>
              </h2>
            </FadeUp>
            <FadeUp delay={0.1}>
              <p className="mt-6 text-[16px] text-white/65 max-w-[520px] text-pretty">
                Converse com nossa equipe e descubra como centralizar financeiro, portaria, comunicação, documentos e operações em uma única plataforma.
              </p>
            </FadeUp>

            <div className="mt-10 grid sm:grid-cols-2 gap-4">
              {[
                { t: "Resposta em até 1 dia útil", icon: "bolt" },
                { t: "Avaliação gratuita", icon: "spark" },
                { t: "Onboarding guiado", icon: "user" },
                { t: "Sem instalação", icon: "cog" },
              ].map((b,i)=>(
                <FadeUp key={i} delay={i*0.05}>
                  <div className="flex items-center gap-3 text-[14px] text-white/80">
                    <span className="w-9 h-9 rounded-lg bg-brand-500/15 text-brand-300 inline-flex items-center justify-center"><I name={b.icon} size={16}/></span>
                    {b.t}
                  </div>
                </FadeUp>
              ))}
            </div>
          </div>

          <div className="lg:col-span-6">
            <FadeUp delay={0.08}>
              <div className="rounded-[28px] glass-dark p-6 md:p-8">
                {!sent ? (
                  <form onSubmit={submit} className="flex flex-col gap-4">
                    <div className="grid sm:grid-cols-2 gap-4">
                      <Field label="Nome" value={form.nome} onChange={set("nome")} required />
                      <Field label="Empresa / Condomínio" value={form.empresa} onChange={set("empresa")} required />
                    </div>
                    <div className="grid sm:grid-cols-2 gap-4">
                      <SelectField label="Perfil" value={form.perfil} onChange={set("perfil")} options={["Administradora","Síndico","Morador","Outro"]} />
                      <Field label="Unidades" type="number" value={form.unidades} onChange={set("unidades")} placeholder="ex.: 120" />
                    </div>
                    <div className="grid sm:grid-cols-2 gap-4">
                      <Field label="WhatsApp" value={form.whatsapp} onChange={set("whatsapp")} placeholder="(11) 99999-9999" required />
                      <Field label="E-mail" type="email" value={form.email} onChange={set("email")} required />
                    </div>
                    <Field label="Mensagem" textarea rows={4} value={form.mensagem} onChange={set("mensagem")} placeholder="Conte rapidamente sobre sua operação..." />
                    <button type="submit" className="btn-primary inline-flex items-center justify-center gap-2 h-12 px-6 rounded-full text-[15px] font-medium tracking-tight mt-2">
                      Solicitar minha avaliação
                      <I name="arrow" size={16}/>
                    </button>
                    <p className="text-[12px] text-white/55">Retornaremos com uma análise inicial para entender sua operação. Seus dados ficam protegidos sob LGPD.</p>
                  </form>
                ) : (
                  <div className="py-10 text-center">
                    <div className="mx-auto w-14 h-14 rounded-full bg-brand-500/20 text-brand-300 inline-flex items-center justify-center">
                      <I name="check" size={22}/>
                    </div>
                    <h3 className="mt-5 text-[24px] font-semibold tracking-tight">Pedido recebido.</h3>
                    <p className="mt-2 text-white/65 text-[15px] max-w-[360px] mx-auto">
                      Nosso time entra em contato em até 1 dia útil para agendar sua avaliação. Obrigado, {form.nome.split(" ")[0] || "tudo certo"}.
                    </p>
                  </div>
                )}
              </div>
            </FadeUp>
          </div>
        </div>
      </Container>
    </Section>
  );
}

function Field({ label, value, onChange, type = "text", placeholder, required, textarea, rows }) {
  return (
    <label className="flex flex-col gap-1.5">
      <span className="text-[12px] uppercase tracking-[0.16em] text-white/60">{label}{required && <span className="text-brand-300"> *</span>}</span>
      {textarea ? (
        <textarea
          value={value} onChange={onChange} required={required} placeholder={placeholder} rows={rows || 3}
          className="bg-white/[0.04] border border-white/10 rounded-xl px-4 py-3 text-[15px] text-white placeholder-white/30 outline-none focus:border-brand-500 focus:bg-white/[0.06] transition"
        />
      ) : (
        <input
          type={type} value={value} onChange={onChange} required={required} placeholder={placeholder}
          className="bg-white/[0.04] border border-white/10 rounded-xl px-4 py-3 text-[15px] text-white placeholder-white/30 outline-none focus:border-brand-500 focus:bg-white/[0.06] transition"
        />
      )}
    </label>
  );
}

function SelectField({ label, value, onChange, options }) {
  return (
    <label className="flex flex-col gap-1.5">
      <span className="text-[12px] uppercase tracking-[0.16em] text-white/60">{label}</span>
      <div className="relative">
        <select value={value} onChange={onChange}
          className="appearance-none w-full bg-white/[0.04] border border-white/10 rounded-xl px-4 py-3 text-[15px] text-white outline-none focus:border-brand-500 focus:bg-white/[0.06] transition pr-10">
          {options.map(o => <option key={o} value={o} className="bg-ink-950">{o}</option>)}
        </select>
        <span className="absolute right-3 top-1/2 -translate-y-1/2 text-white/60 pointer-events-none">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M6 9l6 6 6-6"/></svg>
        </span>
      </div>
    </label>
  );
}

function Footer() {
  return (
    <footer className="bg-ink-950 text-paper-50/80 border-t border-white/[0.06]">
      <Container className="py-14">
        <div className="grid md:grid-cols-12 gap-10">
          <div className="md:col-span-5">
            <Logo light/>
            <p className="mt-5 max-w-[360px] text-[14px] text-white/55 leading-relaxed">
              Uma plataforma para quem administra, decide e vive o condomínio. Boletos, portaria, financeiro, RH e comunicação em uma só experiência.
            </p>
            <div className="mt-6 flex gap-2">
              <CTA href="#contato" variant="primary" className="h-10 px-5 text-[13px]">Solicitar avaliação</CTA>
            </div>
          </div>
          <div className="md:col-span-7 grid grid-cols-2 sm:grid-cols-3 gap-8">
            <FooterCol title="Plataforma" links={["Financeiro","Portaria","RH","Comunicação","Documentos"]}/>
            <FooterCol title="Para quem é" links={["Administradoras","Síndicos","Moradores","Equipes internas"]}/>
            <FooterCol title="Empresa" links={["Sobre","Contato","Carreiras","Privacidade","Termos"]}/>
          </div>
        </div>
        <div className="mt-14 pt-6 border-t border-white/[0.06] flex flex-col md:flex-row gap-4 items-start md:items-center justify-between text-[12px] text-white/40">
          <div>© {new Date().getFullYear()} CondoClin · Todos os direitos reservados.</div>
          <div className="flex items-center gap-4">
            <span>LGPD</span>
            <span>•</span>
            <span>Status</span>
            <span>•</span>
            <span>v 1.0</span>
          </div>
        </div>
      </Container>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div className="text-[12px] uppercase tracking-[0.18em] text-white/40">{title}</div>
      <ul className="mt-4 flex flex-col gap-2.5">
        {links.map((l,i)=>(
          <li key={i}><a href="#" className="text-[14px] text-white/70 hover:text-white transition">{l}</a></li>
        ))}
      </ul>
    </div>
  );
}

function FloatingCTA() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 800);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className={"fixed z-40 bottom-4 left-0 right-0 px-4 md:hidden transition-all " + (show ? "translate-y-0 opacity-100" : "translate-y-6 opacity-0 pointer-events-none")}>
      <a href="#contato" className="float-cta flex items-center justify-center gap-2 h-12 rounded-full bg-brand-500 text-white text-[15px] font-medium">
        Solicitar avaliação
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
      </a>
    </div>
  );
}

Object.assign(window, { ComparisonSection, MobileExperienceSection, MidCTASection, FAQSection, FinalCTA, Footer, FloatingCTA });