const { useState, useEffect, useRef, useMemo } = React;

/* ────────────────────────────────────────────────────────────
   Utilities
   ──────────────────────────────────────────────────────────── */
const useInView = (ref, opts = { threshold: 0.18 }) => {
  const [v, setV] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => e.isIntersecting && setV(true), opts);
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return v;
};

const Reveal = ({ children, delay = 0, as: As = "div", style, ...rest }) => {
  const ref = useRef(null);
  const inView = useInView(ref);
  return (
    <As
      ref={ref}
      style={{
        ...style,
        opacity: inView ? 1 : 0,
        transform: inView ? "translateY(0)" : "translateY(20px)",
        transition: `opacity 900ms cubic-bezier(.2,.7,.2,1) ${delay}ms, transform 900ms cubic-bezier(.2,.7,.2,1) ${delay}ms`,
      }}
      {...rest}
    >
      {children}
    </As>
  );
};

/* ────────────────────────────────────────────────────────────
   Nav
   ──────────────────────────────────────────────────────────── */
const NAV_LINKS = [
  ["Prečo my", "why"],
  ["Služby", "services"],
  ["Cenník", "pricing"],
  ["Práce", "work"],
  ["Kontakt", "contact"],
];

const Nav = () => {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

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

  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  return (
    <>
      <nav
        className="nav-bar"
        style={{
          position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
          padding: scrolled ? "14px 40px" : "24px 40px",
          background: scrolled ? "rgba(10,10,10,0.72)" : "transparent",
          backdropFilter: scrolled ? "blur(20px) saturate(140%)" : "none",
          WebkitBackdropFilter: scrolled ? "blur(20px) saturate(140%)" : "none",
          borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent",
          transition: "all 350ms cubic-bezier(.2,.7,.2,1)",
          display: "flex", alignItems: "center", justifyContent: "space-between",
        }}
      >
        <a href="#" style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span
            style={{
              width: 10, height: 10, borderRadius: "50%",
              background: "var(--accent)", boxShadow: "0 0 24px var(--accent)",
            }}
          />
          <span style={{ fontFamily: "var(--serif)", fontSize: 22, letterSpacing: -0.3 }}>
            webaktual<span style={{ color: "var(--accent)" }}>.</span>
          </span>
        </a>

        <div className="nav-links" style={{ display: "flex", gap: 36, fontSize: 13.5, color: "var(--fg-dim)" }}>
          {NAV_LINKS.map(([label, id]) => (
            <a
              key={id} href={`#${id}`}
              onMouseEnter={(e) => (e.currentTarget.style.color = "var(--fg)")}
              onMouseLeave={(e) => (e.currentTarget.style.color = "var(--fg-dim)")}
              style={{ transition: "color 200ms" }}
            >
              {label}
            </a>
          ))}
        </div>

        <a
          href="#contact"
          className="nav-cta-desktop"
          style={{
            fontSize: 13, padding: "10px 18px", borderRadius: 999,
            border: "1px solid var(--line-2)", color: "var(--fg)",
            transition: "all 200ms",
          }}
          onMouseEnter={(e) => { e.currentTarget.style.background = "var(--fg)"; e.currentTarget.style.color = "#0a0a0a"; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--fg)"; }}
        >
          Cenová ponuka →
        </a>

        <button
          className="nav-hamburger"
          onClick={() => setMenuOpen(true)}
          aria-label="Otvoriť menu"
          style={{
            display: "none",
            alignItems: "center", justifyContent: "center",
            width: 44, height: 44, borderRadius: 999,
            border: "1px solid var(--line-2)", background: "transparent",
            color: "var(--fg)", cursor: "pointer",
          }}
        >
          <svg width="20" height="14" viewBox="0 0 20 14" fill="none">
            <path d="M0 1h20M0 7h20M0 13h20" stroke="currentColor" strokeWidth="1.5" />
          </svg>
        </button>
      </nav>

      {/* Mobile fullscreen menu */}
      <div
        style={{
          position: "fixed", inset: 0, zIndex: 60,
          background: "rgba(10,10,10,0.98)",
          backdropFilter: "blur(24px)",
          WebkitBackdropFilter: "blur(24px)",
          opacity: menuOpen ? 1 : 0,
          visibility: menuOpen ? "visible" : "hidden",
          transition: "opacity 300ms cubic-bezier(.2,.7,.2,1), visibility 300ms",
          display: "flex", flexDirection: "column",
          padding: "20px 20px 32px",
        }}
      >
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 }}>
          <a href="#" onClick={() => setMenuOpen(false)} style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ width: 10, height: 10, borderRadius: "50%", background: "var(--accent)", boxShadow: "0 0 24px var(--accent)" }} />
            <span style={{ fontFamily: "var(--serif)", fontSize: 22, letterSpacing: -0.3 }}>
              webaktual<span style={{ color: "var(--accent)" }}>.</span>
            </span>
          </a>
          <button
            onClick={() => setMenuOpen(false)}
            aria-label="Zavrieť menu"
            style={{
              display: "flex", alignItems: "center", justifyContent: "center",
              width: 44, height: 44, borderRadius: 999,
              border: "1px solid var(--line-2)", background: "transparent",
              color: "var(--fg)", cursor: "pointer",
            }}
          >
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M2 2l12 12M14 2L2 14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
            </svg>
          </button>
        </div>

        <div style={{ display: "flex", flexDirection: "column", flex: 1, justifyContent: "center", gap: 2 }}>
          {NAV_LINKS.map(([label, id], i) => (
            <a
              key={id}
              href={`#${id}`}
              onClick={() => setMenuOpen(false)}
              style={{
                display: "flex", justifyContent: "space-between", alignItems: "center",
                fontFamily: "var(--serif)", fontSize: "clamp(36px, 9vw, 56px)",
                color: "var(--fg)", padding: "14px 0",
                borderBottom: "1px solid var(--line)",
                transform: menuOpen ? "translateX(0)" : "translateX(-16px)",
                opacity: menuOpen ? 1 : 0,
                transition: `transform 400ms cubic-bezier(.2,.7,.2,1) ${120 + i * 70}ms, opacity 400ms ${120 + i * 70}ms`,
              }}
            >
              <span>{label}</span>
              <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-mute)", letterSpacing: 1.2 }}>
                / 0{i + 1}
              </span>
            </a>
          ))}
        </div>

        <a
          href="#contact"
          onClick={() => setMenuOpen(false)}
          style={{
            display: "flex", alignItems: "center", justifyContent: "center", gap: 12,
            background: "var(--accent)", color: "#0a0a0a",
            padding: "18px 24px", borderRadius: 999, fontSize: 15, fontWeight: 500,
            transform: menuOpen ? "translateY(0)" : "translateY(16px)",
            opacity: menuOpen ? 1 : 0,
            transition: "transform 400ms cubic-bezier(.2,.7,.2,1) 480ms, opacity 400ms 480ms",
            marginTop: 16,
          }}
        >
          Získať cenovú ponuku
          <span style={{
            display: "inline-flex", alignItems: "center", justifyContent: "center",
            width: 26, height: 26, borderRadius: "50%", background: "#0a0a0a", color: "var(--accent)",
            fontSize: 13,
          }}>→</span>
        </a>
      </div>
    </>
  );
};

/* ────────────────────────────────────────────────────────────
   Hero
   ──────────────────────────────────────────────────────────── */
const Hero = () => {
  const [mouse, setMouse] = useState({ x: 0.5, y: 0.5 });
  const onMouseMove = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    setMouse({ x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height });
  };

  return (
    <section
      onMouseMove={onMouseMove}
      className="hero-section"
      style={{
        position: "relative", minHeight: "100vh", padding: "180px 40px 100px",
        display: "flex", flexDirection: "column", justifyContent: "space-between",
        overflow: "hidden",
      }}
    >
      {/* radial glow following mouse */}
      <div
        style={{
          position: "absolute", inset: 0, pointerEvents: "none",
          background: `radial-gradient(600px circle at ${mouse.x * 100}% ${mouse.y * 100}%, rgba(255,107,53,0.10), transparent 50%)`,
          transition: "background 200ms",
        }}
      />
      {/* faint grid */}
      <div
        style={{
          position: "absolute", inset: 0, pointerEvents: "none", opacity: 0.35,
          backgroundImage:
            "linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px)",
          backgroundSize: "80px 80px",
          maskImage: "radial-gradient(ellipse at center, black 30%, transparent 75%)",
        }}
      />

      <div className="hero-meta-row" style={{ position: "relative", display: "flex", justifyContent: "space-between", fontFamily: "var(--mono)", fontSize: 11.5, color: "var(--fg-mute)", textTransform: "uppercase", letterSpacing: 1.5 }}>
        <span>[01] — Prievidza, SK</span>
        <span>Est. 2024 / v2.6</span>
      </div>

      <div style={{ position: "relative", maxWidth: 1400, margin: "auto auto", width: "100%" }}>
        <Reveal>
          <div className="hero-kicker" style={{ display: "flex", alignItems: "center", gap: 10, fontFamily: "var(--mono)", fontSize: 12, color: "var(--accent)", marginBottom: 28, textTransform: "uppercase", letterSpacing: 1.5 }}>
            <span style={{ width: 28, height: 1, background: "var(--accent)" }} />
            Web agency — AI-driven workflow
          </div>
        </Reveal>

        <Reveal delay={120}>
          <h1
            className="hero-headline"
            style={{
              fontFamily: "var(--serif)", fontWeight: 400,
              fontSize: "clamp(64px, 9.5vw, 168px)",
              lineHeight: 0.92, letterSpacing: -0.04 + "em",
              maxWidth: "13ch",
            }}
          >
            Moderné weby<br />
            pre <em style={{ fontStyle: "italic", color: "var(--accent)" }}>slovenské</em><br />
            firmy.
          </h1>
        </Reveal>

        <div className="hero-content-grid" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 60, marginTop: 64, alignItems: "end" }}>
          <Reveal delay={280}>
            <p className="hero-description" style={{ fontSize: 19, lineHeight: 1.55, color: "var(--fg-dim)", maxWidth: 520 }}>
              Postavíme vám rýchly, krásny a konverzný web za zlomok bežnej ceny.
              S využitím AI nástrojov dodávame v priemere <span style={{ color: "var(--fg)" }}>3× rýchlejšie</span> ako klasické agentúry.
            </p>
          </Reveal>

          <Reveal delay={400}>
            <div className="hero-cta-row" style={{ display: "flex", gap: 14, alignItems: "center", justifyContent: "flex-end" }}>
              <a
                href="#contact"
                style={{
                  position: "relative", display: "inline-flex", alignItems: "center", gap: 12,
                  background: "var(--accent)", color: "#0a0a0a",
                  padding: "20px 28px", borderRadius: 999, fontWeight: 500, fontSize: 15,
                  overflow: "hidden", transition: "transform 200ms",
                }}
                onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-2px)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; }}
              >
                Získať cenovú ponuku
                <span style={{
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  width: 28, height: 28, borderRadius: "50%", background: "#0a0a0a", color: "var(--accent)",
                  fontSize: 14,
                }}>→</span>
              </a>
              <a
                href="#work"
                style={{
                  padding: "20px 24px", borderRadius: 999,
                  border: "1px solid var(--line-2)", fontSize: 15, color: "var(--fg)",
                  transition: "all 200ms",
                }}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--fg)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line-2)"; }}
              >
                Pozrieť práce
              </a>
            </div>
          </Reveal>
        </div>
      </div>

      {/* footer metrics row */}
      <Reveal delay={600}>
        <div
          className="hero-metrics-row"
          style={{
            position: "relative", marginTop: 100,
            borderTop: "1px solid var(--line)", paddingTop: 24,
            display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32,
          }}
        >
          {[
            ["120+", "dokončených projektov"],
            ["3 dni", "priemerný čas dodania"],
            ["350€", "od ceny za web"],
            ["4.9/5", "spokojnosť klientov"],
          ].map(([n, l], i) => (
            <div key={i} style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              <span style={{ fontFamily: "var(--serif)", fontSize: 44, lineHeight: 1, letterSpacing: -0.02 + "em" }}>{n}</span>
              <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-mute)", textTransform: "uppercase", letterSpacing: 1.2 }}>{l}</span>
            </div>
          ))}
        </div>
      </Reveal>
    </section>
  );
};

/* ────────────────────────────────────────────────────────────
   Marquee
   ──────────────────────────────────────────────────────────── */
const Marquee = () => {
  const items = ["Reštaurácie", "Kaderníctva", "Autoservisy", "Lekárne", "Fitness centrá", "Advokáti", "Realitky", "E-shopy", "Hotely"];
  const row = [...items, ...items];
  return (
    <section className="marquee-strip" style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", padding: "28px 0", overflow: "hidden" }}>
      <div className="marquee-text" style={{ display: "flex", gap: 60, animation: "scroll 38s linear infinite", whiteSpace: "nowrap", fontFamily: "var(--serif)", fontSize: 32, color: "var(--fg-mute)" }}>
        {row.map((t, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 60 }}>
            {t}
            <span style={{ color: "var(--accent)" }}>✦</span>
          </span>
        ))}
      </div>
      <style>{`@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }`}</style>
    </section>
  );
};

/* ────────────────────────────────────────────────────────────
   Section header
   ──────────────────────────────────────────────────────────── */
const SectionHeader = ({ idx, kicker, title, lede }) => (
  <div className="section-header-grid" style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 60, alignItems: "start", marginBottom: 80 }}>
    <Reveal>
      <div style={{ display: "flex", alignItems: "center", gap: 10, fontFamily: "var(--mono)", fontSize: 12, color: "var(--accent)", textTransform: "uppercase", letterSpacing: 1.5 }}>
        <span>[{idx}]</span>
        <span style={{ width: 24, height: 1, background: "var(--accent)" }} />
        <span>{kicker}</span>
      </div>
    </Reveal>
    <div>
      <Reveal delay={100}>
        <h2 style={{ fontFamily: "var(--serif)", fontWeight: 400, fontSize: "clamp(40px, 5.5vw, 88px)", lineHeight: 0.96, letterSpacing: -0.03 + "em", marginBottom: 24 }}>
          {title}
        </h2>
      </Reveal>
      {lede && (
        <Reveal delay={200}>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: "var(--fg-dim)", maxWidth: 580 }}>{lede}</p>
        </Reveal>
      )}
    </div>
  </div>
);

/* ────────────────────────────────────────────────────────────
   Why Us
   ──────────────────────────────────────────────────────────── */
const WhyUs = () => {
  const cards = [
    {
      n: "01",
      title: "Hotovo za 3 dni",
      lede: "Štandardný web stíhame za víkend. Žiadne týždne čakania, žiadne výhovorky.",
      detail: "AI-asistovaný workflow + osvedčená šablónová báza znamená, že prvý draft máte do 48 hodín od briefu.",
      icon: (
        <svg width="100%" height="100%" viewBox="0 0 120 120" fill="none">
          <circle cx="60" cy="60" r="48" stroke="currentColor" strokeWidth="1" opacity="0.4" />
          <circle cx="60" cy="60" r="48" stroke="var(--accent)" strokeWidth="2" strokeDasharray="301.6" strokeDashoffset="200" transform="rotate(-90 60 60)" strokeLinecap="round" />
          <text x="60" y="68" textAnchor="middle" fontFamily="var(--serif)" fontSize="32" fill="currentColor">3d</text>
        </svg>
      ),
    },
    {
      n: "02",
      title: "Ceny od 350€",
      lede: "Transparentný cenník bez prekvapení. Vyberte si balík, dostanete fixnú cenu.",
      detail: "Žiadne hodinovky, žiadne 'doplnkové faktúry'. Čo si dohodneme, to dostanete.",
      icon: (
        <svg width="100%" height="100%" viewBox="0 0 120 120" fill="none">
          <text x="60" y="74" textAnchor="middle" fontFamily="var(--serif)" fontSize="56" fill="currentColor">350</text>
          <text x="60" y="98" textAnchor="middle" fontFamily="var(--mono)" fontSize="10" fill="var(--accent)" letterSpacing="2">EUR / OD</text>
          <line x1="20" y1="20" x2="40" y2="20" stroke="var(--accent)" strokeWidth="1.5" />
          <line x1="80" y1="100" x2="100" y2="100" stroke="var(--accent)" strokeWidth="1.5" />
        </svg>
      ),
    },
    {
      n: "03",
      title: "Všetko v jednom",
      lede: "Dizajn, kód, hosting, SEO, doména. Nikam nemusíte chodiť — riešime to za vás.",
      detail: "Jedna kontaktná osoba, jedna faktúra, jeden tím. Žiadne pingpongovanie medzi dodávateľmi.",
      icon: (
        <svg width="100%" height="100%" viewBox="0 0 120 120" fill="none">
          {[
            { x: 30, y: 30 }, { x: 60, y: 22 }, { x: 90, y: 30 },
            { x: 22, y: 60 }, { x: 60, y: 60 }, { x: 98, y: 60 },
            { x: 30, y: 90 }, { x: 60, y: 98 }, { x: 90, y: 90 },
          ].map((p, i) => (
            <circle key={i} cx={p.x} cy={p.y} r={i === 4 ? 8 : 4} fill={i === 4 ? "var(--accent)" : "currentColor"} opacity={i === 4 ? 1 : 0.5} />
          ))}
          {[
            [30, 30, 60, 60], [60, 22, 60, 60], [90, 30, 60, 60],
            [22, 60, 60, 60], [98, 60, 60, 60],
            [30, 90, 60, 60], [60, 98, 60, 60], [90, 90, 60, 60],
          ].map((l, i) => (
            <line key={i} x1={l[0]} y1={l[1]} x2={l[2]} y2={l[3]} stroke="currentColor" strokeWidth="0.5" opacity="0.4" />
          ))}
        </svg>
      ),
    },
  ];

  const [hovered, setHovered] = useState(null);

  return (
    <section id="why" className="responsive-section" style={{ padding: "140px 40px", borderTop: "1px solid var(--line)" }}>
      <SectionHeader
        idx="02"
        kicker="Prečo my"
        title={<>Malá firma si zaslúži <em style={{ fontStyle: "italic", color: "var(--fg-dim)" }}>veľký</em> web.</>}
        lede="Veríme, že malá firma si zaslúži veľký web. Preto sme zostavili workflow, ktorý kombinuje efektivitu umelej inteligencie s ľudskou citlivosťou na detail."
      />

      <div className="why-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--line)", border: "1px solid var(--line)" }}>
        {cards.map((c, i) => (
          <Reveal key={i} delay={i * 120}>
            <div
              onMouseEnter={() => setHovered(i)}
              onMouseLeave={() => setHovered(null)}
              style={{
                position: "relative", background: hovered === i ? "var(--bg-3)" : "var(--bg)",
                padding: 40, minHeight: 480, display: "flex", flexDirection: "column",
                transition: "background 300ms",
              }}
            >
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 32 }}>
                <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-mute)", letterSpacing: 1.5 }}>/ {c.n}</span>
                <span style={{
                  width: 8, height: 8, borderRadius: "50%",
                  background: hovered === i ? "var(--accent)" : "var(--line-2)",
                  transition: "all 300ms",
                  boxShadow: hovered === i ? "0 0 16px var(--accent)" : "none",
                }} />
              </div>

              <div style={{ width: 120, height: 120, marginBottom: 40, color: "var(--fg-dim)" }}>
                {c.icon}
              </div>

              <h3 style={{ fontFamily: "var(--serif)", fontSize: 42, fontWeight: 400, lineHeight: 1.08, letterSpacing: -0.02 + "em", marginBottom: 16 }}>
                {c.title}
              </h3>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--fg-dim)", marginBottom: 20 }}>{c.lede}</p>

              <div style={{
                marginTop: "auto",
                paddingTop: 20,
                borderTop: "1px solid var(--line)",
                fontSize: 13, lineHeight: 1.55, color: "var(--fg-mute)",
                maxHeight: hovered === i ? 100 : 0, overflow: "hidden",
                opacity: hovered === i ? 1 : 0,
                transition: "all 400ms cubic-bezier(.2,.7,.2,1)",
              }}>
                {c.detail}
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
};

/* ────────────────────────────────────────────────────────────
   Services
   ──────────────────────────────────────────────────────────── */
const Services = () => {
  const services = [
    { tag: "S01", title: "One-page weby", desc: "Vizitky, eventy, kampane — jedna stránka, ktorá konvertuje.", from: "350€" },
    { tag: "S02", title: "Firemné weby", desc: "Viacstránkové weby s CMS pre malé a stredné firmy.", from: "590€" },
    { tag: "S03", title: "E-shopy", desc: "Predaj online so Stripe, GoPay, Slovenskou poštou.", from: "1 290€" },
    { tag: "S04", title: "Redesign", desc: "Nové šaty pre váš starý web. Vrátane migrácie obsahu.", from: "490€" },
    { tag: "S05", title: "SEO & rýchlosť", desc: "Optimalizácia, Core Web Vitals, lokálne SEO pre Google.", from: "190€" },
    { tag: "S06", title: "AI integrácie", desc: "Chatboty, automatizácie, generovanie obsahu.", from: "290€" },
  ];

  return (
    <section id="services" className="responsive-section" style={{ padding: "140px 40px", borderTop: "1px solid var(--line)", background: "var(--bg-2)" }}>
      <SectionHeader
        idx="03"
        kicker="Služby"
        title={<>Všetko, čo váš web <em style={{ fontStyle: "italic", color: "var(--fg-dim)" }}>potrebuje</em>.</>}
        lede="Od prvého náčrtu po spustenie a údržbu. Jeden tím, jeden cenník, jeden výsledok — web, na ktorý ste hrdí."
      />

      <div className="services-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--line)" }}>
        {services.map((s, i) => (
          <Reveal key={i} delay={i * 80}>
            <ServiceCard service={s} />
          </Reveal>
        ))}
      </div>

      <Reveal delay={500}>
        <div className="services-bonus" style={{ marginTop: 60, display: "flex", justifyContent: "space-between", alignItems: "center", padding: "24px 32px", border: "1px solid var(--line-2)", borderRadius: 16 }}>
          <div>
            <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--accent)", textTransform: "uppercase", letterSpacing: 1.5, marginBottom: 6 }}>+ Bonus</div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 26 }}>
              Doména a hosting <em style={{ fontStyle: "italic", color: "var(--fg-dim)" }}>na prvý rok zdarma.</em>
            </div>
          </div>
          <a href="#contact" style={{ fontSize: 14, padding: "14px 22px", borderRadius: 999, border: "1px solid var(--fg)", color: "var(--fg)" }}>
            Spýtať sa →
          </a>
        </div>
      </Reveal>
    </section>
  );
};

const ServiceCard = ({ service }) => {
  const [hovered, setHovered] = useState(false);
  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background: hovered ? "var(--bg-3)" : "var(--bg-2)",
        padding: 36, minHeight: 280, position: "relative",
        display: "flex", flexDirection: "column",
        transition: "background 250ms", cursor: "pointer",
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 60, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: 1.5, color: "var(--fg-mute)" }}>
        <span>/{service.tag}</span>
        <span style={{ color: hovered ? "var(--accent)" : "var(--fg-mute)", transition: "color 250ms" }}>
          od <span style={{ color: hovered ? "var(--accent)" : "var(--fg)" }}>{service.from}</span>
        </span>
      </div>

      <h3 style={{ fontFamily: "var(--serif)", fontSize: 38, fontWeight: 400, lineHeight: 1.08, letterSpacing: -0.02 + "em", marginBottom: 14 }}>
        {service.title}
      </h3>
      <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "var(--fg-dim)", maxWidth: 380 }}>{service.desc}</p>

      <div style={{
        marginTop: "auto", display: "flex", alignItems: "center", gap: 8,
        fontFamily: "var(--mono)", fontSize: 12, color: "var(--accent)",
        transform: hovered ? "translateX(4px)" : "translateX(0)",
        opacity: hovered ? 1 : 0.6, transition: "all 250ms",
      }}>
        Viac info <span>→</span>
      </div>
    </div>
  );
};

/* ────────────────────────────────────────────────────────────
   Pricing
   ──────────────────────────────────────────────────────────── */
const Pricing = () => {
  const tiers = [
    {
      name: "Štart",
      price: "350",
      tag: "Pre malé firmy a živnostníkov",
      features: [
        "Jednostránkový web (one-pager)",
        "Responzívny dizajn — mobil & desktop",
        "Kontaktný formulár + Google Maps",
        "Základné SEO + napojenie na Analytics",
        "Hosting & doména na 1 rok zdarma",
      ],
      cta: "Vybrať Štart",
      featured: false,
    },
    {
      name: "Profi",
      price: "890",
      tag: "Najpopulárnejší — firemný web",
      features: [
        "Až 8 podstránok + CMS úpravy",
        "Vlastný dizajn na mieru značky",
        "Pokročilé SEO + sitemap + schema",
        "Blog/aktuality + viacjazyčnosť",
        "Hosting & doména na 2 roky zdarma",
        "30 dní podpora po spustení",
      ],
      cta: "Vybrať Profi",
      featured: true,
    },
    {
      name: "Premium",
      price: "1 990",
      tag: "E-shop alebo komplexný projekt",
      features: [
        "E-shop s platobnou bránou (Stripe/GoPay)",
        "Napojenie na účtovný systém",
        "AI chatbot pre zákaznícku podporu",
        "Pokročilá analytika & A/B testovanie",
        "Hosting & doména na 2 roky zdarma",
        "90 dní prioritná podpora",
      ],
      cta: "Vybrať Premium",
      featured: false,
    },
  ];

  return (
    <section id="pricing" className="responsive-section" style={{ padding: "140px 40px", borderTop: "1px solid var(--line)" }}>
      <SectionHeader
        idx="04"
        kicker="Cenník"
        title={<>Fixné ceny. <em style={{ fontStyle: "italic", color: "var(--fg-dim)" }}>Nulové prekvapenia.</em></>}
        lede="Vyberte si balík, ktorý sedí vašej firme. Cena, ktorú vidíte, je cena, ktorú zaplatíte — bez hodinoviek, bez doplnkov v zmluve, bez ďalších faktúr."
      />

      <div className="pricing-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
        {tiers.map((t, i) => (
          <Reveal key={i} delay={i * 120}>
            <PricingCard tier={t} />
          </Reveal>
        ))}
      </div>

      <Reveal delay={500}>
        <div style={{ marginTop: 40, fontFamily: "var(--mono)", fontSize: 12, color: "var(--fg-mute)", textAlign: "center" }}>
          Všetky ceny sú jednorazové, bez DPH. Splatné v 2 splátkach (50% / 50%).
        </div>
      </Reveal>
    </section>
  );
};

const PricingCard = ({ tier }) => {
  const [hovered, setHovered] = useState(false);
  const featured = tier.featured;

  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        position: "relative",
        border: featured ? "1px solid var(--accent)" : "1px solid var(--line-2)",
        borderRadius: 20, padding: 36,
        background: featured ? "linear-gradient(180deg, rgba(255,107,53,0.06), transparent 60%)" : "var(--bg)",
        transform: hovered ? "translateY(-4px)" : "translateY(0)",
        transition: "transform 300ms cubic-bezier(.2,.7,.2,1)",
        minHeight: 580,
        display: "flex", flexDirection: "column",
      }}
    >
      {featured && (
        <div style={{
          position: "absolute", top: -12, left: 24,
          background: "var(--accent)", color: "#0a0a0a",
          fontFamily: "var(--mono)", fontSize: 11, fontWeight: 600,
          textTransform: "uppercase", letterSpacing: 1.2,
          padding: "5px 12px", borderRadius: 999,
        }}>
          Najobľúbenejší
        </div>
      )}

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 28 }}>
        <span style={{ fontFamily: "var(--serif)", fontSize: 32 }}>{tier.name}</span>
        <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-mute)", letterSpacing: 1.2 }}>/0{tier.featured ? 2 : tier.name === "Štart" ? 1 : 3}</span>
      </div>

      <div style={{ marginBottom: 8 }}>
        <span style={{ fontFamily: "var(--mono)", fontSize: 13, color: "var(--fg-mute)" }}>od</span>
      </div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 12 }}>
        <span className="pricing-card-price" style={{ fontFamily: "var(--serif)", fontSize: 88, lineHeight: 0.9, letterSpacing: -0.04 + "em", color: featured ? "var(--accent)" : "var(--fg)" }}>{tier.price}</span>
        <span style={{ fontFamily: "var(--serif)", fontSize: 36, color: "var(--fg-dim)" }}>€</span>
      </div>
      <div style={{ fontSize: 13, color: "var(--fg-dim)", marginBottom: 32, paddingBottom: 24, borderBottom: "1px solid var(--line)" }}>
        {tier.tag}
      </div>

      <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 14, marginBottom: 32 }}>
        {tier.features.map((f, i) => (
          <li key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: 14, lineHeight: 1.5, color: "var(--fg-dim)" }}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0, marginTop: 3, color: featured ? "var(--accent)" : "var(--fg)" }}>
              <path d="M3 8L6.5 11.5L13 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
            <span>{f}</span>
          </li>
        ))}
      </ul>

      <a
        href="#contact"
        style={{
          marginTop: "auto",
          display: "flex", alignItems: "center", justifyContent: "center", gap: 10,
          padding: "16px 24px", borderRadius: 999,
          background: featured ? "var(--accent)" : "transparent",
          color: featured ? "#0a0a0a" : "var(--fg)",
          border: featured ? "1px solid var(--accent)" : "1px solid var(--line-2)",
          fontSize: 14, fontWeight: 500, transition: "all 200ms",
        }}
        onMouseEnter={(e) => {
          if (!featured) { e.currentTarget.style.background = "var(--fg)"; e.currentTarget.style.color = "#0a0a0a"; }
        }}
        onMouseLeave={(e) => {
          if (!featured) { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--fg)"; }
        }}
      >
        {tier.cta} <span>→</span>
      </a>
    </div>
  );
};

/* ────────────────────────────────────────────────────────────
   Work (selected projects)
   ──────────────────────────────────────────────────────────── */
const Work = () => {
  const projects = [
    { tag: "01", name: "Pivovar Veľký", cat: "E-shop · Branding", year: "2025", color: "#3d2914" },
    { tag: "02", name: "Klinika Slnečnica", cat: "Firemný web", year: "2025", color: "#2a3d2c" },
    { tag: "03", name: "Studio Lúka", cat: "Portfolio", year: "2024", color: "#3a2840" },
    { tag: "04", name: "Tatra Bistro", cat: "One-page + rezervácie", year: "2024", color: "#3d2818" },
  ];

  return (
    <section id="work" className="responsive-section" style={{ padding: "140px 40px", borderTop: "1px solid var(--line)" }}>
      <SectionHeader
        idx="05"
        kicker="Vybrané práce"
        title={<>Weby, ktoré <em style={{ fontStyle: "italic", color: "var(--fg-dim)" }}>pracujú</em> pre svojich klientov.</>}
      />

      <div style={{ display: "flex", flexDirection: "column" }}>
        {projects.map((p, i) => <ProjectRow key={i} p={p} idx={i} />)}
      </div>
    </section>
  );
};

const ProjectRow = ({ p, idx }) => {
  const [hovered, setHovered] = useState(false);
  return (
    <Reveal delay={idx * 80}>
      <div
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        className="work-row"
        style={{
          position: "relative",
          display: "grid", gridTemplateColumns: "60px 1fr 1fr 1fr 60px",
          alignItems: "center", padding: "32px 0",
          borderTop: idx === 0 ? "1px solid var(--line-2)" : "none",
          borderBottom: "1px solid var(--line-2)",
          cursor: "pointer",
        }}
      >
        {/* sliding background */}
        <div style={{
          position: "absolute", inset: 0, background: p.color, opacity: hovered ? 0.4 : 0,
          transition: "opacity 400ms", pointerEvents: "none", zIndex: -1,
        }} />

        <span style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--fg-mute)" }}>0{idx + 1}</span>
        <span style={{
          fontFamily: "var(--serif)", fontSize: 44, letterSpacing: -0.02 + "em",
          transform: hovered ? "translateX(12px)" : "translateX(0)",
          transition: "transform 300ms",
        }}>
          {p.name}
        </span>
        <span style={{ fontSize: 14, color: "var(--fg-dim)" }}>{p.cat}</span>
        <span style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--fg-mute)" }}>{p.year}</span>
        <span style={{
          display: "flex", justifyContent: "flex-end",
          color: hovered ? "var(--accent)" : "var(--fg-mute)",
          fontSize: 22, transform: hovered ? "translateX(6px) rotate(-45deg)" : "rotate(0deg)",
          transition: "all 300ms",
        }}>
          →
        </span>
      </div>
    </Reveal>
  );
};

/* ────────────────────────────────────────────────────────────
   Process strip
   ──────────────────────────────────────────────────────────── */
const Process = () => {
  const steps = [
    { d: "Deň 0", t: "Brief", desc: "30-min hovor. Spoznáme firmu, ciele, vizuálne preferencie." },
    { d: "Deň 1", t: "Návrh", desc: "Dostanete živý prototyp na schválenie — žiadne statické obrázky." },
    { d: "Deň 2", t: "Tvorba", desc: "AI-asistovaná implementácia. Vy v paralele dodávate texty a fotky." },
    { d: "Deň 3", t: "Spustenie", desc: "Web ide naživo. Doména, SSL, analytics — všetko nastavené." },
  ];

  return (
    <section className="responsive-section" style={{ padding: "120px 40px", borderTop: "1px solid var(--line)", background: "var(--bg-2)" }}>
      <Reveal>
        <div className="process-header" style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 60 }}>
          <div style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--accent)", textTransform: "uppercase", letterSpacing: 1.5 }}>
            [06] — Proces
          </div>
          <div style={{ fontFamily: "var(--serif)", fontSize: "clamp(28px, 3vw, 44px)", maxWidth: 700, textAlign: "right" }}>
            Od briefu k spusteniu za <em style={{ fontStyle: "italic", color: "var(--accent)" }}>72 hodín</em>.
          </div>
        </div>
      </Reveal>

      <div className="process-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "var(--line)" }}>
        {steps.map((s, i) => (
          <Reveal key={i} delay={i * 120}>
            <div style={{ background: "var(--bg-2)", padding: "40px 32px", minHeight: 240, display: "flex", flexDirection: "column" }}>
              <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--accent)", letterSpacing: 1.5, marginBottom: 32 }}>
                {s.d.toUpperCase()}
              </div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 36, marginBottom: 14, letterSpacing: -0.02 + "em" }}>{s.t}</div>
              <div style={{ fontSize: 14, lineHeight: 1.55, color: "var(--fg-dim)" }}>{s.desc}</div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
};

/* ────────────────────────────────────────────────────────────
   Contact
   ──────────────────────────────────────────────────────────── */
const Contact = () => {
  const [form, setForm] = useState({ name: "", company: "", email: "", budget: "Štart (350€)", message: "" });
  const [submitted, setSubmitted] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const onChange = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const onSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError("");
    try {
      const res = await fetch("https://formspree.io/f/xjglnegj", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          name: form.name,
          company: form.company,
          email: form.email,
          budget: form.budget,
          message: form.message,
        }),
      });
      if (res.ok) {
        setSubmitted(true);
      } else {
        setError("Niečo sa pokazilo. Kontaktujte nás priamo na ahoj@webaktual.sk.");
      }
    } catch {
      setError("Niečo sa pokazilo. Kontaktujte nás priamo na ahoj@webaktual.sk.");
    } finally {
      setLoading(false);
    }
  };

  const budgets = ["Štart (350€)", "Profi (890€)", "Premium (1 990€)", "Vlastný rozsah"];

  return (
    <section id="contact" className="responsive-section" style={{ padding: "140px 40px 80px", borderTop: "1px solid var(--line)" }}>
      <div className="contact-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 100 }}>
        <Reveal>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, fontFamily: "var(--mono)", fontSize: 12, color: "var(--accent)", textTransform: "uppercase", letterSpacing: 1.5, marginBottom: 32 }}>
              <span>[07]</span>
              <span style={{ width: 24, height: 1, background: "var(--accent)" }} />
              <span>Kontakt</span>
            </div>

            <h2 className="contact-headline" style={{ fontFamily: "var(--serif)", fontSize: "clamp(48px, 6.5vw, 104px)", fontWeight: 400, lineHeight: 0.94, letterSpacing: -0.03 + "em", marginBottom: 40 }}>
              Poďme<br />
              <em style={{ fontStyle: "italic", color: "var(--accent)" }}>postaviť</em><br />
              niečo dobré.
            </h2>

            <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--fg-dim)", marginBottom: 48, maxWidth: 440 }}>
              Napíšte nám pár viet o vašom projekte. Do 24 hodín dostanete cenovú ponuku na mieru — bez záväzku.
            </p>

            <div className="contact-info" style={{ display: "flex", flexDirection: "column", gap: 20, fontSize: 15 }}>
              <div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-mute)", textTransform: "uppercase", letterSpacing: 1.2, marginBottom: 6 }}>Email</div>
                <a href="mailto:ahoj@webaktual.sk" style={{ fontFamily: "var(--serif)", fontSize: 24, color: "var(--fg)" }}>ahoj@webaktual.sk</a>
              </div>
              <div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-mute)", textTransform: "uppercase", letterSpacing: 1.2, marginBottom: 6 }}>Telefón</div>
                <a href="tel:+421900123456" style={{ fontFamily: "var(--serif)", fontSize: 24, color: "var(--fg)" }}>+421 900 123 456</a>
              </div>
              <div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-mute)", textTransform: "uppercase", letterSpacing: 1.2, marginBottom: 6 }}>Sídlo</div>
                <span style={{ fontFamily: "var(--serif)", fontSize: 24 }}>Prievidza, SK</span>
              </div>
            </div>
          </div>
        </Reveal>

        <Reveal delay={200}>
          <form
            onSubmit={onSubmit}
            className="contact-form"
            style={{
              border: "1px solid var(--line-2)", borderRadius: 24, padding: 40,
              background: "linear-gradient(180deg, var(--bg-3), var(--bg))",
              position: "relative", overflow: "hidden",
            }}
          >
            <div style={{
              position: "absolute", top: -100, right: -100, width: 300, height: 300,
              background: "radial-gradient(circle, rgba(255,107,53,0.15), transparent 60%)",
              pointerEvents: "none",
            }} />

            {submitted ? (
              <div style={{ position: "relative", textAlign: "center", padding: "60px 0" }}>
                <div style={{
                  width: 64, height: 64, borderRadius: "50%", background: "var(--accent)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 24,
                }}>
                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
                    <path d="M5 12l5 5L20 7" stroke="#0a0a0a" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </div>
                <h3 style={{ fontFamily: "var(--serif)", fontSize: 48, marginBottom: 16, letterSpacing: -0.02 + "em" }}>
                  Ďakujeme, {form.name || "kolega"}!
                </h3>
                <p style={{ fontSize: 16, color: "var(--fg-dim)", maxWidth: 380, margin: "0 auto" }}>
                  Vašu správu sme prijali. Ozveme sa do 24 hodín na <span style={{ color: "var(--fg)" }}>{form.email}</span>.
                </p>
              </div>
            ) : (
              <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 24 }}>
                <FormField label="Meno" value={form.name} onChange={onChange("name")} placeholder="Ján Novák" required />
                <FormField label="Firma" value={form.company} onChange={onChange("company")} placeholder="Napr. Pivovar Veľký, s.r.o." />
                <FormField label="Email" type="email" value={form.email} onChange={onChange("email")} placeholder="jan@firma.sk" required />

                <div>
                  <label style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-mute)", textTransform: "uppercase", letterSpacing: 1.2, marginBottom: 10, display: "block" }}>
                    Rozsah projektu
                  </label>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                    {budgets.map((b) => (
                      <button
                        key={b} type="button"
                        onClick={() => setForm({ ...form, budget: b })}
                        style={{
                          padding: "10px 16px", borderRadius: 999, fontSize: 13,
                          border: "1px solid " + (form.budget === b ? "var(--accent)" : "var(--line-2)"),
                          background: form.budget === b ? "var(--accent-soft)" : "transparent",
                          color: form.budget === b ? "var(--accent)" : "var(--fg-dim)",
                          transition: "all 200ms",
                        }}
                      >
                        {b}
                      </button>
                    ))}
                  </div>
                </div>

                <div>
                  <label style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-mute)", textTransform: "uppercase", letterSpacing: 1.2, marginBottom: 10, display: "block" }}>
                    O projekte
                  </label>
                  <textarea
                    value={form.message} onChange={onChange("message")} required rows={4}
                    placeholder="Pár viet o tom, čo plánujete..."
                    style={{
                      width: "100%", padding: "14px 16px", borderRadius: 12,
                      background: "var(--bg)", border: "1px solid var(--line-2)",
                      color: "var(--fg)", fontFamily: "var(--sans)", fontSize: 15, resize: "vertical",
                      outline: "none", transition: "border-color 200ms",
                    }}
                    onFocus={(e) => (e.target.style.borderColor = "var(--accent)")}
                    onBlur={(e) => (e.target.style.borderColor = "var(--line-2)")}
                  />
                </div>

                <button
                  type="submit"
                  disabled={loading}
                  style={{
                    marginTop: 8, display: "flex", alignItems: "center", justifyContent: "center", gap: 12,
                    background: "var(--accent)", color: "#0a0a0a",
                    padding: "18px 24px", borderRadius: 999, fontSize: 15, fontWeight: 500,
                    transition: "all 200ms",
                    opacity: loading ? 0.7 : 1,
                    cursor: loading ? "wait" : "pointer",
                  }}
                  onMouseEnter={(e) => { if (!loading) e.currentTarget.style.transform = "translateY(-2px)"; }}
                  onMouseLeave={(e) => (e.currentTarget.style.transform = "translateY(0)")}
                >
                  {loading ? "Odosielam…" : "Odoslať dopyt"}
                  <span style={{
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    width: 26, height: 26, borderRadius: "50%", background: "#0a0a0a", color: "var(--accent)",
                  }}>→</span>
                </button>

                {error && (
                  <div role="alert" style={{
                    fontSize: 13, lineHeight: 1.5, color: "#ff6b6b", textAlign: "center",
                    padding: "10px 14px", borderRadius: 10,
                    background: "rgba(255, 107, 107, 0.08)",
                    border: "1px solid rgba(255, 107, 107, 0.3)",
                  }}>
                    {error}
                  </div>
                )}

                <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-mute)", textAlign: "center", lineHeight: 1.6 }}>
                  Odoslaním súhlasíte so spracovaním údajov. Odpovieme do 24h.
                </div>
              </div>
            )}
          </form>
        </Reveal>
      </div>
    </section>
  );
};

const FormField = ({ label, value, onChange, type = "text", placeholder, required }) => {
  const [focused, setFocused] = useState(false);
  return (
    <div>
      <label style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-mute)", textTransform: "uppercase", letterSpacing: 1.2, marginBottom: 10, display: "block" }}>
        {label}{required && <span style={{ color: "var(--accent)" }}> *</span>}
      </label>
      <input
        type={type} value={value} onChange={onChange} required={required} placeholder={placeholder}
        onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}
        style={{
          width: "100%", padding: "14px 16px", borderRadius: 12,
          background: "var(--bg)", border: "1px solid " + (focused ? "var(--accent)" : "var(--line-2)"),
          color: "var(--fg)", fontFamily: "var(--sans)", fontSize: 15,
          outline: "none", transition: "border-color 200ms",
        }}
      />
    </div>
  );
};

/* ────────────────────────────────────────────────────────────
   Footer
   ──────────────────────────────────────────────────────────── */
const Footer = () => (
  <footer className="footer-bar" style={{ padding: "60px 40px 40px", borderTop: "1px solid var(--line)" }}>
    <div className="footer-grid" style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 60, marginBottom: 60 }}>
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 20 }}>
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "var(--accent)" }} />
          <span style={{ fontFamily: "var(--serif)", fontSize: 24 }}>
            webaktual<span style={{ color: "var(--accent)" }}>.</span>
          </span>
        </div>
        <p style={{ fontSize: 14, color: "var(--fg-dim)", maxWidth: 360, lineHeight: 1.6 }}>
          Web štúdio zo Slovenska. Staviame moderné stránky pre slovenské firmy s pomocou AI nástrojov — rýchlejšie, lacnejšie, lepšie.
        </p>
      </div>

      {[
        ["Štúdio", ["Prečo my", "Proces", "Práce", "Blog"]],
        ["Služby", ["One-page weby", "Firemné weby", "E-shopy", "SEO"]],
        ["Kontakt", ["ahoj@webaktual.sk", "+421 900 123 456", "Prievidza, SK"]],
      ].map(([title, items], i) => (
        <div key={i}>
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-mute)", textTransform: "uppercase", letterSpacing: 1.2, marginBottom: 16 }}>{title}</div>
          <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
            {items.map((it) => (
              <li key={it} style={{ fontSize: 14, color: "var(--fg-dim)" }}>{it}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>

    <div className="footer-meta" style={{
      paddingTop: 24, borderTop: "1px solid var(--line)",
      display: "flex", justifyContent: "space-between", alignItems: "center",
      fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-mute)", textTransform: "uppercase", letterSpacing: 1.5,
    }}>
      <span>© 2026 Webaktual s.r.o.</span>
      <span>Vyrobené v Prievidzi · ✦ · Hosted in Frankfurt</span>
      <span>v2.6 — Posledná aktualizácia 14. máj 2026</span>
    </div>
  </footer>
);

/* ────────────────────────────────────────────────────────────
   App
   ──────────────────────────────────────────────────────────── */
const App = () => (
  <>
    <Nav />
    <Hero />
    <HelixSection />
    <Marquee />
    <WhyUs />
    <Services />
    <Pricing />
    <Work />
    <Process />
    <Contact />
    <Footer />
  </>
);

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