// ================== icons.jsx ==================
// Minimal stroke icon set — thin, geometric, automotive-blueprint vibe.
// Each icon: 24×24 viewBox, stroke="currentColor", strokeWidth 1.4.

const Icon = ({ children, size = 18, className = "", stroke = 1.4, ...rest }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={stroke}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    {...rest}
  >
    {children}
  </svg>
);

const IArrow = (p) => (
  <Icon {...p}>
    <path d="M5 12h14" />
    <path d="M13 6l6 6-6 6" />
  </Icon>
);
const IArrowUpRight = (p) => (
  <Icon {...p}>
    <path d="M7 17L17 7" />
    <path d="M8 7h9v9" />
  </Icon>
);
const ICheck = (p) => (
  <Icon {...p}>
    <path d="M4 12.5l4.5 4.5L20 6.5" />
  </Icon>
);
const IDot = ({ size = 8, className = "" }) => (
  <span
    className={"inline-block rounded-full " + className}
    style={{ width: size, height: size }}
  />
);
const IPlus = (p) => (
  <Icon {...p}>
    <path d="M12 5v14M5 12h14" />
  </Icon>
);
const IMinus = (p) => (
  <Icon {...p}>
    <path d="M5 12h14" />
  </Icon>
);
const ICar = (p) => (
  <Icon {...p}>
    <path d="M3 13l2-5a3 3 0 0 1 2.8-2h8.4A3 3 0 0 1 19 8l2 5" />
    <path d="M2 13h20v5a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1H6v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-5z" />
    <circle cx="7" cy="16.5" r="1.2" />
    <circle cx="17" cy="16.5" r="1.2" />
  </Icon>
);
const ISpark = (p) => (
  <Icon {...p}>
    <path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5L18 18M6 18l2.5-2.5M15.5 8.5L18 6" />
  </Icon>
);
const IChart = (p) => (
  <Icon {...p}>
    <path d="M4 20V10M10 20V4M16 20v-8M22 20H2" />
  </Icon>
);
const IUsers = (p) => (
  <Icon {...p}>
    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
    <circle cx="9" cy="7" r="3.2" />
    <path d="M22 21v-2a4 4 0 0 0-3-3.9" />
    <path d="M16 3.2A4 4 0 0 1 16 11" />
  </Icon>
);
const IGlobe = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="9" />
    <path d="M3 12h18M12 3a13 13 0 0 1 0 18M12 3a13 13 0 0 0 0 18" />
  </Icon>
);
const ILayers = (p) => (
  <Icon {...p}>
    <path d="M12 3l9 5-9 5-9-5 9-5z" />
    <path d="M3 13l9 5 9-5M3 17l9 5 9-5" />
  </Icon>
);
const IShield = (p) => (
  <Icon {...p}>
    <path d="M12 3l8 3v6c0 4.5-3.4 8.4-8 9-4.6-.6-8-4.5-8-9V6l8-3z" />
  </Icon>
);
const IBolt = (p) => (
  <Icon {...p}>
    <path d="M13 3L4 14h7l-1 7 9-11h-7l1-7z" />
  </Icon>
);
const IPhone = (p) => (
  <Icon {...p}>
    <rect x="6" y="2" width="12" height="20" rx="2.5" />
    <path d="M10 18h4" />
  </Icon>
);
const IMonitor = (p) => (
  <Icon {...p}>
    <rect x="2.5" y="3.5" width="19" height="13" rx="2" />
    <path d="M8 20.5h8M12 17v3.5" />
  </Icon>
);
const ICRM = (p) => (
  <Icon {...p}>
    <rect x="3" y="4" width="18" height="16" rx="2" />
    <path d="M3 9h18M8 14h3M8 17h6" />
    <circle cx="15" cy="14" r="1.2" />
  </Icon>
);
const IInbox = (p) => (
  <Icon {...p}>
    <path d="M3 13l3-8h12l3 8" />
    <path d="M3 13v6a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-6h-6a3 3 0 0 1-6 0H3z" />
  </Icon>
);
const IDomain = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="9" />
    <path d="M3 12h18" />
    <path d="M12 3c2.5 3 4 6 4 9s-1.5 6-4 9c-2.5-3-4-6-4-9s1.5-6 4-9z" />
  </Icon>
);
const ITemplate = (p) => (
  <Icon {...p}>
    <rect x="3" y="3" width="18" height="18" rx="2" />
    <path d="M3 8h18M8 21V8" />
  </Icon>
);
const IMenu = (p) => (
  <Icon {...p}>
    <path d="M3 7h18M3 12h18M3 17h18" />
  </Icon>
);
const IX = (p) => (
  <Icon {...p}>
    <path d="M6 6l12 12M6 18L18 6" />
  </Icon>
);
const ITag = (p) => (
  <Icon {...p}>
    <path d="M20 12.5L12.5 20a1.5 1.5 0 0 1-2 0L3 12.5V3h9.5L20 10.5a1.5 1.5 0 0 1 0 2z" />
    <circle cx="7.5" cy="7.5" r="1.2" />
  </Icon>
);

// Platform glyphs (geometric placeholders — not the real brand marks)
const PlatformFB = ({ size = 22 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="none">
    <rect x="2" y="2" width="20" height="20" rx="5" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.18)" />
    <path d="M14 8.5h2V6h-2.2c-1.5 0-2.8 1.1-2.8 2.7V11H9v2.5h2V20h2.5v-6.5H16L16.5 11h-3V9.2c0-.4.3-.7.7-.7z" fill="#E8E8E6" />
  </svg>
);
const PlatformIG = ({ size = 22 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="none">
    <rect x="2" y="2" width="20" height="20" rx="6" stroke="#E8E8E6" strokeWidth="1.4" />
    <circle cx="12" cy="12" r="4" stroke="#E8E8E6" strokeWidth="1.4" />
    <circle cx="17.5" cy="6.5" r="1" fill="#E8E8E6" />
  </svg>
);
const PlatformR5 = ({ size = 22 }) => (
  <div
    style={{ width: size, height: size }}
    className="rounded-md bg-[#1A1A1E] border border-white/10 flex items-center justify-center font-mono text-[10px] text-ink-100"
  >
    R5
  </div>
);
const PlatformP3 = ({ size = 22 }) => (
  <div
    style={{ width: size, height: size }}
    className="rounded-md bg-[#1A1A1E] border border-white/10 flex items-center justify-center font-mono text-[10px] text-ink-100"
  >
    P3
  </div>
);

Object.assign(window, {
  Icon, IArrow, IArrowUpRight, ICheck, IDot, IPlus, IMinus, ICar, ISpark,
  IChart, IUsers, IGlobe, ILayers, IShield, IBolt, IPhone, IMonitor,
  ICRM, IInbox, IDomain, ITemplate, IMenu, IX, ITag,
  PlatformFB, PlatformIG, PlatformR5, PlatformP3,
});


// ================== primitives.jsx ==================
// Shared primitives: layout containers, eyebrows, buttons, section headers.

const { motion, AnimatePresence, useInView } = window.framerMotion || window.FramerMotion || {};

const cn = (...xs) => xs.filter(Boolean).join(" ");

// Container with consistent gutter
const Container = ({ className = "", children, ...rest }) => (
  <div className={cn("mx-auto w-full max-w-[1280px] px-6 md:px-10", className)} {...rest}>
    {children}
  </div>
);

// Section wrapper with vertical rhythm + optional eyebrow + label.
// Premium polish: a centered hairline gradient at the very top of every
// section gives the page a quiet structural rhythm. Pure white with no
// lime accent — the calmer treatment reads as luxury SaaS instead of
// neon-y. Pointer events off so the line never intercepts clicks.
const Section = ({ id, children, className = "", label, n }) => (
  <section
    id={id}
    data-screen-label={label}
    className={cn("relative py-16 md:py-32", className)}
  >
    <div
      aria-hidden
      className="pointer-events-none absolute inset-x-0 top-0 h-px"
      style={{
        background:
          "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 35%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.05) 65%, transparent 100%)",
      }}
    />
    {children}
  </section>
);

// Tiny monospaced eyebrow ("§ 03 / How it works")
const Eyebrow = ({ index, children, className = "" }) => (
  <div
    className={cn(
      "flex items-center gap-3 font-mono text-[11px] uppercase tracking-[0.18em] text-ink-300",
      className
    )}
  >
    {index && <span className="text-lime">§ {index}</span>}
    <span className="h-px w-6 bg-white/15" />
    <span>{children}</span>
  </div>
);

// Big editorial section title
const SectionTitle = ({ children, className = "" }) => (
  <h2
    className={cn(
      "text-balance text-[clamp(28px,7vw,64px)] leading-[1.06] tracking-tightest font-medium text-ink-50 md:leading-[1.02]",
      className
    )}
  >
    {children}
  </h2>
);

const SectionLead = ({ children, className = "" }) => (
  <p className={cn("max-w-xl text-pretty text-[15px] leading-[1.55] text-ink-300", className)}>
    {children}
  </p>
);

// Buttons — render as <a> when href is passed (so the landing CTAs can
// link straight to /signup without a wrapper anchor); fall back to
// <button> for in-page actions like form submits.
// Premium calm: lime CTA stays the loudest element on the page, but the
// glow halo is dialed down (was 0.55 / 0.7) so it reads "solid premium"
// instead of "neon button". Min-h-[44px] guarantees a thumb-sized target
// even when we override padding for compact contexts (e.g. mobile sticky).
const ButtonPrimary = ({ children, className = "", href, ...rest }) => {
  const Tag = href ? "a" : "button";
  const tagProps = href ? { href } : rest;
  return (
    <Tag
      {...tagProps}
      className={cn(
        "group inline-flex min-h-[44px] items-center gap-2 rounded-full bg-lime px-5 py-3 text-[14px] font-medium text-ink-950",
        "shadow-[0_8px_24px_-14px_rgba(207,242,85,0.42),inset_0_1px_0_rgba(255,255,255,0.32)]",
        "transition-[transform,box-shadow] duration-300 ease-out hover:-translate-y-[1px] active:translate-y-0",
        "hover:shadow-[0_14px_36px_-16px_rgba(207,242,85,0.55),inset_0_1px_0_rgba(255,255,255,0.42)]",
        className
      )}
    >
      {children}
      <span className="grid place-items-center transition-transform group-hover:translate-x-0.5">
        <IArrow size={14} stroke={1.8} />
      </span>
    </Tag>
  );
};

const ButtonGhost = ({ children, className = "", href, ...rest }) => {
  const Tag = href ? "a" : "button";
  const tagProps = href ? { href } : rest;
  return (
    <Tag
      {...tagProps}
      className={cn(
        "group inline-flex min-h-[44px] items-center gap-2 rounded-full border border-white/10 bg-white/[0.025] px-5 py-3 text-[14px] font-medium text-ink-100",
        "transition-colors duration-300 hover:bg-white/[0.05] hover:border-white/20 active:bg-white/[0.06]",
        className
      )}
    >
      {children}
    </Tag>
  );
};

// Tag / pill
const Pill = ({ children, className = "", dot = false, tone = "default" }) => {
  const tones = {
    default: "border-white/10 bg-white/[0.03] text-ink-200",
    lime: "border-lime/30 bg-lime/[0.08] text-lime",
    soft: "border-white/8 bg-black/20 text-ink-300",
  };
  return (
    <span
      className={cn(
        "inline-flex items-center gap-2 rounded-full border px-2.5 py-1 font-mono text-[11px] uppercase tracking-[0.12em]",
        tones[tone],
        className
      )}
    >
      {dot && <span className="block h-1.5 w-1.5 rounded-full bg-current" />}
      {children}
    </span>
  );
};

// Card – core glass surface
const Card = ({ children, className = "", ...rest }) => (
  <div
    {...rest}
    className={cn("relative rounded-2xl glass overflow-hidden", className)}
  >
    {children}
  </div>
);

// Scroll-reveal fade-up wrapper using IntersectionObserver
const Reveal = ({ children, delay = 0, className = "", as: As = "div" }) => {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            setShown(true);
            io.disconnect();
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -60px 0px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <As
      ref={ref}
      style={{
        transitionDelay: delay + "ms",
        transform: shown ? "translateY(0)" : "translateY(16px)",
        opacity: shown ? 1 : 0,
        transition: "transform 800ms cubic-bezier(0.22, 1, 0.36, 1), opacity 800ms cubic-bezier(0.22, 1, 0.36, 1)",
      }}
      className={className}
    >
      {children}
    </As>
  );
};

// Dashed divider
const Divider = ({ className = "" }) => (
  <div className={cn("relative h-px w-full", className)}>
    <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
  </div>
);

// Subtle "system" badge — used to brand the product as an OS
const SystemBadge = ({ children, className = "" }) => (
  <span
    className={cn(
      "inline-flex items-center gap-1.5 rounded-md border border-white/8 bg-white/[0.02] px-2 py-0.5 font-mono text-[10px] uppercase tracking-[0.16em] text-ink-300",
      className
    )}
  >
    <span className="h-1 w-1 rounded-full bg-lime" />
    {children}
  </span>
);

// Stat counter that animates from 0 -> value when visible
function useCountUp(target, duration = 1400) {
  const ref = React.useRef(null);
  const [v, setV] = React.useState(0);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let started = false;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting && !started) {
            started = true;
            const start = performance.now();
            const animate = (now) => {
              const t = Math.min(1, (now - start) / duration);
              const eased = 1 - Math.pow(1 - t, 3);
              setV(target * eased);
              if (t < 1) requestAnimationFrame(animate);
            };
            requestAnimationFrame(animate);
            io.disconnect();
          }
        });
      },
      { threshold: 0.4 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [target]);
  return [ref, v];
}

const CountUp = ({ to, format = (v) => Math.round(v).toLocaleString("mk-MK"), className = "" }) => {
  const [ref, v] = useCountUp(to);
  return (
    <span ref={ref} className={className}>
      {format(v)}
    </span>
  );
};

Object.assign(window, {
  cn,
  Container,
  Section,
  Eyebrow,
  SectionTitle,
  SectionLead,
  ButtonPrimary,
  ButtonGhost,
  Pill,
  Card,
  Reveal,
  Divider,
  SystemBadge,
  CountUp,
});


// ================== hero.jsx ==================
// HERO — left: editorial headline; right: looping product narrative
// (Vehicle → 4 platforms → Published → Lead notification)

const { motion: M, AnimatePresence: AP } = window.framerMotion;

// ---------- Animated product panel ----------
const PLATFORMS = [
  { key: "fb", label: "Facebook Marketplace", Logo: PlatformFB, time: 0.9 },
  { key: "ig", label: "Instagram", Logo: PlatformIG, time: 1.4 },
  { key: "r5", label: "Реклама5", Logo: PlatformR5, time: 1.9 },
  { key: "p3", label: "Pazar3", Logo: PlatformP3, time: 2.4 },
];

function useHeroCycle() {
  // step: 0=idle, 1=car-in, 2=channels-shown, 3=published, 4=lead-in
  const [step, setStep] = React.useState(0);
  const [cycle, setCycle] = React.useState(0); // forces re-mount on each loop
  React.useEffect(() => {
    let timers = [];
    const run = () => {
      setStep(0);
      timers.push(setTimeout(() => setStep(1), 250));
      timers.push(setTimeout(() => setStep(2), 1400));
      timers.push(setTimeout(() => setStep(3), 2600));
      timers.push(setTimeout(() => setStep(4), 4400));
      timers.push(
        setTimeout(() => {
          setCycle((c) => c + 1);
        }, 7200)
      );
    };
    run();
    return () => timers.forEach(clearTimeout);
  }, [cycle]);
  return { step, cycle };
}

const CarPhotoPlaceholder = () => (
  <div className="relative h-[124px] w-full overflow-hidden rounded-lg border border-white/8 bg-ink-800">
    {/* Real Audi A6 photo (Higgsfield GPT Image 2) */}
    <img
      src="assets/car-audi-a6.webp"
      alt="Audi A6 45 TFSI 2021"
      className="absolute inset-0 h-full w-full object-cover"
    />
    {/* Subtle vignette so the card stays brand-dark */}
    <div
      aria-hidden
      className="pointer-events-none absolute inset-0"
      style={{ background: "linear-gradient(180deg, rgba(7,8,10,0.20) 0%, rgba(7,8,10,0.55) 100%)" }}
    />
    {/* Photo counter label */}
    <div className="absolute left-3 top-3 flex items-center gap-1.5 font-mono text-[9.5px] uppercase tracking-[0.18em] text-ink-100">
      <span className="block h-1 w-1 rounded-full bg-lime" /> Audi A6 · 2021 · Photo 01/12
    </div>
    {/* Scan sweep — keeps the "scanning a fresh upload" feel */}
    <div
      className="absolute inset-y-0 w-1/3 -translate-x-[120%]"
      style={{ animation: "sweep 5.5s ease-in-out infinite", background: "linear-gradient(90deg, transparent, rgba(207,242,85,0.22), transparent)" }}
    />
  </div>
);

const SpecRow = ({ k, v }) => (
  <div className="flex items-center justify-between border-t border-white/[0.06] py-1.5 first:border-t-0">
    <span className="font-mono text-[10.5px] uppercase tracking-[0.14em] text-ink-300">{k}</span>
    <span className="text-[12px] tabular-nums text-ink-100">{v}</span>
  </div>
);

const PlatformRow = ({ p, step, idx }) => {
  // status by step:
  const published = step >= 3;
  const queued = step >= 2 && step < 3;
  return (
    <div
      style={{
        opacity: 1,
        transform: "translateY(0)",
        transitionProperty: "opacity, transform",
        transitionDuration: "500ms",
        transitionTimingFunction: "cubic-bezier(0.22, 1, 0.36, 1)",
        transitionDelay: (100 + idx * 80) + "ms",
        animation: "rowIn 600ms cubic-bezier(0.22, 1, 0.36, 1) both",
        animationDelay: (idx * 80) + "ms",
      }}
      className="flex items-center gap-3 rounded-lg border border-white/[0.05] bg-black/20 px-3 py-2.5"
    >
      <p.Logo />
      <div className="min-w-0 flex-1">
        <div className="truncate text-[12px] text-ink-100">{p.label}</div>
        <div className="font-mono text-[9.5px] uppercase tracking-[0.16em] text-ink-300">
          {published ? "Огласот објавен" : queued ? "Се подготвува огласот…" : "Spreman"}
        </div>
      </div>
      {/* Status indicator */}
      <div className="flex items-center gap-2">
        <div className="relative h-1 w-12 overflow-hidden rounded-full bg-white/5">
          <div
            className="absolute inset-y-0 left-0 bg-lime"
            style={{
              width: published ? "100%" : queued ? "78%" : "0%",
              transition: "width " + (published ? 600 : 1100) + "ms cubic-bezier(0.22, 1, 0.36, 1) " + (published ? idx * 120 : 0) + "ms",
            }}
          />
        </div>
        <span
          className={cn(
            "inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 font-mono text-[9.5px] uppercase tracking-[0.14em] transition-colors duration-300",
            published
              ? "border-lime/30 bg-lime/[0.08] text-lime"
              : "border-white/8 bg-white/[0.03] text-ink-300"
          )}
          style={{ transitionDelay: published ? idx * 120 + "ms" : "0ms" }}
        >
          <span
            className={cn(
              "block h-1 w-1 rounded-full",
              published ? "bg-lime pulse-dot" : "bg-ink-400"
            )}
          />
          {published ? "Објавено" : "Чекање"}
        </span>
      </div>
    </div>
  );
};

const HeroProductPanel = () => {
  const { step, cycle } = useHeroCycle();
  return (
    <div className="relative tilt-wrap">
      {/* Ambient lime glow */}
      <div
        aria-hidden
        className="pointer-events-none absolute -inset-10 -z-10 opacity-60"
        style={{
          background:
            "radial-gradient(60% 50% at 60% 50%, rgba(207,242,85,0.10), rgba(0,0,0,0) 70%)",
        }}
      />
      {/* Outer card */}
      <div className="tilt rounded-3xl border border-white/[0.08] bg-gradient-to-b from-white/[0.04] to-white/[0.012] p-2 shadow-[0_50px_120px_-30px_rgba(0,0,0,0.7)]">
        {/* Window chrome */}
        <div className="flex items-center justify-between rounded-t-2xl border-b border-white/[0.06] bg-white/[0.012] px-4 py-2.5">
          <div className="flex items-center gap-1.5">
            <span className="h-2.5 w-2.5 rounded-full bg-white/12" />
            <span className="h-2.5 w-2.5 rounded-full bg-white/12" />
            <span className="h-2.5 w-2.5 rounded-full bg-white/12" />
          </div>
          <div className="font-mono text-[10px] uppercase tracking-[0.18em] text-ink-300">
            dealerhub · inventory · add-vehicle
          </div>
          <div className="flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-[0.18em] text-ink-300">
            <span className="block h-1.5 w-1.5 rounded-full bg-lime pulse-dot" />
            Live
          </div>
        </div>

        {/* Two-column body */}
        <div className="grid grid-cols-12 gap-3 p-3">
          {/* Vehicle card */}
          <div className="col-span-7 rounded-xl border border-white/[0.06] bg-black/25 p-3">
            <div className="mb-2 flex items-center justify-between">
              <Pill tone="default">
                <span className="block h-1 w-1 rounded-full bg-lime" /> Ново возило
              </Pill>
              <span className="font-mono text-[10px] uppercase tracking-[0.16em] text-ink-300">#A6-218</span>
            </div>
            <div
              key={"car-" + cycle}
              style={{
                opacity: step >= 1 ? 1 : 0,
                transform: step >= 1 ? "translateY(0) scale(1)" : "translateY(-10px) scale(0.985)",
                transition: "opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1)",
              }}
            >
              <CarPhotoPlaceholder />
              <div className="mt-3 flex items-baseline justify-between">
                <div>
                  <div className="text-[15px] font-medium tracking-tight text-ink-50">Audi A6 45 TFSI</div>
                  <div className="font-mono text-[10px] uppercase tracking-[0.18em] text-ink-300">2021 · Sedan · S-line</div>
                </div>
                <div className="text-right">
                  <div className="text-[15px] tabular-nums text-ink-50">€ 38.900</div>
                  <div className="font-mono text-[10px] uppercase tracking-[0.18em] text-ink-300">+ ДДВ вкл.</div>
                </div>
              </div>
              <div className="mt-3 rounded-lg border border-white/[0.05] bg-white/[0.012] px-3 py-2">
                <SpecRow k="Километража" v="48,210 km" />
                <SpecRow k="Гориво" v="Дизел" />
                <SpecRow k="Менувач" v="Автоматик" />
                <SpecRow k="Боја" v="Mythos Black" />
              </div>
            </div>
          </div>

          {/* Channels column */}
          <div className="col-span-5 flex flex-col">
            <div className="mb-2 flex items-center justify-between">
              <div className="font-mono text-[10px] uppercase tracking-[0.18em] text-ink-300">Канали за објава</div>
              <Pill tone="lime" dot>
                <span>{step >= 3 ? "4/4" : step >= 2 ? "0/4" : "—"}</span>
              </Pill>
            </div>

            <div className="space-y-2">
              {PLATFORMS.map((p, i) =>
                step >= 2 ? (
                  <PlatformRow key={p.key + "-" + cycle} p={p} step={step} idx={i} />
                ) : (
                  <div
                    key={p.key + "-skel-" + cycle}
                    className="h-[44px] rounded-lg border border-dashed border-white/[0.06] bg-white/[0.01]"
                  />
                )
              )}
            </div>

            {/* Footer action */}
            <div className="mt-3 rounded-lg border border-white/[0.06] bg-white/[0.02] p-2">
              <div className="flex items-center justify-between">
                <div>
                  <div className="text-[11px] text-ink-100">Објави на 4 канали</div>
                  <div className="font-mono text-[9.5px] uppercase tracking-[0.16em] text-ink-300">
                    + сајт на салонот
                  </div>
                </div>
                <div
                  className={cn(
                    "rounded-md px-2.5 py-1.5 font-mono text-[10px] uppercase tracking-[0.16em] transition-colors",
                    step >= 2 ? "bg-lime text-ink-950" : "bg-white/5 text-ink-300"
                  )}
                >
                  {step >= 3 ? "Готово" : "⌘ + ↵ Објави"}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Lead notification — slides in over panel */}
      {step >= 4 && (
        <div
          key={"toast-" + cycle}
          style={{ animation: "toastIn 550ms cubic-bezier(0.22,1,0.36,1) both" }}
          className="absolute -right-2 -bottom-8 w-[300px] rounded-xl border border-lime/25 bg-ink-900/95 p-3 shadow-[0_24px_80px_-20px_rgba(0,0,0,0.8)] backdrop-blur"
        >
          <div className="flex items-start gap-3">
            <div className="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-lime/10 text-lime">
              <IInbox size={16} />
            </div>
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-2">
                <span className="font-mono text-[9.5px] uppercase tracking-[0.18em] text-lime">
                  Нов lead
                </span>
                <span className="font-mono text-[9.5px] uppercase tracking-[0.16em] text-ink-300">сега</span>
              </div>
              <div className="mt-0.5 text-[12.5px] text-ink-100">
                Стефан М. — заинтересиран за <span className="text-ink-50 font-medium">Audi A6</span>
              </div>
              <div className="mt-1 font-mono text-[9.5px] uppercase tracking-[0.16em] text-ink-300">
                Од: Facebook · одговор за &lt; 2 мин
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

// ---------- Mobile-specific compact mockup ----------
const MobileHeroMockup = () => {
  const { step, cycle } = useHeroCycle();
  return (
    <div className="relative mx-auto w-full max-w-[420px]">
      <div
        aria-hidden
        className="pointer-events-none absolute -inset-6 -z-10"
        style={{
          background:
            "radial-gradient(60% 50% at 50% 30%, rgba(207,242,85,0.10), rgba(0,0,0,0) 70%)",
        }}
      />
      {/* Phone-style frame */}
      <div className="rounded-[28px] border border-white/[0.08] bg-gradient-to-b from-white/[0.04] to-white/[0.012] p-2 shadow-[0_30px_80px_-20px_rgba(0,0,0,0.7)]">
        {/* App chrome */}
        <div className="flex items-center justify-between rounded-t-[22px] border-b border-white/[0.06] bg-white/[0.012] px-4 py-2.5">
          <div className="flex items-center gap-2">
            <span
              className="inline-grid h-5 w-5 place-items-center rounded text-ink-950"
              style={{ background: "#CFF255" }}
            >
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                <path d="M4 8l4-4h8l4 4v8l-4 4H8l-4-4z" />
                <path d="M9 12h6" />
              </svg>
            </span>
            <span className="text-[12px] text-ink-100">DealerHub</span>
          </div>
          <div className="flex items-center gap-1.5 font-mono text-[9.5px] uppercase tracking-[0.16em] text-ink-300">
            <span className="block h-1.5 w-1.5 rounded-full bg-lime pulse-dot" /> Live
          </div>
        </div>

        {/* Body */}
        <div className="space-y-3 p-3">
          {/* Vehicle card */}
          <div
            key={"mcar-" + cycle}
            style={{
              opacity: step >= 1 ? 1 : 0,
              transform: step >= 1 ? "translateY(0)" : "translateY(-8px)",
              transition: "opacity 600ms cubic-bezier(0.22,1,0.36,1), transform 600ms cubic-bezier(0.22,1,0.36,1)",
            }}
            className="rounded-xl border border-white/[0.06] bg-black/30 p-3"
          >
            <div className="mb-2 flex items-center justify-between">
              <Pill tone="default">
                <span className="block h-1 w-1 rounded-full bg-lime" /> Ново возило
              </Pill>
              <span className="font-mono text-[10px] uppercase tracking-[0.16em] text-ink-300">12 фотки</span>
            </div>
            <div className="relative h-[110px] overflow-hidden rounded-lg border border-white/[0.06] bg-ink-800">
              {/* Real Audi A6 photo */}
              <img
                src="assets/car-audi-a6.webp"
                alt="Audi A6 2.0 TDI 2021"
                className="absolute inset-0 h-full w-full object-cover"
              />
              <div
                aria-hidden
                className="pointer-events-none absolute inset-0"
                style={{ background: "linear-gradient(180deg, rgba(7,8,10,0.20) 0%, rgba(7,8,10,0.55) 100%)" }}
              />
              <div
                className="absolute inset-y-0 w-1/3 -translate-x-[120%]"
                style={{ animation: "sweep 5.5s ease-in-out infinite", background: "linear-gradient(90deg, transparent, rgba(207,242,85,0.22), transparent)" }}
              />
            </div>
            <div className="mt-3 flex items-baseline justify-between">
              <div>
                <div className="text-[15px] font-medium tracking-tight text-ink-50">Audi A6 2.0 TDI</div>
                <div className="font-mono text-[10px] uppercase tracking-[0.16em] text-ink-300">2021 · Дизел · 48.210 km</div>
              </div>
              <div className="text-[15px] tabular-nums text-ink-50">€ 18.900</div>
            </div>
          </div>

          {/* Channels */}
          <div className="rounded-xl border border-white/[0.06] bg-black/25 p-3">
            <div className="mb-2 flex items-center justify-between">
              <div className="font-mono text-[10px] uppercase tracking-[0.18em] text-ink-300">Објавува на</div>
              <Pill tone="lime" dot>
                {step >= 3 ? "4/4" : step >= 2 ? "0/4" : "—"}
              </Pill>
            </div>
            <div className="grid grid-cols-2 gap-2">
              {PLATFORMS.map((p, i) => {
                const published = step >= 3;
                return (
                  <div
                    key={p.key + "-m-" + cycle}
                    style={{
                      opacity: step >= 2 ? 1 : 0,
                      transform: step >= 2 ? "translateY(0)" : "translateY(6px)",
                      transition: "opacity 500ms cubic-bezier(0.22,1,0.36,1) " + (i * 80) + "ms, transform 500ms cubic-bezier(0.22,1,0.36,1) " + (i * 80) + "ms",
                    }}
                    className="flex items-center gap-2 rounded-lg border border-white/[0.06] bg-white/[0.02] p-2"
                  >
                    <p.Logo size={18} />
                    <div className="min-w-0 flex-1">
                      <div className="truncate text-[11.5px] text-ink-100">
                        {p.label.replace(" Marketplace", "")}
                      </div>
                      <div
                        className={cn(
                          "font-mono text-[9px] uppercase tracking-[0.14em] transition-colors duration-300",
                          published ? "text-lime" : "text-ink-300"
                        )}
                        style={{ transitionDelay: published ? i * 120 + "ms" : "0ms" }}
                      >
                        {published ? "Објавено" : "Чекање"}
                      </div>
                    </div>
                    <span
                      className={cn(
                        "block h-1.5 w-1.5 rounded-full transition-colors duration-300",
                        published ? "bg-lime pulse-dot" : "bg-white/20"
                      )}
                      style={{ transitionDelay: published ? i * 120 + "ms" : "0ms" }}
                    />
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>

      {/* Lead toast */}
      {step >= 4 && (
        <div
          key={"mtoast-" + cycle}
          style={{ animation: "toastIn 550ms cubic-bezier(0.22,1,0.36,1) both" }}
          className="absolute -bottom-6 left-3 right-3 rounded-2xl border border-lime/25 bg-ink-900/95 p-3 shadow-[0_24px_60px_-12px_rgba(0,0,0,0.7)] backdrop-blur"
        >
          <div className="flex items-center gap-3">
            <div className="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-lime/10 text-lime">
              <IInbox size={16} />
            </div>
            <div className="min-w-0 flex-1">
              <div className="font-mono text-[9.5px] uppercase tracking-[0.18em] text-lime">Нов lead</div>
              <div className="text-[13px] text-ink-100">
                Александар — заинтересиран за <span className="text-ink-50 font-medium">Audi A6</span>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

// ---------- Demo video modal ----------
const DemoModal = ({ open, onClose }) => {
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div
      onClick={onClose}
      className="fixed inset-0 z-[80] grid place-items-center bg-ink-950/85 p-4 backdrop-blur-xl md:p-8"
      style={{ animation: "rowIn 200ms ease-out both" }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        className="relative w-full max-w-[1100px] overflow-hidden rounded-2xl border border-white/[0.08] bg-ink-900 shadow-[0_40px_120px_-20px_rgba(0,0,0,0.9)]"
      >
        <button
          type="button"
          onClick={onClose}
          aria-label="Затвори"
          className="absolute right-3 top-3 z-10 grid h-9 w-9 place-items-center rounded-full border border-white/10 bg-black/60 text-ink-100 transition-colors hover:bg-black/80"
        >
          <IX size={14} />
        </button>
        <video
          src="assets/demo-flow.mp4"
          poster="assets/car-audi-a6.webp"
          controls
          autoPlay
          playsInline
          className="block h-auto w-full bg-black"
        />
      </div>
    </div>
  );
};

// ---------- Hero section ----------
const Hero = () => {
  const [demoOpen, setDemoOpen] = React.useState(false);
  return (
    <section data-screen-label="01 Hero" className="ambient-hero relative overflow-hidden">
      {/* Faint blueprint backdrop */}
      <div className="pointer-events-none absolute inset-0 opacity-[0.5]">
        <div className="absolute inset-0 blueprint [mask-image:radial-gradient(70%_60%_at_50%_30%,#000,transparent)]" />
      </div>

      <Container className="relative pt-20 pb-16 md:pt-36 md:pb-32">
        {/* Eyebrow / mobile badge — tighter mobile spacing so the headline
            sits higher above the fold on 360–430px screens. */}
        <div className="mb-6 flex flex-wrap items-center gap-2 md:mb-10 md:gap-3">
          <SystemBadge>v3.0 · 2026 release</SystemBadge>
          <span className="hidden font-mono text-[11px] uppercase tracking-[0.2em] text-ink-300 md:inline">
            Оперативен систем за авто салони
          </span>
          <span className="inline-flex items-center gap-2 rounded-full border border-white/[0.08] bg-white/[0.025] px-2.5 py-1 font-mono text-[10px] uppercase tracking-[0.14em] text-ink-200 md:hidden">
            Сајт · CRM · 4 канали
          </span>
        </div>

        <div className="grid grid-cols-1 items-center gap-10 lg:grid-cols-12 lg:gap-10">
          {/* Headline column */}
          <div className="lg:col-span-6">
            {/* 5-second value prop. Three short clauses that read as a
                single linear flow — внеси → објавува → следиш — so the
                dealer reads one sentence, not three. */}
            <h1 className="text-balance text-[clamp(34px,9vw,84px)] font-medium leading-[1.02] tracking-tightest text-ink-50 md:leading-[1.00]">
              Внеси возило{" "}
              <span className="display-serif text-lime">еднаш</span>.
              <br />
              Објави го{" "}
              <span className="display-serif">секаде</span>.
              <br />
              Следи ги <span className="display-serif text-ink-100">купците</span>.
            </h1>

            <p className="mt-5 max-w-[520px] text-pretty text-[15.5px] leading-[1.55] text-ink-200 md:mt-7 md:text-[17px]">
              Сајт за салонот, автоматско објавување на Facebook,
              Instagram, Реклама5, Pazar3 — и CRM каде ги следиш сите
              купци на едно место.
            </p>

            <div className="mt-7 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center md:mt-9">
              <ButtonPrimary href="/signup" className="min-h-[48px] justify-center px-6 text-[15px] sm:justify-start">
                Започни сега
              </ButtonPrimary>
              <ButtonGhost
                className="min-h-[48px] justify-center px-6 text-[15px] sm:justify-start"
                onClick={() => setDemoOpen(true)}
              >
                Види како работи
              </ButtonGhost>
            </div>
            <DemoModal open={demoOpen} onClose={() => setDemoOpen(false)} />

            {/* Trust badges — calmer treatment: white check icons (not
                lime) so the only loud lime in the hero is the primary CTA. */}
            <div className="mt-7 grid grid-cols-2 gap-x-5 gap-y-3 font-mono text-[10.5px] uppercase tracking-[0.14em] text-ink-300 sm:flex sm:flex-wrap sm:items-center sm:text-[11px] md:mt-9 md:tracking-[0.16em]">
              {[
                "Без картичка",
                "Готов сајт за 15 мин.",
                "Поддршка на МК",
                "За авто салони",
              ].map((t) => (
                <span key={t} className="inline-flex items-center gap-2">
                  <ICheck size={12} stroke={2} className="text-ink-200" />
                  {t}
                </span>
              ))}
            </div>
          </div>

          {/* Product panel column */}
          <div className="lg:col-span-6">
            <div className="hidden lg:block">
              <HeroProductPanel />
            </div>
            <div className="lg:hidden">
              <MobileHeroMockup />
            </div>
          </div>
        </div>
      </Container>

      {/* Logo / platform strip */}
      <Container className="relative pb-12">
        <div className="flex flex-col items-start gap-5 border-t border-white/[0.06] pt-8 md:flex-row md:items-center md:justify-between">
          <div className="font-mono text-[10.5px] uppercase tracking-[0.18em] text-ink-300">
            Објавува автоматски на →
          </div>
          <div className="flex flex-wrap items-center gap-x-7 gap-y-3 text-ink-200 md:gap-x-10 md:gap-y-4">
            <span className="flex items-center gap-2 text-[13px] md:text-[14px]">
              <PlatformFB size={18} /> Facebook
            </span>
            <span className="flex items-center gap-2 text-[13px] md:text-[14px]">
              <PlatformIG size={18} /> Instagram
            </span>
            <span className="flex items-center gap-2 text-[13px] md:text-[14px]">
              <PlatformR5 size={18} /> Реклама5
            </span>
            <span className="flex items-center gap-2 text-[13px] md:text-[14px]">
              <PlatformP3 size={18} /> Pazar3
            </span>
            <span className="flex items-center gap-2 text-[13px] md:text-[14px]">
              <IGlobe size={18} /> Сопствен сајт
            </span>
          </div>
        </div>
      </Container>
    </section>
  );
};

Object.assign(window, { Hero });


// ================== sections.jsx ==================
// Sections: Problem (before/after), How it works (3 steps), Bento grid

const { motion: M2 } = window.framerMotion;

// ---------- 03. PROBLEM — Before / After ----------
const BeforeList = [
  "Рачно објавување на Facebook",
  "Рачно објавување на Instagram",
  "Рачно внесување на Реклама5",
  "Рачно внесување на Pazar3",
  "Купци расфрлани во пораки",
  "Нема јасна аналитика",
];
const AfterList = [
  "Внесуваш возило еднаш",
  "Избираш каде да се објави",
  "DealerHub го синхронизира огласот",
  "Купците автоматски влегуваат во CRM",
  "Гледаш која платформа носи купци",
];

const BeforeAfter = () => (
  <Section id="problem" label="03 Problem">
    <Container>
      <div className="mb-10 grid grid-cols-1 gap-6 md:mb-14 md:grid-cols-12 md:items-end md:gap-8">
        <div className="md:col-span-7">
          <Eyebrow index="01">Проблем</Eyebrow>
          <SectionTitle className="mt-4">
            Авто салоните губат премногу време на{" "}
            <span className="display-serif text-ink-300">рачни објави</span>.
          </SectionTitle>
        </div>
        <SectionLead className="md:col-span-5">
          Една кола = четири огласи, четири пати фотки, четири пати опис. DealerHub
          го прави тоа еднаш и за сите канали.
        </SectionLead>
      </div>

      <div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
        {/* Before card */}
        <Reveal>
          <Card className="relative p-7 md:p-9">
            <div className="flex items-center justify-between">
              <Pill tone="soft">Без DealerHub</Pill>
              <span className="font-mono text-[11px] uppercase tracking-[0.18em] text-ink-300">
                ≈ 45 мин / возило
              </span>
            </div>
            <h3 className="mt-7 text-[26px] tracking-tighter2 text-ink-100">
              Шест прозори, шест cop&shy;y-paste, и пораки секаде.
            </h3>
            <ul className="mt-7 space-y-3">
              {BeforeList.map((t) => (
                <li key={t} className="flex items-start gap-3">
                  <span className="mt-2 inline-block h-px w-3 bg-white/15" />
                  <span className="text-[14.5px] text-ink-200">{t}</span>
                </li>
              ))}
            </ul>

            {/* Faux chaos: stacked browser tabs */}
            <div className="mt-8 rounded-xl border border-white/[0.06] bg-black/30 p-2">
              <div className="flex gap-1.5 overflow-hidden">
                {["facebook", "instagram", "reklama5", "pazar3", "viber"].map(
                  (t, i) => (
                    <div
                      key={t}
                      style={{ transform: `translateY(${i % 2 === 0 ? "1px" : "-1px"})` }}
                      className="flex shrink-0 items-center gap-2 rounded-md border border-white/[0.06] bg-white/[0.02] px-2 py-1.5 font-mono text-[10px] uppercase tracking-[0.14em] text-ink-300"
                    >
                      <span className="block h-1 w-1 rounded-full bg-white/20" />
                      {t}
                    </div>
                  )
                )}
              </div>
            </div>
          </Card>
        </Reveal>

        {/* After card */}
        <Reveal delay={120}>
          <Card className="relative overflow-hidden p-7 md:p-9">
            {/* Lime ambient */}
            <div
              aria-hidden
              className="pointer-events-none absolute -right-20 -top-20 h-64 w-64 rounded-full"
              style={{ background: "radial-gradient(closest-side, rgba(207,242,85,0.18), transparent)" }}
            />
            <div className="flex items-center justify-between">
              <Pill tone="lime" dot>
                Со DealerHub
              </Pill>
              <span className="font-mono text-[11px] uppercase tracking-[0.18em] text-lime">
                ≈ 90 секунди / возило
              </span>
            </div>
            <h3 className="mt-7 text-[26px] tracking-tighter2 text-ink-50">
              Еден екран. Еден клик. Сè останато е автоматизирано.
            </h3>
            <ul className="mt-7 space-y-3">
              {AfterList.map((t, i) => (
                <li key={t} className="flex items-start gap-3">
                  <span className="mt-1.5 grid h-4 w-4 place-items-center rounded-full bg-lime/15 text-lime">
                    <ICheck size={11} stroke={2.2} />
                  </span>
                  <span className="text-[14.5px] text-ink-100">{t}</span>
                </li>
              ))}
            </ul>

            {/* Visual: hub with rays to platforms */}
            <div className="relative mt-8 rounded-xl border border-white/[0.06] bg-black/30 p-5">
              <svg viewBox="0 0 360 110" className="h-[110px] w-full">
                <defs>
                  <linearGradient id="ray" x1="0" x2="1">
                    <stop offset="0" stopColor="rgba(207,242,85,0.7)" />
                    <stop offset="1" stopColor="rgba(207,242,85,0)" />
                  </linearGradient>
                </defs>
                {/* hub */}
                <circle cx="60" cy="55" r="14" fill="rgba(207,242,85,0.12)" stroke="rgba(207,242,85,0.45)" />
                <text x="60" y="58" textAnchor="middle" fontFamily="Geist Mono" fontSize="9" fill="#CFF255">
                  HUB
                </text>
                {/* rays */}
                {[20, 45, 70, 95].map((y, i) => (
                  <line
                    key={i}
                    x1="74"
                    y1="55"
                    x2="280"
                    y2={y}
                    stroke="url(#ray)"
                    strokeWidth="1"
                    strokeDasharray="2 4"
                  />
                ))}
                {/* targets */}
                {["Facebook", "Instagram", "Реклама5", "Pazar3"].map((t, i) => (
                  <g key={t}>
                    <rect x="280" y={[14, 39, 64, 89][i]} width="68" height="14" rx="3" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.12)" />
                    <text x="314" y={[24, 49, 74, 99][i]} textAnchor="middle" fontFamily="Geist Mono" fontSize="9" fill="#E8E8E6">
                      {t}
                    </text>
                  </g>
                ))}
              </svg>
            </div>
          </Card>
        </Reveal>
      </div>
    </Container>
  </Section>
);

// ---------- 04. HOW IT WORKS ----------
const Steps = [
  {
    n: "01",
    title: "Додај возило",
    desc: "Внеси слики, цена, опис, километража и детали за возилото — само еднаш.",
    Icon: ICar,
    art: () => (
      <div className="space-y-2">
        {/* Faux form rows for "марка / модел / цена" so the mock reads as a
            real input form, not three empty boxes. */}
        <div className="space-y-1.5">
          {[
            { l: "Марка / Модел", v: "BMW · X5 xDrive40d" },
            { l: "Цена", v: "€ 41.500" },
            { l: "Километража", v: "62 000 км · 2022" },
          ].map((r) => (
            <div
              key={r.l}
              className="flex items-center justify-between rounded-md border border-white/[0.06] bg-white/[0.02] px-2 py-1.5"
            >
              <span className="font-mono text-[9px] uppercase tracking-[0.14em] text-ink-300">
                {r.l}
              </span>
              <span className="text-[11px] text-ink-100">{r.v}</span>
            </div>
          ))}
        </div>
        {/* Photo grid — first slot has a tiny accent-tinted car silhouette;
            other two stay as upload placeholders so it's clear you can add
            more. */}
        <div className="mt-2 grid grid-cols-3 gap-1.5">
          <div className="relative aspect-square overflow-hidden rounded-md border border-white/[0.06] bg-gradient-to-br from-lime/[0.08] via-black/40 to-black/60">
            <svg
              viewBox="0 0 100 60"
              className="absolute inset-x-1.5 bottom-1.5 h-[60%]"
              preserveAspectRatio="xMidYMid meet"
            >
              <path
                d="M5 42 L18 24 Q24 18 32 17 L70 17 Q80 18 86 25 L96 42 L96 48 L5 48 Z"
                fill="rgba(207,242,85,0.18)"
                stroke="rgba(207,242,85,0.55)"
                strokeWidth="0.7"
              />
              <circle cx="22" cy="44" r="4" fill="#0A0A0B" stroke="rgba(207,242,85,0.6)" strokeWidth="0.7" />
              <circle cx="78" cy="44" r="4" fill="#0A0A0B" stroke="rgba(207,242,85,0.6)" strokeWidth="0.7" />
            </svg>
            <span className="absolute left-1 top-1 rounded-sm bg-black/60 px-1 py-[1px] font-mono text-[7.5px] uppercase tracking-[0.16em] text-lime">
              1
            </span>
          </div>
          {[2, 3].map((n) => (
            <div
              key={n}
              className="relative grid aspect-square place-items-center rounded-md border border-dashed border-white/[0.08] bg-white/[0.015] text-ink-400"
            >
              <IPlus size={11} stroke={1.6} />
              <span className="absolute left-1 top-1 font-mono text-[7.5px] uppercase tracking-[0.16em] text-ink-400">
                {n}
              </span>
            </div>
          ))}
        </div>
      </div>
    ),
  },
  {
    n: "02",
    title: "Избери канали",
    desc: "Одбери дали возилото да оди на сајт, Facebook, Instagram, Реклама5 и Pazar3.",
    Icon: ILayers,
    art: () => (
      <div className="space-y-1.5">
        {[
          { l: "Facebook", a: true },
          { l: "Instagram", a: true },
          { l: "Реклама5", a: true },
          { l: "Pazar3", a: false },
          { l: "Сопствен сајт", a: true },
        ].map((c) => (
          <div
            key={c.l}
            className={cn(
              "flex items-center justify-between rounded-md border border-white/[0.06] px-2 py-1.5",
              c.a ? "bg-white/[0.04]" : "bg-transparent"
            )}
          >
            <span className="font-mono text-[10px] uppercase tracking-[0.14em] text-ink-200">
              {c.l}
            </span>
            <span
              className={cn(
                "block h-3 w-5 rounded-full border",
                c.a ? "border-lime/40 bg-lime/30" : "border-white/10 bg-white/[0.02]"
              )}
            >
              <span
                className={cn(
                  "block h-2.5 w-2.5 rounded-full transition-all",
                  c.a ? "translate-x-2 bg-lime" : "translate-x-0 bg-white/30",
                  "mt-[1px] ml-[1px]"
                )}
              />
            </span>
          </div>
        ))}
      </div>
    ),
  },
  {
    n: "03",
    title: "Објави со еден клик",
    desc: "DealerHub го подготвува огласот и го објавува во правилен формат за секоја платформа.",
    Icon: IBolt,
    art: () => (
      <div className="space-y-1.5">
        {[
          { l: "Огласот подготвен", t: "00:03" },
          { l: "Текст оптимизиран", t: "00:05" },
          { l: "Слики подготвени", t: "00:09" },
          { l: "Објавено на 4 канали", t: "00:12" },
        ].map((s, i) => (
          <div key={s.l} className="flex items-center justify-between border-b border-white/[0.05] py-1.5 last:border-0">
            <span className="flex items-center gap-2 text-[12px] text-ink-100">
              <span
                className={cn(
                  "block h-1.5 w-1.5 rounded-full",
                  i === 3 ? "bg-lime" : "bg-white/30"
                )}
              />
              {s.l}
            </span>
            <span className="font-mono text-[10px] tabular-nums text-ink-300">{s.t}</span>
          </div>
        ))}
      </div>
    ),
  },
];

const HowItWorks = () => (
  <Section id="how" label="04 How it works" className="py-20 md:py-32">
    <Container>
      <div className="mb-10 grid grid-cols-1 gap-6 md:mb-14 md:grid-cols-12 md:items-end md:gap-8">
        <div className="md:col-span-7">
          <Eyebrow index="02">Како работи</Eyebrow>
          <SectionTitle className="mt-4">
            Од внес до објавено за{" "}
            <span className="display-serif text-lime">помалку од минута</span>.
          </SectionTitle>
        </div>
        <SectionLead className="md:col-span-5">
          Три чекори. Останатото го прави платформата — фотки, описи, формати и
          објави по канал.
        </SectionLead>
      </div>

      {/* Mobile vertical timeline */}
      <div className="relative md:hidden">
        <div className="absolute left-[31px] top-2 bottom-2 w-px bg-gradient-to-b from-lime/40 via-white/10 to-transparent" />
        <div className="space-y-4">
          {Steps.map((s, i) => (
            <Reveal key={s.n} delay={i * 100}>
              <div className="flex gap-4">
                <div className="relative shrink-0">
                  <span className="grid h-[62px] w-[62px] place-items-center rounded-2xl border border-white/[0.08] bg-white/[0.03] text-ink-100">
                    <s.Icon size={20} />
                  </span>
                  <span className="absolute -right-1 -top-1 grid h-6 w-6 place-items-center rounded-full bg-lime font-mono text-[10px] font-medium tracking-[0.04em] text-ink-950">
                    {s.n}
                  </span>
                </div>
                <Card className="flex-1 p-5">
                  <h3 className="text-[19px] tracking-tighter2 text-ink-50">{s.title}</h3>
                  <p className="mt-1.5 text-[13.5px] leading-[1.55] text-ink-300">{s.desc}</p>
                  <div className="mt-4 rounded-lg border border-white/[0.05] bg-black/25 p-3">
                    <s.art />
                  </div>
                </Card>
              </div>
            </Reveal>
          ))}
        </div>
      </div>

      {/* Desktop 3-col with connecting line */}
      <div className="relative hidden md:grid md:grid-cols-3 md:gap-5">
        <div className="pointer-events-none absolute inset-x-0 top-[58px] hidden md:block">
          <svg className="w-full" height="2">
            <line x1="14%" x2="86%" y1="1" y2="1" stroke="rgba(255,255,255,0.10)" strokeDasharray="3 4" />
          </svg>
        </div>

        {Steps.map((s, i) => (
          <Reveal key={s.n} delay={i * 100}>
            <Card className="relative h-full p-7">
              <div className="flex items-center justify-between">
                <span className="font-mono text-[11px] uppercase tracking-[0.18em] text-ink-300">
                  Чекор / {s.n}
                </span>
                <span className="grid h-9 w-9 place-items-center rounded-full border border-white/[0.08] bg-white/[0.025] text-ink-100">
                  <s.Icon size={16} />
                </span>
              </div>
              <h3 className="mt-8 text-[24px] tracking-tighter2 text-ink-50">{s.title}</h3>
              <p className="mt-3 text-[14px] leading-[1.55] text-ink-300">{s.desc}</p>
              <div className="mt-7 rounded-xl border border-white/[0.05] bg-black/25 p-4">
                <s.art />
              </div>
            </Card>
          </Reveal>
        ))}
      </div>
    </Container>
  </Section>
);

// ---------- 05. BENTO ----------
const BentoCell = ({ className = "", eyebrow, title, desc, children }) => (
  <Card className={cn("group relative flex flex-col p-7 transition-colors duration-300 hover:bg-white/[0.04]", className)}>
    <div className="flex items-center gap-3">
      <span className="font-mono text-[10.5px] uppercase tracking-[0.18em] text-ink-300">{eyebrow}</span>
    </div>
    <h3 className="mt-3 text-[22px] tracking-tighter2 text-ink-50">{title}</h3>
    <p className="mt-2 max-w-md text-[13.5px] leading-[1.55] text-ink-300">{desc}</p>
    <div className="mt-auto pt-6">{children}</div>
  </Card>
);

const Bento = () => (
  <Section id="features" label="05 Features">
    <Container>
      <div className="mb-10 grid grid-cols-1 gap-6 md:mb-14 md:grid-cols-12 md:items-end md:gap-8">
        <div className="md:col-span-7">
          <Eyebrow index="03">Систем</Eyebrow>
          <SectionTitle className="mt-4">
            Сè што му треба на еден{" "}
            <span className="display-serif text-lime">модерен</span> авто салон.
          </SectionTitle>
        </div>
        <SectionLead className="md:col-span-5">
          Сајт, инвентар, CRM, аналитика и објавување — едно место, една логика.
        </SectionLead>
      </div>

      <div className="grid grid-cols-1 gap-4 md:grid-cols-6 md:auto-rows-[minmax(220px,auto)]">
        {/* LARGE — Automatic publishing */}
        <BentoCell
          className="md:col-span-4 md:row-span-2"
          eyebrow="01 · Auto-publish"
          title="Автоматско објавување"
          desc="Едно возило, повеќе платформи. Без copy-paste, без потсетници."
        >
          <div className="relative rounded-xl border border-white/[0.06] bg-black/30 p-5">
            {/* hub diagram */}
            <div className="grid grid-cols-2 gap-6">
              <div className="space-y-2">
                <div className="flex items-center gap-2">
                  <span className="grid h-7 w-7 place-items-center rounded-md border border-white/[0.08] bg-white/[0.04] text-ink-100">
                    <ICar size={14} />
                  </span>
                  <div>
                    <div className="text-[12px] text-ink-100">Audi A6 · 2021</div>
                    <div className="font-mono text-[9.5px] uppercase tracking-[0.16em] text-ink-300">
                      внесен еднаш
                    </div>
                  </div>
                </div>
                <div className="rounded-md border border-white/[0.06] bg-white/[0.02] p-2">
                  <div className="h-1.5 w-2/3 rounded-full bg-white/10" />
                  <div className="mt-1.5 h-1.5 w-1/2 rounded-full bg-white/6" />
                </div>
                <div className="grid grid-cols-3 gap-1">
                  <div className="aspect-square rounded-sm bg-white/[0.04]" />
                  <div className="aspect-square rounded-sm bg-white/[0.04]" />
                  <div className="aspect-square rounded-sm bg-white/[0.04]" />
                </div>
              </div>
              <div className="space-y-1.5">
                {[
                  { l: "Facebook", Logo: PlatformFB },
                  { l: "Instagram", Logo: PlatformIG },
                  { l: "Реклама5", Logo: PlatformR5 },
                  { l: "Pazar3", Logo: PlatformP3 },
                ].map((p) => (
                  <div key={p.l} className="flex items-center justify-between rounded-md border border-white/[0.06] bg-white/[0.02] px-2 py-1.5">
                    <div className="flex items-center gap-2">
                      <p.Logo size={16} />
                      <span className="text-[11.5px] text-ink-100">{p.l}</span>
                    </div>
                    <span className="inline-flex items-center gap-1.5 font-mono text-[9.5px] uppercase tracking-[0.16em] text-ink-200">
                      <span className="block h-1 w-1 rounded-full bg-lime" />
                      Објавено
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </BentoCell>

        {/* MEDIUM — Pro site */}
        <BentoCell
          className="md:col-span-2"
          eyebrow="02 · Website"
          title="Професионален сајт"
          desc="Модерен сајт за салонот со сопствен домен."
        >
          <div className="rounded-lg border border-white/[0.06] bg-black/30 p-2">
            <div className="flex items-center gap-1 border-b border-white/[0.05] pb-1.5">
              <span className="h-1.5 w-1.5 rounded-full bg-white/15" />
              <span className="h-1.5 w-1.5 rounded-full bg-white/15" />
              <span className="h-1.5 w-1.5 rounded-full bg-white/15" />
              <span className="ml-2 font-mono text-[9px] uppercase tracking-[0.16em] text-ink-300">
                salon.mk
              </span>
            </div>
            <div className="grid grid-cols-3 gap-1 pt-2">
              {["audi-a6", "bmw-x5", "merc-e", "vw-golf", "range-rover", "porsche"].map((slug) => (
                <div key={slug} className="relative aspect-[4/3] overflow-hidden rounded-sm">
                  <img
                    src={`assets/car-${slug}-thumb.webp`}
                    alt=""
                    className="h-full w-full object-cover"
                    loading="lazy"
                  />
                </div>
              ))}
            </div>
          </div>
        </BentoCell>

        {/* MEDIUM — CRM */}
        <BentoCell
          className="md:col-span-2"
          eyebrow="03 · CRM"
          title="CRM за купци"
          desc="Сите клиенти, пораки и интереси на едно место."
        >
          <div className="space-y-1.5">
            {[
              { n: "Стефан М.", v: "Audi A6", s: "Нов" },
              { n: "Ана Т.", v: "BMW X5", s: "Тест" },
              { n: "Дамјан П.", v: "VW Tiguan", s: "Договор" },
            ].map((l) => (
              <div key={l.n} className="flex items-center justify-between rounded-md border border-white/[0.05] bg-white/[0.02] px-2 py-1.5">
                <div className="min-w-0">
                  <div className="truncate text-[11.5px] text-ink-100">{l.n}</div>
                  <div className="font-mono text-[9px] uppercase tracking-[0.16em] text-ink-300">
                    → {l.v}
                  </div>
                </div>
                <span className="rounded-full border border-white/[0.08] bg-black/30 px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-[0.14em] text-ink-200">
                  {l.s}
                </span>
              </div>
            ))}
          </div>
        </BentoCell>

        {/* SMALL — AI desc */}
        <BentoCell
          className="md:col-span-2"
          eyebrow="04 · AI"
          title="AI описи на возила"
          desc="Подобри описи за Facebook, Instagram и огласи."
        >
          <div className="rounded-lg border border-white/[0.06] bg-black/30 p-3">
            <div className="font-mono text-[9.5px] uppercase tracking-[0.16em] text-lime">
              AI · Опис
            </div>
            <div className="mt-1 text-[12px] leading-[1.5] text-ink-200">
              Audi A6 во одлична состојба, прв сопственик, редовно сервисиран…
            </div>
            <div className="mt-2 flex gap-1.5">
              <span className="rounded-full border border-white/[0.08] px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-[0.14em] text-ink-300">
                Тон · Премиум
              </span>
              <span className="rounded-full border border-white/[0.08] px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-[0.14em] text-ink-300">
                МК
              </span>
            </div>
          </div>
        </BentoCell>

        {/* SMALL — Analytics */}
        <BentoCell
          className="md:col-span-2"
          eyebrow="05 · Analytics"
          title="Аналитика"
          desc="Види кои возила и канали носат најмногу интерес."
        >
          <div className="relative h-[100px] rounded-lg border border-white/[0.06] bg-black/30 p-3">
            <svg viewBox="0 0 200 60" className="h-full w-full">
              <defs>
                <linearGradient id="g1" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0" stopColor="rgba(207,242,85,0.45)" />
                  <stop offset="1" stopColor="rgba(207,242,85,0)" />
                </linearGradient>
              </defs>
              <path
                d="M0 45 L20 38 L40 42 L60 30 L80 32 L100 22 L120 26 L140 18 L160 22 L180 12 L200 16 L200 60 L0 60 Z"
                fill="url(#g1)"
              />
              <path
                d="M0 45 L20 38 L40 42 L60 30 L80 32 L100 22 L120 26 L140 18 L160 22 L180 12 L200 16"
                fill="none"
                stroke="#CFF255"
                strokeWidth="1.4"
              />
            </svg>
          </div>
        </BentoCell>

        {/* SMALL — Marker for sold cars */}
        <BentoCell
          className="md:col-span-2"
          eyebrow="06 · Синхронизација"
          title="Маркер „Продадено“"
          desc="Кога возилото е продадено, статусот автоматски се ажурира на сите канали."
        >
          <div className="space-y-1.5">
            {["Facebook", "Instagram", "Реклама5", "Pazar3"].map((p, i) => (
              <div key={p} className="flex items-center justify-between rounded-md border border-white/[0.05] bg-white/[0.02] px-2 py-1.5">
                <span className="text-[11.5px] text-ink-100">{p}</span>
                <span className="font-mono text-[9.5px] uppercase tracking-[0.16em] text-ink-200 line-through opacity-60">
                  Активно
                </span>
              </div>
            ))}
            <div className="mt-1 text-center font-mono text-[10px] uppercase tracking-[0.18em] text-lime">
              → Продадено
            </div>
          </div>
        </BentoCell>

        {/* WIDE — Local */}
        <BentoCell
          className="md:col-span-6"
          eyebrow="07 · Local"
          title="Направено за локалниот пазар."
          desc="Поддршка за македонски авто салони, локални огласници и реален начин на работа — без западни шаблони што не одговараат."
        >
          <div className="flex flex-wrap items-center gap-3">
            {[
              "🇲🇰 Македонски интерфејс",
              "Реклама5 · Pazar3 интеграции",
              "MKD / EUR цени",
              "Локални формат за фотки",
              "Поддршка за салони со 5–500 возила",
            ].map((t) => (
              <span
                key={t}
                className="rounded-full border border-white/[0.08] bg-white/[0.025] px-3 py-1.5 font-mono text-[10.5px] uppercase tracking-[0.14em] text-ink-200"
              >
                {t}
              </span>
            ))}
          </div>
        </BentoCell>
      </div>
    </Container>
  </Section>
);

Object.assign(window, { BeforeAfter, HowItWorks, Bento });


// ================== product.jsx ==================
// Product sections: Templates gallery, Platform automation, CRM mockup, Analytics

const { motion: M3, AnimatePresence: AP3 } = window.framerMotion;

// CSS-based progress bar that animates in when scrolled into view
const InViewBar = ({ pct, delay = 0, className = "" }) => {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            setShown(true);
            io.disconnect();
          }
        });
      },
      { threshold: 0.3 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <div
      ref={ref}
      className={className}
      style={{
        width: shown ? pct + "%" : "0%",
        transition: "width 1100ms cubic-bezier(0.22,1,0.36,1) " + delay + "ms",
      }}
    />
  );
};

// ---------- 06. TEMPLATES ----------
const Templates = [
  {
    key: "premia",
    name: "Premia",
    desc: "За премиум салони",
    accent: "#C9A66B",
    tone: "warm",
  },
  {
    key: "apex",
    name: "Apex",
    desc: "Спортски и динамичен стил",
    accent: "#FF5C42",
    tone: "sport",
  },
  {
    key: "voltek",
    name: "Voltek",
    desc: "Модерен electric / future изглед",
    accent: "#CFF255",
    tone: "future",
  },
  {
    key: "familia",
    name: "Familia",
    desc: "Пристапен и доверлив стил",
    accent: "#7AA8FF",
    tone: "family",
  },
  {
    key: "classic",
    name: "Classic",
    desc: "Чист, професионален изглед",
    accent: "#E8E8E6",
    tone: "classic",
  },
];

const TemplatePreview = ({ t }) => {
  // tiny stylized website mock per tone
  return (
    <div
      className="relative aspect-[4/3] overflow-hidden rounded-xl border border-white/[0.06]"
      style={{
        background:
          t.tone === "future"
            ? "linear-gradient(160deg, #0E0E10 0%, #0A0A0B 60%, #181a14 100%)"
            : t.tone === "sport"
            ? "linear-gradient(160deg, #15100E 0%, #0A0A0B 60%, #1A0E0C 100%)"
            : t.tone === "warm"
            ? "linear-gradient(160deg, #15110A 0%, #0A0A0B 60%, #1A1410 100%)"
            : t.tone === "family"
            ? "linear-gradient(160deg, #0E1118 0%, #0A0A0B 60%, #0E141C 100%)"
            : "linear-gradient(160deg, #111 0%, #0A0A0B 60%, #161616 100%)",
      }}
    >
      {/* Browser bar */}
      <div className="flex items-center gap-1.5 border-b border-white/[0.05] px-3 py-2">
        <span className="h-1.5 w-1.5 rounded-full bg-white/15" />
        <span className="h-1.5 w-1.5 rounded-full bg-white/15" />
        <span className="h-1.5 w-1.5 rounded-full bg-white/15" />
        <span className="ml-2 font-mono text-[9px] uppercase tracking-[0.16em] text-ink-300">
          {t.key}.salon.mk
        </span>
      </div>
      {/* Header */}
      <div className="flex items-center justify-between px-4 py-3">
        <div
          className="font-medium tracking-tightest text-[14px]"
          style={{
            color: t.accent,
            fontFamily: t.tone === "warm" ? "Instrument Serif, serif" : undefined,
            fontStyle: t.tone === "warm" ? "italic" : undefined,
          }}
        >
          {t.name === "Premia" ? "Premia" : t.name === "Familia" ? "Familia" : t.name === "Voltek" ? "VOLTEK" : t.name}
          {t.tone === "sport" && <span className="ml-1 text-[10px]" style={{ color: t.accent }}>•</span>}
        </div>
        <div className="flex gap-2 font-mono text-[8.5px] uppercase tracking-[0.18em] text-ink-300">
          <span>Возила</span>
          <span>Финансирање</span>
          <span>Контакт</span>
        </div>
      </div>
      {/* Hero strip */}
      <div className="mx-4 mt-1 rounded-md border border-white/[0.05]" style={{ background: "rgba(255,255,255,0.02)" }}>
        <div className="p-3">
          <div
            className="text-[18px] leading-none tracking-tightest"
            style={{ color: "#F5F5F0", fontFamily: t.tone === "warm" ? "Instrument Serif, serif" : undefined, fontStyle: t.tone === "warm" ? "italic" : undefined }}
          >
            {t.tone === "future"
              ? "Иднината на возила."
              : t.tone === "sport"
              ? "Вози. Победувај."
              : t.tone === "warm"
              ? "Класа, без компромис."
              : t.tone === "family"
              ? "Возило за фамилијата."
              : "Возила со доверба."}
          </div>
          <div className="mt-1 h-1 w-12 rounded-full" style={{ background: t.accent }} />
        </div>
        {/* Featured car silhouette */}
        <div className="relative h-[58px] overflow-hidden border-t border-white/[0.05]">
          <svg viewBox="0 0 300 60" className="h-full w-full opacity-80">
            <path
              d={
                t.tone === "sport"
                  ? "M10 44 L40 22 Q55 14 75 14 L210 14 Q235 14 250 26 L290 44 L290 50 L10 50 Z"
                  : "M10 44 L42 26 Q56 18 76 18 L208 18 Q230 18 246 28 L290 44 L290 50 L10 50 Z"
              }
              fill="rgba(255,255,255,0.05)"
              stroke={t.accent + "55"}
              strokeWidth="1"
            />
            <circle cx="70" cy="48" r="6" fill="#0A0A0B" stroke={t.accent + "88"} />
            <circle cx="232" cy="48" r="6" fill="#0A0A0B" stroke={t.accent + "88"} />
          </svg>
        </div>
      </div>
      {/* Cards row */}
      <div className="grid grid-cols-3 gap-1.5 px-4 pt-2">
        {[0, 1, 2].map((i) => (
          <div key={i} className="rounded-md border border-white/[0.05] bg-white/[0.02] p-1.5">
            <div className="h-6 rounded-sm bg-white/[0.03]" />
            <div className="mt-1 h-1 w-3/4 rounded-full bg-white/10" />
            <div className="mt-1 h-1 w-1/2 rounded-full bg-white/6" />
          </div>
        ))}
      </div>

      {/* Live preview badge */}
      <div className="absolute right-3 top-12 inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-black/40 px-2 py-0.5 font-mono text-[9px] uppercase tracking-[0.16em] text-ink-100 backdrop-blur">
        <span className="block h-1 w-1 rounded-full bg-lime pulse-dot" />
        Во живо
      </div>
    </div>
  );
};

const TemplatesSection = () => {
  const scrollerRef = React.useRef(null);
  const [active, setActive] = React.useState(0);
  const total = Templates.length + 1; // +1 for the "all templates" card

  const onScroll = () => {
    const el = scrollerRef.current;
    if (!el) return;
    const cardW = el.firstChild ? el.firstChild.offsetWidth + 16 : 0;
    if (!cardW) return;
    const idx = Math.round(el.scrollLeft / cardW);
    setActive(Math.min(total - 1, Math.max(0, idx)));
  };

  return (
    <Section id="designs" label="07 Templates">
      <Container>
        <div className="mb-10 grid grid-cols-1 gap-6 md:mb-14 md:grid-cols-12 md:items-end md:gap-8">
          <div className="md:col-span-7">
            <Eyebrow index="04">Дизајни</Eyebrow>
            <SectionTitle className="mt-4">
              Секој салон може да изгледа{" "}
              <span className="display-serif text-lime">премиум</span>.
            </SectionTitle>
          </div>
          <SectionLead className="md:col-span-5">
            Готови шаблони што се прилагодуваат на твојот бренд. Менуваш бои, фотки
            и копирајт — без дизајнер.
          </SectionLead>
        </div>

        {/* Mobile: horizontal snap carousel */}
        <div className="md:hidden">
          <div
            ref={scrollerRef}
            onScroll={onScroll}
            className="no-scrollbar -mx-6 flex snap-x snap-mandatory gap-4 overflow-x-auto scroll-px-6 px-6 pb-4"
            aria-label="Дизајни"
          >
            {Templates.map((t) => (
              <div
                key={t.key}
                className="w-[85vw] max-w-[360px] shrink-0 snap-center"
              >
                <Card className="p-4">
                  <TemplatePreview t={t} />
                  <div className="mt-4 flex items-center justify-between px-1">
                    <div>
                      <div className="text-[16px] tracking-tighter2 text-ink-50">{t.name}</div>
                      <div className="font-mono text-[10.5px] uppercase tracking-[0.16em] text-ink-300">
                        {t.desc}
                      </div>
                    </div>
                    <button className="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] px-2.5 py-1.5 text-[11px] text-ink-100">
                      Преглед <IArrowUpRight size={12} stroke={1.8} />
                    </button>
                  </div>
                </Card>
              </div>
            ))}
            {/* All templates card */}
            <div className="w-[85vw] max-w-[360px] shrink-0 snap-center">
              <Card className="flex h-full min-h-[300px] flex-col items-start justify-between p-6">
                <div>
                  <Pill tone="default">+ Уште шаблони</Pill>
                  <h3 className="mt-5 text-[22px] tracking-tighter2 text-ink-50">
                    12+ шаблони. Сите со сопствен домен.
                  </h3>
                  <p className="mt-3 text-[13.5px] leading-[1.55] text-ink-300">
                    Сите се responsive, SEO-структурирани и оптимизирани за возила.
                  </p>
                </div>
                <ButtonGhost className="mt-6">
                  Види ги сите дизајни <IArrow size={14} stroke={1.8} />
                </ButtonGhost>
              </Card>
            </div>
          </div>
          {/* Dots */}
          <div className="mt-3 flex items-center justify-center gap-1.5">
            {Array.from({ length: total }).map((_, i) => (
              <span
                key={i}
                className={cn(
                  "block h-1.5 rounded-full transition-all duration-300",
                  active === i ? "w-5 bg-lime" : "w-1.5 bg-white/15"
                )}
              />
            ))}
          </div>
        </div>

        {/* Desktop: grid */}
        <div className="hidden md:grid md:grid-cols-2 md:gap-5 lg:grid-cols-3">
          {Templates.map((t, i) => (
            <Reveal key={t.key} delay={i * 70}>
              <div className="tilt-wrap group">
                <Card className="tilt p-4 transition-colors hover:bg-white/[0.04]">
                  <TemplatePreview t={t} />
                  <div className="mt-4 flex items-center justify-between px-1">
                    <div>
                      <div className="text-[16px] tracking-tighter2 text-ink-50">{t.name}</div>
                      <div className="font-mono text-[10.5px] uppercase tracking-[0.16em] text-ink-300">
                        {t.desc}
                      </div>
                    </div>
                    <button className="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] px-2.5 py-1 text-[11px] text-ink-100 transition-colors hover:bg-white/[0.05]">
                      Преглед <IArrowUpRight size={12} stroke={1.8} />
                    </button>
                  </div>
                </Card>
              </div>
            </Reveal>
          ))}
          {/* Sixth card: "All templates" */}
          <Reveal delay={Templates.length * 70}>
            <Card className="flex h-full min-h-[300px] flex-col items-start justify-between p-7">
              <div>
                <Pill tone="default">+ Уште шаблони</Pill>
                <h3 className="mt-5 text-[22px] tracking-tighter2 text-ink-50">
                  12+ шаблони. Сите со сопствен домен.
                </h3>
                <p className="mt-3 text-[13.5px] leading-[1.55] text-ink-300">
                  Сите се responsive, SEO-структурирани и оптимизирани за возила.
                </p>
              </div>
              <ButtonGhost className="mt-6">
                Види ги сите дизајни <IArrow size={14} stroke={1.8} />
              </ButtonGhost>
            </Card>
          </Reveal>
        </div>
      </Container>
    </Section>
  );
};

// ---------- 08. PLATFORM AUTOMATION ----------
const PlatformCard = ({ name, Logo, sub, idx, animate }) => {
  // animation: cycle through "Ready" -> "Publishing" -> "Published"
  const published = animate >= 2;
  const publishing = animate === 1;
  return (
    <div
      className="group relative rounded-2xl border border-white/[0.07] bg-gradient-to-b from-white/[0.035] to-white/[0.01] p-4 transition-colors hover:bg-white/[0.04] sm:p-6"
    >
      <div className="flex items-start justify-between gap-2">
        <div className="grid h-10 w-10 place-items-center rounded-xl border border-white/[0.08] bg-white/[0.03] sm:h-12 sm:w-12">
          <Logo size={22} />
        </div>
        <div
          className={cn(
            "inline-flex items-center gap-1.5 rounded-full border px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-[0.14em] transition-colors sm:px-2 sm:text-[10px] sm:tracking-[0.16em]",
            published
              ? "border-lime/30 bg-lime/[0.08] text-lime"
              : publishing
              ? "border-white/[0.12] bg-white/[0.04] text-ink-100"
              : "border-white/[0.08] bg-white/[0.02] text-ink-300"
          )}
        >
          <span className={cn("block h-1 w-1 rounded-full", published ? "bg-lime pulse-dot" : publishing ? "bg-white/60" : "bg-ink-400")} />
          {published ? "Published" : publishing ? "Publishing…" : "Ready"}
        </div>
      </div>

      <div className="mt-4 sm:mt-6">
        <div className="text-[16px] tracking-tighter2 text-ink-50 sm:text-[18px]">{name}</div>
        <div className="mt-1 truncate font-mono text-[9.5px] uppercase tracking-[0.16em] text-ink-300 sm:text-[10.5px]">
          {sub}
        </div>
      </div>

      {/* progress */}
      <div className="mt-4 h-1 w-full overflow-hidden rounded-full bg-white/5 sm:mt-5">
        <div
          className="h-full bg-lime"
          style={{
            width: published ? "100%" : publishing ? "60%" : "0%",
            transition: "width 800ms cubic-bezier(0.22,1,0.36,1) " + (idx * 100) + "ms",
          }}
        />
      </div>
      <div className="mt-2 flex items-center justify-between font-mono text-[9px] uppercase tracking-[0.12em] text-ink-300 sm:mt-3 sm:text-[10px] sm:tracking-[0.14em]">
        <span className="truncate">Audi A6</span>
        <span className="shrink-0">{published ? "00:12" : publishing ? "00:08" : "00:00"}</span>
      </div>
    </div>
  );
};

const PlatformsSection = () => {
  // animation cycle for all 4 cards
  const [phase, setPhase] = React.useState(0); // 0,1,2 -> loop
  React.useEffect(() => {
    const id = setInterval(() => setPhase((p) => (p + 1) % 3), 2200);
    return () => clearInterval(id);
  }, []);

  return (
    <Section id="platforms" label="08 Platforms">
      <Container>
        <div className="mb-10 grid grid-cols-1 gap-6 md:mb-14 md:grid-cols-12 md:items-end md:gap-8">
          <div className="md:col-span-7">
            <Eyebrow index="05">Автоматизација</Eyebrow>
            <SectionTitle className="mt-4">
              Еден клик. <span className="display-serif text-lime">Четири канали</span>.
            </SectionTitle>
          </div>
          <SectionLead className="md:col-span-5">
            DealerHub го оптимизира текстот, сликите и форматот за секој канал —
            автоматски.
          </SectionLead>
        </div>

        {/* Real-world preview: 4 phones with the same Audi A6 listing on FB / IG / Реклама5 / Pazar3 */}
        <Reveal>
          <div className="relative mb-6 overflow-hidden rounded-2xl border border-white/[0.06] bg-gradient-to-b from-white/[0.04] to-white/[0.012]">
            <div
              aria-hidden
              className="pointer-events-none absolute inset-0"
              style={{ background: "radial-gradient(900px 320px at 50% 100%, rgba(207,242,85,0.18), transparent 70%)" }}
            />
            <img
              src="assets/platforms-phones.webp"
              alt="Истиот оглас на Facebook, Instagram, Реклама5 и Pazar3"
              className="relative block h-auto w-full"
              loading="lazy"
            />
          </div>
        </Reveal>

        <div className="grid grid-cols-2 gap-3 sm:gap-4 lg:grid-cols-4">
          {[
            { name: "Facebook", Logo: PlatformFB, sub: "Marketplace · Page · Groups" },
            { name: "Instagram", Logo: PlatformIG, sub: "Post · Reel · Story" },
            { name: "Реклама5", Logo: PlatformR5, sub: "Возила · MK" },
            { name: "Pazar3", Logo: PlatformP3, sub: "Возила · MK" },
          ].map((p, i) => (
            <PlatformCard key={p.name} {...p} idx={i} animate={phase} />
          ))}
        </div>

        <div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-3">
          {[
            {
              t: "Формат за секој канал",
              d: "Различни димензии, текст и tags по платформа — без рачно прилагодување.",
            },
            {
              t: "Маркер за продадено на сите канали",
              d: "Кога ќе се означи продадено, огласите автоматски се повлекуваат.",
            },
            {
              t: "Распоред на објави",
              d: "Закажи кога одат огласите — викенди, утра или вечерни пикови.",
            },
          ].map((f) => (
            <div key={f.t} className="rounded-2xl border border-white/[0.06] bg-white/[0.018] p-5">
              <div className="text-[15px] tracking-tighter2 text-ink-50">{f.t}</div>
              <div className="mt-2 text-[13px] leading-[1.55] text-ink-300">{f.d}</div>
            </div>
          ))}
        </div>
      </Container>
    </Section>
  );
};

// ---------- 09. CRM ----------
const Leads = [
  { n: "Стефан М.", c: "Audi A6 · 2021", s: "New", src: "Facebook", v: "€ 38.900", color: "#CFF255" },
  { n: "Ана Т.", c: "BMW X5 · 2020", s: "Contacted", src: "Instagram", v: "€ 41.500", color: "#E8E8E6" },
  { n: "Дамјан П.", c: "VW Tiguan · 2022", s: "Test Drive", src: "Реклама5", v: "€ 26.400", color: "#7AA8FF" },
  { n: "Маја С.", c: "Mercedes C-Class", s: "Closed", src: "Pazar3", v: "€ 32.000", color: "#CFF255" },
  { n: "Бојан Р.", c: "Škoda Octavia", s: "Contacted", src: "Website", v: "€ 18.900", color: "#E8E8E6" },
];

const statusTone = {
  New: "border-lime/30 bg-lime/[0.08] text-lime",
  Contacted: "border-white/[0.12] bg-white/[0.04] text-ink-100",
  "Test Drive": "border-blue-300/30 bg-blue-300/[0.06] text-[#9EC0FF]",
  Closed: "border-lime/40 bg-lime/[0.14] text-lime",
};

const CRMSection = () => (
  <Section id="crm" label="09 CRM" className="bg-ink-950/40">
    <Container>
      <div className="mb-10 grid grid-cols-1 gap-6 md:mb-14 md:grid-cols-12 md:items-end md:gap-8">
        <div className="md:col-span-7">
          <Eyebrow index="06">CRM</Eyebrow>
          <SectionTitle className="mt-4">
            Не губи клиенти{" "}
            <span className="display-serif text-ink-300">низ пораки</span>.
          </SectionTitle>
        </div>
        <SectionLead className="md:col-span-5">
          DealerHub ги собира купците од сите канали и ти помага да следиш кој
          клиент за кое возило е заинтересиран.
        </SectionLead>
      </div>

      <div className="grid grid-cols-1 gap-5 lg:grid-cols-12">
        {/* Left: stats */}
        <div className="grid grid-cols-2 gap-3 lg:col-span-4 lg:grid-cols-1 lg:gap-4">
          {[
            { l: "Активни возила", v: 38, sub: "+4 оваа недела" },
            { l: "Купци / месец", v: 127, sub: "+18% од минатиот месец" },
            { l: "Посети на сајтот", v: 4287, sub: "82% mobile", wide: true },
          ].map((s, i) => (
            <Reveal
              key={s.l}
              delay={i * 80}
              className={cn(s.wide && "col-span-2 lg:col-span-1")}
            >
              <Card className="h-full p-5 md:p-6">
                <div className="font-mono text-[10px] uppercase tracking-[0.16em] text-ink-300 md:text-[10.5px] md:tracking-[0.18em]">
                  {s.l}
                </div>
                <div className="mt-3 text-[32px] leading-none tracking-tightest text-ink-50 tabular-nums md:text-[40px]">
                  <CountUp to={s.v} />
                </div>
                <div className="mt-2 font-mono text-[10px] uppercase tracking-[0.14em] text-lime md:text-[10.5px] md:tracking-[0.16em]">
                  {s.sub}
                </div>
              </Card>
            </Reveal>
          ))}
          <div className="col-span-2 font-mono text-[10px] uppercase tracking-[0.16em] text-ink-400 lg:col-span-1 lg:text-[10px] lg:tracking-[0.18em]">
            * Демо податоци за приказ.
          </div>
        </div>

        {/* Right: CRM table */}
        <div className="lg:col-span-8">
          <Reveal>
            <Card className="overflow-hidden p-0">
              <div className="flex items-center justify-between border-b border-white/[0.06] px-5 py-3">
                <div className="flex items-center gap-3">
                  <span className="font-mono text-[10px] uppercase tracking-[0.16em] text-ink-300 md:text-[10.5px] md:tracking-[0.18em]">
                    Pipeline · оваа недела
                  </span>
                  <Pill tone="default">
                    <span className="block h-1 w-1 rounded-full bg-lime pulse-dot" /> Live
                  </Pill>
                </div>
                <div className="hidden gap-4 font-mono text-[10.5px] uppercase tracking-[0.18em] text-ink-300 md:flex">
                  <span>5 нови</span>
                  <span>2 test drives</span>
                  <span>1 closed</span>
                </div>
              </div>
              {/* Pipeline chips (mobile only) */}
              <div className="flex flex-wrap gap-1.5 border-b border-white/[0.06] px-5 py-3 md:hidden">
                {[
                  { l: "Нов", n: 2, tone: "lime" },
                  { l: "Контактиран", n: 2, tone: "soft" },
                  { l: "Тест возење", n: 1, tone: "soft" },
                  { l: "Продадено", n: 1, tone: "lime" },
                ].map((c) => (
                  <Pill key={c.l} tone={c.tone}>
                    {c.l} <span className="ml-0.5 text-ink-50/80">{c.n}</span>
                  </Pill>
                ))}
              </div>
              <div className="hidden grid-cols-12 gap-3 border-b border-white/[0.06] px-5 py-2.5 font-mono text-[10px] uppercase tracking-[0.18em] text-ink-300 md:grid">
                <span className="col-span-4">Клиент</span>
                <span className="col-span-3">Возило</span>
                <span className="col-span-2">Канал</span>
                <span className="col-span-2">Статус</span>
                <span className="col-span-1 text-right">Вредност</span>
              </div>

              <div>
                {Leads.map((l, i) => (
                  <div
                    key={l.n}
                    className={cn(
                      "px-5 py-4 transition-colors hover:bg-white/[0.02]",
                      i < Leads.length - 1 && "border-b border-white/[0.04]"
                    )}
                  >
                    {/* Mobile layout */}
                    <div className="md:hidden">
                      <div className="flex items-center gap-3">
                        <span
                          className="grid h-9 w-9 shrink-0 place-items-center rounded-full text-[11px] font-medium text-ink-950"
                          style={{ background: l.color }}
                        >
                          {l.n.split(" ").map((p) => p[0]).join("")}
                        </span>
                        <div className="min-w-0 flex-1">
                          <div className="truncate text-[14px] text-ink-100">{l.n}</div>
                          <div className="truncate text-[12px] text-ink-300">{l.c}</div>
                        </div>
                        <span
                          className={cn(
                            "inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-[0.14em]",
                            statusTone[l.s]
                          )}
                        >
                          <span className="block h-1 w-1 rounded-full bg-current" />
                          {l.s}
                        </span>
                      </div>
                      <div className="mt-2 flex items-center justify-between pl-12 font-mono text-[10px] uppercase tracking-[0.14em] text-ink-300">
                        <span>Од: {l.src}</span>
                        <span className="text-ink-100 tabular-nums">{l.v}</span>
                      </div>
                    </div>

                    {/* Desktop layout */}
                    <div className="hidden grid-cols-12 items-center gap-3 md:grid">
                      <div className="flex items-center gap-3 md:col-span-4">
                        <span
                          className="grid h-8 w-8 place-items-center rounded-full text-[11px] font-medium text-ink-950"
                          style={{ background: l.color }}
                        >
                          {l.n.split(" ").map((p) => p[0]).join("")}
                        </span>
                        <div>
                          <div className="text-[13.5px] text-ink-100">{l.n}</div>
                          <div className="font-mono text-[9.5px] uppercase tracking-[0.16em] text-ink-300">
                            ID #{1024 + i}
                          </div>
                        </div>
                      </div>
                      <div className="text-[13px] text-ink-200 md:col-span-3">{l.c}</div>
                      <div className="md:col-span-2">
                        <Pill tone="soft">{l.src}</Pill>
                      </div>
                      <div className="md:col-span-2">
                        <span
                          className={cn(
                            "inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 font-mono text-[10px] uppercase tracking-[0.16em]",
                            statusTone[l.s]
                          )}
                        >
                          <span className="block h-1 w-1 rounded-full bg-current" />
                          {l.s}
                        </span>
                      </div>
                      <div className="text-right text-[13px] tabular-nums text-ink-100 md:col-span-1">
                        {l.v}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
              {/* Footer summary */}
              <div className="flex items-center justify-between border-t border-white/[0.06] px-5 py-3">
                <div className="font-mono text-[10px] uppercase tracking-[0.16em] text-ink-300 md:text-[10.5px] md:tracking-[0.18em]">
                  Pipeline вредност
                </div>
                <div className="text-[15px] tabular-nums text-ink-50">€ 157.700</div>
              </div>
            </Card>
          </Reveal>
        </div>
      </div>
    </Container>
  </Section>
);

// ---------- 10. ANALYTICS ----------
const AnalyticsSection = () => (
  <Section id="analytics" label="10 Analytics">
    <Container>
      <div className="mb-10 grid grid-cols-1 gap-6 md:mb-14 md:grid-cols-12 md:items-end md:gap-8">
        <div className="md:col-span-7">
          <Eyebrow index="07">Аналитика</Eyebrow>
          <SectionTitle className="mt-4">
            Знај <span className="display-serif text-lime">што</span> навистина продава.
          </SectionTitle>
        </div>
        <SectionLead className="md:col-span-5">
          Која платформа носи најмногу клиенти. Кои возила бараат најмногу
          внимание. Едно место за сите одговори.
        </SectionLead>
      </div>

      <div className="grid grid-cols-1 gap-4 md:grid-cols-12">
        {/* Top viewed vehicle */}
        <Card className="md:col-span-5 p-7">
          <Eyebrow>Најгледано возило</Eyebrow>
          <div className="mt-4 flex items-start gap-4">
            <div className="h-20 w-28 shrink-0 rounded-lg border border-white/[0.06] bg-ink-800 overflow-hidden">
              <svg viewBox="0 0 200 120" className="h-full w-full opacity-70">
                <path d="M20 86 L50 56 Q60 46 78 44 L150 44 Q170 46 180 58 L196 86 L196 96 L20 96 Z" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.18)" />
                <circle cx="60" cy="92" r="8" fill="#0E0E10" stroke="rgba(255,255,255,0.18)" />
                <circle cx="160" cy="92" r="8" fill="#0E0E10" stroke="rgba(255,255,255,0.18)" />
              </svg>
            </div>
            <div className="min-w-0 flex-1">
              <div className="text-[18px] tracking-tighter2 text-ink-50">Audi A6 45 TFSI</div>
              <div className="font-mono text-[10.5px] uppercase tracking-[0.16em] text-ink-300">
                2021 · S-line · 48.210 km
              </div>
              <div className="mt-4 grid grid-cols-3 gap-2">
                <div>
                  <div className="font-mono text-[9.5px] uppercase tracking-[0.16em] text-ink-300">Views</div>
                  <div className="text-[18px] tabular-nums text-ink-50"><CountUp to={2418} /></div>
                </div>
                <div>
                  <div className="font-mono text-[9.5px] uppercase tracking-[0.16em] text-ink-300">Leads</div>
                  <div className="text-[18px] tabular-nums text-ink-50"><CountUp to={37} /></div>
                </div>
                <div>
                  <div className="font-mono text-[9.5px] uppercase tracking-[0.16em] text-ink-300">CTR</div>
                  <div className="text-[18px] tabular-nums text-ink-50">4,6%</div>
                </div>
              </div>
            </div>
          </div>
        </Card>

        {/* Best channel */}
        <Card className="md:col-span-4 p-7">
          <Eyebrow>Најдобар канал</Eyebrow>
          <div className="mt-4 space-y-2.5">
            {[
              { l: "Facebook", v: 48, Logo: PlatformFB },
              { l: "Instagram", v: 27, Logo: PlatformIG },
              { l: "Реклама5", v: 18, Logo: PlatformR5 },
              { l: "Pazar3", v: 7, Logo: PlatformP3 },
            ].map((c, i) => (
              <div key={c.l}>
                <div className="flex items-center justify-between">
                  <span className="flex items-center gap-2 text-[12.5px] text-ink-100">
                    <c.Logo size={16} /> {c.l}
                  </span>
                  <span className="font-mono text-[11px] tabular-nums text-ink-200">{c.v}%</span>
                </div>
                <div className="mt-1.5 h-1 w-full overflow-hidden rounded-full bg-white/5">
                  <InViewBar
                    pct={c.v}
                    delay={i * 120}
                    className={cn("h-full", i === 0 ? "bg-lime" : "bg-white/30")}
                  />
                </div>
              </div>
            ))}
          </div>
        </Card>

        {/* Conversion */}
        <Card className="md:col-span-3 p-7">
          <Eyebrow>Conversion rate</Eyebrow>
          <div className="mt-4 flex items-end gap-3">
            <div className="text-[48px] leading-none tracking-tightest text-ink-50 tabular-nums">
              3,8<span className="text-ink-300">%</span>
            </div>
            <span className="mb-2 inline-flex items-center gap-1 rounded-full border border-lime/30 bg-lime/[0.08] px-2 py-0.5 font-mono text-[10px] uppercase tracking-[0.16em] text-lime">
              ↑ 0,7
            </span>
          </div>
          <div className="mt-3 font-mono text-[10.5px] uppercase tracking-[0.16em] text-ink-300">
            Lead → продажба, последни 30 дена
          </div>
          {/* sparkline */}
          <svg viewBox="0 0 200 50" className="mt-4 h-12 w-full">
            <path
              d="M0 40 L20 36 L40 38 L60 30 L80 32 L100 24 L120 26 L140 18 L160 22 L180 12 L200 16"
              fill="none"
              stroke="#CFF255"
              strokeWidth="1.4"
            />
          </svg>
        </Card>

        {/* Bottom row */}
        <Card className="md:col-span-4 p-7">
          <Eyebrow>Најмногу побарувани</Eyebrow>
          <div className="mt-4 space-y-2">
            {[
              { v: "BMW X5", n: 41 },
              { v: "Audi A6", n: 37 },
              { v: "VW Tiguan", n: 28 },
              { v: "Mercedes C", n: 22 },
            ].map((r) => (
              <div key={r.v} className="flex items-center justify-between border-b border-white/[0.05] py-2 last:border-0">
                <span className="text-[13px] text-ink-100">{r.v}</span>
                <span className="font-mono text-[11px] tabular-nums text-ink-200">{r.n}</span>
              </div>
            ))}
          </div>
        </Card>

        <Card className="md:col-span-4 p-7">
          <Eyebrow>Продадени возила</Eyebrow>
          <div className="mt-4 text-[48px] leading-none tracking-tightest text-ink-50 tabular-nums">
            <CountUp to={12} />
          </div>
          <div className="mt-2 font-mono text-[10.5px] uppercase tracking-[0.16em] text-lime">
            Q4 2025 · +3 vs. Q3
          </div>
          {/* monthly bars */}
          <div className="mt-5 grid grid-cols-6 gap-1.5">
            {[3, 5, 4, 6, 4, 7].map((h, i) => (
              <div key={i} className="flex flex-col items-center gap-1">
                <div
                  className={cn(
                    "w-full rounded-sm",
                    i === 5 ? "bg-lime" : "bg-white/15"
                  )}
                  style={{ height: h * 9 }}
                />
                <span className="font-mono text-[9px] uppercase tracking-[0.16em] text-ink-300">
                  {["Јул", "Авг", "Сеп", "Окт", "Ное", "Дек"][i]}
                </span>
              </div>
            ))}
          </div>
        </Card>

        <Card className="md:col-span-4 p-7">
          <Eyebrow>Mobile traffic</Eyebrow>
          <div className="mt-4 flex items-center gap-5">
            {/* ring */}
            <div className="relative h-24 w-24 shrink-0">
              <svg viewBox="0 0 36 36" className="h-full w-full -rotate-90">
                <circle cx="18" cy="18" r="15.9155" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="2.2" />
                <circle
                  cx="18"
                  cy="18"
                  r="15.9155"
                  fill="none"
                  stroke="#CFF255"
                  strokeWidth="2.2"
                  strokeDasharray="82 100"
                  strokeLinecap="round"
                />
              </svg>
              <div className="absolute inset-0 grid place-items-center text-[18px] tabular-nums text-ink-50">82%</div>
            </div>
            <div>
              <div className="text-[14px] text-ink-100">Mobile-first посетители</div>
              <div className="mt-1 font-mono text-[10.5px] uppercase tracking-[0.16em] text-ink-300">
                Сите шаблони се mobile-optimized
              </div>
            </div>
          </div>
        </Card>
      </div>
    </Container>
  </Section>
);

Object.assign(window, { TemplatesSection, PlatformsSection, CRMSection, AnalyticsSection });


// ================== pricing.jsx ==================
// Pricing, Trust, FAQ, Final CTA, Footer

const { motion: M4 } = window.framerMotion;

// ---------- 11. PRICING ----------
// Plans MUST match src/lib/plan-features.ts (PLAN_FEATURES) — that's the
// source of truth used by /admin/billing, feature gates and signup checkout.
// Prices below mirror monthlyPriceEur for each tier:
//   PRESENCE   €29  — сакам само сајт
//   STARTER    €69  — solo dealer
//   PRO        €129 — активен тим (NAJPOPULARNO)
//   BUSINESS   €229 — голем салон
//   ENTERPRISE      — контактирај продажби
const Plans = [
  {
    key: "presence",
    name: "Презенс",
    price: 29,
    forWho: "Сакам само вебсајт за моите возила — без социјални и CRM.",
    features: [
      "Сопствен сајт со домен",
      "До 20 возила",
      "1 администратор",
      "Основна аналитика",
      "Поддршка на македонски",
    ],
    cta: "Започни сега",
  },
  {
    key: "starter",
    name: "Стартер",
    price: 69,
    forWho: "За самостоен дилер што почнува со автоматско објавување.",
    features: [
      "Сè од Презенс",
      "До 50 возила · 2 корисници",
      "Instagram + Reels објавување",
      "AI описи на возила",
      "Преводи на пораки од купувачи",
      "Неделен дигест извештај",
    ],
    cta: "Започни сега",
  },
  {
    key: "pro",
    name: "Про",
    price: 129,
    badge: "Најпопуларен",
    forWho: "За активен дилерски тим што објавува секоја недела.",
    features: [
      "Сè од Стартер",
      "До 200 возила · 5 корисници",
      "Facebook + Реклама5 + Pazar3",
      "Reels масовно објавување (50/мес.)",
      "AI текст за реклами",
      "Сопствен домен + паметно пребарување",
      "Замена на возило + пазарна аналитика",
    ],
    cta: "Започни сега",
    highlighted: true,
  },
  {
    key: "business",
    name: "Бизнис",
    price: 229,
    forWho: "За поголем салон со повеќе корисници и напредна поддршка.",
    features: [
      "Сè од Про",
      "Неограничено возила и корисници",
      "Сопствен бренд (white-label)",
      "API пристап за интеграции",
      "Приоритет на купци + автоматизации",
      "Reels без лимит",
    ],
    cta: "Започни сега",
  },
];

// Enterprise lives in its own strip below the 4-card grid — contact sales
// only, no monthly price to show.
const EnterprisePlan = {
  name: "Ентерпрајс",
  forWho:
    "За мрежи салони, повеќе локации или индивидуален SLA. Договараме поединечно.",
  features: [
    "Сè од Бизнис",
    "Повеќе локации под еден акаунт",
    "Посветен account manager",
    "SLA за uptime и поддршка",
  ],
  cta: "Контактирај нè",
};

const PriceCard = ({ p }) => (
  <div
    className={cn(
      "relative flex h-full flex-col rounded-2xl p-6 transition-colors duration-300 md:p-7",
      p.highlighted
        ? "border border-lime/30 bg-gradient-to-b from-lime/[0.05] to-lime/[0.008] shadow-[0_24px_60px_-30px_rgba(207,242,85,0.35)]"
        : "glass-soft hover:bg-white/[0.04]"
    )}
  >
    {p.highlighted && (
      <div
        aria-hidden
        className="pointer-events-none absolute -inset-px rounded-2xl"
        style={{
          background:
            "radial-gradient(80% 60% at 50% 0%, rgba(207,242,85,0.18), rgba(0,0,0,0) 70%)",
          mask: "linear-gradient(#000, #000) content-box, linear-gradient(#000, #000)",
          WebkitMask: "linear-gradient(#000, #000) content-box, linear-gradient(#000, #000)",
        }}
      />
    )}

    <div className="flex items-start justify-between">
      <div>
        <div className="text-[18px] tracking-tighter2 text-ink-50">{p.name}</div>
        <div className="mt-1 font-mono text-[10.5px] uppercase tracking-[0.18em] text-ink-300">
          {p.forWho}
        </div>
      </div>
      {p.badge && (
        <Pill tone="lime" dot>
          {p.badge}
        </Pill>
      )}
    </div>

    <div className="mt-7 flex items-baseline gap-1.5 md:mt-8">
      <span className="text-[48px] leading-none tracking-tightest text-ink-50 tabular-nums md:text-[56px]">
        €{p.price}
      </span>
      <span className="font-mono text-[11px] uppercase tracking-[0.18em] text-ink-300">/ мес.</span>
    </div>
    <div className="mt-1 font-mono text-[10.5px] uppercase tracking-[0.16em] text-ink-400">
      без ДДВ · отказ во секое време
    </div>

    <div className="my-6 h-px w-full bg-white/[0.07] md:my-7" />

    <ul className="space-y-2.5 md:space-y-3">
      {p.features.map((f) => (
        <li key={f} className="flex items-start gap-3 text-[14px] text-ink-200">
          <span
            className={cn(
              "mt-0.5 grid h-4 w-4 shrink-0 place-items-center rounded-full",
              p.highlighted ? "bg-lime/20 text-lime" : "bg-white/[0.06] text-ink-200"
            )}
          >
            <ICheck size={11} stroke={2.2} />
          </span>
          <span>{f}</span>
        </li>
      ))}
    </ul>

    <div className="mt-8 pt-2">
      {p.highlighted ? (
        <ButtonPrimary href="/signup" className="w-full justify-center">{p.cta}</ButtonPrimary>
      ) : (
        <ButtonGhost href="/signup" className="w-full justify-center">{p.cta}</ButtonGhost>
      )}
    </div>
  </div>
);

const PricingSection = () => (
  <Section id="pricing" label="11 Pricing">
    <Container>
      <div className="mb-10 grid grid-cols-1 gap-6 md:mb-14 md:grid-cols-12 md:items-end md:gap-8">
        <div className="md:col-span-7">
          <Eyebrow index="08">Цени</Eyebrow>
          <SectionTitle className="mt-4">
            Пакети за <span className="display-serif text-lime">секој тип</span> авто салон.
          </SectionTitle>
        </div>
        <SectionLead className="md:col-span-5">
          Без поставување, без скриени трошоци. 14 дена бесплатно за сите пакети
          — плаќаш дури кога ќе одлучиш дека е вистинско.
        </SectionLead>
      </div>

      {/* Plans — 4 self-serve tiers as a responsive grid (1 col mobile,
          2 cols tablet, 4 cols desktop). Pro card is visually highlighted
          and lifted to first position on mobile so the most-popular plan
          gets the lead position regardless of viewport. */}
      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
        {Plans.map((p, i) => (
          <Reveal
            key={p.key}
            delay={p.highlighted ? 80 : 0}
            className={cn(
              "h-full",
              p.highlighted ? "order-first lg:order-none" : "",
              !p.highlighted && i === 2 ? "lg:order-none" : ""
            )}
          >
            <PriceCard p={p} />
          </Reveal>
        ))}
      </div>

      {/* Enterprise — separate full-width strip below the 4 self-serve
          cards. Contact-sales only, so it gets a calmer treatment without
          a price. */}
      <Reveal delay={160} className="mt-5">
        <div className="grid grid-cols-1 gap-6 rounded-2xl border border-white/[0.07] bg-white/[0.018] p-7 lg:grid-cols-[1fr_auto] lg:items-center lg:gap-8">
          <div>
            <div className="flex items-center gap-3">
              <div className="text-[18px] tracking-tighter2 text-ink-50">
                {EnterprisePlan.name}
              </div>
              <Pill tone="soft">Контактирај продажби</Pill>
            </div>
            <p className="mt-2 max-w-2xl font-mono text-[10.5px] uppercase tracking-[0.16em] text-ink-300">
              {EnterprisePlan.forWho}
            </p>
            <ul className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
              {EnterprisePlan.features.map((f) => (
                <li key={f} className="flex items-start gap-3 text-[13.5px] text-ink-200">
                  <span className="mt-0.5 grid h-4 w-4 shrink-0 place-items-center rounded-full bg-white/[0.06] text-ink-200">
                    <ICheck size={11} stroke={2.2} />
                  </span>
                  <span>{f}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="flex justify-start lg:justify-end">
            <ButtonGhost href="#contact">{EnterprisePlan.cta}</ButtonGhost>
          </div>
        </div>
      </Reveal>

      {/* Conversion strip */}
      <div className="mt-8 grid grid-cols-1 items-center gap-5 rounded-2xl border border-white/[0.06] bg-white/[0.018] p-6 md:grid-cols-3">
        {[
          { l: "Готов сајт за 15 мин.", d: "Дизајн, инвентар и објави во еден чекор." },
          { l: "Без обврзувачки договор", d: "Месечно. Откажуваш во секое време." },
          { l: "Поддршка на македонски", d: "Реални луѓе, не chatbot." },
        ].map((b) => (
          <div key={b.l} className="flex items-start gap-3">
            <span className="mt-1 grid h-5 w-5 place-items-center rounded-full bg-lime/15 text-lime">
              <ICheck size={11} stroke={2.2} />
            </span>
            <div>
              <div className="text-[13.5px] text-ink-100">{b.l}</div>
              <div className="font-mono text-[10.5px] uppercase tracking-[0.16em] text-ink-300">
                {b.d}
              </div>
            </div>
          </div>
        ))}
      </div>

      <p className="mt-6 text-center font-mono text-[10.5px] uppercase tracking-[0.18em] text-ink-400">
        Цените може да се приспособат според потребите на салонот.
      </p>
    </Container>
  </Section>
);

// ---------- CONTACT / DEMO ----------
const ContactSection = () => {
  const [submitted, setSubmitted] = React.useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };
  return (
    <Section id="contact" label="13 Contact" className="py-20 md:py-32">
      <Container>
        <div className="grid grid-cols-1 gap-10 lg:grid-cols-12 lg:gap-12">
          <div className="lg:col-span-5">
            <Eyebrow index="10">Контакт</Eyebrow>
            <h2 className="mt-4 text-[clamp(34px,5vw,52px)] leading-[1.04] tracking-tightest font-medium text-ink-50">
              Имаш <span className="display-serif text-lime">прашање</span>?
            </h2>
            <p className="mt-5 max-w-md text-[14.5px] leading-[1.55] text-ink-300">
              За поголем салон, мрежа со повеќе локации или индивидуален SLA — јави
              ни се. За самостоен старт, оди директно на{" "}
              <a href="/signup" className="text-lime underline">креирање на сајтот</a>.
            </p>

            {/* Quick contact buttons */}
            <div className="mt-7 grid grid-cols-1 gap-2 sm:grid-cols-3">
              {[
                { l: "Viber", v: "+389 70 000 000", Icon: IPhone },
                { l: "Email", v: "hello@dealerhub.mk", Icon: IInbox },
                { l: "Телефон", v: "02 3000 000", Icon: IPhone },
              ].map((c) => (
                <a
                  key={c.l}
                  href="#"
                  className="flex items-center gap-3 rounded-xl border border-white/[0.07] bg-white/[0.018] p-3 transition-colors hover:bg-white/[0.04]"
                >
                  <span className="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-lime/10 text-lime">
                    <c.Icon size={15} />
                  </span>
                  <div className="min-w-0">
                    <div className="font-mono text-[10px] uppercase tracking-[0.16em] text-ink-300">
                      {c.l}
                    </div>
                    <div className="truncate text-[13px] text-ink-100">{c.v}</div>
                  </div>
                </a>
              ))}
            </div>
          </div>

          <div className="lg:col-span-7">
            <Card className="p-6 md:p-9">
              {!submitted ? (
                <form onSubmit={onSubmit} className="space-y-4">
                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <Field label="Име" name="name" placeholder="Александар М." required />
                    <Field label="Име на авто салон" name="dealer" placeholder="Премиум Авто" required />
                  </div>
                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <Field
                      label="Телефон / Viber"
                      name="phone"
                      placeholder="+389 70 …"
                      type="tel"
                      inputMode="tel"
                      required
                    />
                    <Field
                      label="Број на возила"
                      name="fleet"
                      placeholder="нпр. 25"
                      type="number"
                      inputMode="numeric"
                    />
                  </div>
                  <FieldArea label="Кратка порака (опционално)" name="msg" rows={3} placeholder="На пример: имам 3 локации, сакам сметка за организација…" />
                  <div className="flex flex-col gap-3 pt-2 sm:flex-row sm:items-center sm:justify-between">
                    <p className="font-mono text-[10.5px] uppercase tracking-[0.16em] text-ink-400">
                      Со праќањето се согласуваш со условите.
                    </p>
                    <ButtonPrimary className="w-full justify-center sm:w-auto">
                      Испрати барање
                    </ButtonPrimary>
                  </div>
                </form>
              ) : (
                <div className="flex flex-col items-start gap-4 py-8">
                  <span className="grid h-12 w-12 place-items-center rounded-full bg-lime/15 text-lime">
                    <ICheck size={22} stroke={2.4} />
                  </span>
                  <div>
                    <div className="text-[22px] tracking-tighter2 text-ink-50">Барањето е испратено.</div>
                    <p className="mt-2 max-w-md text-[14px] leading-[1.55] text-ink-300">
                      Се јавуваме во рок од 24 часа. Дотогаш можеш и сам да го{" "}
                      <a href="/signup" className="text-lime underline">креираш сајтот</a>.
                    </p>
                  </div>
                </div>
              )}
            </Card>
          </div>
        </div>
      </Container>
    </Section>
  );
};

const Field = ({ label, name, type = "text", ...rest }) => (
  <label className="block">
    <span className="block font-mono text-[10.5px] uppercase tracking-[0.16em] text-ink-300">
      {label}
    </span>
    <input
      name={name}
      type={type}
      {...rest}
      className="mt-2 h-12 w-full rounded-xl border border-white/[0.08] bg-black/30 px-4 text-[15px] text-ink-100 placeholder:text-ink-400 outline-none transition-colors focus:border-lime/40 focus:bg-black/40"
    />
  </label>
);

const FieldArea = ({ label, name, rows = 3, ...rest }) => (
  <label className="block">
    <span className="block font-mono text-[10.5px] uppercase tracking-[0.16em] text-ink-300">
      {label}
    </span>
    <textarea
      name={name}
      rows={rows}
      {...rest}
      className="mt-2 w-full rounded-xl border border-white/[0.08] bg-black/30 px-4 py-3 text-[15px] text-ink-100 placeholder:text-ink-400 outline-none transition-colors focus:border-lime/40 focus:bg-black/40"
    />
  </label>
);

// ---------- 12. TRUST ----------
const TrustSection = () => {
  const trusts = [
    { t: "Поддршка на македонски", Icon: IUsers },
    { t: "Локални платформи", Icon: ILayers },
    { t: "Без комплициран setup", Icon: IBolt },
    { t: "Готово за кратко време", Icon: ITag },
    { t: "Mobile-first сајтови", Icon: IPhone },
    { t: "SEO структура за возила", Icon: IGlobe },
  ];
  return (
    <Section id="trust" label="12 Trust">
      <Container>
        <div className="mb-10 grid grid-cols-1 gap-6 md:mb-14 md:grid-cols-12 md:items-end md:gap-8">
          <div className="md:col-span-7">
            <Eyebrow index="09">Доверба</Eyebrow>
            <SectionTitle className="mt-4">
              Направено за <span className="display-serif text-lime">реалниот</span> начин на работа на авто салоните.
            </SectionTitle>
          </div>
          <SectionLead className="md:col-span-5">
            Не уште една западна SaaS алатка. DealerHub го разбира локалниот
            пазар, локалните канали и реалниот процес на продажба.
          </SectionLead>
        </div>

        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {trusts.map((b) => (
            <div
              key={b.t}
              className="group flex items-center gap-4 rounded-2xl border border-white/[0.06] bg-white/[0.018] p-5 transition-colors hover:bg-white/[0.04]"
            >
              <span className="grid h-11 w-11 shrink-0 place-items-center rounded-xl border border-white/[0.08] bg-white/[0.025] text-ink-100">
                <b.Icon size={18} />
              </span>
              <div className="text-[15px] tracking-tighter2 text-ink-100">{b.t}</div>
            </div>
          ))}
        </div>
      </Container>
    </Section>
  );
};

// ---------- 13. FAQ ----------
const FAQs = [
  {
    q: "Дали ми треба постоечки сајт?",
    a: "Не. DealerHub може да ти креира комплетен нов сајт за салонот — со сопствен домен, мобилна верзија и SEO структура за возила.",
  },
  {
    q: "Дали автоматски објавува на Facebook и Instagram?",
    a: "Да, DealerHub е направен за автоматско објавување на возила на социјални мрежи и локални канали, со оптимизирани слики и текст за секоја платформа.",
  },
  {
    q: "Дали работи со Реклама5 и Pazar3?",
    a: "Платформата е дизајнирана да поддржи локални огласници како Реклама5 и Pazar3 — без потреба за рачно внесување.",
  },
  {
    q: "Дали можам да имам сопствен домен?",
    a: "Да, секој салон може да користи сопствен домен — пример: tvoj-salon.mk или voziladealer.mk.",
  },
  {
    q: "Дали можам сам да го креирам сајтот?",
    a: "Да. Преку /signup за околу 15 минути сам го избираш дизајнот, го пишуваш името на салонот, го прикачуваш логото и поврзуваш канали. Без картичка, без обврзувачки договор.",
  },
  {
    q: "Колку трае пробниот период?",
    a: "14 дена потполно бесплатно — без картичка. Ако ти одговара, продолжуваш со некој од 4-те самостојни пакети. Ако не — едноставно прекинуваш.",
  },
];

// Premium calm: open state used a solid lime fill for the +/- pill, which
// pulled the eye when several FAQs were stacked. The lime is now a quiet
// hairline ring + tinted text so the accent reads as "active state", not
// "alert". Touch target stays ≥ 44px (h-9 = 36 + padding around button is
// from the wrapping py-4).
const FAQItem = ({ q, a, isOpen, onClick }) => (
  <div className="border-b border-white/[0.06] py-2">
    <button
      onClick={onClick}
      className="flex w-full items-center justify-between gap-4 py-4 text-left"
      aria-expanded={isOpen}
    >
      <span className="text-[17px] tracking-tighter2 text-ink-100 md:text-[18px]">{q}</span>
      <span
        className={cn(
          "grid h-9 w-9 shrink-0 place-items-center rounded-full border transition-colors",
          isOpen
            ? "border-lime/40 bg-lime/[0.08] text-lime"
            : "border-white/[0.08] bg-white/[0.025] text-ink-200"
        )}
      >
        {isOpen ? <IMinus size={14} stroke={2} /> : <IPlus size={14} stroke={2} />}
      </span>
    </button>
    <div
      className="grid transition-[grid-template-rows] duration-500 ease-out"
      style={{ gridTemplateRows: isOpen ? "1fr" : "0fr" }}
    >
      <div className="overflow-hidden">
        <p className="pb-5 pr-2 text-[14.5px] leading-[1.6] text-ink-300 md:pr-12">{a}</p>
      </div>
    </div>
  </div>
);

const FAQSection = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <Section id="faq" label="13 FAQ">
      <Container>
        <div className="grid grid-cols-1 gap-12 lg:grid-cols-12">
          <div className="lg:col-span-5">
            <Eyebrow index="10">FAQ</Eyebrow>
            <h2 className="mt-4 text-[clamp(30px,6.5vw,52px)] leading-[1.04] tracking-tightest font-medium text-ink-50">
              Често поставувани <span className="display-serif text-lime">прашања</span>.
            </h2>
            <p className="mt-5 max-w-md text-[14.5px] leading-[1.55] text-ink-300">
              Не го гледаш одговорот? Пишувај ни — одговараме во рок од еден работен ден.
            </p>
            <ButtonGhost href="#contact" className="mt-7">Контактирај нè</ButtonGhost>
          </div>
          <div className="lg:col-span-7">
            {FAQs.map((f, i) => (
              <FAQItem
                key={f.q}
                q={f.q}
                a={f.a}
                isOpen={open === i}
                onClick={() => setOpen(open === i ? -1 : i)}
              />
            ))}
          </div>
        </div>
      </Container>
    </Section>
  );
};

// ---------- 14. FINAL CTA ----------
const FinalCTA = () => (
  <Section id="cta" label="14 Final CTA" className="pb-12">
    <Container>
      <div className="relative overflow-hidden rounded-3xl border border-white/[0.07] bg-gradient-to-b from-white/[0.04] to-white/[0.012] p-8 md:p-16">
        {/* Ambient */}
        <div
          aria-hidden
          className="pointer-events-none absolute -inset-32"
          style={{
            background:
              "radial-gradient(50% 50% at 70% 20%, rgba(207,242,85,0.10), rgba(0,0,0,0) 60%), radial-gradient(40% 40% at 20% 80%, rgba(207,242,85,0.06), rgba(0,0,0,0) 60%)",
          }}
        />
        {/* Blueprint grid */}
        <div className="pointer-events-none absolute inset-0 blueprint opacity-[0.5] [mask-image:radial-gradient(50%_60%_at_50%_60%,#000,transparent)]" />

        <div className="relative">
          <SystemBadge>DealerHub · 2026</SystemBadge>
          <h2 className="mt-6 max-w-3xl text-balance text-[clamp(36px,7.5vw,76px)] leading-[1.0] tracking-tightest font-medium text-ink-50">
            Подготвен си да го{" "}
            <span className="display-serif text-lime">модернизираш</span> твојот авто салон?
          </h2>
          <p className="mt-6 max-w-xl text-[15px] leading-[1.55] text-ink-300">
            Започни со DealerHub и претвори го твојот инвентар во професионален
            продажен систем — сајт, објави и CRM на едно место.
          </p>
          <div className="mt-9 flex flex-wrap items-center gap-3">
            <ButtonPrimary href="/signup">Започни сега</ButtonPrimary>
            <ButtonGhost href="https://demo.dealerhub.design" target="_blank" rel="noopener">Види пример сајт</ButtonGhost>
          </div>
          <div className="mt-8 flex flex-wrap items-center gap-x-7 gap-y-3 font-mono text-[11px] uppercase tracking-[0.16em] text-ink-300">
            <span className="flex items-center gap-2"><ICheck size={12} stroke={2} className="text-lime" /> Без картичка</span>
            <span className="flex items-center gap-2"><ICheck size={12} stroke={2} className="text-lime" /> Готов сајт за 15 мин.</span>
            <span className="flex items-center gap-2"><ICheck size={12} stroke={2} className="text-lime" /> Откажуваш во секое време</span>
          </div>
        </div>
      </div>
    </Container>
  </Section>
);

// ---------- FOOTER ----------
const Footer = () => (
  <footer className="relative border-t border-white/[0.06] pt-16 pb-10">
    <Container>
      <div className="grid grid-cols-2 gap-10 md:grid-cols-12">
        <div className="col-span-2 md:col-span-5">
          <div className="flex items-center gap-2 text-[20px] tracking-tightest text-ink-50">
            <span
              className="inline-grid h-7 w-7 place-items-center rounded-md text-ink-950"
              style={{ background: "#CFF255" }}
            >
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M4 8l4-4h8l4 4v8l-4 4H8l-4-4z" />
                <path d="M9 12h6" />
              </svg>
            </span>
            DealerHub
          </div>
          <p className="mt-5 max-w-sm text-[13.5px] leading-[1.55] text-ink-300">
            Оперативен систем за авто салони — сајт, инвентар, објавување, CRM и
            аналитика на едно место.
          </p>
          <div className="mt-6 font-mono text-[10.5px] uppercase tracking-[0.18em] text-ink-400">
            © 2026 DealerHub · Скопје, MK
          </div>
        </div>

        {[
          {
            t: "Продукт",
            links: ["Како работи", "Функции", "Дизајни", "Цени", "Интеграции"],
          },
          {
            t: "Платформи",
            links: ["Facebook", "Instagram", "Реклама5", "Pazar3", "Сопствен сајт"],
          },
          {
            t: "Компанија",
            links: ["FAQ", "Контакт", "Поддршка", "Правила", "Приватност"],
          },
        ].map((col) => (
          <div key={col.t} className="md:col-span-2">
            <div className="font-mono text-[10.5px] uppercase tracking-[0.18em] text-ink-300">
              {col.t}
            </div>
            <ul className="mt-4 space-y-2.5">
              {col.links.map((l) => (
                <li key={l}>
                  <a href="#" className="text-[13.5px] text-ink-200 transition-colors hover:text-ink-50">
                    {l}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      {/* Big wordmark */}
      <div className="relative mt-16 overflow-hidden">
        <div
          className="select-none whitespace-nowrap text-[clamp(80px,18vw,260px)] font-medium leading-[0.85] tracking-tightest text-ink-50/[0.04]"
          aria-hidden
        >
          DEALERHUB
        </div>
      </div>
    </Container>
  </footer>
);

Object.assign(window, { PricingSection, ContactSection, TrustSection, FAQSection, FinalCTA, Footer });


// ================== app.jsx ==================
// App shell: sticky header, page composition, mobile sticky CTA

const { useState, useEffect } = React;

// ---------- HEADER ----------
const NavLinks = [
  { href: "#how", l: "Како работи" },
  { href: "#features", l: "Функции" },
  { href: "#designs", l: "Дизајни" },
  { href: "#pricing", l: "Цени" },
  { href: "#faq", l: "FAQ" },
];

const Logo = ({ className = "" }) => (
  <a href="#" className={cn("flex items-center gap-2 text-[17px] tracking-tightest text-ink-50", className)}>
    <span
      className="inline-grid h-7 w-7 place-items-center rounded-md text-ink-950"
      style={{ background: "#CFF255" }}
    >
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M4 8l4-4h8l4 4v8l-4 4H8l-4-4z" />
        <path d="M9 12h6" />
      </svg>
    </span>
    <span className="font-medium">DealerHub</span>
  </a>
);

const Header = () => {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <>
      <header
        className={cn(
          "fixed inset-x-0 top-0 z-50 transition-[background-color,backdrop-filter,border-color] duration-300",
          scrolled
            ? "border-b border-white/[0.06] bg-ink-900/70 backdrop-blur-xl"
            : "border-b border-transparent bg-transparent"
        )}
      >
        <Container className="flex h-16 items-center justify-between gap-4">
          <Logo />

          <nav className="hidden items-center gap-8 lg:flex">
            {NavLinks.map((n) => (
              <a
                key={n.href}
                href={n.href}
                className="text-[13.5px] text-ink-200 transition-colors hover:text-ink-50"
              >
                {n.l}
              </a>
            ))}
          </nav>

          <div className="flex items-center gap-2">
            <a
              href="/admin/login"
              className="hidden text-[13.5px] text-ink-200 transition-colors hover:text-ink-50 md:inline-block"
            >
              Пријави се
            </a>
            <ButtonPrimary href="/signup" className="hidden md:inline-flex">Започни сега</ButtonPrimary>
            <button
              className="grid h-9 w-9 place-items-center rounded-md border border-white/[0.08] bg-white/[0.025] text-ink-100 lg:hidden"
              onClick={() => setMobileOpen(true)}
              aria-label="Open menu"
            >
              <IMenu size={16} />
            </button>
          </div>
        </Container>
      </header>

      {/* Mobile menu */}
      {mobileOpen && (
        <div className="fixed inset-0 z-[60] bg-ink-900/95 backdrop-blur-xl lg:hidden">
          <Container className="flex h-16 items-center justify-between">
            <Logo />
            <button
              className="grid h-9 w-9 place-items-center rounded-md border border-white/[0.08] bg-white/[0.025] text-ink-100"
              onClick={() => setMobileOpen(false)}
              aria-label="Close menu"
            >
              <IX size={16} />
            </button>
          </Container>
          <Container className="pt-8">
            <nav className="flex flex-col gap-1">
              {NavLinks.map((n) => (
                <a
                  key={n.href}
                  href={n.href}
                  onClick={() => setMobileOpen(false)}
                  className="border-b border-white/[0.06] py-4 text-[22px] tracking-tighter2 text-ink-100"
                >
                  {n.l}
                </a>
              ))}
            </nav>
            <div className="mt-8 flex flex-col gap-3">
              <ButtonPrimary href="/signup" className="w-full justify-center">Започни сега</ButtonPrimary>
              <ButtonGhost href="/admin/login" className="w-full justify-center">Пријави се</ButtonGhost>
            </div>
          </Container>
        </div>
      )}
    </>
  );
};

// ---------- MOBILE STICKY CTA ----------
// Premium calm: dark-glass dock with reduced lime ring, safe-area padding,
// and a wider hide-zone (contact + faq + footer). The dock is intentionally
// quiet — it's a recurring affordance, not a banner — so the lime is
// confined to the button, with only a faint warm hairline on the dock.
const MobileStickyCTA = () => {
  const [show, setShow] = useState(false);
  const [hideZone, setHideZone] = useState(false);
  useEffect(() => {
    const onScroll = () => {
      setShow(window.scrollY > 480);
      // Hide whenever any "destination" section near the page bottom is in
      // view — contact form, FAQ accordion or footer — so the dock never
      // sits on top of the actual conversion area.
      const ids = ["contact", "faq", "cta"];
      let near = false;
      for (const id of ids) {
        const el = document.getElementById(id);
        if (!el) continue;
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight - 120) { near = true; break; }
      }
      // Also hide once the footer is in view
      const footer = document.querySelector("footer");
      if (footer) {
        const r = footer.getBoundingClientRect();
        if (r.top < window.innerHeight - 60) near = true;
      }
      setHideZone(near);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
    };
  }, []);
  const visible = show && !hideZone;
  return (
    <div
      className={cn(
        "fixed inset-x-3 z-40 md:hidden",
        "transition-[transform,opacity] duration-500 ease-out",
        visible ? "translate-y-0 opacity-100" : "translate-y-[160%] opacity-0"
      )}
      style={{ bottom: "max(12px, env(safe-area-inset-bottom))" }}
    >
      <div className="flex items-center justify-between gap-3 rounded-2xl border border-white/[0.08] bg-ink-900/92 p-2 pl-4 shadow-[0_24px_60px_-16px_rgba(0,0,0,0.75)] backdrop-blur-xl">
        <div className="min-w-0">
          <div className="truncate text-[13.5px] text-ink-100">Спремен за демо?</div>
          <div className="font-mono text-[9.5px] uppercase tracking-[0.16em] text-ink-300">
            15 мин · без картичка
          </div>
        </div>
        <ButtonPrimary href="/signup" className="!py-2.5 !text-[13px] shrink-0">Побарај демо</ButtonPrimary>
      </div>
    </div>
  );
};

// ---------- APP ----------
function App() {
  return (
    <div className="relative">
      <Header />
      <main>
        <Hero />
        <BeforeAfter />
        <HowItWorks />
        <Bento />
        <TemplatesSection />
        <PlatformsSection />
        <CRMSection />
        <AnalyticsSection />
        <PricingSection />
        <TrustSection />
        <ContactSection />
        <FAQSection />
        <FinalCTA />
      </main>
      <Footer />
      <MobileStickyCTA />
    </div>
  );
}

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