/* global React, FramerMotion */
const { motion: m, useInView: useInV, useScroll: useScr, useTransform: useTrans, AnimatePresence: APx } = FramerMotion;
const { useRef: uR, useState: uS, useEffect: uE, useMemo: uM } = React;
const {
  WordsPullUp, WordsPullUpMultiStyle, AnimatedParagraph, FadeUp,
  IconArrowRight, IconCheck, IconPlus, IconMinus, IconSparkle,
  Navbar, CtaPill, Footer, EASE_EXPO, EASE_OUT_QUART,
} = window;

/* ============================================================
   HERO — animated, phone centerpiece, orange halo, particles
============================================================ */
function Hero() {
  return (
    <section className="relative min-h-[100svh] w-full p-3 md:p-5">
      <div className="relative min-h-[calc(100svh-1.5rem)] md:min-h-[calc(100svh-2.5rem)] w-full rounded-2xl md:rounded-[2rem] overflow-hidden bg-[#070B1F] pt-20 md:pt-24">
        {/* Cinematic hero background video — coral/navy sunset */}
        <video
          autoPlay
          loop
          muted
          playsInline
          preload="auto"
          poster="assets/hero-poster.jpg"
          className="absolute inset-0 w-full h-full object-cover pointer-events-none"
        >
          <source src="assets/hero.webm" type="video/webm" />
          <source src="assets/hero.mp4" type="video/mp4" />
        </video>

        {/* Subtle dot grid + noise over the video for texture */}
        <div className="absolute inset-0 dot-grid opacity-[0.18] pointer-events-none" />
        <div className="absolute inset-0 noise-overlay opacity-[0.18] mix-blend-overlay pointer-events-none" />

        {/* Vignette to focus the centre */}
        <div className="absolute inset-0 pointer-events-none"
          style={{ background: "radial-gradient(ellipse at 50% 60%, transparent 0%, transparent 40%, rgba(7,11,31,0.55) 90%)" }}
        />

        {/* Directional navy overlay — guarantees left-side text contrast */}
        <div className="absolute inset-0 pointer-events-none hidden md:block"
          style={{ background: "linear-gradient(90deg, rgba(7,11,31,0.92) 0%, rgba(7,11,31,0.72) 38%, rgba(7,11,31,0.32) 70%, rgba(7,11,31,0.08) 100%)" }}
        />
        <div className="absolute inset-0 pointer-events-none md:hidden"
          style={{ background: "linear-gradient(180deg, rgba(7,11,31,0.55) 0%, rgba(7,11,31,0.18) 35%, rgba(7,11,31,0.55) 100%)" }}
        />

        {/* AI glow — neural-purple → coral, top-left */}
        <div className="absolute -top-32 -left-32 w-[60vw] h-[60vw] max-w-[700px] max-h-[700px] pointer-events-none ai-glow opacity-60" />

        {/* Floating particles */}
        <HeroParticles />

        <Navbar items={window.NAV_ITEMS_HOME} />

        {/* Eyebrow */}
        <m.div
          initial={{ opacity: 0, y: -8 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1, delay: 0.4, ease: EASE_EXPO }}
          className="absolute top-16 md:top-20 left-6 md:left-9 z-20 flex items-center gap-2.5"
        >
          <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>
          <span className="eyebrow-orange">Early access · acesso antecipado</span>
        </m.div>

        {/* Top-right live stats */}
        <m.div
          initial={{ opacity: 0, x: 20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 1, delay: 0.6, ease: EASE_EXPO }}
          className="hidden md:flex absolute top-16 md:top-20 right-6 md:right-9 z-20 items-center gap-3"
        >
          <span className="inline-flex items-center gap-1.5 text-[10px] tracking-[0.18em] uppercase text-ai">
            <span className="w-1.5 h-1.5 rounded-full bg-[#7B61FF] shadow-[0_0_8px_rgba(123,97,255,0.7)]" />
            AI ativa
          </span>
          <span className="inline-flex items-center h-4">
            <span className="sound-bar" />
            <span className="sound-bar" />
            <span className="sound-bar" />
            <span className="sound-bar" />
          </span>
        </m.div>

        {/* Main content — two columns on desktop, stacked on mobile.
            max-w-6xl + lg:gap-16 caps the spread on ultrawide screens. */}
        <div className="relative z-10 px-5 sm:px-7 md:px-10 py-10 md:py-16">
          <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-12 xl:gap-16 items-center">
            {/* LEFT: text + CTA */}
            <div className="lg:col-span-7 xl:col-span-7 relative">
              <m.h1
                initial={{ opacity: 0, y: 24 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 1, delay: 0.35, ease: EASE_EXPO }}
                className="text-primary tracking-[-0.04em] leading-[0.95] font-medium"
                style={{ fontSize: "clamp(40px, 7.5vw, 110px)" }}
              >
                Assistente <span className="serif italic text-orange">AI</span><br />
                que capta<br />
                <span className="text-primary/55">leads por ti.</span>
              </m.h1>

              <m.p
                initial={{ y: 18, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ duration: 0.9, delay: 0.6, ease: EASE_EXPO }}
                className="mt-7 md:mt-9 text-primary/70 text-base md:text-lg max-w-lg leading-[1.5]"
              >
                Cria a tua assistente virtual em minutos. Responde, qualifica
                e organiza leads. Partilhável por link, QR code ou embed.
                Sem depender de Instagram, Messenger ou WhatsApp.
              </m.p>

              <m.div
                initial={{ y: 18, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ duration: 0.9, delay: 0.8, ease: EASE_EXPO }}
                className="mt-8 md:mt-10 flex flex-wrap items-center gap-4"
              >
                <CtaPill href="#cta" size="lg" variant="orange">Pedir acesso</CtaPill>
                <a href="#demo" className="text-sm text-primary/75 hover:text-primary transition-colors link-underline inline-flex items-center gap-2">
                  Ver em ação
                  <IconArrowRight className="w-3.5 h-3.5" />
                </a>
              </m.div>

              <m.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 1, delay: 1.0 }}
                className="mt-7 flex flex-wrap items-center gap-5 text-[11px] text-primary/45 tracking-wide"
              >
                <span className="flex items-center gap-2">
                  <IconCheck className="w-3 h-3 text-orange" />
                  14 dias de trial
                </span>
                <span className="flex items-center gap-2">
                  <IconCheck className="w-3 h-3 text-orange" />
                  Setup em minutos
                </span>
              </m.div>
            </div>

            {/* RIGHT: phone */}
            <div className="lg:col-span-5 xl:col-span-5 flex justify-center lg:justify-end items-center relative min-h-[540px] lg:min-h-[700px]">
              <HeroPhone />
            </div>
          </div>
        </div>

        {/* Bottom wordmark — capped width so it tracks the same column rails */}
        <div className="relative z-10 px-5 sm:px-7 md:px-10 pb-7 md:pb-10">
          <div className="max-w-6xl mx-auto">
            <HeroBig text="Captixy" />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   HERO BACKGROUND SVG — "conversation flow" constellation
   Calm, slow, breathing — represents leads + AI nodes connecting.
============================================================ */
function HeroBackgroundSVG() {
  // Stable random network — 14 nodes positioned in a relaxed grid
  const nodes = uM(() => {
    const arr = [];
    const seeds = [
      [0.08, 0.32], [0.16, 0.62], [0.22, 0.20], [0.28, 0.78],
      [0.36, 0.45], [0.44, 0.18], [0.50, 0.72], [0.58, 0.30],
      [0.65, 0.58], [0.72, 0.22], [0.78, 0.78], [0.85, 0.40],
      [0.92, 0.62], [0.42, 0.92],
    ];
    seeds.forEach(([x, y], i) => {
      arr.push({
        id: i,
        x: x * 1200,
        y: y * 800,
        r: 2 + (i % 4 === 0 ? 4 : i % 3 === 0 ? 2 : 1),
        breathe: 3 + (i % 3),
        delay: -(i * 0.35) % 4,
        type: i % 4 === 0 ? "hub" : "leaf",
      });
    });
    return arr;
  }, []);

  // Connections — only between near-ish nodes, to keep it sparse
  const links = uM(() => {
    const result = [];
    for (let i = 0; i < nodes.length; i++) {
      for (let j = i + 1; j < nodes.length; j++) {
        const a = nodes[i], b = nodes[j];
        const d = Math.hypot(a.x - b.x, a.y - b.y);
        if (d < 280) result.push({ a, b, d });
      }
    }
    return result;
  }, [nodes]);

  return (
    <div className="absolute inset-0 pointer-events-none">
      <svg
        viewBox="0 0 1200 800"
        preserveAspectRatio="xMidYMid slice"
        className="absolute inset-0 w-full h-full"
        aria-hidden
      >
        <defs>
          {/* Gradient for the long wave paths */}
          <linearGradient id="wave1" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%"  stopColor="#FF6B73" stopOpacity="0" />
            <stop offset="30%" stopColor="#FF6B73" stopOpacity="0.55" />
            <stop offset="70%" stopColor="#FF8289" stopOpacity="0.35" />
            <stop offset="100%" stopColor="#FF8289" stopOpacity="0" />
          </linearGradient>
          <linearGradient id="wave2" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%"  stopColor="#F7F8FF" stopOpacity="0" />
            <stop offset="50%" stopColor="#F7F8FF" stopOpacity="0.22" />
            <stop offset="100%" stopColor="#F7F8FF" stopOpacity="0" />
          </linearGradient>
          <linearGradient id="link-grad" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%"  stopColor="#F7F8FF" stopOpacity="0" />
            <stop offset="50%" stopColor="#F7F8FF" stopOpacity="0.35" />
            <stop offset="100%" stopColor="#F7F8FF" stopOpacity="0" />
          </linearGradient>
          {/* Glow filter for hub nodes */}
          <filter id="hub-glow" x="-100%" y="-100%" width="300%" height="300%">
            <feGaussianBlur stdDeviation="6" result="blur" />
            <feMerge>
              <feMergeNode in="blur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
        </defs>

        {/* Slow flowing wave paths (3 layered) */}
        <path d="M -100 460 C 200 400, 380 540, 600 460 S 1000 380, 1300 460"
              stroke="url(#wave1)" strokeWidth="1.5" fill="none" strokeLinecap="round">
          <animate attributeName="d"
            dur="14s" repeatCount="indefinite"
            values="
              M -100 460 C 200 400, 380 540, 600 460 S 1000 380, 1300 460;
              M -100 460 C 200 520, 380 400, 600 480 S 1000 540, 1300 460;
              M -100 460 C 200 400, 380 540, 600 460 S 1000 380, 1300 460
            " />
        </path>
        <path d="M -100 520 C 250 470, 420 580, 640 510 S 1020 450, 1300 530"
              stroke="url(#wave2)" strokeWidth="1" fill="none" strokeLinecap="round" strokeDasharray="4 6">
          <animate attributeName="d"
            dur="18s" repeatCount="indefinite"
            values="
              M -100 520 C 250 470, 420 580, 640 510 S 1020 450, 1300 530;
              M -100 520 C 250 580, 420 460, 640 540 S 1020 580, 1300 480;
              M -100 520 C 250 470, 420 580, 640 510 S 1020 450, 1300 530
            " />
          <animate attributeName="stroke-dashoffset" from="0" to="-40" dur="6s" repeatCount="indefinite" />
        </path>
        <path d="M -100 380 C 300 320, 500 420, 720 380 S 1100 320, 1300 380"
              stroke="url(#wave1)" strokeWidth="1.2" fill="none" strokeLinecap="round" opacity="0.7">
          <animate attributeName="d"
            dur="22s" repeatCount="indefinite"
            values="
              M -100 380 C 300 320, 500 420, 720 380 S 1100 320, 1300 380;
              M -100 380 C 300 440, 500 320, 720 400 S 1100 440, 1300 360;
              M -100 380 C 300 320, 500 420, 720 380 S 1100 320, 1300 380
            " />
        </path>

        {/* Constellation links (static, with slow opacity pulse) */}
        <g>
          {links.map((l, i) => (
            <line
              key={i}
              x1={l.a.x} y1={l.a.y}
              x2={l.b.x} y2={l.b.y}
              stroke="url(#link-grad)"
              strokeWidth={l.d < 180 ? 0.8 : 0.5}
              opacity={0.5}
            >
              <animate attributeName="opacity"
                values="0.15;0.55;0.15"
                dur={`${8 + (i % 4)}s`}
                begin={`${-i * 0.3}s`}
                repeatCount="indefinite"
              />
            </line>
          ))}
        </g>

        {/* Nodes — breathing radii, hubs glow */}
        <g>
          {nodes.map((n) => (
            <g key={n.id}>
              {n.type === "hub" && (
                <circle cx={n.x} cy={n.y} r={n.r + 10}
                  fill="rgba(255,107,115,0.10)" filter="url(#hub-glow)">
                  <animate attributeName="r"
                    values={`${n.r + 8};${n.r + 14};${n.r + 8}`}
                    dur={`${n.breathe * 2}s`}
                    begin={`${n.delay}s`}
                    repeatCount="indefinite"
                  />
                </circle>
              )}
              <circle cx={n.x} cy={n.y} r={n.r}
                fill={n.type === "hub" ? "#FF6B73" : "#F7F8FF"}
                opacity={n.type === "hub" ? 0.95 : 0.7}>
                <animate attributeName="r"
                  values={`${n.r};${n.r + 0.8};${n.r}`}
                  dur={`${n.breathe}s`}
                  begin={`${n.delay}s`}
                  repeatCount="indefinite"
                />
                <animate attributeName="opacity"
                  values={n.type === "hub" ? "0.95;1;0.95" : "0.5;0.85;0.5"}
                  dur={`${n.breathe}s`}
                  begin={`${n.delay}s`}
                  repeatCount="indefinite"
                />
              </circle>
            </g>
          ))}
        </g>

        {/* Slow "messages" travelling along wave 1 (3 dots staggered) */}
        {[0, 4.5, 9].map((delay, i) => (
          <circle key={i} r="3.5" fill="#FF8289" opacity="0.85">
            <animateMotion
              dur="14s"
              begin={`${-delay}s`}
              repeatCount="indefinite"
              keyPoints="0;1"
              keyTimes="0;1"
              path="M -100 460 C 200 400, 380 540, 600 460 S 1000 380, 1300 460"
            />
            <animate attributeName="opacity"
              values="0;0.9;0.9;0"
              keyTimes="0;0.1;0.9;1"
              dur="14s"
              begin={`${-delay}s`}
              repeatCount="indefinite"
            />
            <animate attributeName="r"
              values="2;4;2"
              dur="14s"
              begin={`${-delay}s`}
              repeatCount="indefinite"
            />
          </circle>
        ))}

        {/* Slow "messages" travelling along wave 3 (going right, calm) */}
        {[2, 8].map((delay, i) => (
          <circle key={`b-${i}`} r="2.5" fill="#F7F8FF" opacity="0.7">
            <animateMotion
              dur="22s"
              begin={`${-delay}s`}
              repeatCount="indefinite"
              path="M -100 380 C 300 320, 500 420, 720 380 S 1100 320, 1300 380"
            />
            <animate attributeName="opacity"
              values="0;0.7;0.7;0"
              keyTimes="0;0.15;0.85;1"
              dur="22s"
              begin={`${-delay}s`}
              repeatCount="indefinite"
            />
          </circle>
        ))}
      </svg>

      {/* Soft horizontal sweep — adds a "breath" feel */}
      <div className="absolute inset-x-0 top-1/3 h-1/3 pointer-events-none"
        style={{
          background: "linear-gradient(to right, transparent, rgba(255,107,115,0.04), transparent)",
          animation: "drift1 22s ease-in-out infinite alternate",
        }}
      />
    </div>
  );
}

function HeroParticles() {
  // Pre-randomized positions so SSR-like consistency
  const dots = uM(() => {
    const arr = [];
    for (let i = 0; i < 14; i++) {
      arr.push({
        l: 5 + Math.random() * 90,
        t: 10 + Math.random() * 70,
        s: 3 + Math.random() * 5,
        d: Math.random() * 8,
        o: 0.3 + Math.random() * 0.5,
      });
    }
    return arr;
  }, []);
  return (
    <div className="absolute inset-0 pointer-events-none">
      {dots.map((d, i) => (
        <span
          key={i}
          className="particle"
          style={{
            left: `${d.l}%`,
            top:  `${d.t}%`,
            width:  `${d.s}px`,
            height: `${d.s}px`,
            animationDelay: `${d.d}s`,
            opacity: d.o,
          }}
        />
      ))}
    </div>
  );
}

function HeroBig({ text }) {
  const ready = window.useDeferredMount(60);
  return (
    <span className="block w-full" style={{
      fontSize: "clamp(72px, 14vw, 200px)",
      lineHeight: 0.88,
      letterSpacing: "-0.07em",
      fontWeight: 500,
      color: "#F7F8FF",
      whiteSpace: "nowrap",
      overflow: "hidden",
    }}>
      <span style={{ display: "inline-block", position: "relative" }}>
        <m.span
          style={{ display: "inline-block", position: "relative" }}
          initial={{ y: "20%", opacity: 0 }}
          animate={ready ? { y: 0, opacity: 1 } : { y: "20%", opacity: 0 }}
          transition={{ duration: 1.1, ease: EASE_EXPO, delay: 0.3 }}
        >
          {text}
          <span className="serif italic" style={{
            position: "absolute",
            top: "0.05em",
            right: "-0.28em",
            fontSize: "0.28em",
            color: "#FF6B73",
          }}>*</span>
        </m.span>
      </span>
    </span>
  );
}

/* HeroPhone — looping live chat inside a phone frame, with orange halo */
function HeroPhone() {
  const ready = window.useDeferredMount(200);
  return (
    <m.div
      initial={{ opacity: 0, y: 40, scale: 0.96 }}
      animate={ready ? { opacity: 1, y: 0, scale: 1 } : {}}
      transition={{ duration: 1.2, ease: EASE_OUT_QUART, delay: 0.2 }}
      className="relative pointer-events-auto"
    >
      {/* Orange halo */}
      <div className="absolute -inset-24 sm:-inset-32 md:-inset-40 pointer-events-none">
        <div className="absolute inset-0 rounded-full"
          style={{
            background: "radial-gradient(circle at 50% 50%, rgba(255,107,115,0.45), rgba(255,107,115,0) 65%)",
            filter: "blur(40px)",
          }}
        />
      </div>

      {/* Dashed orbits */}
      <div className="absolute inset-0 -m-16 sm:-m-20 md:-m-24 flex items-center justify-center pointer-events-none">
        <div className="relative w-full h-full">
          <div className="orbit-ring spin-slow" style={{ inset: 0 }} />
          <div className="orbit-ring spin-slow-reverse" style={{ inset: "12%" }} />
          {/* Orbiting AI nodes */}
          <PhoneOrbits />
        </div>
      </div>

      {/* The phone */}
      <div className="relative">
        <PhoneFrame>
          <PhoneStatusBar />
          <PhoneAssistantHeader />
          <PhoneChatStream />
        </PhoneFrame>
      </div>

      {/* Floating ping at corner */}
      <div className="absolute -top-3 -right-3 sm:-top-4 sm:-right-4 z-30">
        <div className="relative w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-orange text-white flex items-center justify-center shadow-[0_6px_24px_rgba(255,107,115,0.6)]">
          <span className="pulse-ring" />
          <IconSparkle className="w-4 h-4" />
        </div>
      </div>
    </m.div>
  );
}

function PhoneOrbits() {
  // 3 small orbiting bubbles
  return (
    <>
      {[0, 1, 2].map((i) => (
        <m.div
          key={i}
          className="absolute top-1/2 left-1/2 -ml-3 -mt-3 w-6 h-6 rounded-full bg-[#222747] hairline-strong flex items-center justify-center text-[10px] text-orange"
          animate={{ rotate: 360 }}
          transition={{ duration: 18 + i * 6, repeat: Infinity, ease: "linear", delay: i * -2 }}
          style={{ transformOrigin: "50% 50%" }}
        >
          <m.span
            className="block"
            style={{
              transformOrigin: "50% 50%",
            }}
          >
            <span
              className="block w-6 h-6 rounded-full bg-[#1A1E3A] hairline-strong"
              style={{
                transform: `translate(${[180, -210, 170][i]}px, ${[-30, 30, 60][i]}px)`,
              }}
            />
          </m.span>
        </m.div>
      ))}
    </>
  );
}

function PhoneFrame({ children }) {
  return (
    <div
      className="relative w-[280px] sm:w-[300px] md:w-[320px] lg:w-[360px] h-[560px] sm:h-[600px] md:h-[620px] lg:h-[700px] rounded-[40px] bg-[#070B1F]"
      style={{
        boxShadow:
          "0 0 0 1.5px rgba(255,255,255,0.08), 0 30px 80px -20px rgba(0,0,0,0.7), 0 0 80px -10px rgba(255,107,115,0.25)",
      }}
    >
      {/* Bezel highlight */}
      <div className="absolute inset-0 rounded-[40px] pointer-events-none"
        style={{
          background: "linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 25%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.04))",
        }}
      />
      {/* Screen */}
      <div className="absolute inset-[6px] rounded-[34px] bg-[#070B1F] overflow-hidden flex flex-col">
        {/* Dynamic island */}
        <div className="absolute top-2.5 left-1/2 -translate-x-1/2 w-24 h-7 bg-[#070B1F] rounded-full z-30 flex items-center justify-end px-2 gap-1">
          <span className="w-1 h-1 rounded-full bg-orange" />
          <span className="text-[8px] text-primary/60 tracking-wider">CAPTIXY</span>
        </div>
        {children}
      </div>
    </div>
  );
}

function PhoneStatusBar() {
  return (
    <div className="relative h-9 flex items-center justify-between px-6 pt-2 text-[10px] text-primary/65 z-20">
      <span className="font-medium tracking-tight">9:41</span>
      <span className="flex items-center gap-1.5">
        <svg viewBox="0 0 24 24" fill="currentColor" className="w-3 h-3"><path d="M2 16h4v4H2zM9 12h4v8H9zM16 8h4v12h-4z" /></svg>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-3 h-3"><path d="M5 12a7 7 0 0114 0M8.5 14.5a3.5 3.5 0 017 0M12 18.5h.01" /></svg>
        <span className="w-5 h-2.5 rounded-sm border border-current relative">
          <span className="absolute inset-y-0.5 left-0.5 right-1 bg-current rounded-[1px]" />
        </span>
      </span>
    </div>
  );
}

function PhoneAssistantHeader() {
  return (
    <div className="px-5 pt-4 pb-3 flex items-center gap-3 border-b border-white/5 z-20 relative">
      <div className="relative">
        <div className="w-10 h-10 rounded-full bg-orange text-white flex items-center justify-center font-medium">S</div>
        <span className="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full bg-emerald-400 border-2 border-[#070B1F]" />
      </div>
      <div className="flex-1 min-w-0">
        <div className="text-primary text-sm leading-tight">Sofia <span className="serif italic text-ai text-[10px]">assistente AI</span></div>
        <div className="text-[10px] text-primary/45">Clínica BellaSkin · a escrever</div>
      </div>
      <button className="w-7 h-7 rounded-full hairline-strong flex items-center justify-center text-primary/70">
        <svg viewBox="0 0 24 24" fill="currentColor" className="w-3.5 h-3.5"><circle cx="5" cy="12" r="1.5" /><circle cx="12" cy="12" r="1.5" /><circle cx="19" cy="12" r="1.5" /></svg>
      </button>
    </div>
  );
}

/* PhoneChatStream — looping messages */
function PhoneChatStream() {
  const cycles = [
    [
      { from: "ai",      text: "Olá! Sou a Sofia, assistente AI da Clínica BellaSkin. Em que posso ajudar?", t: 600 },
      { from: "user",    text: "Quanto custa uma limpeza dentária?",                                            t: 1500 },
      { from: "typing",  t: 900 },
      { from: "ai",      text: "Começa nos 45€. É rotina ou tens algum desconforto?",                           t: 1400 },
      { from: "user",    text: "Rotina. Esta semana se possível.",                                              t: 1500 },
      { from: "typing",  t: 800 },
      { from: "ai",      text: "Perfeito. Qual é o melhor contacto para a equipa confirmar?",                   t: 1200 },
      { from: "user",    text: "912 345 678",                                                                    t: 1200 },
      { from: "lead",    t: 1800 },
    ],
    [
      { from: "ai",      text: "Olá! Sou a Sofia. Como posso ajudar?",                                          t: 600 },
      { from: "user",    text: "Querias saber preços dos tratamentos faciais.",                                  t: 1500 },
      { from: "typing",  t: 800 },
      { from: "ai",      text: "Temos limpeza facial (35€), hidratação profunda (55€) e peeling (85€). Qual te interessa mais?", t: 1700 },
      { from: "user",    text: "Hidratação profunda. Sou primeira vez.",                                         t: 1500 },
      { from: "typing",  t: 800 },
      { from: "ai",      text: "Ótimo. Para primeira sessão fazemos avaliação grátis. Deixas o teu contacto?",   t: 1500 },
      { from: "user",    text: "Maria, 919 999 111",                                                             t: 1200 },
      { from: "lead",    t: 1800 },
    ],
  ];

  const [cycle, setCycle] = uS(0);
  const [shown, setShown] = uS([]);

  uE(() => {
    let cancelled = false;
    let timeouts = [];
    const run = async () => {
      while (!cancelled) {
        const script = cycles[cycle];
        for (let i = 0; i < script.length; i++) {
          if (cancelled) return;
          await new Promise((res) => {
            const id = setTimeout(res, script[i].t);
            timeouts.push(id);
          });
          if (cancelled) return;
          setShown((prev) => [...prev, { ...script[i], id: `${cycle}-${i}` }]);
        }
        // Pause then reset
        await new Promise((res) => {
          const id = setTimeout(res, 3500);
          timeouts.push(id);
        });
        if (cancelled) return;
        setShown([]);
        setCycle((c) => (c + 1) % cycles.length);
        await new Promise((res) => {
          const id = setTimeout(res, 500);
          timeouts.push(id);
        });
      }
    };
    run();
    return () => {
      cancelled = true;
      timeouts.forEach(clearTimeout);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [cycle]);

  // Auto-scroll
  const scrollRef = uR(null);
  uE(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [shown]);

  return (
    <div ref={scrollRef} className="flex-1 overflow-hidden px-4 py-4 flex flex-col gap-2.5">
      <APx initial={false}>
        {shown.map((msg) => {
          if (msg.from === "typing") {
            return (
              <m.div
                key={msg.id}
                initial={{ opacity: 0, y: 6 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0 }}
                className="self-start"
              >
                <div className="bg-[#222747] rounded-2xl rounded-bl-md px-3.5 py-2.5 flex items-center gap-1 hairline">
                  {[0, 1, 2].map((d) => (
                    <m.span
                      key={d}
                      className="w-1.5 h-1.5 rounded-full bg-orange/80 inline-block"
                      animate={{ y: [0, -3, 0], opacity: [0.5, 1, 0.5] }}
                      transition={{ duration: 1, repeat: Infinity, delay: d * 0.15 }}
                    />
                  ))}
                </div>
              </m.div>
            );
          }
          if (msg.from === "lead") {
            return (
              <m.div
                key={msg.id}
                initial={{ opacity: 0, y: 16, scale: 0.96 }}
                animate={{ opacity: 1, y: 0, scale: 1 }}
                exit={{ opacity: 0, scale: 0.95 }}
                transition={{ duration: 0.7, ease: EASE_EXPO }}
                className="mt-2 rounded-2xl bg-orange text-white p-3.5 shadow-[0_10px_30px_-10px_rgba(255,107,115,0.7)]"
              >
                <div className="flex items-center gap-1.5 text-[9px] tracking-[0.18em] uppercase mb-2 text-white/85">
                  <IconSparkle className="w-2.5 h-2.5" />
                  Nova lead qualificada
                </div>
                <div className="grid grid-cols-2 gap-x-3 gap-y-1.5 text-[11px]">
                  <div><span className="text-white/65">Interesse </span><span className="font-medium">Limpeza</span></div>
                  <div><span className="text-white/65">Urgência </span><span className="font-medium">Esta sem.</span></div>
                  <div><span className="text-white/65">Fonte </span><span className="font-medium">Link</span></div>
                  <div><span className="text-white/65">Prioridade </span><span className="font-medium">Alta</span></div>
                </div>
              </m.div>
            );
          }
          return (
            <m.div
              key={msg.id}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.4, ease: EASE_EXPO }}
              className={msg.from === "ai" ? "self-start max-w-[82%]" : "self-end max-w-[82%]"}
            >
              <div
                className={
                  msg.from === "ai"
                    ? "bg-[#222747] text-primary/90 rounded-2xl rounded-bl-md px-3.5 py-2 text-[12px] leading-snug hairline"
                    : "bg-orange text-white rounded-2xl rounded-br-md px-3.5 py-2 text-[12px] leading-snug"
                }
              >
                {msg.text}
              </div>
            </m.div>
          );
        })}
      </APx>
    </div>
  );
}

/* ============================================================
   TICKER — slim marquee under hero (use cases)
============================================================ */
function Ticker() {
  const items = [
    "Restaurantes", "Clínicas", "Barbearias", "Estética",
    "Stands automóveis", "Serviços locais", "Consultores",
    "Studios criativos", "Imobiliárias", "Ginásios",
  ];
  return (
    <section className="bg-[#070B1F] py-7 md:py-9 fade-edges border-y border-white/5">
      <div className="marquee-track">
        {[0, 1].map((set) => (
          <div key={set} className="flex items-center gap-12 px-8 shrink-0">
            {items.map((it, i) => (
              <div key={i} className="flex items-center gap-12">
                <span className="text-primary/40 text-sm md:text-base tracking-wide whitespace-nowrap">{it}</span>
                <span className="w-1 h-1 rounded-full bg-primary/20" />
              </div>
            ))}
          </div>
        ))}
      </div>
    </section>
  );
}

/* ============================================================
   LIVE PULSE — CREAM background "what's happening right now"
============================================================ */
function LivePulse() {
  return (
    <section className="relative cream-vignette text-ink px-5 md:px-8 py-24 md:py-36 overflow-hidden">
      {/* Decorative SVG corner */}
      <SvgCornerOrnament className="absolute top-6 right-6 w-24 h-24 md:w-32 md:h-32 text-ink opacity-80" />
      <SvgCornerOrnament className="absolute bottom-6 left-6 w-24 h-24 md:w-32 md:h-32 text-ink/55 opacity-80 rotate-180" />
      {/* Dot pattern bottom */}
      <div className="absolute inset-x-0 bottom-0 h-32 dot-grid opacity-50 pointer-events-none" style={{ maskImage: "linear-gradient(to top, black, transparent)" }} />

      <div className="relative max-w-7xl mx-auto">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
          {/* Left: title */}
          <div className="lg:col-span-5">
            <FadeUp><div className="eyebrow-ink mb-5 flex items-center gap-2 text-[#070B1F]">
              <span className="relative inline-flex w-2 h-2">
                <span className="absolute inset-0 rounded-full bg-ink/60 animate-ping" />
                <span className="relative inline-flex w-2 h-2 rounded-full bg-ink" />
              </span>
              Em tempo real
            </div></FadeUp>
            <WordsPullUpMultiStyle
              justify="flex-start"
              className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl on-cream leading-[0.98] tracking-[-0.03em] font-medium"
              segments={[
                { text: "Enquanto",           className: "font-medium" },
                { text: "dormes,",            className: "serif italic font-normal" },
                { text: "a tua assistente",   className: "font-medium" },
                { text: "trabalha.",          className: "serif italic font-normal" },
              ]}
            />
            <FadeUp delay={0.4}>
              <p className="mt-8 max-w-md on-cream-soft text-base md:text-lg leading-relaxed">
                Captixy responde 24/7. Cada conversa transforma-se numa lead
                organizada, pronta a converter logo de manhã.
              </p>
            </FadeUp>
            <FadeUp delay={0.6}>
              <div className="mt-10 flex items-center gap-5">
                <span className="text-xs tracking-[0.18em] uppercase on-cream-mute">Atividade últimos 30 dias</span>
                <SvgSparkline className="w-32 h-10 text-ink" />
              </div>
            </FadeUp>
          </div>

          {/* Right: live counter card */}
          <div className="lg:col-span-7">
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4">
              <LivePulseCard
                eyebrow="Leads esta noite"
                value={42}
                suffix=""
                icon={<SvgMoon className="w-7 h-7 text-orange" />}
                trail="das 22h às 8h"
                accent
              />
              <LivePulseCard
                eyebrow="Tempo médio"
                value={1.8}
                suffix="s"
                fixed={1}
                icon={<SvgClock className="w-7 h-7 text-ink" />}
                trail="resposta inicial"
              />
              <LivePulseCard
                eyebrow="Taxa qualificação"
                value={87}
                suffix="%"
                icon={<SvgGauge className="w-7 h-7 text-ink" />}
                trail="leads completas"
              />
              <LivePulseCard
                eyebrow="Custo por lead"
                value={0.38}
                fixed={2}
                prefix="€"
                icon={<SvgCoins className="w-7 h-7 text-ink" />}
                trail="vs. 8€ ads médios"
              />
            </div>

            {/* Source breakdown */}
            <FadeUp delay={0.7}>
              <div className="mt-4 rounded-2xl bg-cream-soft hairline-ink p-5 md:p-6">
                <div className="flex items-center justify-between mb-4">
                  <div className="eyebrow-ink">Origem das leads</div>
                  <div className="text-[10px] on-cream-mute tracking-wider">7 DIAS</div>
                </div>
                <div className="space-y-2.5">
                  <SourceBar label="Link público"   pct={48} color="bg-orange-deep" />
                  <SourceBar label="QR code"        pct={28} color="bg-ink/85" />
                  <SourceBar label="Embed website" pct={18} color="bg-ink/55" />
                  <SourceBar label="Outros"         pct={6}  color="bg-ink/30" />
                </div>
              </div>
            </FadeUp>
          </div>
        </div>

        {/* Bottom: mini scrolling testimonial-like banner with rotating "now" events */}
        <div className="mt-14 md:mt-20">
          <FadeUp delay={0.3}>
            <div className="rounded-2xl bg-ink text-cream p-6 md:p-8 overflow-hidden relative">
              <div className="absolute inset-0 mesh opacity-40" />
              <div className="relative grid grid-cols-1 md:grid-cols-12 gap-6 items-center">
                <div className="md:col-span-4">
                  <div className="eyebrow-orange mb-2">A acontecer agora</div>
                  <div className="text-2xl md:text-3xl tracking-tight leading-tight text-cream">
                    Conversas <span className="serif italic text-orange">a sério</span>
                  </div>
                </div>
                <div className="md:col-span-8 h-24 overflow-hidden fade-edges-v relative">
                  <NowFeed />
                </div>
              </div>
            </div>
          </FadeUp>
        </div>
      </div>
    </section>
  );
}

function LivePulseCard({ eyebrow, value, suffix = "", prefix = "", fixed, icon, trail, accent }) {
  const ready = window.useDeferredMount(200);
  const animated = window.useCountUp(value, 1800, [ready]);
  const display = fixed != null ? (animated * 1).toFixed(fixed) : String(animated);
  return (
    <m.div
      initial={{ opacity: 0, y: 20, scale: 0.98 }}
      animate={ready ? { opacity: 1, y: 0, scale: 1 } : {}}
      transition={{ duration: 0.7, ease: EASE_EXPO }}
      className={`relative rounded-2xl p-5 md:p-6 tilt overflow-hidden ${
        accent
          ? "bg-ink text-cream"
          : "bg-cream-soft hairline-ink on-cream"
      }`}
    >
      {accent && <div className="absolute inset-0 mesh opacity-50" />}
      <div className="relative flex items-start justify-between mb-6">
        <div className={`text-[10px] tracking-[0.18em] uppercase ${accent ? "text-orange" : "text-ink/80"}`}>{eyebrow}</div>
        <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${accent ? "bg-orange/15" : "bg-orange-deep/12"}`}>
          {icon}
        </div>
      </div>
      <div className={`relative font-medium tracking-tight ${accent ? "text-cream" : "on-cream"}`} style={{ fontSize: "clamp(38px, 5vw, 56px)", lineHeight: 1 }}>
        {prefix}{display}<span className={accent ? "text-orange" : "text-orange-deep"}>{suffix}</span>
      </div>
      <div className={`relative mt-2 text-xs ${accent ? "text-cream/55" : "on-cream-mute"}`}>{trail}</div>
    </m.div>
  );
}

function SourceBar({ label, pct, color }) {
  const ready = window.useDeferredMount(400);
  return (
    <div>
      <div className="flex items-baseline justify-between text-xs mb-1">
        <span className="on-cream">{label}</span>
        <span className="on-cream-mute font-medium">{pct}%</span>
      </div>
      <div className="h-2 rounded-full bg-ink/10 overflow-hidden">
        <m.div
          initial={{ width: 0 }}
          animate={ready ? { width: `${pct}%` } : { width: 0 }}
          transition={{ duration: 1.4, ease: EASE_EXPO }}
          className={`h-full rounded-full ${color}`}
        />
      </div>
    </div>
  );
}

/* NowFeed — vertical marquee of fake live events */
function NowFeed() {
  const events = [
    { who: "Clínica BellaSkin",    what: "→ nova lead",       when: "agora" },
    { who: "Barbearia Tinto",       what: "→ 3 marcações",     when: "há 2 min" },
    { who: "Auto Stand Lisboa",     what: "→ proposta enviada", when: "há 4 min" },
    { who: "Cantinho do Sushi",     what: "→ reserva mesa 4",  when: "há 7 min" },
    { who: "Studio Veu",             what: "→ orçamento",       when: "há 11 min" },
    { who: "Clínica Vital",         what: "→ avaliação",       when: "há 15 min" },
  ];
  return (
    <div className="marquee-vertical">
      {[0, 1].map((set) => (
        <div key={set} className="flex flex-col gap-2 mb-2">
          {events.map((e) => (
            <div key={e.who} className="flex items-center justify-between gap-3 py-1.5">
              <div className="flex items-center gap-3">
                <span className="w-2 h-2 rounded-full bg-orange shrink-0" />
                <span className="text-sm text-cream-deep">{e.who}</span>
                <span className="text-sm text-cream hidden sm:inline">{e.what}</span>
              </div>
              <span className="text-[10px] tracking-wider uppercase text-cream/75">{e.when}</span>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

/* ===== SVG icons used in LivePulse ===== */
function SvgMoon({ className }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" className={className}>
      <path d="M21 12.5A8.5 8.5 0 1 1 11.5 3a6.5 6.5 0 0 0 9.5 9.5z" />
    </svg>
  );
}
function SvgClock({ className }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" className={className}>
      <circle cx="12" cy="12" r="9" />
      <path d="M12 7v5l3 2" />
    </svg>
  );
}
function SvgGauge({ className }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" className={className}>
      <path d="M4 18a8 8 0 1 1 16 0" />
      <path d="M12 18l4-6" />
      <circle cx="12" cy="18" r="1" fill="currentColor" />
    </svg>
  );
}
function SvgCoins({ className }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" className={className}>
      <ellipse cx="9" cy="8" rx="6" ry="3" />
      <path d="M3 8v4c0 1.7 2.7 3 6 3s6-1.3 6-3V8" />
      <ellipse cx="15" cy="14" rx="6" ry="3" />
      <path d="M9 14v4c0 1.7 2.7 3 6 3s6-1.3 6-3v-4" />
    </svg>
  );
}
function SvgCornerOrnament({ className }) {
  // Concentric arcs corner decoration
  return (
    <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" className={className}>
      <path d="M 5 50 A 45 45 0 0 1 50 5"  strokeWidth="1.5" />
      <path d="M 18 50 A 32 32 0 0 1 50 18" strokeWidth="1.5" strokeDasharray="3 4" />
      <path d="M 30 50 A 20 20 0 0 1 50 30" strokeWidth="1.5" />
      <circle cx="50" cy="50" r="3" fill="currentColor" />
    </svg>
  );
}
function SvgSparkline({ className }) {
  return (
    <svg viewBox="0 0 120 32" fill="none" className={className}>
      <path d="M 2 24 L 12 20 L 22 22 L 32 14 L 42 18 L 52 12 L 62 16 L 72 8 L 82 14 L 92 6 L 102 10 L 118 2"
        stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
        className="draw-path" style={{ "--len": 200 }} />
      <circle cx="118" cy="2" r="3" fill="currentColor" className="heartbeat" />
    </svg>
  );
}

/* ============================================================
   MANIFESTO (Prisma about-style mixed-heading + scroll-text)
============================================================ */
function Manifesto() {
  return (
    <section className="bg-[#070B1F] px-5 md:px-8 py-24 md:py-36 relative overflow-hidden">
      {/* Decorative blurred glow */}
      <div className="absolute -top-32 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[700px] max-h-[700px] rounded-full pointer-events-none"
        style={{
          background: "radial-gradient(circle, rgba(255,107,115,0.12), transparent 60%)",
          filter: "blur(40px)",
        }}
      />
      <div className="max-w-7xl mx-auto relative">
        <div className="bg-[#1A1E3A] rounded-3xl md:rounded-[2rem] px-6 sm:px-10 md:px-16 py-20 md:py-28 hairline overflow-hidden relative">
          {/* Background SVG grid */}
          <div className="absolute inset-0 grid-pulse opacity-30 pointer-events-none" />
          {/* Funnel SVG floating right */}
          <div className="absolute right-[-60px] md:right-[-40px] lg:right-[20px] top-1/2 -translate-y-1/2 hidden md:block opacity-90 pointer-events-none">
            <SvgFunnel className="w-[280px] md:w-[340px] lg:w-[400px] text-orange" />
          </div>

          <div className="relative grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
            <div className="lg:col-span-8">
              <FadeUp delay={0}>
                <div className="eyebrow-orange mb-8">A nossa abordagem</div>
              </FadeUp>

              <WordsPullUpMultiStyle
                justify="flex-start"
                stagger={0.06}
                className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl max-w-3xl leading-[1.02] sm:leading-[0.98] text-primary"
                segments={[
                  { text: "Pequenos negócios perdem leads.",                className: "font-normal" },
                  { text: "Damos-lhes uma",                                  className: "font-normal" },
                  { text: "assistente virtual",                              className: "serif italic font-normal text-orange" },
                  { text: "que responde, qualifica e organiza",              className: "font-normal" },
                  { text: "para a equipa fechar.",                           className: "font-normal" },
                ]}
              />

              <div className="mt-10 md:mt-14 max-w-xl">
                <AnimatedParagraph
                  className="text-primary text-base sm:text-lg leading-[1.5] tracking-tight"
                  text="A Captixy nasceu para resolver o problema real dos pequenos negócios: mensagens chegam por todo o lado, sem contexto, e arrefecem antes da equipa conseguir responder. A nossa assistente apresenta-se como AI, responde com base no teu contexto e entrega cada lead com resumo, prioridade e próximo passo."
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* SVG funnel — animated leads dropping in */
function SvgFunnel({ className }) {
  return (
    <svg viewBox="0 0 280 320" fill="none" className={className}>
      <defs>
        <linearGradient id="funnelGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="currentColor" stopOpacity="0.4" />
          <stop offset="100%" stopColor="currentColor" stopOpacity="0.05" />
        </linearGradient>
      </defs>
      {/* Funnel body */}
      <path d="M 30 60 L 250 60 L 170 200 L 170 280 L 110 280 L 110 200 Z"
        fill="url(#funnelGrad)" stroke="currentColor" strokeWidth="1.5" strokeOpacity="0.5" />
      {/* Top ring */}
      <ellipse cx="140" cy="60" rx="110" ry="14" stroke="currentColor" strokeOpacity="0.4" strokeWidth="1.5" fill="none" strokeDasharray="3 4" />
      {/* Falling dots — leads */}
      {[
        { cx: 80, delay: "0s",   r: 6 },
        { cx: 130, delay: "0.8s", r: 5 },
        { cx: 180, delay: "1.6s", r: 7 },
        { cx: 100, delay: "2.4s", r: 5 },
        { cx: 200, delay: "3.2s", r: 6 },
      ].map((d, i) => (
        <circle key={i} cx={d.cx} cy="60" r={d.r} fill="currentColor">
          <animate attributeName="cy" from="0" to="260" dur="4s" begin={d.delay} repeatCount="indefinite" />
          <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.85;1" dur="4s" begin={d.delay} repeatCount="indefinite" />
          <animate attributeName="r" values={`${d.r};${d.r};2`} keyTimes="0;0.8;1" dur="4s" begin={d.delay} repeatCount="indefinite" />
        </circle>
      ))}
      {/* Output sparkles */}
      <circle cx="140" cy="290" r="3" fill="currentColor">
        <animate attributeName="opacity" values="0;1;0" dur="1.5s" repeatCount="indefinite" />
      </circle>
      <circle cx="125" cy="300" r="2" fill="currentColor">
        <animate attributeName="opacity" values="0;1;0" dur="1.5s" begin="0.4s" repeatCount="indefinite" />
      </circle>
      <circle cx="155" cy="300" r="2" fill="currentColor">
        <animate attributeName="opacity" values="0;1;0" dur="1.5s" begin="0.8s" repeatCount="indefinite" />
      </circle>
      {/* Labels on side */}
      <text x="15" y="55" fill="currentColor" fillOpacity="0.6" fontSize="9" fontFamily="Almarai" letterSpacing="1.5">LEADS IN</text>
      <text x="100" y="316" fill="currentColor" fillOpacity="0.7" fontSize="9" fontFamily="Almarai" letterSpacing="1.5">QUALIFICADAS</text>
    </svg>
  );
}

/* ============================================================
   PRODUCT SURFACE — animated dashboard mockup
============================================================ */
function ProductDemo() {
  return (
    <section id="demo" className="relative bg-[#111530] px-5 md:px-8 py-24 md:py-36 overflow-hidden border-y border-white/5">
      {/* Soft warm glow */}
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80vw] h-[80vw] max-w-[1100px] max-h-[1100px] rounded-full"
          style={{
            background: "radial-gradient(circle at 50% 50%, rgba(255,107,115,0.10), rgba(255,107,115,0) 60%)",
            filter: "blur(20px)",
          }}
        />
      </div>

      <div className="relative max-w-7xl mx-auto">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-12 items-start">
          {/* Left — narrative */}
          <div className="lg:col-span-4 lg:sticky lg:top-24">
            <FadeUp>
              <div className="eyebrow-orange mb-6 hidden md:block">No teu dashboard</div>
            </FadeUp>
            <WordsPullUpMultiStyle
              justify="flex-start"
              className="text-3xl sm:text-4xl md:text-5xl text-primary leading-[1.02]"
              segments={[
                { text: "Cada conversa,",          className: "font-normal" },
                { text: "uma lead",                className: "font-normal" },
                { text: "qualificada",             className: "serif italic font-normal text-orange" },
                { text: "no teu dashboard.",       className: "hidden md:inline font-normal" },
              ]}
            />
            <FadeUp delay={0.4}>
              <p className="mt-8 max-w-md text-primary/65 text-sm md:text-base leading-relaxed">
                Resumo automático, prioridade, próximo passo. Pronto para a
                equipa atuar, sem ter de relembrar a conversa toda.
              </p>
            </FadeUp>
            <FadeUp delay={0.55}>
              <div className="mt-8 grid grid-cols-2 gap-3 max-w-md">
                {[
                  { k: "Resposta", v: "< 2s", sub: "tempo médio" },
                  { k: "Sempre", v: "24/7", sub: "mesmo fora de horas" },
                  { k: "Contexto", v: "100%", sub: "do teu negócio" },
                  { k: "Dashboard", v: "1 clique", sub: "lead organizada" },
                ].map((x) => (
                  <div key={x.k} className="rounded-xl p-4 bg-[#1A1E3A] hairline">
                    <div className="text-[10px] tracking-[0.16em] uppercase text-orange/85 mb-2">{x.k}</div>
                    <div className="text-2xl text-primary font-medium tracking-tight">{x.v}</div>
                    <div className="text-xs text-primary/45 mt-1">{x.sub}</div>
                  </div>
                ))}
              </div>
            </FadeUp>
          </div>

          {/* Right — animated dashboard */}
          <div className="lg:col-span-8">
            <DashboardMockup />
          </div>
        </div>
      </div>
    </section>
  );
}

/* DashboardMockup — Captixy admin UI in a laptop window with live leads */
function DashboardMockup() {
  const ready = window.useDeferredMount(400);

  const leads = [
    { id: "L01", name: "Maria S.",   interest: "Limpeza dentária",    urgency: "Esta semana", source: "Link",   priority: "Alta",  isNew: true },
    { id: "L02", name: "João P.",    interest: "Hidratação facial",   urgency: "Próx. 15 dias", source: "QR",    priority: "Média" },
    { id: "L03", name: "Sofia M.",   interest: "Avaliação dentária",  urgency: "Sem urgência", source: "Embed",  priority: "Baixa" },
    { id: "L04", name: "Pedro R.",   interest: "Branqueamento",       urgency: "Esta semana", source: "Link",   priority: "Alta" },
    { id: "L05", name: "Ana C.",     interest: "Peeling químico",     urgency: "Próx. mês",  source: "QR",     priority: "Média" },
  ];

  // Counter for "Total leads"
  const [counter, setCounter] = uS(127);
  uE(() => {
    if (!ready) return;
    const id = setInterval(() => setCounter((c) => c + 1), 6500);
    return () => clearInterval(id);
  }, [ready]);

  return (
    <m.div
      initial={{ opacity: 0, y: 30, scale: 0.98 }}
      animate={ready ? { opacity: 1, y: 0, scale: 1 } : {}}
      transition={{ duration: 1, ease: EASE_OUT_QUART }}
      className="relative rounded-2xl bg-[#111530] hairline-strong overflow-hidden shadow-[0_40px_120px_-20px_rgba(0,0,0,0.6),0_0_60px_-20px_rgba(255,107,115,0.25)]"
    >
      {/* Window chrome */}
      <div className="flex items-center justify-between px-5 py-3 border-b border-white/5 bg-black/50">
        <div className="flex items-center gap-2.5">
          <span className="w-2.5 h-2.5 rounded-full bg-[#FF5F57]" />
          <span className="w-2.5 h-2.5 rounded-full bg-[#FEBC2E]" />
          <span className="w-2.5 h-2.5 rounded-full bg-[#28C840]" />
        </div>
        <div className="text-[11px] text-primary/40 tracking-wide flex items-center gap-2">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-3 h-3"><rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0110 0v4" /></svg>
          app.captixy.com / leads
        </div>
        <div className="flex items-center gap-1.5 text-[10px] text-primary/45">
          <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
          <span>Live</span>
        </div>
      </div>

      {/* App body */}
      <div className="flex min-h-[560px]">
        {/* Sidebar */}
        <div className="hidden md:flex w-44 flex-col border-r border-white/5 bg-black/30 py-5 px-3">
          <div className="px-2 mb-6 flex items-center gap-2">
            <span className="w-7 h-7 rounded-lg bg-orange flex items-center justify-center text-white text-xs font-medium">C</span>
            <span className="text-primary text-sm tracking-tight">BellaSkin</span>
          </div>
          {[
            { n: "Dashboard",   active: false },
            { n: "Leads",       active: true },
            { n: "Assistente",  active: false },
            { n: "Canais",      active: false },
            { n: "Analytics",   active: false },
            { n: "Definições",  active: false },
          ].map((it) => (
            <div
              key={it.n}
              className={`px-3 py-2 rounded-lg text-[12px] cursor-default mb-0.5 ${
                it.active
                  ? "bg-[#222747] text-primary hairline-strong"
                  : "text-primary/55 hover:bg-white/5"
              }`}
            >
              {it.n}
            </div>
          ))}
          <div className="mt-auto px-2 pt-4 border-t border-white/5">
            <div className="text-[10px] text-primary/40 mb-1">Plano</div>
            <div className="text-xs text-primary">Growth</div>
          </div>
        </div>

        {/* Main panel */}
        <div className="flex-1 p-4 sm:p-6 min-w-0">
          {/* Header */}
          <div className="flex items-center justify-between gap-3 mb-5">
            <div>
              <div className="text-primary text-lg tracking-tight">Leads</div>
              <div className="text-[11px] text-primary/45">5 novas hoje · 23 esta semana</div>
            </div>
            <div className="flex items-center gap-2">
              <button className="hidden sm:flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[#222747] hairline text-[11px] text-primary/70">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-3 h-3"><path d="M3 6h18M6 12h12M10 18h4" /></svg>
                Filtrar
              </button>
              <button className="px-3 py-1.5 rounded-full bg-orange text-white text-[11px] font-medium">
                + Exportar
              </button>
            </div>
          </div>

          {/* KPI row */}
          <div className="grid grid-cols-3 gap-2 mb-5">
            <KpiCard label="Total leads" value={counter} highlight />
            <KpiCard label="Convertidas" value="34" />
            <KpiCard label="Taxa resposta" value="< 2s" />
          </div>

          {/* Filters */}
          <div className="flex items-center gap-1.5 mb-4 flex-wrap">
            {["Todas", "Novas", "Em contacto", "Convertidas", "Perdidas"].map((f, i) => (
              <span
                key={f}
                className={`text-[10px] px-2.5 py-1 rounded-full ${
                  i === 0
                    ? "bg-primary text-black"
                    : "bg-[#222747] text-primary/55 hairline"
                }`}
              >
                {f}
              </span>
            ))}
          </div>

          {/* Leads list */}
          <div className="space-y-2">
            {leads.map((l, i) => (
              <DashLeadRow key={l.id} lead={l} index={i} ready={ready} />
            ))}
          </div>
        </div>
      </div>
    </m.div>
  );
}

function KpiCard({ label, value, highlight }) {
  return (
    <div className={`rounded-xl p-3 ${highlight ? "bg-[#1A1E3A] hairline" : "bg-[#1A1E3A] hairline"}`}
      style={highlight ? { boxShadow: "inset 0 0 0 1px rgba(255,107,115,0.25)" } : undefined}
    >
      <div className={`text-[10px] tracking-wider uppercase mb-1 ${highlight ? "text-orange" : "text-primary/45"}`}>{label}</div>
      <m.div
        key={String(value)}
        initial={{ y: 12, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.5, ease: EASE_EXPO }}
        className="text-xl text-primary font-medium tracking-tight"
      >
        {value}
      </m.div>
    </div>
  );
}

function DashLeadRow({ lead, index, ready }) {
  const priColor =
    lead.priority === "Alta"  ? "text-orange"     :
    lead.priority === "Média" ? "text-amber-300/85" :
                                "text-primary/55";
  const priBg =
    lead.priority === "Alta"  ? "bg-orange/15 ring-orange/25"     :
    lead.priority === "Média" ? "bg-amber-300/10 ring-amber-300/20" :
                                "bg-white/5 ring-white/10";

  return (
    <m.div
      initial={{ opacity: 0, y: 20 }}
      animate={ready ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.6, delay: 0.6 + index * 0.12, ease: EASE_EXPO }}
      className={`grid grid-cols-[minmax(0,1fr)_auto] sm:grid-cols-[minmax(180px,1fr)_112px_72px_auto] items-center gap-3 px-4 py-3 rounded-xl ${
        lead.isNew
          ? "bg-[#070B1F] hairline-strong"
          : "bg-[#1A1E3A] hairline"
      }`}
      style={lead.isNew ? { boxShadow: "inset 0 0 0 1px rgba(255,107,115,0.35)" } : undefined}
    >
      <div className="flex min-w-0 items-center gap-3">
        <div className="w-8 h-8 rounded-full bg-[#222] text-primary flex items-center justify-center text-[10px] font-medium shrink-0">
          {lead.name.split(" ").map(p => p[0]).join("")}
        </div>
        <div className="min-w-0">
          <div className="flex items-center gap-2">
            <span className="text-primary text-sm">{lead.name}</span>
            {lead.isNew && (
              <m.span
                animate={{ opacity: [1, 0.5, 1] }}
                transition={{ duration: 1.5, repeat: Infinity }}
                className="text-[9px] tracking-[0.18em] uppercase text-orange"
              >
                · Novo
              </m.span>
            )}
          </div>
          <div className="text-[11px] text-primary/55 truncate">{lead.interest}</div>
        </div>
      </div>
      <div className="hidden sm:block text-[11px] text-primary/55 truncate">{lead.urgency}</div>
      <div className="hidden sm:flex items-center gap-1 text-[10px] text-primary/45">
        <span className="w-1 h-1 rounded-full bg-primary/40" />
        {lead.source}
      </div>
      <span className={`justify-self-end px-2 py-0.5 rounded-full ring-1 text-[10px] ${priColor} ${priBg}`}>
        {lead.priority}
      </span>
    </m.div>
  );
}

/* ============================================================
   HOW IT WORKS — 4 numbered steps
============================================================ */
function HowItWorks() {
  const steps = [
    {
      n: "01",
      title: "Configura a assistente",
      body: "Escolhe nome, tom e estilo. Adiciona o contexto do negócio para responder com segurança.",
      svg: <SvgStepConfig />,
    },
    {
      n: "02",
      title: "Define o que qualificar",
      body: "Nome, contacto, serviço, urgência, disponibilidade e orçamento. Só o que precisas.",
      svg: <SvgStepChecklist />,
    },
    {
      n: "03",
      title: "Partilha em qualquer canal",
      body: "Link, QR code ou embed. Bio do Instagram, Google Business, balcão físico, anúncios.",
      svg: <SvgStepShare />,
    },
    {
      n: "04",
      title: "Recebe leads organizadas",
      body: "Cada conversa gera uma lead com resumo, informação recolhida, prioridade e próximo passo.",
      svg: <SvgStepInbox />,
    },
  ];
  return (
    <section id="how" className="bg-[#070B1F] px-5 md:px-8 py-24 md:py-32 relative overflow-hidden">
      <div className="absolute inset-0 grid-pulse opacity-20 pointer-events-none" />
      <div className="max-w-7xl mx-auto relative">
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-14 md:mb-20">
          <div>
            <FadeUp><div className="eyebrow-orange mb-5">Como funciona</div></FadeUp>
            <WordsPullUpMultiStyle
              justify="flex-start"
              className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-primary leading-[1.02] max-w-3xl"
              segments={[
                { text: "Em",                       className: "font-normal" },
                { text: "poucos minutos,",          className: "serif italic font-normal text-orange" },
                { text: "tens uma assistente pronta a captar, responder e qualificar.", className: "font-normal" },
              ]}
            />
          </div>
          <FadeUp delay={0.4}>
            <p className="text-primary/60 text-sm md:text-base max-w-sm leading-relaxed">
              Sem código, sem integrações complicadas. Começa com um link público
              e cresce para QR code e embed no website.
            </p>
          </FadeUp>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 md:gap-3">
          {steps.map((s, i) => (
            <FadeUp key={s.n} delay={i * 0.12}>
              <div className="relative bg-[#1A1E3A] rounded-2xl p-6 md:p-7 h-full lift hairline overflow-hidden group">
                {/* Big number watermark */}
                <div
                  className="absolute -top-6 -right-6 text-[120px] leading-none font-medium tracking-tighter pointer-events-none select-none group-hover:text-orange/10 transition-colors duration-500"
                  style={{ color: "rgba(247,248,255,0.05)" }}
                >
                  {s.n}
                </div>
                {/* SVG illustration */}
                <div className="relative h-32 mb-6 flex items-center justify-center text-orange">
                  {s.svg}
                </div>
                <div className="relative">
                  <div className="eyebrow-orange mb-3">Passo {s.n}</div>
                  <h3 className="text-primary text-xl md:text-2xl tracking-tight leading-[1.1] mb-3">
                    {s.title}
                  </h3>
                  <p className="text-primary/55 text-sm leading-relaxed">{s.body}</p>
                </div>
                {/* Connecting flow line between cards */}
                {i < steps.length - 1 && (
                  <div className="hidden lg:block absolute top-1/2 -right-3 z-10 pointer-events-none">
                    <SvgFlowArrow className="w-6 h-6 text-orange" />
                  </div>
                )}
              </div>
            </FadeUp>
          ))}
        </div>
      </div>
    </section>
  );
}

function SvgStepConfig() {
  return (
    <svg viewBox="0 0 100 100" fill="none" className="w-24 h-24">
      {/* AI orb */}
      <circle cx="50" cy="50" r="22" fill="currentColor" fillOpacity="0.15" stroke="currentColor" strokeWidth="1.5" />
      <text x="50" y="56" textAnchor="middle" fill="currentColor" fontSize="14" fontFamily="Almarai" fontWeight="600">AI</text>
      {/* Orbit ring */}
      <circle cx="50" cy="50" r="34" stroke="currentColor" strokeOpacity="0.4" strokeWidth="1" strokeDasharray="3 3">
        <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="16s" repeatCount="indefinite" />
      </circle>
      {/* Settings nodes */}
      {[0, 1, 2].map((i) => {
        const a = (i / 3) * Math.PI * 2;
        const x = 50 + Math.cos(a) * 34;
        const y = 50 + Math.sin(a) * 34;
        return (
          <g key={i}>
            <circle cx={x} cy={y} r="4" fill="currentColor" />
          </g>
        );
      })}
      {/* Sliders bottom */}
      <g transform="translate(20,82)">
        <line x1="0" y1="0"  x2="20" y2="0"  stroke="currentColor" strokeWidth="2" />
        <circle cx="12" cy="0" r="2.5" fill="currentColor" />
        <line x1="32" y1="0" x2="60" y2="0" stroke="currentColor" strokeWidth="2" strokeOpacity="0.4" />
        <circle cx="40" cy="0" r="2.5" fill="currentColor" />
      </g>
    </svg>
  );
}

function SvgStepChecklist() {
  return (
    <svg viewBox="0 0 100 100" fill="none" className="w-24 h-24">
      <rect x="14" y="10" width="72" height="80" rx="8" stroke="currentColor" strokeWidth="1.5" fill="currentColor" fillOpacity="0.06" />
      {[0, 1, 2, 3].map((i) => (
        <g key={i} transform={`translate(22, ${22 + i * 16})`}>
          <rect x="0" y="0" width="12" height="12" rx="3" stroke="currentColor" strokeWidth="1.5" fill={i < 3 ? "currentColor" : "none"} fillOpacity={i < 3 ? "1" : "0"} />
          {i < 3 && (
            <path d="M 3 6 L 5 8 L 9 4" stroke="#070B1F" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none">
              <animate attributeName="stroke-dashoffset" from="20" to="0" dur="0.5s" begin={`${i * 0.3}s`} fill="freeze" />
              <animate attributeName="stroke-dasharray" from="20" to="20" dur="0.5s" />
            </path>
          )}
          <line x1="20" y1="6" x2={56 - i * 4} y2="6" stroke="currentColor" strokeOpacity="0.55" strokeWidth="2" strokeLinecap="round" />
        </g>
      ))}
    </svg>
  );
}

function SvgStepShare() {
  return (
    <svg viewBox="0 0 100 100" fill="none" className="w-24 h-24">
      {/* Center node */}
      <circle cx="50" cy="50" r="9" fill="currentColor" />
      <circle cx="50" cy="50" r="16" stroke="currentColor" strokeOpacity="0.4" strokeWidth="1" strokeDasharray="3 3">
        <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="12s" repeatCount="indefinite" />
      </circle>
      {/* 3 outgoing nodes: link, qr, embed */}
      {[
        { x: 18, y: 22, label: "</>" },
        { x: 82, y: 22, label: "■■" },
        { x: 50, y: 86, label: "link" },
      ].map((n, i) => (
        <g key={i}>
          <line x1="50" y1="50" x2={n.x} y2={n.y} stroke="currentColor" strokeWidth="1.2" strokeOpacity="0.5" strokeDasharray="2 3">
            <animate attributeName="stroke-dashoffset" from="0" to="-10" dur="1.4s" repeatCount="indefinite" />
          </line>
          <circle cx={n.x} cy={n.y} r="9" fill="currentColor" fillOpacity="0.18" stroke="currentColor" strokeWidth="1.2" />
          <text x={n.x} y={n.y + 3} textAnchor="middle" fill="currentColor" fontSize="6" fontFamily="Almarai" fontWeight="700">{n.label}</text>
        </g>
      ))}
    </svg>
  );
}

function SvgStepInbox() {
  return (
    <svg viewBox="0 0 100 100" fill="none" className="w-24 h-24">
      {/* Inbox body */}
      <rect x="14" y="46" width="72" height="40" rx="6" stroke="currentColor" strokeWidth="1.5" fill="currentColor" fillOpacity="0.06" />
      <path d="M 14 60 L 38 60 L 42 66 L 58 66 L 62 60 L 86 60" stroke="currentColor" strokeWidth="1.5" fill="none" />
      {/* Incoming letter */}
      <rect x="32" y="12" width="36" height="22" rx="3" fill="currentColor" fillOpacity="0.2" stroke="currentColor" strokeWidth="1.5">
        <animate attributeName="y" from="-10" to="34" dur="2.4s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.2;0.7;1" dur="2.4s" repeatCount="indefinite" />
      </rect>
      {/* Badge with notification */}
      <circle cx="82" cy="40" r="6" fill="currentColor" />
      <text x="82" y="43" textAnchor="middle" fill="#070B1F" fontSize="7" fontFamily="Almarai" fontWeight="700">3</text>
    </svg>
  );
}

function SvgFlowArrow({ className }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" className={className}>
      <path d="M 4 12 L 20 12 M 14 6 L 20 12 L 14 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="2 3">
        <animate attributeName="stroke-dashoffset" from="0" to="-10" dur="1.4s" repeatCount="indefinite" />
      </path>
    </svg>
  );
}

/* ============================================================
   FEATURES — 4-card grid with mini visual demos
============================================================ */
function Features() {
  return (
    <section id="features" className="relative bg-[#070B1F] px-5 md:px-8 py-24 md:py-32">
      <div className="absolute inset-0 bg-noise opacity-[0.10] pointer-events-none" />
      <div className="relative max-w-7xl mx-auto">
        <div className="max-w-4xl mx-auto text-center mb-14 md:mb-20">
          <FadeUp><div className="eyebrow-orange mb-5">Funcionalidades</div></FadeUp>
          <WordsPullUpMultiStyle
            justify="center"
            className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl leading-[1.05]"
            segments={[
              { text: "Tudo o que precisas para o",                              className: "font-normal text-primary" },
              { text: "primeiro contacto.",                                       className: "serif italic font-normal text-orange" },
              { text: "A equipa fecha. A Captixy capta.",                         className: "font-normal text-primary/55" },
            ]}
          />
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-3 md:gap-3">
          {/* Big AI orb card — spans 5 cols */}
          <div className="md:col-span-2 lg:col-span-5 lg:row-span-2">
            <FeatCardOrb />
          </div>
          {/* 3 smaller cards — each spans ~3.5 cols */}
          <div className="md:col-span-1 lg:col-span-7">
            <FeatCardPersonality />
          </div>
          <div className="md:col-span-1 lg:col-span-7">
            <FeatCardChannels />
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-3 mt-3">
          <FeatCardDashboardMini />
          <FeatCardTrust />
        </div>
      </div>
    </section>
  );
}

/* Big card — AI orb (left, tall) */
function FeatCardOrb() {
  return (
    <FadeUp delay={0}>
      <div className="relative rounded-2xl bg-[#111530] hairline-strong overflow-hidden h-[420px] lg:h-[547px] flex flex-col">
        <div className="absolute inset-0 aurora aurora-soft" />
        <div className="absolute inset-0 noise-overlay opacity-30 mix-blend-overlay" />

        <div className="relative flex-1 flex items-center justify-center">
          <div className="relative w-64 h-64">
            <div className="absolute inset-0 rounded-full" style={{ borderStyle: "dashed", border: "1px dashed rgba(232,228,209,0.18)", animation: "spin 22s linear infinite" }} />
            <div className="absolute inset-8 rounded-full" style={{ borderStyle: "dashed", border: "1px dashed rgba(232,228,209,0.12)", animation: "spin 28s linear infinite reverse" }} />
            <div className="absolute inset-14 rounded-full"
              style={{
                background: "radial-gradient(circle, rgba(255,107,115,0.6), rgba(255,107,115,0) 65%)",
                filter: "blur(8px)",
              }}
            />
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="relative w-24 h-24 rounded-full bg-orange text-white flex items-center justify-center font-medium text-3xl serif italic shadow-[0_0_60px_-5px_rgba(255,107,115,0.7)]">
                AI
                <span className="pulse-ring" />
              </div>
            </div>
            {/* Orbiting nodes */}
            {[0, 1, 2, 3, 4].map((i) => {
              const angle = (i / 5) * Math.PI * 2;
              const r = 128;
              return (
                <m.div
                  key={i}
                  className="absolute top-1/2 left-1/2"
                  style={{ marginLeft: -8, marginTop: -8 }}
                  animate={{
                    x: [Math.cos(angle) * r, Math.cos(angle + Math.PI * 2) * r],
                    y: [Math.sin(angle) * r, Math.sin(angle + Math.PI * 2) * r],
                  }}
                  transition={{ duration: 22, repeat: Infinity, ease: "linear", delay: -i * 4 }}
                >
                  <div className={`w-4 h-4 rounded-full ${i % 2 === 0 ? "bg-primary" : "bg-orange"}`}
                    style={{ boxShadow: i % 2 === 0 ? "0 0 12px rgba(232,228,209,0.6)" : "0 0 12px rgba(255,107,115,0.7)" }}
                  />
                </m.div>
              );
            })}
          </div>
        </div>

        <div className="relative p-6 md:p-8">
          <div className="eyebrow-orange mb-2">Sempre disponível</div>
          <div className="text-2xl md:text-3xl text-primary tracking-tight leading-[1.05] mb-3">
            A tua assistente, <span className="serif italic text-orange">24/7</span> em órbita do teu negócio.
          </div>
          <div className="text-sm text-primary/60">
            Responde no momento certo, mesmo fora de horas. Recolhe o essencial e entrega para a equipa.
          </div>
        </div>
      </div>
    </FadeUp>
  );
}

/* Personality card — mini chat */
function FeatCardPersonality() {
  return (
    <FadeUp delay={0.1}>
      <div className="relative rounded-2xl glass-card p-6 md:p-7 h-[260px] lift overflow-hidden flex">
        <div className="flex-1 flex flex-col justify-center pr-4">
          <div className="text-primary/40 text-xs tracking-[0.18em] uppercase mb-3">01 · Personalidade</div>
          <h3 className="text-primary text-xl md:text-2xl tracking-tight leading-[1.05] mb-2">
            Assistente <span className="serif italic text-orange">personalizada</span>
          </h3>
          <p className="text-primary/55 text-sm leading-relaxed max-w-xs">
            Nome, tom e contexto do negócio configuráveis. Apresenta-se sempre como AI.
          </p>
        </div>
        <div className="hidden sm:flex flex-col gap-2 w-44 self-end mb-1">
          <div className="bg-[#222747] text-primary/85 text-[11px] rounded-2xl rounded-bl-md px-3 py-2 hairline">Olá! Sou a Sofia.</div>
          <div className="bg-orange text-white text-[11px] rounded-2xl rounded-br-md px-3 py-2 self-end">Que serviço procuras?</div>
          <div className="bg-ai-soft text-ai text-[11px] rounded-2xl rounded-bl-md px-3 py-2">assistente AI</div>
        </div>
      </div>
    </FadeUp>
  );
}

/* Channels card — link / QR / embed */
function FeatCardChannels() {
  return (
    <FadeUp delay={0.2}>
      <div className="relative rounded-2xl glass-card p-6 md:p-7 h-[260px] lift overflow-hidden flex">
        <div className="flex-1 flex flex-col justify-center pr-4">
          <div className="text-primary/40 text-xs tracking-[0.18em] uppercase mb-3">02 · Canais</div>
          <h3 className="text-primary text-xl md:text-2xl tracking-tight leading-[1.05] mb-2">
            Onde os clientes <span className="serif italic text-orange">já estão</span>
          </h3>
          <p className="text-primary/55 text-sm leading-relaxed max-w-xs">
            Link público, QR code para espaços físicos e embed no website.
          </p>
        </div>
        <div className="hidden sm:flex flex-col gap-2 w-44 self-center">
          {/* Link */}
          <div className="flex items-center gap-2 bg-[#222747] hairline rounded-xl px-3 py-2">
            <div className="w-7 h-7 rounded-md bg-[#222] flex items-center justify-center text-primary/70">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="w-3.5 h-3.5"><path d="M10 14a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1" /><path d="M14 10a5 5 0 00-7 0l-3 3a5 5 0 007 7l1-1" /></svg>
            </div>
            <div className="text-[11px] text-primary/75">captixy.app/...</div>
          </div>
          {/* QR */}
          <div className="flex items-center gap-2 bg-[#222747] hairline rounded-xl px-3 py-2">
            <div className="w-7 h-7 rounded-md bg-[#222] flex items-center justify-center text-primary/70">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-3.5 h-3.5"><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /><path d="M14 14h3v3h-3zM18 14h3M14 18h3v3" /></svg>
            </div>
            <div className="text-[11px] text-primary/75">QR code físico</div>
          </div>
          {/* Embed */}
          <div className="flex items-center gap-2 bg-orange/10 hairline-strong rounded-xl px-3 py-2"
            style={{ boxShadow: "inset 0 0 0 1px rgba(255,107,115,0.3)" }}
          >
            <div className="w-7 h-7 rounded-md bg-orange/30 flex items-center justify-center text-orange">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="w-3.5 h-3.5"><path d="M8 5l-6 7 6 7M16 5l6 7-6 7" /></svg>
            </div>
            <div className="text-[11px] text-orange">Embed</div>
          </div>
        </div>
      </div>
    </FadeUp>
  );
}

/* Dashboard mini card */
function FeatCardDashboardMini() {
  return (
    <FadeUp delay={0.1}>
      <div className="relative rounded-2xl glass-card p-6 md:p-7 h-[280px] lift overflow-hidden flex">
        <div className="flex-1 flex flex-col justify-center pr-4">
          <div className="text-primary/40 text-xs tracking-[0.18em] uppercase mb-3">03 · Dashboard</div>
          <h3 className="text-primary text-xl md:text-2xl tracking-tight leading-[1.05] mb-2">
            Leads <span className="serif italic text-orange">organizadas</span>
          </h3>
          <p className="text-primary/55 text-sm leading-relaxed max-w-xs">
            Resumo automático, prioridade e próximo passo. Filtros, notificações e analytics.
          </p>
        </div>
        <div className="hidden sm:flex flex-col gap-1.5 w-52 self-center">
          {[
            { n: "Maria S.", p: "Alta",  c: "text-orange",      bg: "bg-orange/15" },
            { n: "João P.",  p: "Média", c: "text-amber-300",   bg: "bg-amber-300/10" },
            { n: "Ana C.",   p: "Baixa", c: "text-primary/55",  bg: "bg-white/5" },
          ].map((l) => (
            <div key={l.n} className="flex items-center gap-2 bg-[#222747] hairline rounded-lg px-2.5 py-2">
              <div className="w-5 h-5 rounded-full bg-[#222747] flex items-center justify-center text-[8px] text-primary/70 shrink-0">{l.n[0]}</div>
              <div className="flex-1 text-[11px] text-primary/85 truncate">{l.n}</div>
              <span className={`px-1.5 py-0.5 rounded-full text-[9px] ${l.c} ${l.bg}`}>{l.p}</span>
            </div>
          ))}
        </div>
      </div>
    </FadeUp>
  );
}

/* Trust card */
function FeatCardTrust() {
  return (
    <FadeUp delay={0.2}>
      <div className="relative rounded-2xl glass-card p-6 md:p-7 h-[280px] lift overflow-hidden flex">
        <div className="flex-1 flex flex-col justify-center pr-4">
          <div className="text-primary/40 text-xs tracking-[0.18em] uppercase mb-3">04 · Transparência</div>
          <h3 className="text-primary text-xl md:text-2xl tracking-tight leading-[1.05] mb-2">
            Sempre <span className="serif italic text-orange">honesta</span>
          </h3>
          <p className="text-primary/55 text-sm leading-relaxed max-w-xs">
            A assistente apresenta-se como AI e nunca finge ser uma pessoa real.
            Encaminha para a equipa quando não sabe.
          </p>
        </div>
        <div className="hidden sm:flex items-center w-44 self-center">
          <div className="relative w-full h-32 rounded-xl bg-[#222747] hairline overflow-hidden flex items-center justify-center">
            <div className="absolute inset-0 aurora aurora-soft opacity-60" />
            <div className="relative text-center px-3">
              <div className="w-10 h-10 mx-auto rounded-full bg-orange text-white flex items-center justify-center font-medium text-sm serif italic mb-1.5">AI</div>
              <div className="text-[9px] text-primary/65 tracking-wider">Assistente virtual</div>
            </div>
          </div>
        </div>
      </div>
    </FadeUp>
  );
}

function FeatCardVisual() {
  return (
    <FadeUp delay={0}>
      <div className="relative rounded-2xl bg-[#111530] hairline overflow-hidden h-[420px] lg:h-full">
        <div className="absolute inset-0 aurora opacity-80" />
        <div className="absolute inset-0 noise-overlay opacity-30 mix-blend-overlay" />

        {/* Animated orbit */}
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="relative w-56 h-56">
            <div className="absolute inset-0 rounded-full border border-primary/15 spin-slow" style={{ borderStyle: "dashed" }} />
            <div className="absolute inset-6 rounded-full border border-primary/10" style={{ borderStyle: "dashed", animation: "spin 28s linear infinite reverse" }} />
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="w-20 h-20 rounded-full bg-primary text-black flex items-center justify-center font-medium text-2xl serif italic">
                AI
              </div>
            </div>
            {/* Orbiting nodes */}
            {[0, 1, 2, 3].map((i) => (
              <m.div
                key={i}
                className="absolute top-1/2 left-1/2 w-3 h-3 rounded-full bg-primary"
                style={{ marginLeft: -6, marginTop: -6 }}
                animate={{
                  x: [Math.cos((i * Math.PI) / 2) * 112, Math.cos((i * Math.PI) / 2 + Math.PI * 2) * 112],
                  y: [Math.sin((i * Math.PI) / 2) * 112, Math.sin((i * Math.PI) / 2 + Math.PI * 2) * 112],
                }}
                transition={{ duration: 22, repeat: Infinity, ease: "linear" }}
              />
            ))}
          </div>
        </div>

        <div className="absolute bottom-0 left-0 right-0 p-6 md:p-7">
          <div className="text-[10px] tracking-[0.18em] uppercase text-primary/45 mb-2">Sempre disponível</div>
          <div className="text-xl md:text-2xl text-primary tracking-tight leading-[1.1]">
            A tua assistente, em órbita do teu negócio.
          </div>
        </div>
      </div>
    </FadeUp>
  );
}

function FeatCardChecklist({ num, title, description, items, iconBg, iconChar, delay }) {
  return (
    <FadeUp delay={delay}>
      <div className="relative rounded-2xl bg-[#222747] hairline p-6 md:p-7 h-[420px] lg:h-full flex flex-col lift">
        <div className="flex items-start justify-between mb-6">
          <div
            className="w-10 h-10 sm:w-11 sm:h-11 rounded-xl flex items-center justify-center text-xs tracking-wider font-medium serif italic"
            style={{ background: iconBg, color: "#F7F8FF" }}
          >
            {iconChar}
          </div>
          <div className="text-primary/40 text-xs tracking-[0.18em]">{num}</div>
        </div>
        <h3 className="text-primary text-xl md:text-2xl tracking-tight leading-[1.05] mb-2.5">{title}</h3>
        <p className="text-primary/55 text-sm leading-relaxed mb-6">{description}</p>

        <ul className="space-y-2.5 flex-1">
          {items.map((it, i) => (
            <li key={i} className="flex items-start gap-2.5 text-[13px] text-primary/75 leading-snug">
              <span className="mt-0.5 text-emerald-400/90">
                <IconCheck className="w-3.5 h-3.5" />
              </span>
              <span>{it}</span>
            </li>
          ))}
        </ul>

        <a href="#cta" className="mt-6 inline-flex items-center gap-2 text-sm text-primary/70 hover:text-primary transition-colors group/learn">
          <span>Saber mais</span>
          <span className="inline-flex transition-transform group-hover/learn:translate-x-1 group-hover/learn:-translate-y-0.5">
            <IconArrowRight className="w-3.5 h-3.5" style={{ transform: "rotate(-45deg)" }} />
          </span>
        </a>
      </div>
    </FadeUp>
  );
}

/* ============================================================
   PRICING
============================================================ */
function Pricing({ standalone = false }) {
  const [annual, setAnnual] = uS(true);
  const plans = [
    {
      name: "Starter",
      monthly: 24.99,
      annual: 19.99,
      annualTotal: 239.88,
      tagline: "Para pequenos negócios que querem começar a captar leads com uma assistente virtual.",
      features: [
        "Assistente virtual personalizada",
        "Link público partilhável",
        "Até 100 leads/mês",
        "Até 5 perguntas de qualificação",
        "Fluxo de qualificação simples",
        "Dashboard básico de leads",
      ],
      cta: "Pedir acesso",
      highlight: false,
    },
    {
      name: "Growth",
      monthly: 49.99,
      annual: 39.99,
      annualTotal: 479.88,
      tagline: "Para negócios que querem usar a assistente no website, em materiais físicos e acompanhar mais leads.",
      features: [
        "Tudo do Starter",
        "Até 500 leads/mês",
        "QR code",
        "Embed no website",
        "Personalização completa da assistente",
        "Até 12 perguntas de qualificação",
        "Fluxo de qualificação personalizado",
        "Remoção do branding Captixy",
      ],
      cta: "Pedir acesso",
      highlight: true,
    },
    {
      name: "Pro",
      monthly: 99.99,
      annual: 79.99,
      annualTotal: 959.88,
      tagline: "Para negócios com maior volume, marca própria e maior controlo sobre os dados.",
      features: [
        "Tudo do Growth",
        "Até 2.000 leads/mês",
        "Marca própria",
        "Até 25 perguntas de qualificação",
        "Fluxos de qualificação avançados",
        "Analytics avançados",
        "Exportação CSV",
      ],
      cta: "Pedir acesso",
      highlight: false,
    },
  ];

  return (
    <section id="pricing" className={`relative bg-[#070B1F] px-5 md:px-8 overflow-hidden ${standalone ? "py-20" : "py-24 md:py-32"}`}>
      {/* Decorative blurred glow */}
      <div className="absolute -top-32 left-1/2 -translate-x-1/2 w-[80vw] h-[80vw] max-w-[900px] max-h-[900px] rounded-full pointer-events-none"
        style={{
          background: "radial-gradient(circle, rgba(255,107,115,0.10), transparent 60%)",
          filter: "blur(60px)",
        }}
      />
      <div className="absolute inset-0 grid-pulse opacity-20 pointer-events-none" />
      <div className="max-w-7xl mx-auto relative">
        <div className="text-center mb-12 md:mb-16">
          <FadeUp><div className="eyebrow-orange mb-5">Planos</div></FadeUp>
          <WordsPullUpMultiStyle
            justify="center"
            className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-primary leading-[1.02] max-w-3xl mx-auto"
            segments={[
              { text: "Planos",                  className: "font-normal" },
              { text: "simples",                 className: "serif italic font-normal text-orange" },
              { text: "para começar",            className: "font-normal" },
            ]}
          />
          <FadeUp delay={0.25}>
            <p className="mt-6 max-w-2xl mx-auto text-primary/65 text-sm md:text-base leading-relaxed">
              Escolhe o plano de acordo com o volume de leads e a forma como queres usar a tua assistente.
            </p>
          </FadeUp>
          <FadeUp delay={0.4}>
            <div className="mt-10 inline-flex items-center bg-[#1A1E3A] rounded-full p-1 hairline">
              <button
                onClick={() => setAnnual(false)}
                className={`px-4 py-1.5 text-sm rounded-full transition-colors ${!annual ? "bg-primary text-black" : "text-primary/65"}`}
              >Mensal</button>
              <button
                onClick={() => setAnnual(true)}
                className={`px-4 py-1.5 text-sm rounded-full transition-colors flex items-center gap-2 ${annual ? "bg-primary text-black" : "text-primary/65"}`}
              >
                Anual <span className={`text-[10px] tracking-wider ${annual ? "text-black/60" : "text-emerald-400/80"}`}>−20%</span>
              </button>
            </div>
          </FadeUp>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-3">
          {plans.map((p, i) => (
            <FadeUp key={p.name} delay={i * 0.1}>
              <div
                className={`relative rounded-2xl md:rounded-3xl p-7 md:p-8 h-full flex flex-col bg-[#1A1E3A] ${
                  p.highlight ? "card-popular md:-translate-y-2 md:scale-[1.02]" : "hairline"
                }`}
              >
                {p.highlight && (
                  <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3.5 py-1 rounded-full popular-badge text-[10px] tracking-[0.18em] uppercase font-medium z-10">
                    Mais popular
                  </div>
                )}

                <div className="flex items-baseline justify-between">
                  <h3 className={`text-2xl md:text-3xl tracking-tight ${p.highlight ? "text-primary" : "text-primary"}`}>{p.name}</h3>
                  {p.highlight && <IconSparkle className="w-4 h-4 text-orange" />}
                </div>

                <div className="mt-6">
                  <div className="flex items-baseline gap-1">
                    <span className={`text-4xl md:text-5xl font-medium tracking-tight ${p.highlight ? "text-gradient-brand" : "text-primary"}`}>
                      {String(annual ? p.annual : p.monthly).replace(".", ",")}€
                    </span>
                    <span className="text-primary/55 text-sm">/mês</span>
                  </div>
                  <div className="mt-1 text-xs text-primary/45 h-4">
                    {annual && <>{String(p.annualTotal).replace(".", ",")}€/ano · cobrado anualmente</>}
                  </div>
                </div>

                <p className="mt-5 text-sm text-primary/65 leading-relaxed">{p.tagline}</p>

                <ul className="mt-7 space-y-3 flex-1">
                  {p.features.map((f, k) => (
                    <li key={k} className="flex items-start gap-2.5 text-sm text-primary/85 leading-snug">
                      <IconCheck className="w-3.5 h-3.5 mt-1 shrink-0 text-emerald-400/90" />
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>

                <div className="mt-8">
                  <CtaPill href="#cta" variant={p.highlight ? "orange" : "ghost-cream"} size="sm">
                    {p.cta}
                  </CtaPill>
                </div>
              </div>
            </FadeUp>
          ))}
        </div>

        <FadeUp delay={0.5}>
          <div className="mt-10 text-center text-xs text-primary/45 max-w-2xl mx-auto leading-relaxed">
            14 dias de trial gratuito.
          </div>
        </FadeUp>
      </div>
    </section>
  );
}

/* ============================================================
   FAQ
============================================================ */
function FAQ() {
  const items = [
    { q: "Preciso de ter website?",                  a: "Não. Podes usar o link público da tua assistente em redes sociais, WhatsApp, Google Business, cartões de visita ou QR code. Se já tiveres website, podes usar o embed nos planos que o incluem." },
    { q: "A assistente responde sozinha?",            a: "Responde com base no contexto que configurares. Se não souber, deve dizer que não tem essa informação e encaminhar para a equipa." },
    { q: "Isto substitui a minha equipa?",            a: "Não. A Captixy ajuda no primeiro contacto e na qualificação. A equipa continua responsável por confirmar informações, fechar vendas e acompanhar clientes." },
    { q: "Funciona com Instagram ou WhatsApp?",       a: "Atualmente, podes partilhar o link da assistente nesses canais. Integrações diretas com Instagram, Messenger e WhatsApp estão planeadas para uma fase futura." },
    { q: "Posso usar num espaço físico?",             a: "Sim. Nos planos que incluem QR code, podes colocá-lo em montras, balcões, mesas, flyers ou outros materiais." },
    { q: "A assistente parece uma pessoa real?",      a: "Não. As assistentes Captixy apresentam-se sempre como assistentes virtuais AI. Não fingem ser pessoas reais." },
  ];
  const [open, setOpen] = uS(0);
  return (
    <section id="faq" className="bg-[#070B1F] px-5 md:px-8 py-24 md:py-32 relative overflow-hidden">
      {/* Decorative SVG */}
      <div className="absolute -top-10 -right-20 pointer-events-none opacity-50 hidden md:block">
        <svg width="320" height="320" viewBox="0 0 320 320" fill="none" className="text-orange">
          <circle cx="160" cy="160" r="120" stroke="currentColor" strokeOpacity="0.18" strokeDasharray="2 5" className="spin-slow" style={{ transformOrigin: "160px 160px" }} />
          <circle cx="160" cy="160" r="80" stroke="currentColor" strokeOpacity="0.25" strokeDasharray="3 6" className="spin-slow-reverse" style={{ transformOrigin: "160px 160px" }} />
          <circle cx="160" cy="160" r="40" stroke="currentColor" strokeOpacity="0.35" />
          <circle cx="160" cy="160" r="6" fill="currentColor" />
        </svg>
      </div>
      <div className="max-w-5xl mx-auto relative">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-10 mb-12 md:mb-16">
          <div className="md:col-span-5">
            <FadeUp><div className="eyebrow-orange mb-5">FAQ</div></FadeUp>
            <WordsPullUpMultiStyle
              justify="flex-start"
              className="text-3xl sm:text-4xl md:text-5xl text-primary leading-[1.02]"
              segments={[
                { text: "Perguntas",       className: "font-normal" },
                { text: "frequentes.",     className: "serif italic font-normal text-orange" },
              ]}
            />
          </div>
          <div className="md:col-span-7">
            <ul className="divide-y divide-white/5 border-t border-white/5">
              {items.map((it, i) => (
                <li key={i}>
                  <button
                    onClick={() => setOpen(open === i ? -1 : i)}
                    className="w-full text-left py-5 flex items-center justify-between gap-4 group"
                  >
                    <span className="text-primary text-base md:text-lg pr-4 group-hover:translate-x-1 transition-transform">{it.q}</span>
                    <span className="shrink-0 w-7 h-7 rounded-full bg-[#1A1E3A] hairline flex items-center justify-center text-primary/80">
                      {open === i ? <IconMinus className="w-3.5 h-3.5" /> : <IconPlus className="w-3.5 h-3.5" />}
                    </span>
                  </button>
                  <APx initial={false}>
                    {open === i && (
                      <m.div
                        key="x"
                        initial={{ height: 0, opacity: 0 }}
                        animate={{ height: "auto", opacity: 1 }}
                        exit={{ height: 0, opacity: 0 }}
                        transition={{ duration: 0.4, ease: EASE_EXPO }}
                        style={{ overflow: "hidden" }}
                      >
                        <p className="pb-5 pr-8 text-primary/65 text-sm md:text-base leading-relaxed max-w-2xl">{it.a}</p>
                      </m.div>
                    )}
                  </APx>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   FINAL CTA
============================================================ */
function FinalCTA() {
  const [email, setEmail] = uS("");
  const [submitted, setSubmitted] = uS(false);
  return (
    <section id="cta" className="relative bg-[#070B1F] px-5 md:px-8 py-24 md:py-36 overflow-hidden">
      {/* Drifting background orbs */}
      <div className="absolute inset-0 pointer-events-none">
        <div className="bob absolute top-10 left-[10%] w-32 h-32 rounded-full" style={{ background: "radial-gradient(circle, rgba(255,107,115,0.25), transparent 70%)", filter: "blur(30px)" }} />
        <div className="bob-delay absolute bottom-10 right-[15%] w-40 h-40 rounded-full" style={{ background: "radial-gradient(circle, rgba(255,130,137,0.22), transparent 70%)", filter: "blur(30px)" }} />
      </div>
      <div className="max-w-7xl 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-20 md:py-32 text-center">
          <div className="absolute inset-0 mesh"><div className="blob" /></div>
          <div className="absolute inset-0 noise-overlay opacity-30 mix-blend-overlay pointer-events-none" />
          <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/70 pointer-events-none" />

          <div className="relative">
            <FadeUp><div className="eyebrow-orange mb-7">Early access</div></FadeUp>
            <WordsPullUpMultiStyle
              justify="center"
              className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl text-primary leading-[0.98] max-w-4xl mx-auto"
              segments={[
                { text: "Cria a tua assistente",          className: "font-normal" },
                { text: "virtual",                         className: "serif italic font-normal text-orange" },
                { text: "e capta leads com mais contexto.", className: "font-normal" },
              ]}
            />
            <FadeUp delay={0.5}>
              <p className="mt-7 max-w-xl mx-auto text-primary/65 text-sm md:text-base leading-relaxed">
                Estamos a abrir acesso antecipado para pequenos negócios que querem
                responder melhor, recolher informação útil e organizar leads sem
                depender de integrações complexas.
              </p>
            </FadeUp>

            <FadeUp delay={0.7}>
              <form
                onSubmit={(e) => { e.preventDefault(); if (email) setSubmitted(true); }}
                className="mt-10 mx-auto max-w-md flex flex-col sm:flex-row gap-2 items-stretch"
              >
                {!submitted ? (
                  <>
                    <input
                      type="email"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      required
                      placeholder="o-teu-email@negocio.com"
                      className="flex-1 input-dark rounded-full px-5 py-3 text-sm"
                    />
                    <button
                      type="submit"
                      className="group inline-flex items-center justify-center gap-2 hover:gap-3 transition-all btn-coral rounded-full pl-5 pr-1.5 py-1.5 text-sm font-medium"
                    >
                      Pedir acesso
                      <span className="inline-flex items-center justify-center bg-[#070B1F]/30 text-white rounded-full w-9 h-9 group-hover:scale-110 transition-transform">
                        <IconArrowRight className="w-4 h-4" />
                      </span>
                    </button>
                  </>
                ) : (
                  <div className="mx-auto px-6 py-3 rounded-full bg-emerald-500/15 text-emerald-300 text-sm flex items-center gap-2">
                    <IconCheck className="w-4 h-4" />
                    Estás na lista. Avisamos quando o acesso abrir.
                  </div>
                )}
              </form>
            </FadeUp>

            <FadeUp delay={0.85}>
              <div className="mt-6 text-xs text-primary/40">
                Sem spam. Usamos o teu email apenas para falar sobre o acesso ao Captixy.
              </div>
            </FadeUp>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   ASSEMBLE
============================================================ */
function App() {
  return (
    <>
      <Hero />
      <Ticker />
      <Manifesto />
      <LivePulse />
      <ProductDemo />
      <HowItWorks />
      <Features />
      <Pricing />
      <FAQ />
      <FinalCTA />
      <Footer />
    </>
  );
}

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

Object.assign(window, { Pricing });