/* global React, FramerMotion */
/*
  Página /assistant — produto Captixy Assistant.
  Reutiliza os componentes de secção de landing.jsx (carregado antes via
  window.CAPTIXY_PAGE) e adiciona o bloco beta exclusivo desta página.
*/
const { motion: ma, AnimatePresence: APa } = FramerMotion;
const { useState: uSa } = React;
const {
  FadeUp, WordsPullUpMultiStyle, AnimatedParagraph,
  IconCheck, IconArrowRight, IconSparkle,
  Navbar: NBa, CtaPill: CPa, Footer: FTa,
  EASE_EXPO: EEa,
} = window;

/* Pull in section components exported by landing.jsx */
const {
  Hero, Ticker, Manifesto, LivePulse,
  ProductDemo, HowItWorks, Features, Pricing, FAQ, FinalCTA,
} = window;

/* ============================================================
   BLOCO BETA
============================================================ */
function BetaBlock() {
  return (
    <section id="beta" className="relative bg-[#070B1F] px-5 md:px-8 py-20 md:py-28 overflow-hidden">
      <div className="absolute inset-0 pointer-events-none">
        <div className="bob absolute top-10 left-[8%] w-48 h-48 rounded-full"
          style={{ background: "radial-gradient(circle, rgba(255,107,115,0.20), transparent 70%)", filter: "blur(40px)" }} />
        <div className="bob-delay absolute bottom-10 right-[10%] w-64 h-64 rounded-full"
          style={{ background: "radial-gradient(circle, rgba(123,97,255,0.12), transparent 70%)", filter: "blur(40px)" }} />
      </div>

      <div className="max-w-5xl mx-auto relative">
        <div className="relative overflow-hidden rounded-3xl md:rounded-[2rem] bg-[#111530] hairline-strong px-6 sm:px-10 md:px-16 py-16 md:py-24">
          <div className="absolute inset-0 mesh opacity-40 pointer-events-none" />
          <div className="absolute inset-0 noise-overlay opacity-20 mix-blend-overlay pointer-events-none" />

          <div className="relative grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
            <div className="lg:col-span-8">
              <FadeUp>
                <div className="eyebrow-orange mb-6 flex items-center gap-2">
                  <span className="relative inline-flex w-2 h-2">
                    <span className="absolute inset-0 rounded-full bg-orange/70 animate-ping" />
                    <span className="relative inline-flex w-2 h-2 rounded-full bg-orange" />
                  </span>
                  Programa beta · acesso gratuito
                </div>
              </FadeUp>

              <WordsPullUpMultiStyle
                justify="flex-start"
                className="text-3xl sm:text-4xl md:text-5xl text-primary leading-[1.02] max-w-3xl"
                segments={[
                  { text: "Acesso completo,",   className: "font-normal" },
                  { text: "gratuito,",           className: "serif italic font-normal text-orange" },
                  { text: "durante 2 a 3 meses.", className: "font-normal" },
                ]}
              />

              <FadeUp delay={0.4}>
                <p className="mt-7 max-w-xl text-primary/65 text-sm md:text-base leading-relaxed">
                  Estamos a seleccionar pequenos negócios para o programa beta. Tens acesso
                  a todas as funcionalidades, sem custo, enquanto refinamos o produto lado a lado.
                  No final do beta, escolhes se queres continuar — sem pressão nem compromisso.
                </p>
              </FadeUp>

              <FadeUp delay={0.5}>
                <ul className="mt-7 flex flex-col sm:flex-row flex-wrap gap-3 sm:gap-6">
                  {[
                    "Todas as funcionalidades incluídas",
                    "Sem cartão de crédito",
                    "Sem compromisso após o beta",
                    "Negócios seleccionados manualmente",
                  ].map((it, i) => (
                    <li key={i} className="flex items-center gap-2 text-sm text-primary/75">
                      <IconCheck className="w-3.5 h-3.5 text-orange shrink-0" />
                      {it}
                    </li>
                  ))}
                </ul>
              </FadeUp>

              <FadeUp delay={0.7}>
                <div className="mt-10 flex flex-wrap items-center gap-4">
                  <CPa href="https://app.captixy.com/signup" size="lg" variant="orange">
                    Candidatar ao programa beta
                  </CPa>
                  <a href="#precos" className="text-sm text-primary/60 hover:text-primary transition-colors link-underline inline-flex items-center gap-1.5">
                    Ver planos pós-beta
                    <IconArrowRight className="w-3 h-3" />
                  </a>
                </div>
              </FadeUp>
            </div>

            {/* Right: info card */}
            <div className="lg:col-span-4">
              <FadeUp delay={0.3}>
                <div className="rounded-2xl bg-[#1A1E3A] hairline p-6 md:p-7">
                  <div className="eyebrow-orange mb-4 text-[10px]">O que inclui</div>
                  <ul className="space-y-3.5">
                    {[
                      "Assistente virtual com personalidade própria",
                      "Fluxo de qualificação personalizado",
                      "Link público + QR code + embed",
                      "Dashboard de leads em tempo real",
                      "Notificações por email",
                      "Suporte directo da equipa Captixy",
                    ].map((it, i) => (
                      <li key={i} className="flex items-start gap-2.5 text-sm text-primary/75 leading-snug">
                        <IconSparkle className="w-3.5 h-3.5 text-orange shrink-0 mt-0.5" />
                        {it}
                      </li>
                    ))}
                  </ul>
                </div>
              </FadeUp>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   ASSISTANT PAGE APP
============================================================ */
function AssistantApp() {
  return (
    <>
      <Hero />
      <Ticker />
      <Manifesto />
      <LivePulse />
      <ProductDemo />
      <HowItWorks />
      <Features />
      <BetaBlock />
      <Pricing sectionId="precos" />
      <FAQ />
      <FinalCTA />
      <FTa />
    </>
  );
}

const rootAss = ReactDOM.createRoot(document.getElementById("root"));
rootAss.render(<AssistantApp />);