/* PIXYcal landing — fully tweakable. All sections live here. */
const { useState, useEffect, useRef, useMemo } = React;

/* ────────────────────────────────────────────────────────────────────────────
   ICON SYSTEM
   ──────────────────────────────────────────────────────────────────────────── */
const ICON_PATHS = {
  arrowRight: <><path d="M5 12h14" /><path d="m13 6 6 6-6 6" /></>,
  arrowUpRight: <><path d="M7 17 17 7" /><path d="M8 7h9v9" /></>,
  check: <><path d="M5 12l4 4L19 6" /></>,
  plus: <><path d="M12 5v14M5 12h14" /></>,
  minus: <><path d="M5 12h14" /></>,
  target: <><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="5" /><circle cx="12" cy="12" r="1.6" fill="currentColor" stroke="none" /></>,
  bot: <><rect x="4" y="7" width="16" height="13" /><path d="M9 7V4M15 7V4" /><circle cx="9" cy="13" r="1.2" fill="currentColor" stroke="none" /><circle cx="15" cy="13" r="1.2" fill="currentColor" stroke="none" /></>,
  lineChart: <><path d="M4 20V4" /><path d="M4 20h16" /><path d="m6 14 4-4 4 3 6-7" /></>,
  workflow: <><rect x="3" y="3" width="6" height="6" /><rect x="15" y="3" width="6" height="6" /><rect x="9" y="15" width="6" height="6" /><path d="M6 9v3h12V9" /><path d="M12 12v3" /></>,
  sparkles: <><path d="M12 3v6M9 6h6M5 13l1 3 3 1-3 1-1 3-1-3-3-1 3-1zM17 13l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z" /></>,
  zap: <><path d="M13 3 4 14h7l-1 7 9-11h-7z" /></>,
  shield: <><path d="M12 3 4 6v6c0 5 3.6 8.6 8 9 4.4-.4 8-4 8-9V6Z" /></>,
  menu: <><path d="M4 6h16M4 12h16M4 18h16" /></>,
  x: <><path d="M18 6 6 18M6 6l12 12" /></>,
  mail: <><rect x="3" y="5" width="18" height="14" /><path d="m3 7 9 6 9-6" /></>,
  megaphone: <><path d="M4 9v6h3l9 5V4L7 9Z" /><path d="M18 9a4 4 0 0 1 0 6" /></>,
  clock: <><circle cx="12" cy="12" r="9" /><path d="m12 12 4-4" /></>,
  search: <><circle cx="11" cy="11" r="6" /><path d="m20 20-4-4" /><path d="m9 11 2 2 4-4" /></>,
  arrowUp: <><path d="M12 19V5" /><path d="m5 12 7-7 7 7" /></>,
  arrowDown: <><path d="M12 5v14" /><path d="m19 12-7 7-7-7" /></>,
  arrowLeft: <><path d="M19 12H5" /><path d="m11 18-6-6 6-6" /></>,
  loader: <><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" /></>,
  alertCircle: <><circle cx="12" cy="12" r="9" /><path d="M12 8v4M12 16h.01" /></>,
  phone: <><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" /></>,
  video: <><path d="m22 8-6 4 6 4V8Z" /><rect x="2" y="6" width="14" height="12" rx="2" /></>
};
function Icon({ name, size = 18, strokeWidth = 1.7, style }) {
  const p = ICON_PATHS[name];if (!p) return null;
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor"
    strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" style={style} aria-hidden="true">
      {p}
    </svg>);

}

/* ────────────────────────────────────────────────────────────────────────────
   PALETTES — accent colour systems the user can swap
   ──────────────────────────────────────────────────────────────────────────── */
const PALETTES = {
  warm: { name: "Rose / Orange / Amber", a: "#D4477A", b: "#E8622F", c: "#F5A82A", glow: "212,71,122" },
  electric: { name: "Lime / Teal", a: "#C6FF00", b: "#7CFF38", c: "#34E1B5", glow: "198,255,0" },
  ocean: { name: "Indigo / Cyan", a: "#5B6CFF", b: "#3E7BFF", c: "#22D3EE", glow: "91,108,255" },
  violet: { name: "Violet / Magenta", a: "#9333EA", b: "#C026D3", c: "#EC4899", glow: "147,51,234" },
  mono: { name: "Monochrome", a: "#F4F4F0", b: "#D8D8D0", c: "#9A9A92", glow: "244,244,240" }
};

/* ────────────────────────────────────────────────────────────────────────────
   THEME APPLICATION — writes CSS variables to :root based on tweaks
   ──────────────────────────────────────────────────────────────────────────── */
function useThemeVars(t) {
  useEffect(() => {
    const root = document.documentElement;
    const p = PALETTES[t.palette] || PALETTES.warm;
    // Accent gradient
    const g = `linear-gradient(${t.gradientAngle}deg, ${p.a} 0%, ${p.b} 55%, ${p.c} 100%)`;
    const gWide = `linear-gradient(${t.gradientAngle}deg, ${p.a} 0%, ${p.b} 40%, ${p.c} 80%, ${p.a} 100%)`;
    root.style.setProperty("--px-accent-a", p.a);
    root.style.setProperty("--px-accent-b", p.b);
    root.style.setProperty("--px-accent-c", p.c);
    root.style.setProperty("--px-accent", p.a);
    root.style.setProperty("--px-gradient", g);
    root.style.setProperty("--px-gradient-wide", gWide);
    root.style.setProperty("--px-glow-rgb", p.glow);
    root.style.setProperty("--px-glow", `0 0 ${16 * t.glow}px rgba(${p.glow}, ${0.22 * t.glow})`);
    root.style.setProperty("--px-glow-strong", `0 0 ${28 * t.glow}px rgba(${p.glow}, ${0.36 * t.glow})`);
    root.style.setProperty("--px-radius", `${t.radius}px`);
    root.style.setProperty("--px-density", t.density === "compact" ? "0.78" : t.density === "comfy" ? "1.18" : "1");

    // Dark/light surfaces
    if (t.dark) {
      root.style.setProperty("--px-bg", "#050505");
      root.style.setProperty("--px-surface-0", "#050505");
      root.style.setProperty("--px-surface-1", "#0A0A0A");
      root.style.setProperty("--px-surface-2", "#111111");
      root.style.setProperty("--px-surface-3", "#171717");
      root.style.setProperty("--px-surface-4", "#1F1F1F");
      root.style.setProperty("--px-text-strong", "#F4F4F0");
      root.style.setProperty("--px-text", "#D8D8D0");
      root.style.setProperty("--px-text-muted", "#9A9A92");
      root.style.setProperty("--px-text-subtle", "#66665F");
      root.style.setProperty("--px-line-soft", "#191916");
      root.style.setProperty("--px-line", "#242420");
      root.style.setProperty("--px-line-strong", "#3A3A36");
      root.style.setProperty("--px-header-bg", "rgba(5,5,5,0.88)");
      root.style.setProperty("--px-logo-filter", "none");
      root.style.setProperty("--px-dot-color", "rgba(244,244,240,0.14)");
    } else {
      root.style.setProperty("--px-bg", "#FAFAF7");
      root.style.setProperty("--px-surface-0", "#FAFAF7");
      root.style.setProperty("--px-surface-1", "#FFFFFF");
      root.style.setProperty("--px-surface-2", "#F2F2EE");
      root.style.setProperty("--px-surface-3", "#E9E9E3");
      root.style.setProperty("--px-surface-4", "#DCDCD4");
      root.style.setProperty("--px-text-strong", "#0A0A08");
      root.style.setProperty("--px-text", "#1F1F1B");
      root.style.setProperty("--px-text-muted", "#5C5C56");
      root.style.setProperty("--px-text-subtle", "#9A9A92");
      root.style.setProperty("--px-line-soft", "#EAEAE3");
      root.style.setProperty("--px-line", "#D8D8D0");
      root.style.setProperty("--px-line-strong", "#B8B8B0");
      root.style.setProperty("--px-header-bg", "rgba(250,250,247,0.88)");
      root.style.setProperty("--px-logo-filter", "invert(1)");
      root.style.setProperty("--px-dot-color", "rgba(10,10,8,0.16)");
    }
  }, [t.dark, t.palette, t.gradientAngle, t.glow, t.radius, t.density]);
}

/* ────────────────────────────────────────────────────────────────────────────
   REVEAL — IntersectionObserver fade up
   ──────────────────────────────────────────────────────────────────────────── */
function Reveal({ children, delay = 0, as: Tag = "div", style, className = "" }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;if (!el) return;
    if (!window.__pxRevealOn) {el.classList.add("in");return;}
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {setTimeout(() => el.classList.add("in"), delay);io.unobserve(el);}
    }, { threshold: 0.12, rootMargin: "0px 0px -6% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return <Tag ref={ref} className={`px-io ${className}`} style={style}>{children}</Tag>;
}

/* ────────────────────────────────────────────────────────────────────────────
   COUNTER — animated number on view
   ──────────────────────────────────────────────────────────────────────────── */
function Counter({ to, prefix = "", suffix = "", decimals = 0, duration = 1400 }) {
  const ref = useRef(null);
  const [val, setVal] = useState(0);
  useEffect(() => {
    const el = ref.current;if (!el) return;
    let raf, start;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        const tick = (t) => {
          if (!start) start = t;
          const p = Math.min(1, (t - start) / duration);
          const eased = 1 - Math.pow(1 - p, 3);
          setVal(to * eased);
          if (p < 1) raf = requestAnimationFrame(tick);
        };
        raf = requestAnimationFrame(tick);
        io.disconnect();
      }
    }, { threshold: 0.3 });
    io.observe(el);
    return () => {io.disconnect();cancelAnimationFrame(raf);};
  }, [to]);
  return <span ref={ref}>{prefix}{val.toFixed(decimals)}{suffix}</span>;
}

/* ────────────────────────────────────────────────────────────────────────────
   PRIMARY BUTTON — gradient + pulse
   ──────────────────────────────────────────────────────────────────────────── */
function PrimaryBtn({ children, onClick, size = "md", pulse = true, style }) {
  const sizes = { sm: { h: 40, pad: "0 16px", fz: 13 }, md: { h: 48, pad: "0 22px", fz: 14 }, lg: { h: 56, pad: "0 28px", fz: 15 } };
  const s = sizes[size];
  return (
    <button onClick={onClick} className={pulse ? "px-cta-pulse" : ""} style={{
      display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
      height: s.h, padding: s.pad, fontSize: s.fz, fontWeight: 700,
      fontFamily: "var(--px-font-sans)",
      background: "var(--px-gradient)", color: "#fff", border: "none",
      borderRadius: "var(--px-radius)", cursor: "pointer",
      boxShadow: "var(--px-glow)", whiteSpace: "nowrap",
      transition: "transform 150ms var(--px-easing), box-shadow 150ms var(--px-easing), filter 150ms",
      ...style
    }}
    onMouseEnter={(e) => {e.currentTarget.style.boxShadow = "var(--px-glow-strong)";e.currentTarget.style.filter = "brightness(1.06)";}}
    onMouseLeave={(e) => {e.currentTarget.style.boxShadow = "var(--px-glow)";e.currentTarget.style.filter = "none";}}>
      {children}
    </button>);

}

function GhostBtn({ children, onClick, size = "md", style }) {
  const sizes = { sm: { h: 40, pad: "0 16px", fz: 13 }, md: { h: 48, pad: "0 22px", fz: 14 }, lg: { h: 56, pad: "0 28px", fz: 15 } };
  const s = sizes[size];
  return (
    <button onClick={onClick} style={{
      display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
      height: s.h, padding: s.pad, fontSize: s.fz, fontWeight: 700,
      fontFamily: "var(--px-font-sans)",
      background: "var(--px-surface-2)", color: "var(--px-text-strong)",
      border: "1px solid var(--px-line-strong)",
      borderRadius: "var(--px-radius)", cursor: "pointer", whiteSpace: "nowrap",
      transition: "all 150ms var(--px-easing)",
      ...style
    }}
    onMouseEnter={(e) => {e.currentTarget.style.background = "var(--px-surface-3)";e.currentTarget.style.borderColor = "var(--px-accent-a)";}}
    onMouseLeave={(e) => {e.currentTarget.style.background = "var(--px-surface-2)";e.currentTarget.style.borderColor = "var(--px-line-strong)";}}>
      {children}
    </button>);

}

function Eyebrow({ children, style }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      fontFamily: "var(--px-font-mono)", fontSize: 11, fontWeight: 700,
      letterSpacing: "0.14em", textTransform: "uppercase",
      color: "var(--px-accent-c)", ...style
    }}>
      {children}
    </span>);

}

/* ────────────────────────────────────────────────────────────────────────────
   HEADER
   ──────────────────────────────────────────────────────────────────────────── */
const NAV = [
{ label: "Z čeho mizí peníze", href: "#pripady" },
{ label: "Služby", href: "#sluzby" },
{ label: "Tým", href: "#tym" },
{ label: "Konzultace", href: "#kontakt" }];


function Header({ onCta, t }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 40,
      background: "var(--px-header-bg)",
      backdropFilter: "blur(12px)",
      WebkitBackdropFilter: "blur(12px)",
      borderBottom: "1px solid var(--px-line)",
      transition: "background 200ms", borderWidth: "0px"
    }}>
      <div className="px-container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, height: 72 }}>
        <a href="#" style={{ display: "flex", alignItems: "center", flexShrink: 0 }} aria-label="PIXYcal">
          <img className="px-hd-logo" src="assets/pixycal-logo-v2-white.svg" alt="PIXYcal" style={{ width: 124, height: "auto", filter: "var(--px-logo-filter)" }} />
        </a>
        <nav className="px-hd-nav" style={{ display: "flex", gap: 28, flex: 1, justifyContent: "center" }}>
          {NAV.map((item) =>
          <a key={item.href} href={item.href}
          style={{ fontSize: 14, fontWeight: 600, color: "var(--px-text-muted)", textDecoration: "none", transition: "color 150ms" }}
          onMouseEnter={(e) => e.currentTarget.style.color = "var(--px-text-strong)"}
          onMouseLeave={(e) => e.currentTarget.style.color = "var(--px-text-muted)"}>
              {item.label}
            </a>
          )}
        </nav>
        <div className="px-hd-cta" style={{ display: "flex", alignItems: "center", gap: 14, flexShrink: 0 }}>

          {t.showHeaderCta !== false &&
          <PrimaryBtn size="sm" pulse={t.ctaPulse} onClick={onCta}>
              {t.headerCtaLabel || "Konzultace"} <Icon name="arrowRight" size={15} />
            </PrimaryBtn>
          }
        </div>
        <button onClick={() => setOpen((o) => !o)} className="px-hd-toggle"
        style={{ width: 42, height: 42, display: "none", alignItems: "center", justifyContent: "center", background: "var(--px-surface-1)", border: "1px solid var(--px-line)", color: "var(--px-text-strong)", cursor: "pointer", borderRadius: "var(--px-radius)" }}>
          <Icon name={open ? "x" : "menu"} size={20} />
        </button>
      </div>
      {open &&
      <div style={{ borderTop: "1px solid var(--px-line)", background: "var(--px-surface-1)" }}>
          <nav className="px-container" style={{ display: "grid", gap: 4, paddingBlock: 16 }}>
            {NAV.map((item) =>
          <a key={item.href} href={item.href} onClick={() => setOpen(false)}
          style={{ padding: "12px", fontSize: 15, fontWeight: 600, color: "var(--px-text-muted)", textDecoration: "none" }}>
                {item.label}
              </a>
          )}
          </nav>
        </div>
      }
    </header>);

}

/* ────────────────────────────────────────────────────────────────────────────
   HERO
   ──────────────────────────────────────────────────────────────────────────── */
function Hero({ t, onCta }) {
  const spotlightRef = useRef(null);
  useEffect(() => {
    const el = spotlightRef.current;if (!el || !t.spotlight) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      el.style.setProperty("--sx", `${(e.clientX - r.left) / r.width * 100}%`);
      el.style.setProperty("--sy", `${(e.clientY - r.top) / r.height * 100}%`);
    };
    el.addEventListener("mousemove", onMove);
    return () => el.removeEventListener("mousemove", onMove);
  }, [t.spotlight]);

  const headlineSize = `clamp(${36 * t.heroScale}px, ${7.2 * t.heroScale}vw, ${88 * t.heroScale}px)`;
  const align = t.heroAlign;
  const isLeft = align === "left";

  return (
    <section ref={spotlightRef} style={{
      position: "relative", isolation: "isolate", overflow: "hidden",
      borderBottom: "1px solid var(--px-line)",
      paddingBlock: `calc(112px * var(--px-density)) calc(140px * var(--px-density))`
    }}>
      {/* Background pattern */}
      {t.pattern === "dots" && <div aria-hidden style={{
        position: "absolute", inset: 0, zIndex: 0, pointerEvents: "none",
        backgroundImage: "radial-gradient(circle, var(--px-dot-color) 1px, transparent 1px)",
        backgroundSize: `${t.patternScale}px ${t.patternScale}px`,
        opacity: t.patternOpacity,
        maskImage: "radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%)",
        WebkitMaskImage: "radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%)"
      }} />}
      {t.pattern === "grid" && <div aria-hidden style={{
        position: "absolute", inset: 0, zIndex: 0, pointerEvents: "none",
        backgroundImage: `linear-gradient(var(--px-line) 1px, transparent 1px), linear-gradient(90deg, var(--px-line) 1px, transparent 1px)`,
        backgroundSize: `${t.patternScale * 4}px ${t.patternScale * 4}px`,
        opacity: t.patternOpacity * 0.6,
        maskImage: "radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%)",
        WebkitMaskImage: "radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%)"
      }} />}
      {t.pattern === "rays" && <div aria-hidden style={{
        position: "absolute", inset: 0, zIndex: 0, pointerEvents: "none",
        background: `conic-gradient(from 90deg at 50% 100%, transparent 0deg, rgba(var(--px-glow-rgb), ${0.08 * t.patternOpacity}) 60deg, transparent 120deg, rgba(var(--px-glow-rgb), ${0.06 * t.patternOpacity}) 180deg, transparent 240deg, rgba(var(--px-glow-rgb), ${0.08 * t.patternOpacity}) 300deg, transparent 360deg)`
      }} />}

      {/* Glow */}
      {t.heroGlow && <div aria-hidden style={{
        position: "absolute", top: "-10%", left: "50%", transform: "translateX(-50%)",
        width: 900, height: 560, pointerEvents: "none", zIndex: 0,
        background: `radial-gradient(ellipse at 50% 40%, rgba(var(--px-glow-rgb), ${0.18 * t.glow}), transparent 70%)`
      }} />}

      {/* Mouse spotlight */}
      {t.spotlight && <div aria-hidden style={{
        position: "absolute", inset: 0, zIndex: 0, pointerEvents: "none",
        background: "radial-gradient(circle at var(--sx,50%) var(--sy,30%), rgba(var(--px-glow-rgb),0.16), rgba(var(--px-glow-rgb),0.06) 18rem, transparent 38rem)"
      }} />}

      <div className="px-container" style={{ position: "relative", zIndex: 1 }}>
        <div style={{ maxWidth: 960, marginInline: isLeft ? "0" : "auto", textAlign: isLeft ? "left" : "center" }}>
          {t.showEyebrow !== false && <Reveal delay={0}>
            <Eyebrow>
              <span style={{ width: 6, height: 6, background: "var(--px-accent-a)", display: "inline-block" }} />
              {t.eyebrow}
            </Eyebrow>
          </Reveal>}

          <Reveal delay={80} as="h1" style={{
            margin: "20px 0 0",
            fontFamily: "var(--px-font-display)", fontWeight: 700,
            fontSize: headlineSize, lineHeight: 0.94,
            letterSpacing: "-0.048em",
            color: "var(--px-text-strong)", textWrap: "balance"
          }}>
            {t.headlineLine1}<br />
            <span style={{
              background: "var(--px-gradient)",
              WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text"
            }}>{t.headlineAccent}</span>
          </Reveal>

          <Reveal delay={180} as="p" style={{
            marginTop: 28, marginInline: isLeft ? "0" : "auto", maxWidth: 600,
            fontFamily: "var(--px-font-sans)", fontSize: 18 * t.bodyScale, lineHeight: 1.55,
            color: "var(--px-text-muted)"
          }}>
            {t.subtitle}
          </Reveal>

          <Reveal delay={260} style={{
            marginTop: 36, display: "flex", flexWrap: "wrap",
            justifyContent: isLeft ? "flex-start" : "center", gap: 12
          }}>
            <PrimaryBtn size="lg" pulse={t.ctaPulse} onClick={onCta}>
              {t.ctaPrimary} <Icon name="arrowRight" size={17} />
            </PrimaryBtn>
          </Reveal>

          {t.showHeroMetrics &&
          <Reveal delay={360} style={{
            marginTop: 60, display: "flex", flexWrap: "wrap", gap: 0,
            borderTop: "1px solid var(--px-line)", borderBottom: "1px solid var(--px-line)"
          }}>
              {[
            ["+187", "%", "Nárůst tržeb"],
            ["−32", "%", "Snížení CPA"],
            ["3.8", "×", "ROAS"],
            ["12", "h", "Ušetřený týden"]].
            map(([num, suffix, lbl], i) =>
            <div key={i} style={{ flex: "1 1 130px", padding: "22px 16px", borderRight: i < 3 ? "1px solid var(--px-line)" : "none", textAlign: "center" }}>
                  <div style={{
                fontFamily: "var(--px-font-display)", fontWeight: 700,
                fontSize: `clamp(22px, 2.4vw, 30px)`, letterSpacing: "-0.03em",
                background: "var(--px-gradient)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent"
              }}>
                    {num}{suffix}
                  </div>
                  <div style={{ fontFamily: "var(--px-font-mono)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--px-text-muted)", marginTop: 6 }}>
                    {lbl}
                  </div>
                </div>
            )}
            </Reveal>
          }
        </div>
      </div>
    </section>);

}

/* ────────────────────────────────────────────────────────────────────────────
   TOOLS MARQUEE
   ──────────────────────────────────────────────────────────────────────────── */
const TOOLS = [
{ id: "googleads", label: "Google Ads", src: "assets/tools/googleads.svg" },
{ id: "meta", label: "Meta Ads", src: "assets/tools/meta.svg" },
{ id: "sklik", label: "Sklik", src: "assets/tools/sklik.svg" },
{ id: "make", label: "Make.com", src: "assets/tools/make.svg" },
{ id: "n8n", label: "n8n", src: "assets/tools/n8n.svg" },
{ id: "ga4", label: "GA4", src: "assets/tools/googleanalytics.svg" },
{ id: "gtm", label: "GTM", src: "assets/tools/googletagmanager.svg" },
{ id: "searchconsole", label: "Search Console", src: "assets/tools/googlesearchconsole.svg" }];


function ToolsMarquee({ speed, toolsOn }) {
  const activeTools = TOOLS.filter((t) => toolsOn == null || toolsOn[t.id] !== false);
  const cRef = useRef(null),trackRef = useRef(null),seqRef = useRef(null);
  const [seqW, setSeqW] = useState(0);
  const [copies, setCopies] = useState(4);
  useEffect(() => {
    const measure = () => {
      const sw = seqRef.current?.getBoundingClientRect().width || 0;
      const cw = cRef.current?.clientWidth || 0;
      if (sw > 0) {setSeqW(sw);setCopies(Math.max(4, Math.ceil(cw / sw) + 2));}
    };
    measure();
    measure();
    const ro = new ResizeObserver(measure);if (cRef.current) ro.observe(cRef.current);
    return () => ro.disconnect();
  }, []);
  useEffect(() => {
    if (!seqW || !trackRef.current) return;
    const track = trackRef.current;
    let raf,last = null,offset = 0,paused = false;
    const step = (t) => {
      if (last === null) last = t;
      const dt = (t - last) / 1000;last = t;
      if (!paused) {offset = (offset + speed * dt) % seqW;track.style.transform = `translate3d(${-offset}px,0,0)`;}
      raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    const enter = () => paused = true;
    const leave = () => {paused = false;last = null;};
    track.addEventListener("mouseenter", enter);
    track.addEventListener("mouseleave", leave);
    return () => {cancelAnimationFrame(raf);track.removeEventListener("mouseenter", enter);track.removeEventListener("mouseleave", leave);};
  }, [seqW, speed]);

  const chip = (t, i) =>
  <span key={i} className="px-tool-chip" style={{
    marginRight: 28, display: "inline-flex", alignItems: "center", gap: 10,
    padding: "0 18px", height: 46,
    background: "var(--px-surface-1)", border: "1px solid var(--px-line)",
    borderRadius: "var(--px-radius)", flexShrink: 0,
    transition: "background 200ms var(--px-easing), border-color 200ms var(--px-easing)"
  }}>
      <img src={t.src} alt="" width={20} height={20} style={{ objectFit: "contain" }} />
      <span style={{ fontSize: 13, fontWeight: 600, color: "var(--px-text-strong)" }}>{t.label}</span>
    </span>;


  return (
    <section style={{ borderBottom: "1px solid var(--px-line)", background: "var(--px-surface-1)", paddingBlock: 22, overflow: "hidden" }}>
      <style>{`
        .px-tool-chip img { filter: grayscale(1) opacity(0.7); transition: filter 200ms var(--px-easing); }
        .px-tool-chip:hover img { filter: none; }
        .px-tool-chip:hover { background: var(--px-surface-2) !important; border-color: var(--px-line-strong) !important; }
      `}</style>
      <div className="px-container" style={{ display: "flex", alignItems: "center", gap: 28 }}>
        <span className="px-tools-marquee-label" style={{ flexShrink: 0, fontFamily: "var(--px-font-mono)", fontSize: 10.5, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--px-text-muted)" }}>
          Pracujeme s &nbsp;→
        </span>
        <div ref={cRef} style={{ flex: 1, minWidth: 0 }}>
          <div style={{ position: "relative", overflow: "hidden",
            maskImage: "linear-gradient(to right,transparent 0,black 40px,black calc(100% - 40px),transparent 100%)",
            WebkitMaskImage: "linear-gradient(to right,transparent 0,black 40px,black calc(100% - 40px),transparent 100%)" }}>
            <div ref={trackRef} style={{ display: "flex", width: "max-content", willChange: "transform", userSelect: "none" }}>
              {Array.from({ length: copies }, (_, ci) =>
              <span key={ci} ref={ci === 0 ? seqRef : undefined} style={{ display: "inline-flex" }}>
                  {activeTools.map((tool, ti) => chip(tool, `${ci}-${ti}`))}
                </span>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ────────────────────────────────────────────────────────────────────────────
   SERVICES
   ──────────────────────────────────────────────────────────────────────────── */
const SERVICES = [
{ icon: "lineChart", title: "Reklama", desc: "Meta a Google Ads nastavené tak, aby platily jen za to, co reálně vydělá. Žádné kampaně jen proto, že je trend.", metric: "ROAS ×3.8" },
{ icon: "megaphone", title: "Sociální sítě", desc: "Obsah a správa sítí, které stojí na tom, co reálně přivádí zákazníky — ne na lajcích. Pravidelně a s jasným cílem.", metric: "Stabilní růst" },
{ icon: "clock", title: "Měření a data", desc: "GA4, tracking a reporty, ze kterých víte, kterému číslu věřit. Žádné grafy bez závěru.", metric: "100% atribuce" },
{ icon: "search", title: "Analýza konverznosti webu", desc: "Projdeme web krok za krokem a najdeme místa, kde návštěvník odchází. Dostanete konkrétní úpravy, ne obecné rady.", metric: "+CR audit" },
{ icon: "mail", title: "E-mailing", desc: "Automatické e-maily, které zákazníka chytí, než odejde ke konkurenci. Welcome, košík, reaktivace.", metric: "×2.4 LTV" },
{ icon: "workflow", title: "Automatizace", desc: "Make.com a n8n propojení, která šetří hodiny ruční práce týdně.", metric: "−12h / týden" },
{ icon: "sparkles", title: "Kreativa a copy", desc: "Texty a vizuály, kterým zákazník rozumí. Testujeme, co funguje — ne to, co hezky vypadá.", metric: "A/B vždy" },
{ icon: "target", title: "Strategie", desc: "Nejdřív plán, pak rozpočet. Projdeme čísla a řekneme, kde má smysl začít.", metric: "90denní plán" }];


function ServiceCard({ s, idx }) {
  const [hover, setHover] = useState(false);
  return (
    <Reveal delay={idx * 60} style={{ height: "100%" }}>
      <div className="px-service-card" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        position: "relative", padding: 28, height: "100%",
        background: hover ? "var(--px-surface-3)" : "var(--px-surface-2)",
        border: `1px solid ${hover ? "var(--px-line-strong)" : "var(--px-line)"}`,
        borderRadius: "var(--px-radius)",
        transform: hover ? "translateY(-3px)" : "none",
        transition: "all 200ms var(--px-easing)",
        overflow: "hidden",
        display: "flex", flexDirection: "column"
      }}>
        {/* Accent corner spark on hover */}
        <span style={{
          position: "absolute", top: 10, right: 10, width: 6, height: 6,
          background: "var(--px-accent-a)", boxShadow: `0 0 12px rgba(var(--px-glow-rgb), 0.6)`,
          opacity: hover ? 1 : 0, transition: "opacity 200ms"
        }} />
        <div className="px-service-icon" style={{
          width: 44, height: 44, display: "grid", placeItems: "center",
          background: hover ? "var(--px-gradient)" : "var(--px-surface-4)",
          color: hover ? "#fff" : "var(--px-accent-a)",
          marginBottom: 20, borderRadius: "var(--px-radius)",
          transition: "all 200ms var(--px-easing)",
          flexShrink: 0
        }}>
          <Icon name={s.icon} size={22} strokeWidth={1.8} />
        </div>
        <h3 className="px-service-title" style={{ margin: "0 0 10px", fontFamily: "var(--px-font-display)", fontWeight: 700, fontSize: 22, letterSpacing: "-0.02em", color: "var(--px-text-strong)" }}>
          {s.title}
        </h3>
        <p className="px-service-desc" style={{ margin: 0, fontSize: 14.5, lineHeight: 1.6, color: "var(--px-text-muted)" }}>
          {s.desc}
        </p>

      </div>
    </Reveal>);

}

function ServicesSection({ t }) {
  return (
    <section id="sluzby" style={{ paddingBlock: "calc(112px * var(--px-density))", borderBottom: "1px solid var(--px-line)" }}>
      <div className="px-container">
        <Reveal>
          <h2 className="px-services-headline" style={{ margin: 0, fontFamily: "var(--px-font-display)", fontWeight: 700, fontSize: "clamp(28px, 4.4vw, 56px)", lineHeight: 1.05, letterSpacing: "-0.04em", color: "var(--px-text-strong)", textAlign: "center", textWrap: "balance" }}>
            {t.servicesHeadline}{" "}
            <span style={{ background: "var(--px-gradient)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>
              {t.servicesHeadlineAccent}
            </span>
          </h2>
        </Reveal>
        <div className="px-services-grid">
          {SERVICES.map((s, i) => <ServiceCard key={s.title} s={s} idx={i} />)}
        </div>
      </div>
      <style>{`
        .px-services-grid {
          display: grid;
          gap: 12px;
          grid-template-columns: repeat(2, 1fr);
          grid-auto-rows: 1fr;
          margin-top: 40px;
        }
        @media (min-width: 640px) {
          .px-services-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 48px; }
        }
        @media (min-width: 1024px) {
          .px-services-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 56px; }
        }
        /* Mobile-friendly card sizing (≤640px) */
        @media (max-width: 640px) {
          .px-services-grid .px-service-card { padding: 18px !important; }
          .px-services-grid .px-service-icon { width: 36px !important; height: 36px !important; margin-bottom: 14px !important; }
          .px-services-grid .px-service-icon svg { width: 18px !important; height: 18px !important; }
          .px-services-grid .px-service-title { font-size: 17px !important; margin-bottom: 6px !important; }
          .px-services-grid .px-service-desc { font-size: 13px !important; line-height: 1.5 !important; }
        }
      `}</style>
    </section>);

}

/* ────────────────────────────────────────────────────────────────────────────
   PROCESS
   ──────────────────────────────────────────────────────────────────────────── */
const PROCESS = [
{ n: "01", title: "Audit + diagnóza", desc: "48 h. Otevřeme účet, tracking, CRM. Najdeme, kde mizí peníze." },
{ n: "02", title: "Strategie + plán", desc: "Konkrétní 90denní plán. Cíle, KPI, rozpočet — s čísly byznysu." },
{ n: "03", title: "Spuštění + měření", desc: "Nastavíme reklamu, GA4, server-side tracking. Vidíte zisk v reálném čase." },
{ n: "04", title: "Optimalizace + škála", desc: "Týdenní cyklus. Co funguje, posilujeme. Co ne, řežeme." }];


function ProcessSection() {
  return (
    <section id="proces" style={{ paddingBlock: "calc(112px * var(--px-density))", borderBottom: "1px solid var(--px-line)", background: "var(--px-surface-1)" }}>
      <div className="px-container">
        <Reveal style={{ textAlign: "center", maxWidth: 720, marginInline: "auto", marginBottom: 64 }}>
          <Eyebrow></Eyebrow>
          <h2 style={{ margin: "16px 0 14px", fontFamily: "var(--px-font-display)", fontWeight: 700, fontSize: "clamp(32px, 4.4vw, 52px)", lineHeight: 1.02, letterSpacing: "-0.04em", color: "var(--px-text-strong)" }}>
            Čtyři kroky, žádné mlžení.
          </h2>
          <p style={{ margin: 0, fontSize: 17, lineHeight: 1.55, color: "var(--px-text-muted)" }}>
            Od prvního auditu k měřitelnému růstu za 90 dní.
          </p>
        </Reveal>
        <div style={{ display: "grid", gap: 0, gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))" }}>
          {PROCESS.map((p, i) =>
          <Reveal key={p.n} delay={i * 80}>
              <div style={{
              position: "relative", padding: "32px 28px",
              borderTop: "1px solid var(--px-line)",
              borderLeft: i > 0 ? "1px solid var(--px-line)" : "none",
              background: "var(--px-surface-2)",
              height: "100%"
            }}>
                <span style={{
                fontFamily: "var(--px-font-mono)", fontSize: 12, fontWeight: 700, letterSpacing: "0.14em",
                color: "var(--px-accent-a)"
              }}>{p.n}</span>
                <h3 style={{ margin: "12px 0 10px", fontFamily: "var(--px-font-display)", fontWeight: 700, fontSize: 22, letterSpacing: "-0.025em", color: "var(--px-text-strong)" }}>
                  {p.title}
                </h3>
                <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: "var(--px-text-muted)" }}>
                  {p.desc}
                </p>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ────────────────────────────────────────────────────────────────────────────
   STATS / SOCIAL PROOF
   ──────────────────────────────────────────────────────────────────────────── */
function StatsSection() {
  return (
    <section style={{ paddingBlock: "calc(96px * var(--px-density))", borderBottom: "1px solid var(--px-line)", position: "relative", overflow: "hidden" }}>
      <div aria-hidden style={{
        position: "absolute", inset: 0, zIndex: 0,
        background: "radial-gradient(ellipse at 50% 0%, rgba(var(--px-glow-rgb), 0.08), transparent 60%)"
      }} />
      <div className="px-container" style={{ position: "relative", zIndex: 1 }}>
        <Reveal style={{ textAlign: "center", marginBottom: 56 }}>
          <h2 style={{ margin: "16px 0 0", fontFamily: "var(--px-font-display)", fontWeight: 700, fontSize: "clamp(32px, 4.4vw, 52px)", lineHeight: 1, letterSpacing: "-0.04em", color: "var(--px-text-strong)" }}>
            Co reálně přinášíme.
          </h2>
        </Reveal>
        <div style={{ display: "grid", gap: 0, gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" }}>
          {[
          { v: 187, suf: "%", lbl: "Průměrný nárůst tržeb", sub: "Z 12 klientů za 2025" },
          { v: 3.8, suf: "×", lbl: "ROAS po 90 dnech", sub: "Median napříč e-com" },
          { v: 32, pre: "−", suf: "%", lbl: "Snížení CPA", sub: "První 60 dní" },
          { v: 12, suf: " h", lbl: "Ušetřený čas / týden", sub: "Díky automatizaci" }].
          map((s, i) =>
          <Reveal key={i} delay={i * 80}>
              <div style={{
              padding: "32px 24px", textAlign: "center",
              borderLeft: i > 0 ? "1px solid var(--px-line)" : "none",
              height: "100%"
            }}>
                <div style={{
                fontFamily: "var(--px-font-display)", fontWeight: 700,
                fontSize: "clamp(40px, 5.6vw, 68px)", lineHeight: 1, letterSpacing: "-0.05em",
                background: "var(--px-gradient)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent"
              }}>
                  <Counter to={s.v} prefix={s.pre || ""} suffix={s.suf} decimals={s.v % 1 ? 1 : 0} />
                </div>
                <div style={{ marginTop: 14, fontSize: 14, fontWeight: 700, color: "var(--px-text-strong)" }}>{s.lbl}</div>
                <div style={{ marginTop: 6, fontFamily: "var(--px-font-mono)", fontSize: 10.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--px-text-muted)" }}>{s.sub}</div>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ────────────────────────────────────────────────────────────────────────────
   TESTIMONIAL
   ──────────────────────────────────────────────────────────────────────────── */
const TESTIMONIALS = [
{ q: "Pixycal nám neřeší kampaně. Řeší byznys. Konečně víme, kde reklama vydělává a kde topíme.", a: "Tomáš K.", r: "majitel e-shopu s nábytkem" },
{ q: "Za 90 dní jsme zvedli ROAS z 1.8 na 3.6 a uvolnili dva lidi z reportingu. Bez automatizace bychom to nedali.", a: "Lucie M.", r: "marketing lead, DTC kosmetika" },
{ q: "Audit od kluků odhalil, že polovina konverzí se duplikovala v GA4. Jen ten fix nám ušetřil 40 % rozpočtu.", a: "Pavel D.", r: "CEO B2B SaaS" }];


function TestimonialSection() {
  const [i, setI] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setI((v) => (v + 1) % TESTIMONIALS.length), 6000);
    return () => clearInterval(id);
  }, []);
  const t = TESTIMONIALS[i];
  return (
    <section id="pripady" style={{ paddingBlock: "calc(112px * var(--px-density))", borderBottom: "1px solid var(--px-line)", background: "var(--px-surface-1)" }}>
      <div className="px-container" style={{ maxWidth: 880, marginInline: "auto", textAlign: "center" }}>
        <Reveal>
        </Reveal>
        <Reveal delay={80}>
          <div style={{ position: "relative", minHeight: 220, marginTop: 32 }}>
            {TESTIMONIALS.map((tt, idx) =>
            <div key={idx} style={{
              position: idx === 0 ? "relative" : "absolute", inset: 0,
              opacity: idx === i ? 1 : 0,
              transform: idx === i ? "translateY(0)" : "translateY(8px)",
              transition: "opacity 500ms var(--px-easing), transform 500ms var(--px-easing)",
              pointerEvents: idx === i ? "auto" : "none"
            }}>
                <blockquote style={{
                margin: 0, fontFamily: "var(--px-font-display)", fontWeight: 700,
                fontSize: "clamp(22px, 3vw, 36px)", lineHeight: 1.2, letterSpacing: "-0.025em",
                color: "var(--px-text-strong)", textWrap: "balance"
              }}>
                  „{tt.q}"
                </blockquote>
                <div style={{ marginTop: 24, fontFamily: "var(--px-font-mono)", fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--px-text-muted)" }}>
                  <span style={{ color: "var(--px-accent-c)" }}>{tt.a}</span>
                  <span style={{ margin: "0 10px", opacity: 0.5 }}>—</span>
                  {tt.r}
                </div>
              </div>
            )}
          </div>
        </Reveal>
        <div style={{ marginTop: 32, display: "flex", gap: 8, justifyContent: "center" }}>
          {TESTIMONIALS.map((_, idx) =>
          <button key={idx} onClick={() => setI(idx)} aria-label={`Reference ${idx + 1}`}
          style={{
            width: idx === i ? 28 : 8, height: 8,
            background: idx === i ? "var(--px-gradient)" : "var(--px-line-strong)",
            border: "none", cursor: "pointer", padding: 0,
            borderRadius: "var(--px-radius)", transition: "all 200ms var(--px-easing)"
          }} />
          )}
        </div>
      </div>
    </section>);

}

/* ────────────────────────────────────────────────────────────────────────────
   FAQ
   ──────────────────────────────────────────────────────────────────────────── */
const FAQ = [
{ q: "Jak rychle uvidíme výsledky?", a: "Audit dostáváte do 48 hodin. Optimalizace existujícího účtu obvykle zlepší výsledky během 14 dní. Plný akviziční systém běží naplno za 60–90 dní." },
{ q: "Pracujete jen s e-commerce?", a: "Ne. Pracujeme s e-com, B2B SaaS, lead-gen agenturami i lokálními službami. Hlavní podmínka je měřitelný cíl a chuť pracovat na číslech, ne dojmech." },
{ q: "Kolik to stojí?", a: "Vstupní audit je zdarma. Měsíční fee začíná na 25 000 Kč u jednoho kanálu. Plný stack (PPC + automatizace + měření) typicky 60–120 000 Kč/měsíc. Nepracujeme na % z rozpočtu." },
{ q: "Co když už máme interního markeťáka?", a: "Skvělé. Často děláme handoff: postavíme systém, naučíme váš tým ho provozovat a zůstaneme jen jako externí strategický partner. Necítíme se ohroženi vaším in-house týmem." },
{ q: "Jaké nástroje používáte?", a: "Google Ads, Meta, Sklik pro reklamu. GA4 + server-side GTM pro měření. Make.com / n8n pro automatizaci. Vše vám zůstává — žádné proprietární black-box nástroje." }];


function FaqItem({ item, open, onClick }) {
  return (
    <div style={{ borderBottom: "1px solid var(--px-line)" }}>
      <button onClick={onClick} style={{
        width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: 24, padding: "24px 0", background: "transparent", border: "none", textAlign: "left",
        cursor: "pointer", color: "var(--px-text-strong)",
        fontFamily: "var(--px-font-display)", fontWeight: 700, fontSize: 20, letterSpacing: "-0.02em"
      }}>
        <span>{item.q}</span>
        <span style={{
          flexShrink: 0, width: 32, height: 32, display: "grid", placeItems: "center",
          border: "1px solid var(--px-line-strong)", borderRadius: "var(--px-radius)",
          transition: "all 200ms", background: open ? "var(--px-gradient)" : "transparent",
          color: open ? "#fff" : "var(--px-text-strong)"
        }}>
          <Icon name={open ? "minus" : "plus"} size={16} />
        </span>
      </button>
      <div style={{
        display: "grid", gridTemplateRows: open ? "1fr" : "0fr",
        transition: "grid-template-rows 300ms var(--px-easing)"
      }}>
        <div style={{ overflow: "hidden" }}>
          <p style={{ margin: 0, paddingBottom: 24, fontSize: 15.5, lineHeight: 1.65, color: "var(--px-text-muted)", maxWidth: 720 }}>
            {item.a}
          </p>
        </div>
      </div>
    </div>);

}

function FaqSection() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" style={{ paddingBlock: "calc(112px * var(--px-density))", borderBottom: "1px solid var(--px-line)" }}>
      <div className="px-container px-faq-grid" style={{ display: "grid", gap: 56, gridTemplateColumns: "1fr 1.6fr", alignItems: "start" }}>
        <Reveal>
          <h2 style={{ margin: "16px 0 16px", fontFamily: "var(--px-font-display)", fontWeight: 700, fontSize: "clamp(28px, 3.8vw, 44px)", lineHeight: 1.02, letterSpacing: "-0.04em", color: "var(--px-text-strong)" }}>
            Časté otázky.
          </h2>
          <p style={{ margin: 0, fontSize: 16, lineHeight: 1.55, color: "var(--px-text-muted)" }}>
            Něco chybí? <a href="#kontakt" style={{ color: "var(--px-accent-a)", textDecoration: "none", borderBottom: "1px solid var(--px-accent-a)" }}>Napište nám</a> — odpovíme do 24 hodin.
          </p>
        </Reveal>
        <Reveal delay={120}>
          <div style={{ borderTop: "1px solid var(--px-line)" }}>
            {FAQ.map((item, i) =>
            <FaqItem key={i} item={item} open={open === i} onClick={() => setOpen(open === i ? -1 : i)} />
            )}
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ────────────────────────────────────────────────────────────────────────────
   FINAL CTA
   ──────────────────────────────────────────────────────────────────────────── */
function FinalCta({ onCta, t }) {
  return (
    <section id="kontakt" style={{
      paddingBlock: "calc(128px * var(--px-density))", position: "relative", overflow: "hidden",
      borderBottom: "1px solid var(--px-line)"
    }}>
      <div aria-hidden style={{
        position: "absolute", inset: 0, zIndex: 0,
        background: "var(--px-gradient)", opacity: 0.07
      }} />
      <div aria-hidden style={{
        position: "absolute", top: "-30%", left: "50%", transform: "translateX(-50%)",
        width: 1100, height: 700, zIndex: 0, pointerEvents: "none",
        background: `radial-gradient(ellipse at center, rgba(var(--px-glow-rgb), ${0.18 * t.glow}), transparent 60%)`
      }} />
      <div className="px-container" style={{ position: "relative", zIndex: 1, textAlign: "center", maxWidth: 880, marginInline: "auto" }}>
        <Reveal>
          <h2 style={{ margin: "20px 0 18px", fontFamily: "var(--px-font-display)", fontWeight: 700, fontSize: "clamp(40px, 6vw, 80px)", lineHeight: 0.96, letterSpacing: "-0.05em", color: "var(--px-text-strong)", textWrap: "balance" }}>
            Bez závazku zjistíme, jestli vám marketing<br />
            <span style={{ background: "var(--px-gradient)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>teď dává smysl

            </span>
          </h2>
          <p style={{ margin: "0 auto", maxWidth: 580, fontSize: 18, lineHeight: 1.55, color: "var(--px-text-muted)" }}>60–90 minut projdeme marži, rozpočet, web a data. Na konci víte, jestli má smysl pokračovat, nebo nejdřív opravit základ.

          </p>
        </Reveal>
        <Reveal delay={120} style={{ marginTop: 36, display: "flex", flexWrap: "wrap", justifyContent: "center", gap: 12 }}>
          <PrimaryBtn size="lg" pulse={t.ctaPulse} onClick={onCta}>
            Získat audit zdarma <Icon name="arrowRight" size={17} />
          </PrimaryBtn>
          <GhostBtn size="lg" onClick={onCta}>
            <Icon name="mail" size={16} /> info@pixycal.com
          </GhostBtn>
        </Reveal>
        {t.showCtaBullets !== false && <Reveal delay={200} style={{ marginTop: 32, display: "flex", flexWrap: "wrap", justifyContent: "center", gap: 24, fontFamily: "var(--px-font-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--px-text-muted)" }}>
          <span><Icon name="check" size={12} style={{ display: "inline", color: "var(--px-accent-a)", verticalAlign: "middle", marginRight: 6 }} />Odpověď do 24 h</span>
          <span><Icon name="check" size={12} style={{ display: "inline", color: "var(--px-accent-a)", verticalAlign: "middle", marginRight: 6 }} />Žádný závazek</span>
          <span><Icon name="check" size={12} style={{ display: "inline", color: "var(--px-accent-a)", verticalAlign: "middle", marginRight: 6 }} />NDA standardně</span>
        </Reveal>}
      </div>
    </section>);

}

/* ────────────────────────────────────────────────────────────────────────────
   FOOTER
   ──────────────────────────────────────────────────────────────────────────── */
function Footer({ t }) {
  const tickerDuration = t?.tickerSpeed != null ? Math.max(4, Math.round(140 / (t.tickerSpeed || 1))) : 38;
  return (
    <footer style={{ background: "var(--px-surface-1)" }}>
      {t?.showTicker !== false && <div style={{ overflow: "hidden", borderBottom: "1px solid var(--px-line)", background: "var(--px-gradient)", padding: "24px 0" }}>
        <div className="px-ticker-loop" style={{
          display: "flex", gap: 40, whiteSpace: "nowrap", width: "max-content",
          fontFamily: "var(--px-font-display)", fontWeight: 700, fontSize: "clamp(24px, 4vw, 48px)",
          letterSpacing: "-0.03em", lineHeight: 1, color: "#fff"
        }}>
          {Array(2).fill(["Efektivní škálování", "Kvalitní poptávky", "Automatizace rutiny", "Měřitelný růst"]).flat().map((text, i) =>
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 40 }}>
              {text}
              <span aria-hidden style={{ width: 10, height: 10, background: "rgba(255,255,255,0.5)", display: "inline-block" }} />
            </span>
          )}
        </div>
      </div>}
      <style>{`@keyframes px-ticker-loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}.px-ticker-loop{animation:px-ticker-loop ${tickerDuration}s linear infinite}`}</style>
      <div className="px-container" style={{ paddingBlock: 56 }}>
        <div style={{ display: "flex", gap: 40, flexWrap: "wrap", justifyContent: "space-between", alignItems: "flex-start" }}>
          <div style={{ flex: "0 0 280px", minWidth: 220 }}>
            <img src="assets/pixycal-logo-v2-white.svg" alt="PIXYcal" style={{ width: 148, height: "auto", opacity: 0.85, filter: "var(--px-logo-filter)" }} />
            <p style={{ marginTop: 20, maxWidth: 300, fontSize: 14, lineHeight: 1.6, color: "var(--px-text-muted)" }}>
              Akviziční a retenční systémy pro e-commerce a B2B. Reklama, automatizace, měření — jako jedna mašina.
            </p>
          </div>
          <div style={{ display: "grid", gap: 32, gridTemplateColumns: "repeat(2,minmax(140px,1fr))", flex: "1 1 360px", minWidth: 260 }}>
            {[
            ["Stránka", [["Z čeho mizí peníze", "#pripady"], ["Služby", "#sluzby"], ["Tým", "#tym"], ["Konzultace", "#kontakt"]]],
            ["Kontakt", [["info@pixycal.com", "mailto:info@pixycal.com"], ["LinkedIn", "#"], ["Praha · Brno", "#"]]]].
            map(([title, links]) =>
            <div key={title}>
                <p style={{ margin: "0 0 14px", fontWeight: 700, fontSize: 13, color: "var(--px-text-strong)" }}>{title}</p>
                <div style={{ display: "grid", gap: 10 }}>
                  {links.map(([label, href]) =>
                <a key={label} href={href}
                style={{ fontSize: 13, color: "var(--px-text-muted)", textDecoration: "none", transition: "color 150ms" }}
                onMouseEnter={(e) => e.currentTarget.style.color = "var(--px-text-strong)"}
                onMouseLeave={(e) => e.currentTarget.style.color = "var(--px-text-muted)"}>
                      {label}
                    </a>
                )}
                </div>
              </div>
            )}
          </div>
        </div>
        <div style={{ marginTop: 48, paddingTop: 24, borderTop: "1px solid var(--px-line)", display: "flex", flexWrap: "wrap", gap: 16, justifyContent: "space-between", fontSize: 12, color: "var(--px-text-subtle)" }}>
          <p style={{ margin: 0 }}>© 2026 PIXYcal · Performance marketing</p>
          <div style={{ display: "flex", gap: 20 }}>
            <a href="#" style={{ color: "var(--px-text-subtle)", textDecoration: "none" }}>Ochrana osobních údajů</a>
            <a href="#" style={{ color: "var(--px-text-subtle)", textDecoration: "none" }}>Cookies</a>
          </div>
        </div>
      </div>
    </footer>);

}

/* ────────────────────────────────────────────────────────────────────────────
   CONSULTATION MODAL — 3-step lead form (Typeform-style) → /contact (Resend)
   ──────────────────────────────────────────────────────────────────────────── */
const FORM_ENDPOINT = "/contact";
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

const PAIN_OPTIONS = [
  "Poptávky přestaly chodit",
  "Web mi nepřináší zákazníky",
  "Reporty si protiřečí, nevím čemu věřit",
  "Spálil jsem se s agenturou",
  "Chci automatizovat opakovanou práci",
  "Chci napojit leady do CRM / e-mailu",
  "Chci škálovat, doporučení nestačí",
  "Chci začít, ale bojím se utopit peníze"
];
const BIZ_TYPES = ["E-shop", "Služby / řemeslo", "SaaS / Tech", "Agentura / Studio", "Jiné"];
const BUDGET_OPTIONS = [
  "do 20 tis. / měs",
  "20–50 tis. / měs",
  "50–150 tis. / měs",
  "150 tis.+ / měs",
  "Zatím nemám stanoveno"
];
function ConsultModal({ onClose }) {
  const [step, setStep] = useState(1);
  const [pain, setPain] = useState([]);
  const [bizType, setBizType] = useState("");
  const [budget, setBudget] = useState("");
  const [fields, setFields] = useState({ name: "", email: "", phone: "", company: "", msg: "" });
  const [errors, setErrors] = useState({});
  const [touched, setTouched] = useState({});
  const [submitting, setSubmitting] = useState(false);
  const [sent, setSent] = useState(false);
  const [confirmationId, setConfirmationId] = useState("");
  const [submitError, setSubmitError] = useState(null);

  useEffect(() => {
    const onKey = (e) => {if (e.key === "Escape" && !submitting) onClose();};
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [submitting, onClose]);

  const togglePain = (opt) =>
  setPain((p) => p.includes(opt) ? p.filter((x) => x !== opt) : [...p, opt]);

  const validateField = (id, value) => {
    if (id === "name") return value.trim().length < 2 ? "Jméno musí mít alespoň 2 znaky." : "";
    if (id === "email") return !EMAIL_RE.test(value.trim()) ? "Zadejte platný e-mail." : "";
    if (id === "phone") return value.replace(/\D/g, "").length < 9 ? "Zadejte platné telefonní číslo." : "";
    if (id === "company") return value.trim().length < 2 ? "Zadejte název firmy nebo web." : "";
    return "";
  };

  const handleChange = (e) => {
    const { id, value } = e.target;
    setFields((f) => ({ ...f, [id]: value }));
    if (touched[id]) {
      setErrors((prev) => ({ ...prev, [id]: validateField(id, value) }));
    }
  };

  const handleBlur = (e) => {
    const { id, value } = e.target;
    setTouched((t) => ({ ...t, [id]: true }));
    setErrors((prev) => ({ ...prev, [id]: validateField(id, value) }));
  };

  const validateStep3 = () => {
    const errs = {
      name: validateField("name", fields.name),
      email: validateField("email", fields.email),
      phone: validateField("phone", fields.phone),
      company: validateField("company", fields.company)
    };
    setTouched({ name: true, email: true, phone: true, company: true });
    setErrors(errs);
    return !Object.values(errs).some(Boolean);
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!validateStep3()) return;
    setSubmitting(true);
    setSubmitError(null);
    try {
      const res = await fetch(FORM_ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: fields.name.trim(),
          email: fields.email.trim(),
          phone: fields.phone.trim(),
          company: fields.company.trim(),
          message: fields.msg.trim(),
          pain,
          businessType: bizType,
          budget
        })
      });
      if (!res.ok) throw new Error(`Server vrátil ${res.status}.`);
      const data = await res.json().catch(() => ({}));
      setConfirmationId(data.confirmationId || "");
      setSent(true);
    } catch (err) {
      setSubmitError(err.message || "Odeslání se nepovedlo. Zkuste to znovu nebo napište na info@pixycal.com.");
    } finally {
      setSubmitting(false);
    }
  };

  const progressPct = `${step / 3 * 100}%`;

  return (
    <div onClick={(e) => e.target === e.currentTarget && !submitting && onClose()} style={{
      position: "fixed", inset: 0, zIndex: 100, background: "rgba(0,0,0,0.7)",
      backdropFilter: "blur(8px)", display: "flex", alignItems: "center", justifyContent: "center",
      padding: 16, animation: "px-fade-in 200ms ease both"
    }}>
      <style>{`
        .px-modal-input, .px-modal-textarea {
          padding: 0 14px; width: 100%;
          background: var(--px-surface-3);
          border: 1px solid var(--px-line-strong);
          color: var(--px-text-strong);
          font-family: var(--px-font-sans); font-size: 14px; outline: none;
          border-radius: var(--px-radius);
          transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
        }
        .px-modal-input { height: 44px; }
        .px-modal-textarea { padding: 12px 14px; min-height: 88px; resize: vertical; line-height: 1.5; }
        .px-modal-input::placeholder, .px-modal-textarea::placeholder { color: var(--px-text-muted); }
        .px-modal-input:hover, .px-modal-textarea:hover { border-color: var(--px-text-subtle); }
        .px-modal-input:focus, .px-modal-textarea:focus { border-color: var(--px-accent); box-shadow: var(--px-focus-ring); background: var(--px-surface-2); }
        .px-modal-input.has-error, .px-modal-textarea.has-error { border-color: var(--px-error); }
        .px-modal-input.has-error:focus, .px-modal-textarea.has-error:focus { box-shadow: 0 0 0 3px rgba(255,77,77,0.18); }

        .px-modal-iconbtn {
          background: var(--px-surface-3);
          border: 1px solid var(--px-line-strong);
          color: var(--px-text);
          transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
        }
        .px-modal-iconbtn:hover { background: var(--px-surface-4); border-color: var(--px-accent); color: var(--px-text-strong); }

        .px-modal-ghostbtn {
          background: var(--px-surface-2);
          border: 1px solid var(--px-line-strong);
          color: var(--px-text);
          transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
        }
        .px-modal-ghostbtn:hover { background: var(--px-surface-3); border-color: var(--px-accent); color: var(--px-text-strong); }

        @keyframes px-spin { to { transform: rotate(360deg); } }
        @media (max-width: 540px) {
          .px-pain-grid, .px-budget-grid, .px-contact-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
      <div style={{
        width: "100%", maxWidth: 560, maxHeight: "92vh", overflowY: "auto",
        background: "var(--px-surface-1)", border: "1px solid var(--px-line-strong)",
        padding: "32px 32px 28px", position: "relative", borderRadius: "var(--px-radius)"
      }}>
        {!sent &&
        <button onClick={() => !submitting && onClose()} aria-label="Zavřít" className="px-modal-iconbtn" style={{
          position: "absolute", top: 16, right: 16, width: 36, height: 36,
          display: "flex", alignItems: "center", justifyContent: "center",
          cursor: submitting ? "not-allowed" : "pointer", borderRadius: "var(--px-radius)",
          opacity: submitting ? 0.5 : 1
        }}>
            <Icon name="x" size={18} strokeWidth={2.2} />
          </button>
        }

        {sent ?
        <div style={{ textAlign: "center", paddingBlock: 24 }}>
            <div style={{
            width: 56, height: 56, background: "var(--px-gradient)",
            display: "grid", placeItems: "center", margin: "0 auto 20px",
            boxShadow: "var(--px-glow-strong)", borderRadius: "var(--px-radius)"
          }}>
              <Icon name="check" size={28} style={{ color: "#fff" }} strokeWidth={2.5} />
            </div>
            <h3 style={{
            margin: "0 0 10px", fontFamily: "var(--px-font-display)", fontWeight: 700,
            fontSize: 26, letterSpacing: "-0.03em", color: "var(--px-text-strong)"
          }}>
              Máme to. Ozveme se do 24 h.
            </h3>
            <p style={{ margin: 0, fontSize: 14, color: "var(--px-text-muted)", lineHeight: 1.6 }}>
              Potvrzení vám právě posíláme na e-mail. V pracovní dny.
              Pokud to hoří, napište na{" "}
              <a href="mailto:info@pixycal.com" style={{ color: "var(--px-accent)" }}>info@pixycal.com</a>.
            </p>
            {confirmationId &&
            <div style={{
              marginTop: 20, display: "inline-flex", alignItems: "center", gap: 10,
              padding: "8px 14px", background: "var(--px-surface-3)",
              border: "1px solid var(--px-line-strong)", borderRadius: "var(--px-radius)"
            }}>
                <span style={{
                fontFamily: "var(--px-font-mono)", fontSize: 10, fontWeight: 700,
                letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--px-text-muted)"
              }}>
                  Číslo potvrzení
                </span>
                <span style={{
                fontFamily: "var(--px-font-mono)", fontSize: 13, fontWeight: 700,
                color: "var(--px-accent)", letterSpacing: "0.02em"
              }}>
                  {confirmationId}
                </span>
              </div>
            }
            <button onClick={onClose} className="px-modal-ghostbtn" style={{
            marginTop: 24, height: 44, padding: "0 24px",
            cursor: "pointer", fontSize: 13, fontWeight: 600, borderRadius: "var(--px-radius)"
          }}>Zavřít</button>
          </div> :

        <>
            {/* progress */}
            <div style={{
            marginTop: 4, marginBottom: 22, display: "flex", alignItems: "center",
            gap: 14, paddingRight: 48
          }}>
              <div style={{ flex: 1, height: 2, background: "var(--px-line)" }}>
                <div style={{
                height: "100%", background: "var(--px-accent)", width: progressPct,
                transition: "width 320ms cubic-bezier(0.16,1,0.3,1)", boxShadow: "var(--px-glow)"
              }} />
              </div>
              <span style={{
              fontFamily: "var(--px-font-mono)", fontSize: 10, letterSpacing: "0.12em",
              textTransform: "uppercase", color: "var(--px-text-muted)", whiteSpace: "nowrap"
            }}>
                {step} / 3
              </span>
            </div>

            {step === 1 &&
          <div>
                <Eyebrow>Nezávazná konzultace · 3 otázky, ~60 sekund</Eyebrow>
                <h2 style={{
              margin: "12px 0 8px", fontFamily: "var(--px-font-display)", fontWeight: 700,
              fontSize: 26, letterSpacing: "-0.03em", color: "var(--px-text-strong)", lineHeight: 1.15
            }}>
                  Co s námi chcete řešit?
                </h2>
                <p style={{ margin: "0 0 18px", fontSize: 13, color: "var(--px-text-muted)" }}>
                  Vyberte vše, co sedí. Není to test, jen ať víme, kde začít.
                </p>
                <div className="px-pain-grid" style={{ display: "grid", gap: 8, gridTemplateColumns: "1fr 1fr" }}>
                  {PAIN_OPTIONS.map((opt) => {
                const sel = pain.includes(opt);
                return (
                  <button key={opt} type="button" onClick={() => togglePain(opt)}
                    style={{
                      display: "flex", alignItems: "flex-start", gap: 10,
                      padding: "12px 14px", textAlign: "left", cursor: "pointer",
                      background: sel ? "var(--px-surface-3)" : "var(--px-surface-2)",
                      border: sel ? "1px solid var(--px-accent)" : "1px solid var(--px-line-strong)",
                      borderRadius: "var(--px-radius)",
                      transition: "border-color 150ms ease, background 150ms ease"
                    }}>
                          <span aria-hidden style={{
                      marginTop: 4, flexShrink: 0, width: 8, height: 8,
                      background: sel ? "var(--px-accent)" : "var(--px-line-strong)",
                      boxShadow: sel ? "var(--px-glow)" : "none",
                      transition: "background 150ms, box-shadow 150ms"
                    }} />
                          <span style={{
                      fontFamily: "var(--px-font-sans)", fontSize: 13, lineHeight: 1.4,
                      color: sel ? "var(--px-text-strong)" : "var(--px-text-muted)"
                    }}>
                            {opt}
                          </span>
                        </button>);

              })}
                </div>
                <div style={{ marginTop: 22, display: "flex", justifyContent: "flex-end" }}>
                  <PrimaryBtn pulse={false} onClick={() => setStep(2)} size="md">
                    Pokračovat <Icon name="arrowRight" size={15} />
                  </PrimaryBtn>
                </div>
              </div>
          }

            {step === 2 &&
          <div>
                <Eyebrow>Krok 2 ze 3</Eyebrow>
                <h2 style={{
              margin: "12px 0 18px", fontFamily: "var(--px-font-display)", fontWeight: 700,
              fontSize: 26, letterSpacing: "-0.03em", color: "var(--px-text-strong)", lineHeight: 1.15
            }}>
                  O jaké podnikání jde?
                </h2>

                <fieldset style={{ border: 0, padding: 0, margin: "0 0 22px" }}>
                  <legend style={{
                display: "block", marginBottom: 10,
                fontFamily: "var(--px-font-mono)", fontSize: 11, fontWeight: 700,
                letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--px-text-muted)"
              }}>
                    Typ byznysu
                  </legend>
                  <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                    {BIZ_TYPES.map((opt) => {
                  const sel = bizType === opt;
                  return (
                    <button key={opt} type="button" onClick={() => setBizType(opt)}
                      style={{
                        display: "flex", alignItems: "center", gap: 8,
                        padding: "10px 14px", cursor: "pointer",
                        background: sel ? "var(--px-surface-3)" : "var(--px-surface-2)",
                        border: sel ? "1px solid var(--px-accent)" : "1px solid var(--px-line-strong)",
                        borderRadius: "var(--px-radius)",
                        transition: "border-color 150ms ease, background 150ms ease"
                      }}>
                            <span aria-hidden style={{
                        width: 7, height: 7, flexShrink: 0,
                        background: sel ? "var(--px-accent)" : "var(--px-line-strong)",
                        boxShadow: sel ? "var(--px-glow)" : "none",
                        transition: "background 150ms, box-shadow 150ms"
                      }} />
                            <span style={{
                        fontFamily: "var(--px-font-sans)", fontSize: 13,
                        color: sel ? "var(--px-text-strong)" : "var(--px-text-muted)"
                      }}>
                              {opt}
                            </span>
                          </button>);

                })}
                  </div>
                </fieldset>

                <fieldset style={{ border: 0, padding: 0, margin: 0 }}>
                  <legend style={{
                display: "block", marginBottom: 10,
                fontFamily: "var(--px-font-mono)", fontSize: 11, fontWeight: 700,
                letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--px-text-muted)"
              }}>
                    Aktuální měsíční rozpočet na marketing
                  </legend>
                  <div className="px-budget-grid" style={{ display: "grid", gap: 8, gridTemplateColumns: "1fr 1fr" }}>
                    {BUDGET_OPTIONS.map((opt) => {
                  const sel = budget === opt;
                  return (
                    <button key={opt} type="button" onClick={() => setBudget(opt)}
                      style={{
                        display: "flex", alignItems: "center", gap: 10,
                        padding: "11px 14px", cursor: "pointer",
                        background: sel ? "var(--px-surface-3)" : "var(--px-surface-2)",
                        border: sel ? "1px solid var(--px-accent)" : "1px solid var(--px-line-strong)",
                        borderRadius: "var(--px-radius)",
                        transition: "border-color 150ms ease, background 150ms ease"
                      }}>
                            <span aria-hidden style={{
                        width: 7, height: 7, flexShrink: 0,
                        background: sel ? "var(--px-accent)" : "var(--px-line-strong)",
                        boxShadow: sel ? "var(--px-glow)" : "none",
                        transition: "background 150ms, box-shadow 150ms"
                      }} />
                            <span style={{
                        fontFamily: "var(--px-font-sans)", fontSize: 13,
                        color: sel ? "var(--px-text-strong)" : "var(--px-text-muted)"
                      }}>
                              {opt}
                            </span>
                          </button>);

                })}
                  </div>
                </fieldset>

                <div style={{ marginTop: 22, display: "flex", justifyContent: "space-between", gap: 10 }}>
                  <GhostBtn onClick={() => setStep(1)} size="md">
                    <Icon name="arrowLeft" size={15} /> Zpět
                  </GhostBtn>
                  <PrimaryBtn pulse={false} onClick={() => setStep(3)} size="md">
                    Pokračovat <Icon name="arrowRight" size={15} />
                  </PrimaryBtn>
                </div>
              </div>
          }

            {step === 3 &&
          <form onSubmit={onSubmit} noValidate style={{ display: "grid", gap: 14 }}>
                <Eyebrow>Krok 3 ze 3</Eyebrow>
                <h2 style={{
              margin: "4px 0 4px", fontFamily: "var(--px-font-display)", fontWeight: 700,
              fontSize: 26, letterSpacing: "-0.03em", color: "var(--px-text-strong)", lineHeight: 1.15
            }}>
                  Kam vám odpovědět?
                </h2>

                <ConsultField label="Jméno" id="name" error={touched.name && errors.name}>
                  <input
                className={`px-modal-input${touched.name && errors.name ? " has-error" : ""}`}
                id="name" value={fields.name}
                onChange={handleChange} onBlur={handleBlur}
                placeholder="Jak vám máme říkat"
                autoComplete="name" maxLength={100}
                required aria-required="true" />

                </ConsultField>

                <ConsultField label="E-mail" id="email" error={touched.email && errors.email}>
                  <input
                className={`px-modal-input${touched.email && errors.email ? " has-error" : ""}`}
                id="email" type="email" value={fields.email}
                onChange={handleChange} onBlur={handleBlur}
                placeholder="vy@firma.cz"
                autoComplete="email" maxLength={254}
                required aria-required="true" />

                </ConsultField>

                <div className="px-contact-grid" style={{ display: "grid", gap: 14, gridTemplateColumns: "1fr 1fr" }}>
                  <ConsultField label="Telefon" id="phone" error={touched.phone && errors.phone}>
                    <input
                  className={`px-modal-input${touched.phone && errors.phone ? " has-error" : ""}`}
                  id="phone" type="tel" value={fields.phone}
                  onChange={handleChange} onBlur={handleBlur}
                  placeholder="+420 123 456 789"
                  autoComplete="tel" maxLength={30}
                  required aria-required="true" />

                  </ConsultField>

                  <ConsultField label="Firma / web" id="company" error={touched.company && errors.company}>
                    <input
                  className={`px-modal-input${touched.company && errors.company ? " has-error" : ""}`}
                  id="company" value={fields.company}
                  onChange={handleChange} onBlur={handleBlur}
                  placeholder="firma.cz"
                  autoComplete="organization" maxLength={120}
                  required aria-required="true" />

                  </ConsultField>
                </div>

                <ConsultField label="Krátká poznámka (nepovinné)" id="msg">
                  <textarea
                className="px-modal-textarea" id="msg" value={fields.msg}
                onChange={handleChange}
                placeholder="O co jde a co už jste zkusili."
                rows={3} maxLength={2000} />

                </ConsultField>

                {submitError &&
            <div role="alert" style={{
              display: "flex", alignItems: "flex-start", gap: 10,
              padding: "12px 14px", borderRadius: "var(--px-radius)",
              border: "1px solid var(--px-error)", background: "var(--px-surface-2)"
            }}>
                    <Icon name="alertCircle" size={15} style={{ flexShrink: 0, marginTop: 1, color: "var(--px-error)" }} />
                    <div style={{ flex: 1 }}>
                      <span style={{ fontFamily: "var(--px-font-sans)", fontSize: 13, color: "var(--px-error-soft)" }}>
                        {submitError}
                      </span>
                      <button
                  type="button" onClick={() => setSubmitError(null)}
                  style={{
                    display: "block", marginTop: 6,
                    fontFamily: "var(--px-font-mono)", fontSize: 10,
                    fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase",
                    color: "var(--px-accent)", background: "none", border: "none",
                    padding: 0, cursor: "pointer"
                  }}>

                        Zkusit znovu
                      </button>
                    </div>
                  </div>
            }

                <div style={{ marginTop: 4, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10 }}>
                  <GhostBtn onClick={() => setStep(2)} size="md">
                    <Icon name="arrowLeft" size={15} /> Zpět
                  </GhostBtn>
                  <button type="submit" disabled={submitting} className="px-cta-pulse" style={{
                display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
                flex: 1, height: 52, padding: "0 24px", fontSize: 14, fontWeight: 700,
                fontFamily: "var(--px-font-sans)",
                background: "var(--px-gradient)", color: "#fff", border: "none",
                borderRadius: "var(--px-radius)",
                cursor: submitting ? "not-allowed" : "pointer",
                boxShadow: "var(--px-glow)", opacity: submitting ? 0.7 : 1,
                transition: "transform 150ms ease, box-shadow 150ms ease, filter 150ms"
              }}>
                    {submitting ?
                <>
                        <Icon name="loader" size={15} style={{ animation: "px-spin 0.8s linear infinite" }} />
                        Odesíláme…
                      </> :

                <>Domluvit konzultaci <Icon name="arrowRight" size={16} /></>
                }
                  </button>
                </div>

                <p style={{
              margin: "4px 0 0", fontFamily: "var(--px-font-mono)", fontSize: 10,
              letterSpacing: "0.08em", textTransform: "uppercase",
              color: "var(--px-text-subtle)", textAlign: "center", lineHeight: 1.6
            }}>
                  Odpovídáme do 24 hodin.
                </p>
              </form>
          }
          </>
        }
      </div>
    </div>);

}

function ConsultField({ label, id, error, children }) {
  return (
    <div style={{ display: "grid", gap: 6 }}>
      <label htmlFor={id} style={{
        fontFamily: "var(--px-font-mono)", fontSize: 10, fontWeight: 700,
        letterSpacing: "0.14em", textTransform: "uppercase",
        color: error ? "var(--px-error-soft)" : "var(--px-text-muted)"
      }}>
        {label}
      </label>
      {children}
      {error &&
      <span role="alert" style={{
        fontFamily: "var(--px-font-sans)", fontSize: 12,
        color: "var(--px-error-soft)", lineHeight: 1.4
      }}>
          {error}
        </span>
      }
    </div>);

}

/* ────────────────────────────────────────────────────────────────────────────
   TWEAKS DEFAULTS — edited by the host so changes survive reload
   ──────────────────────────────────────────────────────────────────────────── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": true,
  "palette": "warm",
  "gradientAngle": 135,
  "glow": 1,
  "radius": 0,
  "density": "regular",
  "ctaPulse": true,
  "spotlight": true,
  "heroGlow": true,
  "scrollReveal": true,
  "marqueeSpeed": 38,
  "pattern": "dots",
  "patternScale": 13,
  "patternOpacity": 0.7,
  "heroAlign": "center",
  "heroScale": 1,
  "bodyScale": 1,
  "eyebrow": "Performance Marketing · Praha",
  "headlineLine1": "Váš byznysový parťák",
  "headlineAccent": "s přístupem na míru.",
  "subtitle": "Najdeme vám způsob jak získat a udržet zákazníky skrze digitální marketing, který propojíme s efektivní automatizací procesů.",
  "ctaPrimary": "Domluvit konzultaci",
  "ctaSecondary": "Naše služby",
  "showHeroMetrics": false,
  "showEyebrow": false,
  "showHeaderCta": true,
  "showStatusBadge": false,
  "showCtaBullets": false,
  "headerCtaLabel": "Konzultace",
  "statusBadgeLabel": "Volné kapacity",
  "showTicker": true,
  "tickerSpeed": 3,
  "toolsOn": {
    "googleads": true,
    "meta": true,
    "sklik": true,
    "make": true,
    "n8n": true,
    "ga4": false,
    "gtm": false,
    "searchconsole": false
  },
  "painEyebrow": "Z čeho mizí peníze",
  "painHeadline": "Poznáváte se",
  "painAccent": "v tomhle?",
  "painSubtitle": "Tyhle situace řešíme každý den. Možná i vy.",
  "servicesEyebrow": "02 — Služby",
  "servicesHeadline": "Co pro vás",
  "servicesHeadlineAccent": "reálně děláme.",
  "servicesSubtitle": "Reklama, obsah, měření, automatizace — propojené tak, aby spolu mluvily.",
  "teamEyebrow": "",
  "teamHeadline": "Tým, který za tím",
  "teamHeadlineAccent": "skutečně stojí.",
  "teamSubtitle": "",
  "team": {},
  "sectionOrder": ["tools", "pain", "services", "process", "stats", "team", "testimonials", "faq"],
  "sectionsOn": {
    "tools": true,
    "pain": true,
    "services": true,
    "process": false,
    "stats": false,
    "team": true,
    "testimonials": false,
    "faq": false
  }
} /*EDITMODE-END*/;

/* ────────────────────────────────────────────────────────────────────────────
   SECTION REGISTRY — id → label + render
   ──────────────────────────────────────────────────────────────────────────── */
const SECTION_LABELS = {
  tools: "Tools marquee",
  pain: "Poznáváte se v tomhle?",
  services: "Co pro vás reálně děláme",
  process: "Process (4 kroky)",
  stats: "Big stats",
  team: "Tým",
  testimonials: "Testimonials",
  faq: "FAQ"
};
function renderSection(id, t) {
  switch (id) {
    case "tools":return <ToolsMarquee speed={t.marqueeSpeed} toolsOn={t.toolsOn} />;
    case "pain":return <PainSection t={t} />;
    case "services":return <ServicesSection t={t} />;
    case "process":return <ProcessSection />;
    case "stats":return <StatsSection />;
    case "team":return <TeamSection t={t} />;
    case "testimonials":return <TestimonialSection />;
    case "faq":return <FaqSection />;
    default:return null;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   APP
   ──────────────────────────────────────────────────────────────────────────── */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [modal, setModal] = useState(false);
  useThemeVars(t);
  useEffect(() => {window.__pxRevealOn = t.scrollReveal;}, [t.scrollReveal]);

  // Self-heal sectionOrder if missing items (e.g. JSON gets out of sync)
  const order = useMemo(() => {
    const known = Object.keys(SECTION_LABELS);
    const fromTweak = Array.isArray(t.sectionOrder) ? t.sectionOrder.filter((x) => known.includes(x)) : [];
    const missing = known.filter((x) => !fromTweak.includes(x));
    return [...fromTweak, ...missing];
  }, [t.sectionOrder]);
  const sectionsOn = t.sectionsOn || {};

  const move = (idx, dir) => {
    const next = [...order];
    const j = idx + dir;
    if (j < 0 || j >= next.length) return;
    [next[idx], next[j]] = [next[j], next[idx]];
    setTweak("sectionOrder", next);
  };

  return (
    <>
      <Header t={t} onCta={() => setModal(true)} />
      <main>
        <Hero t={t} onCta={() => setModal(true)} />
        {order.map((id) => sectionsOn[id] !== false &&
        <React.Fragment key={id}>{renderSection(id, t)}</React.Fragment>
        )}
        <FinalCta t={t} onCta={() => setModal(true)} />
      </main>
      <Footer t={t} />
      {modal && <ConsultModal onClose={() => setModal(false)} />}

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakToggle label="Dark mode" value={t.dark} onChange={(v) => setTweak("dark", v)} />
        <TweakSelect label="Palette" value={t.palette}
        options={Object.entries(PALETTES).map(([k, v]) => ({ value: k, label: v.name }))}
        onChange={(v) => setTweak("palette", v)} />
        <TweakColor label="Palette swatches"
        value={[PALETTES[t.palette].a, PALETTES[t.palette].b, PALETTES[t.palette].c]}
        options={Object.values(PALETTES).map((p) => [p.a, p.b, p.c])}
        onChange={(arr) => {
          const match = Object.entries(PALETTES).find(([, v]) => v.a === arr[0]);
          if (match) setTweak("palette", match[0]);
        }} />
        <TweakSlider label="Gradient angle" value={t.gradientAngle} min={0} max={360} step={5} unit="°"
        onChange={(v) => setTweak("gradientAngle", v)} />
        <TweakSlider label="Glow intensity" value={t.glow} min={0} max={2} step={0.1}
        onChange={(v) => setTweak("glow", v)} />
        <TweakSlider label="Corner radius" value={t.radius} min={0} max={24} step={1} unit="px"
        onChange={(v) => setTweak("radius", v)} />
        <TweakRadio label="Density" value={t.density} options={["compact", "regular", "comfy"]}
        onChange={(v) => setTweak("density", v)} />

        <TweakSection label="Header" />
        <TweakToggle label="Header CTA button" value={t.showHeaderCta !== false} onChange={(v) => setTweak("showHeaderCta", v)} />
        <TweakText label="Header CTA label" value={t.headerCtaLabel} onChange={(v) => setTweak("headerCtaLabel", v)} />

        <TweakSection label="Hero copy" />
        <TweakToggle label="Eyebrow visible" value={t.showEyebrow !== false} onChange={(v) => setTweak("showEyebrow", v)} />
        <TweakText label="Eyebrow text" value={t.eyebrow} onChange={(v) => setTweak("eyebrow", v)} />
        <TweakText label="Headline line 1" value={t.headlineLine1} onChange={(v) => setTweak("headlineLine1", v)} />
        <TweakText label="Accent line" value={t.headlineAccent} onChange={(v) => setTweak("headlineAccent", v)} />
        <TweakText label="Subtitle" value={t.subtitle} onChange={(v) => setTweak("subtitle", v)} />
        <TweakText label="Primary CTA" value={t.ctaPrimary} onChange={(v) => setTweak("ctaPrimary", v)} />

        <TweakSection label="Hero layout" />
        <TweakRadio label="Alignment" value={t.heroAlign} options={["center", "left"]}
        onChange={(v) => setTweak("heroAlign", v)} />
        <TweakSlider label="Headline scale" value={t.heroScale} min={0.7} max={1.4} step={0.05}
        onChange={(v) => setTweak("heroScale", v)} />
        <TweakSlider label="Body scale" value={t.bodyScale} min={0.85} max={1.3} step={0.05}
        onChange={(v) => setTweak("bodyScale", v)} />
        <TweakToggle label="Hero metrics" value={t.showHeroMetrics} onChange={(v) => setTweak("showHeroMetrics", v)} />

        <TweakSection label="Background" />
        <TweakSelect label="Pattern" value={t.pattern}
        options={[{ value: "dots", label: "Dots" }, { value: "grid", label: "Grid" }, { value: "rays", label: "Rays" }, { value: "none", label: "None" }]}
        onChange={(v) => setTweak("pattern", v)} />
        <TweakSlider label="Pattern scale" value={t.patternScale} min={6} max={32} step={1} unit="px"
        onChange={(v) => setTweak("patternScale", v)} />
        <TweakSlider label="Pattern opacity" value={t.patternOpacity} min={0} max={1} step={0.05}
        onChange={(v) => setTweak("patternOpacity", v)} />
        <TweakToggle label="Hero glow halo" value={t.heroGlow} onChange={(v) => setTweak("heroGlow", v)} />

        <TweakSection label="Footer ticker" />
        <TweakToggle label="Show ticker" value={t.showTicker !== false} onChange={(v) => setTweak("showTicker", v)} />
        <TweakSlider label="Ticker speed" value={t.tickerSpeed ?? 5} min={1} max={20} step={0.5} unit="×"
        onChange={(v) => setTweak("tickerSpeed", v)} />

        <TweakSection label="Tools in marquee" />
        {TOOLS.map((tool) =>
        <TweakToggle key={tool.id} label={tool.label}
        value={(t.toolsOn ?? {})[tool.id] !== false}
        onChange={(v) => setTweak("toolsOn", { ...(t.toolsOn || {}), [tool.id]: v })} />
        )}

        <TweakSection label="Motion" />
        <TweakToggle label="CTA pulse" value={t.ctaPulse} onChange={(v) => setTweak("ctaPulse", v)} />
        <TweakToggle label="Mouse spotlight" value={t.spotlight} onChange={(v) => setTweak("spotlight", v)} />
        <TweakToggle label="Scroll reveals" value={t.scrollReveal} onChange={(v) => setTweak("scrollReveal", v)} />
        <TweakSlider label="Marquee speed" value={t.marqueeSpeed} min={0} max={120} step={2} unit="px/s"
        onChange={(v) => setTweak("marqueeSpeed", v)} />

        <TweakSection label="Section order + visibility" />
        {order.map((id, idx) =>
        <div key={id} className="twk-row">
            <div className="twk-lbl" style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <span style={{ fontFamily: "var(--px-font-mono)", opacity: 0.55, fontSize: 10 }}>{String(idx + 1).padStart(2, "0")}</span>
              <span>{SECTION_LABELS[id]}</span>
            </div>
            <div style={{ display: "flex", gap: 4, alignItems: "center" }}>
              <button type="button" className="twk-btn secondary"
            disabled={idx === 0}
            onClick={() => move(idx, -1)}
            style={{ padding: "0 8px", opacity: idx === 0 ? 0.35 : 1 }}>↑</button>
              <button type="button" className="twk-btn secondary"
            disabled={idx === order.length - 1}
            onClick={() => move(idx, 1)}
            style={{ padding: "0 8px", opacity: idx === order.length - 1 ? 0.35 : 1 }}>↓</button>
              <button type="button"
            className={sectionsOn[id] === false ? "twk-toggle" : "twk-toggle"}
            data-on={sectionsOn[id] === false ? "0" : "1"}
            onClick={() => setTweak("sectionsOn", { ...sectionsOn, [id]: !(sectionsOn[id] !== false) })}>
                <i />
              </button>
            </div>
          </div>
        )}

        <TweakSection label="Poznáváte se v tomhle? — text" />
        <TweakText label="Eyebrow" value={t.painEyebrow} onChange={(v) => setTweak("painEyebrow", v)} />
        <TweakText label="Headline" value={t.painHeadline} onChange={(v) => setTweak("painHeadline", v)} />
        <TweakText label="Accent" value={t.painAccent} onChange={(v) => setTweak("painAccent", v)} />
        <TweakText label="Subtitle" value={t.painSubtitle} onChange={(v) => setTweak("painSubtitle", v)} />

        <TweakSection label="Co pro vás reálně děláme — text" />
        <TweakText label="Eyebrow" value={t.servicesEyebrow} onChange={(v) => setTweak("servicesEyebrow", v)} />
        <TweakText label="Headline" value={t.servicesHeadline} onChange={(v) => setTweak("servicesHeadline", v)} />
        <TweakText label="Accent" value={t.servicesHeadlineAccent} onChange={(v) => setTweak("servicesHeadlineAccent", v)} />
        <TweakText label="Subtitle" value={t.servicesSubtitle} onChange={(v) => setTweak("servicesSubtitle", v)} />

        <TweakSection label="Final CTA" />
        <TweakToggle label="Check bullets" value={t.showCtaBullets !== false} onChange={(v) => setTweak("showCtaBullets", v)} />

        <TweakSection label="Tým — text" />
        <TweakText label="Eyebrow" value={t.teamEyebrow} onChange={(v) => setTweak("teamEyebrow", v)} />
        <TweakText label="Headline" value={t.teamHeadline} onChange={(v) => setTweak("teamHeadline", v)} />
        <TweakText label="Accent" value={t.teamHeadlineAccent} onChange={(v) => setTweak("teamHeadlineAccent", v)} />
        <TweakText label="Subtitle" value={t.teamSubtitle} onChange={(v) => setTweak("teamSubtitle", v)} />

        {TEAM_MEMBERS.map((m) =>
        <TeamPhotoControls key={m.id} member={m} t={t} setTweak={setTweak} />
        )}
      </TweaksPanel>
    </>);

}

// Expose shared components for team-section.jsx (loaded as a separate Babel script).
Object.assign(window, { Reveal, Eyebrow, Icon, PrimaryBtn, GhostBtn, PALETTES });

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