/* Components for Axious redesign — premium SaaS style.
   Each component is annotated with the Framer Motion equivalent so the
   team can port these to <motion.* /> primitives with whileInView+initial+animate. */

const { motion } = window;  // placeholder slot; we use our Reveal/Magnetic instead.

/* ─────────────────────────────────────────────────────────────────
   NAV — sticky bar that shrinks + gains a subtle glassy border on scroll.
   Framer: useScroll() + useTransform on padding / backgroundColor.
   ───────────────────────────────────────────────────────────────── */
function Nav({ onPortal }) {
  const y = useScrollY();
  const scrolled = y > 24;
  const links = [
    { href: "#services", label: "Services" },
    { href: "#work", label: "Work" },
    { href: "#packages", label: "Packages" },
    { href: "#process", label: "Process" },
    { href: "#faq", label: "FAQ" },
    { href: "xpression.html", label: "Xpression" },
  ];
  const [hovered, setHovered] = useState(null);
  return (
    <header
      className="fixed top-0 left-0 right-0 z-50 ax-nav-bar"
      style={{
        transition: `padding 0.4s ${EASE_OUT}, background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease`,
        padding: scrolled ? "10px 0" : "20px 0",
        background: scrolled ? "rgba(255,255,255,0.78)" : "rgba(255,255,255,0)",
        backdropFilter: scrolled ? "blur(18px) saturate(140%)" : "none",
        WebkitBackdropFilter: scrolled ? "blur(18px) saturate(140%)" : "none",
        borderBottom: `1px solid ${scrolled ? "rgba(0,0,0,0.06)" : "rgba(0,0,0,0)"}`,
        boxShadow: scrolled ? "0 1px 24px rgba(0,0,0,0.04)" : "none",
      }}
    >
      <div className="max-w-7xl mx-auto px-6 flex items-center justify-between">
        <a href="#top" className="flex items-center gap-2.5 group" aria-label="Axious Creative Studio home">
          <Lockup size={scrolled ? "sm" : "md"} />
        </a>

        <nav
          className="hidden md:flex items-center gap-1 px-1.5 py-1.5 rounded-full ax-nav-pill"
          style={{
            background: scrolled ? "transparent" : "rgba(255,255,255,0.65)",
            border: `1px solid ${scrolled ? "transparent" : "rgba(0,0,0,0.06)"}`,
            backdropFilter: scrolled ? "none" : "blur(8px)",
            transition: `background 0.4s ease, border-color 0.4s ease`,
          }}
          onMouseLeave={() => setHovered(null)}
        >
          {links.map((l, i) => (
            <a
              key={l.href}
              href={l.href}
              onMouseEnter={() => setHovered(i)}
              className="relative px-3.5 py-1.5 text-[12.5px] tracking-[0.06em] uppercase font-medium"
              style={{
                fontFamily: "'Roboto Mono', monospace",
                color: hovered === i ? "var(--accent)" : "var(--text)",
                transition: `color 0.25s ease`,
                zIndex: 1,
              }}
            >
              {hovered === i && (
                <span
                  aria-hidden
                  style={{
                    position: "absolute",
                    inset: 0,
                    background: "rgba(249,115,22,0.08)",
                    borderRadius: 999,
                    zIndex: -1,
                    transition: `all 0.35s ${EASE_OUT}`,
                  }}
                />
              )}
              <span>{l.label}</span>
            </a>
          ))}
        </nav>

        <div className="flex items-center gap-2">
          <a
            href="call-us.html"
            className="hidden md:inline-flex text-[12.5px] tracking-[0.06em] uppercase font-medium px-3 py-2"
            style={{ fontFamily: "'Roboto Mono', monospace", color: "var(--text-secondary)", transition: "color 0.25s ease" }}
            onMouseEnter={(e) => { e.currentTarget.style.color = "var(--accent)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-secondary)"; }}
          >
            Call us
          </a>
          <a
            href="login.html"
            className="hidden sm:inline-flex text-[12.5px] tracking-[0.06em] uppercase font-medium px-3 py-2"
            style={{ fontFamily: "'Roboto Mono', monospace", color: "var(--text-secondary)" }}
          >
            Client portal
          </a>
          <Magnetic strength={0.18}>
            <a
              href="#quote"
              className="inline-flex items-center gap-1.5 rounded-full px-4 py-2.5 text-[12.5px] tracking-[0.07em] uppercase font-bold text-white"
              style={{
                background: "var(--accent)",
                transition: `box-shadow 0.4s ease, transform 0.3s ${EASE_OUT}`,
                boxShadow: "0 8px 22px -10px rgba(249,115,22,0.6), inset 0 0 0 1px rgba(255,255,255,0.12)",
              }}
            >
              Get a quote
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
          </Magnetic>
        </div>
      </div>
    </header>
  );
}

/* ─────────────────────────────────────────────────────────────────
   HERO — animated grain + slow gradient glow, parallax orb, SplitText title.
   ───────────────────────────────────────────────────────────────── */
function Hero({ variant = "split" }) {
  const reduced = prefersReducedMotion();
  return (
    <section id="top" className="relative overflow-hidden pt-32 pb-24 md:pt-44 md:pb-32">
      {/* Subtle dot grid */}
      <div aria-hidden className="absolute inset-0 pointer-events-none">
        <div
          style={{
            position: "absolute",
            inset: 0,
            opacity: 0.5,
            backgroundImage: "radial-gradient(circle, rgba(0,0,0,0.07) 1px, transparent 1px)",
            backgroundSize: "22px 22px",
            maskImage: "radial-gradient(circle at 50% 30%, black 0%, transparent 70%)",
            WebkitMaskImage: "radial-gradient(circle at 50% 30%, black 0%, transparent 70%)",
          }}
        />
      </div>

      <div className="relative max-w-7xl mx-auto px-6">
        {/* Eyebrow */}
        <Reveal y={14} duration={0.6}>
          <div className="flex items-center justify-center gap-3 mb-8">
            <span
              className="inline-flex items-center gap-2 rounded-full pl-1.5 pr-3 py-1 ax-eyebrow"
              style={{
                background: "rgba(255,255,255,0.7)",
                border: "1px solid rgba(0,0,0,0.06)",
                backdropFilter: "blur(10px)",
                fontFamily: "'Roboto Mono', monospace",
                fontSize: 11.5,
                letterSpacing: "0.08em",
              }}
            >
              <span
                className="inline-flex h-5 items-center gap-1 rounded-full px-2 text-white"
                style={{ background: "var(--accent)", fontSize: 10, fontWeight: 700 }}
              >
                <span style={{
                  width: 5, height: 5, borderRadius: "50%", background: "#fff",
                  boxShadow: "0 0 0 0 rgba(255,255,255,0.6)",
                  animation: reduced ? "none" : "ax-pulse 2s ease-out infinite",
                }} />
                LIVE
              </span>
              <span style={{ color: "var(--text-secondary)" }}>3 spots open · May 2026</span>
            </span>
          </div>
        </Reveal>

        {/* Heading */}
        <h1
          className="text-center mx-auto"
          style={{
            fontFamily: "'Crimson Text', Georgia, serif",
            fontWeight: 400,
            fontSize: "clamp(3rem, 8.4vw, 7.5rem)",
            lineHeight: 0.94,
            letterSpacing: "-0.035em",
            maxWidth: 1100,
          }}
        >
          <LineReveal lines={["Hand-built websites", "that mean business."]} delay={0.1} stagger={0.14} />
        </h1>

        {/* Sub */}
        <BlurReveal delay={0.9} duration={0.8}>
          <p
            className="text-center mx-auto mt-7"
            style={{
              maxWidth: 620,
              fontSize: "clamp(1rem, 1.4vw, 1.18rem)",
              lineHeight: 1.55,
              color: "var(--text-secondary)",
            }}
          >
            5-star rated Cape Town studio. Custom hand-coded websites from R2,499 — no WordPress, no templates. AI chatbots, e-commerce, POS systems &amp; SEO.
          </p>
        </BlurReveal>

        {/* CTA cluster */}
        <SpringReveal delay={1.1}>
          <div className="mt-9 flex flex-col sm:flex-row items-center justify-center gap-3">
            <Magnetic strength={0.22}>
              <a
                href="#elvis"
                className="group relative inline-flex items-center gap-2 rounded-full px-6 py-3.5 text-[13px] tracking-[0.07em] uppercase font-bold text-white overflow-hidden"
                style={{
                  background: "var(--accent)",
                  boxShadow: "0 14px 38px -12px rgba(249,115,22,0.6), inset 0 0 0 1px rgba(255,255,255,0.12)",
                  transition: `transform 0.35s ${EASE_OUT}, box-shadow 0.4s ease`,
                }}
              >
                <span className="relative z-10">Free quote in 2 min</span>
                <svg className="relative z-10" width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                {/* shimmer */}
                <span
                  aria-hidden
                  style={{
                    position: "absolute", top: 0, bottom: 0, left: "-30%", width: "40%",
                    background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent)",
                    transform: "skewX(-22deg)",
                    animation: reduced ? "none" : "ax-shimmer 3.4s ease-in-out infinite",
                  }}
                />
              </a>
            </Magnetic>
            <a
              href="#work"
              className="group inline-flex items-center gap-2 rounded-full px-5 py-3.5 text-[13px] tracking-[0.07em] uppercase font-bold"
              style={{
                color: "var(--text)",
                border: "1.5px solid rgba(0,0,0,0.08)",
                transition: `border-color 0.3s ease, color 0.3s ease, background 0.3s ease`,
              }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--accent)"; e.currentTarget.style.color = "var(--accent)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = "rgba(0,0,0,0.08)"; e.currentTarget.style.color = "var(--text)"; }}
            >
              See the work
              <span className="inline-flex items-center justify-center w-5 h-5 rounded-full" style={{ background: "rgba(0,0,0,0.05)" }}>
                <svg width="10" height="10" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </span>
            </a>
          </div>
        </SpringReveal>

        {/* Trust strip */}
        <BlurReveal delay={1.3} duration={0.8}>
          <div className="mt-12 flex flex-wrap items-center justify-center gap-x-8 gap-y-3" style={{ fontFamily: "'Roboto Mono', monospace", fontSize: 11.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-muted)" }}>
            <span className="inline-flex items-center gap-1.5">
              <Stars n={5} />
              <span>5.0 · Google &amp; Facebook</span>
            </span>
            <span>·</span>
            <span>Hand-coded — no WordPress</span>
            <span>·</span>
            <span>From R2,499</span>
            <span>·</span>
            <span>Free quote in 2 min</span>
          </div>
        </BlurReveal>

        {/* Animated counters */}
        <StatsStrip />

      </div>
    </section>
  );
}

function Stars({ n = 5 }) {
  return (
    <span className="inline-flex items-center gap-0.5">
      {Array.from({ length: n }).map((_, i) => (
        <svg key={i} width="11" height="11" viewBox="0 0 24 24" fill="var(--accent)"><path d="M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7.1L12 17.6 5.7 21.3 7.4 14.2 2 9.5l7.1-.6L12 2z"/></svg>
      ))}
    </span>
  );
}


/* ─────────────────────────────────────────────────────────────────
   MARQUEE — infinite logo / keyword strip
   ───────────────────────────────────────────────────────────────── */
function Marquee({ items, speed = 40 }) {
  const doubled = [...items, ...items];
  return (
    <div
      className="relative overflow-hidden py-4"
      style={{
        borderTop: "1px solid var(--border)",
        borderBottom: "1px solid var(--border)",
        maskImage: "linear-gradient(90deg, transparent, black 8%, black 92%, transparent)",
        WebkitMaskImage: "linear-gradient(90deg, transparent, black 8%, black 92%, transparent)",
      }}
    >
      <div
        style={{
          display: "flex",
          gap: 48,
          whiteSpace: "nowrap",
          animation: prefersReducedMotion() ? "none" : `ax-marquee ${speed}s linear infinite`,
        }}
      >
        {doubled.map((it, i) => (
          <span key={i} style={{ fontFamily: "'Roboto Mono', monospace", fontSize: 12.5, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-muted)" }}>
            ◆&nbsp;&nbsp;{it}
          </span>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Hero, Stars, Marquee });