/* global React, ReactDOM, FramerMotion */
/* Página /assistant — mantém o hero e simplifica apenas secções específicas. */
const { motion: ma } = FramerMotion;
const {
  FadeUp,
  IconCheck,
  IconArrowRight,
  IconSparkle,
  CtaPill: CPa,
  Footer: FTa,
} = window;

const { Hero, Ticker, Pricing, FAQ, FinalCTA } = window;

function AssistantSection({
  id,
  children,
  className = "",
  glow = "right",
  tone = "dark",
}) {
  const toneClass = {
    dark: "bg-[#070B1F]",
    warm: "bg-[#FFF4EC]",
    coral: "bg-[#FF6B73]",
    slate: "bg-[#111530]",
  }[tone];
  return (
    <section
      id={id}
      className={`relative overflow-hidden px-5 py-20 md:px-8 md:py-28 ${toneClass} ${className}`}
    >
      <div
        className={`pointer-events-none absolute top-1/2 h-[520px] w-[520px] -translate-y-1/2 rounded-full blur-3xl ${glow === "left" ? "left-[-18rem] bg-orange/10" : "right-[-18rem] bg-purple/8"}`}
      />
      <div className="relative mx-auto max-w-7xl">{children}</div>
    </section>
  );
}

function AssistantHeading({
  eyebrow,
  title,
  body,
  align = "center",
  tone = "dark",
}) {
  const centered = align === "center";
  const light = tone === "light";
  return (
    <FadeUp>
      <div className={centered ? "mx-auto max-w-3xl text-center" : "max-w-2xl"}>
        <div
          className={`mb-4 text-[11px] font-medium uppercase tracking-[0.18em] ${light ? "text-[#D85C5F]" : "text-orange"}`}
        >
          {eyebrow}
        </div>
        <h2 className="text-3xl tracking-tight text-primary sm:text-4xl md:text-5xl leading-[1.04]">
          <span className={light ? "text-[#111530]" : "text-primary"}>
            {title}
          </span>
        </h2>
        {body && (
          <p
            className={`mt-5 text-sm leading-relaxed md:text-base ${light ? "text-[#4C4150]" : "text-primary/60"}`}
          >
            {body}
          </p>
        )}
      </div>
    </FadeUp>
  );
}

function AssistantMetric({ value, label, delay = 0 }) {
  return (
    <FadeUp delay={delay}>
      <div className="group relative overflow-hidden rounded-[1.35rem] bg-white/[0.055] p-5 shadow-[0_18px_60px_rgba(0,0,0,0.16)] ring-1 ring-orange/10 transition-colors duration-300 hover:bg-white/[0.075]">
        <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-orange/35 to-transparent opacity-60" />
        <div className="text-2xl font-medium tracking-tight text-primary md:text-4xl">
          {value}
        </div>
        <p className="mt-2 text-sm leading-relaxed text-primary/55">{label}</p>
      </div>
    </FadeUp>
  );
}

function AssistantRealtime() {
  const activity = [
    ["Agora", "Nova conversa", "Website"],
    ["32s", "Pedido qualificado", "Alta intenção"],
    ["1m", "Resumo enviado", "Equipa avisada"],
  ];

  return (
    <AssistantSection
      className="bg-[radial-gradient(circle_at_14%_18%,rgba(255,107,115,0.14),transparent_30%),linear-gradient(180deg,#0D1128_0%,#070B1F_100%)]"
      glow="left"
    >
      <div className="grid gap-10 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
        <FadeUp>
          <div>
            <div className="mb-5 text-[11px] font-semibold uppercase tracking-[0.2em] text-[#D85C5F]">
              Em tempo real
            </div>
            <h2 className="max-w-2xl text-4xl font-medium leading-[1.02] tracking-[-0.045em] text-primary sm:text-5xl md:text-6xl">
              O primeiro contacto deixa de ficar à espera.
            </h2>
            <p className="mt-6 max-w-lg text-base leading-relaxed text-primary/62">
              Conversas, sinais de intenção e próximos passos aparecem enquanto
              o cliente ainda está interessado.
            </p>
          </div>
        </FadeUp>

        <div className="grid gap-4 md:grid-cols-[0.72fr_1fr]">
          <div className="grid gap-4">
            {[
              ["24/7", "primeira resposta activa"],
              ["1 min", "intenção percebida"],
              ["0", "contactos sem resposta"],
            ].map(([value, label], index) => (
              <FadeUp key={value} delay={index * 0.08}>
                <div className="rounded-[1.5rem] bg-[#111530] p-5 text-white shadow-[0_22px_70px_rgba(42,16,32,0.16)]">
                  <div className="text-4xl font-medium tracking-[-0.05em]">
                    {value}
                  </div>
                  <div className="mt-2 text-sm text-white/65">{label}</div>
                </div>
              </FadeUp>
            ))}
          </div>

          <FadeUp delay={0.18}>
            <div className="relative h-full overflow-hidden rounded-[2rem] bg-[#111530] p-5 shadow-[0_30px_90px_rgba(0,0,0,0.28)] ring-1 ring-orange/10">
              <div className="relative mb-6 flex items-center justify-between">
                <div>
                  <div className="text-sm font-semibold text-primary">
                    Actividade ao vivo
                  </div>
                  <div className="mt-1 text-xs text-primary/42">
                    actualizado automaticamente
                  </div>
                </div>
                <span className="inline-flex items-center gap-2 rounded-full bg-[#35D399] px-3 py-1 text-xs font-medium text-[#063B2A]">
                  <span className="h-1.5 w-1.5 rounded-full bg-[#063B2A]" />
                  Online
                </span>
              </div>

              <div className="relative space-y-3">
                {activity.map(([time, title, tag], index) => (
                  <ma.div
                    key={title}
                    initial={{ opacity: 0, x: 14 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    viewport={{ once: true, margin: "-10%" }}
                    transition={{ duration: 0.45, delay: index * 0.1 }}
                    className="grid grid-cols-[56px_1fr] gap-3 rounded-2xl bg-white/[0.055] p-4 shadow-sm ring-1 ring-white/[0.04]"
                  >
                    <div className="text-xs font-medium text-[#D85C5F]">
                      {time}
                    </div>
                    <div>
                      <div className="text-sm font-medium text-primary">
                        {title}
                      </div>
                      <div className="mt-1 text-xs text-primary/42">{tag}</div>
                    </div>
                  </ma.div>
                ))}
              </div>
            </div>
          </FadeUp>
        </div>
      </div>
    </AssistantSection>
  );
}

function AssistantDashboard() {
  const rows = [
    ["Ana Martins", "Consulta de orçamento", "Alta", "Hoje"],
    ["João Silva", "Pedido para visita", "Média", "Ontem"],
    ["Clínica Norte", "Dúvida sobre serviços", "Nova", "2 dias"],
  ];

  return (
    <AssistantSection
      id="demo"
      glow="right"
      className="bg-[radial-gradient(circle_at_18%_14%,rgba(255,255,255,0.32),transparent_30%),radial-gradient(circle_at_82%_22%,rgba(42,16,32,0.18),transparent_34%),linear-gradient(180deg,#FFE0D9_0%,#FF8A7A_46%,#FF6B73_100%)]"
    >
      <AssistantHeading
        eyebrow="No teu dashboard"
        title="Uma visão clara para decidir o próximo passo."
        body="Tudo fica organizado como uma mesa de trabalho: contactos, intenção, prioridade e recomendação de seguimento."
        tone="light"
      />

      <FadeUp delay={0.12}>
        <div className="mt-12 overflow-hidden rounded-[2.25rem] bg-[#130B1E] p-3 shadow-[0_34px_110px_rgba(42,16,32,0.34)] ring-1 ring-[#2A1020]/18 md:p-4">
          <div className="grid gap-3 lg:grid-cols-[260px_1fr]">
            <aside className="rounded-[1.75rem] bg-[#070B1F] p-5 text-white">
              <div className="mb-8 text-sm font-medium">Captixy</div>
              <div className="space-y-2 text-sm text-white/55">
                {["Leads", "Conversas", "Tarefas", "Relatórios"].map(
                  (item, index) => (
                    <div
                      key={item}
                      className={`rounded-2xl px-4 py-3 ${index === 0 ? "bg-[#FF6B73]/95 text-white shadow-lg shadow-orange/20" : ""}`}
                    >
                      {item}
                    </div>
                  ),
                )}
              </div>
            </aside>

            <div className="rounded-[1.75rem] bg-[#0B1028] p-5 md:p-6">
              <div className="mb-6 flex flex-wrap items-center justify-between gap-4">
                <div>
                  <div className="text-2xl font-medium tracking-[-0.04em] text-white">
                    Leads recentes
                  </div>
                  <div className="mt-1 text-sm text-white/58">
                    3 oportunidades por acompanhar
                  </div>
                </div>
                <div className="flex items-center gap-2 text-xs text-white/58">
                  <span className="rounded-full bg-white/8 px-3 py-1 shadow-sm ring-1 ring-white/8">
                    Hoje
                  </span>
                  <span className="rounded-full bg-[#FF6B73]/95 px-3 py-1 text-white shadow-sm shadow-orange/20">
                    3 novas
                  </span>
                </div>
              </div>

              <div className="grid gap-4 xl:grid-cols-[1fr_320px]">
                <div className="space-y-3">
                  {rows.map(([name, intent, priority, when], index) => (
                    <ma.div
                      key={name}
                      initial={{ opacity: 0, y: 12 }}
                      whileInView={{ opacity: 1, y: 0 }}
                      viewport={{ once: true, margin: "-10%" }}
                      transition={{ duration: 0.45, delay: index * 0.1 }}
                      className="grid gap-3 rounded-2xl bg-[#111530] p-4 shadow-sm ring-1 ring-white/[0.06] transition-transform duration-200 hover:-translate-y-0.5 sm:grid-cols-[1fr_1.15fr_auto_auto] sm:items-center"
                    >
                      <div>
                        <div className="text-sm font-medium text-white">
                          {name}
                        </div>
                        <div className="mt-1 text-xs text-white/42">{when}</div>
                      </div>
                      <div className="text-sm text-white/66">{intent}</div>
                      <div className="text-xs font-medium text-[#FF8A7A]">
                        {priority}
                      </div>
                      <IconArrowRight className="hidden h-3.5 w-3.5 text-white/30 sm:block" />
                    </ma.div>
                  ))}
                </div>

                <div className="rounded-[1.5rem] bg-[#1A1E3A] p-5 shadow-sm ring-1 ring-orange/20">
                  <div className="mb-4 text-xs uppercase tracking-[0.16em] text-[#FF8A7A]">
                    Sugestão
                  </div>
                  <div className="text-3xl font-medium tracking-[-0.05em] text-white">
                    15 min
                  </div>
                  <p className="mt-3 text-sm leading-relaxed text-white/64">
                    Marcar chamada curta com a lead de maior intenção e enviar
                    proposta inicial.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </FadeUp>
    </AssistantSection>
  );
}

function AssistantHowItWorks() {
  const steps = [
    ["01", "Publicas", "Website, link público ou QR code."],
    [
      "02",
      "Qualifica",
      "Perguntas certas para perceber intenção, contexto e urgência.",
    ],
    ["03", "Acompanhas", "Lead clara, com resumo e próximo passo sugerido."],
  ];

  return (
    <AssistantSection
      glow="left"
      className="bg-[linear-gradient(180deg,#0D1128_0%,#070B1F_100%)]"
    >
      <AssistantHeading
        eyebrow="Como funciona"
        title="Um fluxo simples, com cada passo no sítio certo."
        body="O produto faz pouco, mas faz bem: capta, qualifica e entrega a informação accionável à tua equipa."
      />

      <div className="relative mt-14 overflow-hidden rounded-[2rem] bg-[#10152D] p-3 shadow-[0_30px_90px_rgba(0,0,0,0.22)] ring-1 ring-white/[0.05] md:p-4">
        <div className="absolute left-8 right-8 top-1/2 hidden h-px bg-gradient-to-r from-transparent via-orange/35 to-transparent md:block" />
        <div className="relative grid gap-3 md:grid-cols-3">
          {steps.map(([number, title, body], index) => (
            <FadeUp key={number} delay={index * 0.08}>
              <div
                className={`relative min-h-[260px] overflow-hidden rounded-[1.6rem] p-6 transition-all duration-200 hover:-translate-y-1 ${index === 1 ? "bg-[#1A1E3A] shadow-[0_22px_70px_rgba(255,107,115,0.08)] ring-1 ring-orange/20" : "bg-[#0B1028] ring-1 ring-white/[0.05]"}`}
              >
                <div className="relative z-10 flex items-center justify-between">
                  <span
                    className={`inline-flex h-12 w-12 items-center justify-center rounded-2xl text-sm font-medium ${index === 1 ? "bg-orange text-white" : "bg-white/[0.07] text-orange"}`}
                  >
                    {number}
                  </span>
                  <span className="text-[10px] uppercase tracking-[0.16em] text-primary/32">
                    Passo {index + 1}
                  </span>
                </div>

                <div className="relative z-10 mt-14">
                  <h3 className="text-2xl tracking-tight text-primary">
                    {title}
                  </h3>
                  <p className="mt-3 text-sm leading-relaxed text-primary/58">
                    {body}
                  </p>

                  <div className="mt-7 flex items-center gap-2 text-xs text-primary/42">
                    <span className="h-1.5 w-1.5 rounded-full bg-orange" />
                    {index === 0 && "Activação rápida"}
                    {index === 1 && "Contexto validado"}
                    {index === 2 && "Equipa pronta"}
                  </div>
                </div>

                <div className="absolute -bottom-8 -right-6 text-[110px] font-medium leading-none tracking-[-0.08em] text-white/[0.035]">
                  {number}
                </div>
              </div>
            </FadeUp>
          ))}
        </div>
      </div>
    </AssistantSection>
  );
}

function AssistantFeatures() {
  const features = [
    ["Tom da marca", "Personalidade e linguagem adaptadas ao teu negócio."],
    ["Qualificação", "Perguntas certas para perceber intenção e urgência."],
    ["Resumo", "Contexto claro antes do contacto humano."],
    ["Canais", "Widget, link público e QR code no mesmo fluxo."],
    ["Alertas", "Notificações para oportunidades novas."],
    ["Setup", "Acompanhamento directo na configuração inicial."],
  ];

  return (
    <AssistantSection id="features" glow="right" className="bg-[#111530]">
      <div className="grid gap-12 lg:grid-cols-[0.8fr_1.2fr] lg:items-start">
        <AssistantHeading
          align="left"
          eyebrow="Funcionalidades"
          title="Menos módulos. Mais impacto no primeiro contacto."
          body="A interface fica focada no que realmente melhora a captação: conversa, qualificação, organização e acompanhamento."
        />

        <div className="grid auto-rows-[170px] gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {features.map(([title, body], index) => (
            <FadeUp key={title} delay={index * 0.05}>
              <div
                className={`group h-full rounded-[1.75rem] p-5 shadow-[0_18px_60px_rgba(0,0,0,0.18)] transition-transform duration-200 hover:-translate-y-1 ${
                  [
                    "bg-[#F8EFE8] text-[#111530] sm:col-span-2",
                    "bg-white/[0.065] text-primary ring-1 ring-white/[0.04]",
                    "bg-white/[0.055] text-primary ring-1 ring-white/[0.04]",
                    "bg-[#1A1E3A] text-primary ring-1 ring-orange/10",
                    "bg-[#222747] text-primary ring-1 ring-white/[0.04]",
                    "bg-white/[0.065] text-primary ring-1 ring-white/[0.04]",
                  ][index]
                }`}
              >
                <span
                  className={`mb-5 inline-flex h-9 w-9 items-center justify-center rounded-2xl ${index === 0 || index === 5 ? "bg-[#FF6B73]/90 text-white" : index === 4 ? "bg-white/14 text-white" : "bg-[#FF6B73]/12 text-[#D85C5F]"}`}
                >
                  <IconCheck className="h-3.5 w-3.5" />
                </span>
                <h3 className="text-xl tracking-tight">{title}</h3>
                <p
                  className={`mt-2 text-sm leading-relaxed ${index === 0 ? "text-[#4C4150]" : "text-primary/55"}`}
                >
                  {body}
                </p>
              </div>
            </FadeUp>
          ))}
        </div>
      </div>
    </AssistantSection>
  );
}

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>

              <FadeUp delay={0.18}>
                <h2 className="text-3xl sm:text-4xl md:text-5xl text-primary leading-[1.02] max-w-3xl tracking-tight">
                  Acesso completo,{" "}
                  <span className="serif italic text-orange">gratuito</span>,
                  durante 2 a 3 meses.
                </h2>
              </FadeUp>

              <FadeUp delay={0.3}>
                <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.
                </p>
              </FadeUp>

              <FadeUp delay={0.42}>
                <div className="mt-10 flex flex-wrap items-center gap-4">
                  <CPa
                    href="https://app.captixy.com/signup?product=assistant"
                    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>

            <div className="lg:col-span-4">
              <FadeUp delay={0.22}>
                <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",
                      "Suporte directo da equipa Captixy",
                    ].map((item) => (
                      <li
                        key={item}
                        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" />
                        {item}
                      </li>
                    ))}
                  </ul>
                </div>
              </FadeUp>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function AssistantApp() {
  return (
    <>
      <Hero />
      <Ticker />
      <AssistantRealtime />
      <AssistantDashboard />
      <AssistantHowItWorks />
      <AssistantFeatures />
      <BetaBlock />
      <Pricing sectionId="precos" assistantBeta />
      <FAQ />
      <FinalCTA />
      <FTa />
    </>
  );
}

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