/* global React, NetworkCanvas */

// ============ Reveal-on-scroll wrapper ============
const useReveal = () => {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal, .reveal-stagger, .section-glow");
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.08, rootMargin: "0px 0px -40px 0px" }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
};

// ============ Scroll spine ============
const SPINE_SECTIONS = [
  { id: "top", label: "Start" },
  { id: "probleem", label: "Probleem" },
  { id: "oplossing", label: "Oplossing" },
  { id: "diensten", label: "Wat we doen" },
  { id: "agent-team", label: "Agent team" },
  { id: "proces", label: "Proces" },
  { id: "werk", label: "Werk" },
  { id: "waarom", label: "Waarom" },
  { id: "contact", label: "Contact" },
];

const ScrollSpine = () => {
  const [progress, setProgress] = React.useState(0);
  const [activeIdx, setActiveIdx] = React.useState(0);
  const positionsRef = React.useRef([]);

  React.useEffect(() => {
    const recompute = () => {
      const doc = document.documentElement;
      const total = doc.scrollHeight - window.innerHeight;
      positionsRef.current = SPINE_SECTIONS.map((s) => {
        const el = document.getElementById(s.id);
        if (!el) return 0;
        return total > 0 ? (el.offsetTop - window.innerHeight * 0.3) / total : 0;
      });
    };
    const onScroll = () => {
      const doc = document.documentElement;
      const max = doc.scrollHeight - window.innerHeight;
      const p = max > 0 ? Math.max(0, Math.min(1, window.scrollY / max)) : 0;
      setProgress(p);
      const pos = positionsRef.current;
      let idx = 0;
      for (let i = 0; i < pos.length; i++) {
        if (p + 0.04 >= pos[i]) idx = i;
      }
      setActiveIdx(idx);
    };
    recompute();
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", recompute);
    const t = setTimeout(recompute, 400);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", recompute);
      clearTimeout(t);
    };
  }, []);

  const handleClick = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <div className="spine" style={{ "--p": `${progress * 100}%` }}>
      <div className="track">
        <div className="fill" />
        <div className="node" />
        <div className="ticks">
          {SPINE_SECTIONS.map((s, i) => {
            const rawPos = positionsRef.current[i] || 0;
            const pos = Math.max(0.005, Math.min(0.995, rawPos));
            return (
              <div
                key={s.id}
                className={`tick ${i === activeIdx ? "active" : ""}`}
                style={{ top: `${pos * 100}%`, pointerEvents: "auto", cursor: "pointer" }}
                onClick={() => handleClick(s.id)}
              >
                <span className="label">{s.label}</span>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

// ============ Nav ============
const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="wrap nav-inner">
        <a href="#top" className="nav-logo">
          <img src="assets/noju-white.png" alt="NOJU" />
          <span>NOJU</span>
        </a>
        <div className="nav-links">
          <a href="#top">Home</a>
          <a href="#diensten">Wat we doen</a>
          <a href="#automatisering">Automatisering</a>
          <a href="#klantenservice">Klantenservice AI</a>
          <a href="#proces">Proces</a>
          <a href="#contact">Contact</a>
        </div>
        <div className="nav-cta">
          <a href="#contact" className="btn btn-primary">
            Plan kennismaking
            <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </nav>
  );
};

// ============ Hero ============
const Hero = () => (
  <header className="wrap hero" id="top">
    <div className="hero-text">
      <span className="eyebrow reveal">Digitale systeempartner</span>
      <h1 className="reveal" data-delay="1">
        Websites en automatisering <br />
        <span className="grad">die werken als één systeem.</span>
      </h1>
      <p className="lead reveal" data-delay="2">
        NOJU bouwt snelle, moderne websites en slimme automatiseringen voor bedrijven
        die minder handmatig werk willen en meer resultaat uit hun online aanwezigheid willen halen.
      </p>
      <div className="hero-ctas reveal" data-delay="3">
        <a href="#contact" className="btn btn-primary">
          Plan een kennismaking <span className="arrow">→</span>
        </a>
        <a href="#diensten" className="btn btn-ghost">
          Bekijk wat we doen
        </a>
      </div>
      <div className="trust-row reveal" data-delay="4">
        <span className="trust-pill"><span className="dot" />Snelle oplevering</span>
        <span className="trust-pill"><span className="dot" />Slimme automatisering</span>
        <span className="trust-pill"><span className="dot" />Hosting &amp; beheer</span>
        <span className="trust-pill"><span className="dot" />SEO &amp; analytics</span>
      </div>
    </div>

    <div className="hero-visual reveal" data-delay="2">
      <div className="hero-orbit-label">
        <span className="live" />SYSTEM // NETWORK MESH
      </div>
      <HeroNetwork />
    </div>
  </header>
);

const HeroNetwork = () => {
  const t = React.useContext(window.TweakCtx);
  return <NetworkCanvas density={t.nodeDensity} glow={t.glowIntensity} mouseParallax={t.mouseParallax} />;
};

// ============ Problem ============
const problems = [
  { kind: "conv", label: "Website zonder duidelijke conversie" },
  { kind: "manual", label: "Handmatige leadopvolging" },
  { kind: "slow", label: "Trage of verouderde website" },
  { kind: "inbox", label: "Klantvragen verspreid over inboxen" },
  { kind: "data", label: "Geen overzicht in data" },
  { kind: "tools", label: "Te veel losse tools" },
];

const ProblemVisual = ({ kind }) => {
  const stroke = "rgba(255,255,255,0.18)";
  const strokeStrong = "rgba(255,255,255,0.4)";
  const broken = "oklch(0.7 0.18 25)"; // soft red for the "broken" state
  const dim = "rgba(255,255,255,0.08)";

  if (kind === "conv") {
    // Funnel with leaking dots
    return (
      <svg viewBox="0 0 200 80" fill="none">
        <path d="M20 18 L80 18 L62 56 L38 56 Z" stroke={stroke} strokeDasharray="2 3" />
        <circle cx="30" cy="14" r="2" fill={strokeStrong} />
        <circle cx="50" cy="14" r="2" fill={strokeStrong} />
        <circle cx="70" cy="14" r="2" fill={strokeStrong} />
        <circle cx="50" cy="68" r="2" fill={strokeStrong} />
        {/* leaking dots */}
        <circle cx="96" cy="40" r="1.6" fill={broken} opacity="0.9" />
        <circle cx="114" cy="32" r="1.6" fill={broken} opacity="0.7" />
        <circle cx="132" cy="48" r="1.6" fill={broken} opacity="0.55" />
        <circle cx="154" cy="38" r="1.6" fill={broken} opacity="0.4" />
        <circle cx="176" cy="54" r="1.6" fill={broken} opacity="0.25" />
        <path d="M80 38 L96 40" stroke={broken} strokeDasharray="1 2" opacity="0.5" />
      </svg>
    );
  }

  if (kind === "manual") {
    // Inbox/task list with a handwritten check
    return (
      <svg viewBox="0 0 200 80" fill="none">
        {[0, 1, 2, 3].map((i) => (
          <g key={i} transform={`translate(20, ${10 + i * 16})`}>
            <rect width="110" height="10" rx="3" fill="rgba(255,255,255,0.03)" stroke={stroke} />
            <rect x="6" y="3.5" width="3" height="3" rx="0.5" fill={i === 1 ? broken : strokeStrong} />
            <rect x="14" y="3.5" width={i * 12 + 30} height="3" rx="1" fill={i === 1 ? broken : dim} opacity={i === 1 ? 0.7 : 1} />
          </g>
        ))}
        {/* Manual hand cursor */}
        <path d="M150 30 L150 50 L156 50 L156 56 L162 56 L162 62 L156 62 L156 58 L150 58 L150 65" stroke={broken} strokeWidth="1.4" strokeLinejoin="round" strokeLinecap="round" />
        <text x="168" y="56" fill={broken} fontSize="7" fontFamily="Geist Mono, monospace" letterSpacing="0.1em" opacity="0.7">manual</text>
      </svg>
    );
  }

  if (kind === "slow") {
    // Loading bar stuck at 30% + clock
    return (
      <svg viewBox="0 0 200 80" fill="none">
        <text x="20" y="22" fill="rgba(255,255,255,0.4)" fontSize="8" fontFamily="Geist Mono, monospace" letterSpacing="0.1em">LOADING…</text>
        <rect x="20" y="30" width="140" height="6" rx="3" fill="rgba(255,255,255,0.05)" stroke={stroke} />
        <rect x="20" y="30" width="42" height="6" rx="3" fill={broken} opacity="0.7" />
        <text x="20" y="52" fill={broken} fontSize="9" fontFamily="Geist Mono, monospace" letterSpacing="0.1em" opacity="0.85">4.8s</text>
        <text x="60" y="52" fill="rgba(255,255,255,0.3)" fontSize="7" fontFamily="Geist Mono, monospace" letterSpacing="0.1em">LCP</text>
        {/* Clock */}
        <circle cx="178" cy="40" r="12" stroke={stroke} />
        <path d="M178 40 L178 32 M178 40 L184 44" stroke={broken} strokeWidth="1.4" strokeLinecap="round" />
      </svg>
    );
  }

  if (kind === "inbox") {
    // Scattered mail envelopes
    const mails = [
      [22, 18], [58, 14], [98, 22], [140, 16], [170, 26],
      [30, 50], [76, 56], [120, 48], [156, 58],
    ];
    return (
      <svg viewBox="0 0 200 80" fill="none">
        {mails.map(([x, y], i) => (
          <g key={i} transform={`translate(${x}, ${y})`} opacity={0.4 + (i % 3) * 0.2}>
            <rect width="16" height="10" rx="1.5" stroke={i % 2 === 0 ? strokeStrong : stroke} fill="rgba(255,255,255,0.02)" />
            <path d="M0 0 L8 6 L16 0" stroke={i % 2 === 0 ? strokeStrong : stroke} />
          </g>
        ))}
        {/* Red flag on one */}
        <circle cx="175" cy="30" r="2.5" fill={broken} />
      </svg>
    );
  }

  if (kind === "data") {
    // Erratic chart
    return (
      <svg viewBox="0 0 200 80" fill="none">
        {[20, 56, 92, 128, 164].map((x, i) => (
          <line key={i} x1={x} y1="12" x2={x} y2="68" stroke={dim} strokeDasharray="1 3" />
        ))}
        <path d="M20 50 L40 30 L60 60 L80 22 L100 55 L120 18 L140 50 L160 28 L180 64" stroke={broken} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        {[
          [20, 50], [40, 30], [60, 60], [80, 22], [100, 55], [120, 18], [140, 50], [160, 28], [180, 64],
        ].map(([x, y], i) => (
          <circle key={i} cx={x} cy={y} r="1.6" fill={broken} opacity={0.6 + (i % 3) * 0.15} />
        ))}
        <text x="20" y="10" fill="rgba(255,255,255,0.35)" fontSize="6.5" fontFamily="Geist Mono, monospace" letterSpacing="0.16em">NO SIGNAL</text>
      </svg>
    );
  }

  if (kind === "tools") {
    // Disconnected nodes
    const nodes = [
      [30, 22], [70, 16], [110, 28], [150, 20], [180, 36],
      [40, 56], [90, 60], [130, 52], [170, 64],
    ];
    return (
      <svg viewBox="0 0 200 80" fill="none">
        {nodes.map(([x, y], i) => (
          <g key={i}>
            <circle cx={x} cy={y} r="7" stroke={i % 3 === 0 ? broken : stroke} fill="rgba(255,255,255,0.02)" />
            <circle cx={x} cy={y} r="1.5" fill={i % 3 === 0 ? broken : strokeStrong} opacity="0.8" />
          </g>
        ))}
        {/* Broken connections (dashed, faded) */}
        <path d="M37 22 L63 16 M77 16 L103 28 M117 28 L143 20" stroke={broken} strokeDasharray="1 4" opacity="0.5" />
      </svg>
    );
  }

  return null;
};

const Problem = () => (
  <section className="section section-glow" id="probleem">
    <div className="wrap">
      <div className="section-title reveal">
        <span className="eyebrow">Het probleem</span>
        <h2>
          Veel bedrijven hebben online losse onderdelen, <span className="grad">maar geen werkend systeem.</span>
        </h2>
        <p className="lead">
          Een website, formulieren, e-mails, tools en klantvragen werken vaak langs elkaar heen.
          Daardoor raken leads kwijt, blijft opvolging handmatig en kost klantenservice onnodig veel tijd.
        </p>
      </div>
      <div className="problem-grid reveal-stagger">
        {problems.map((p, i) => (
          <div key={i} className="card problem-card">
            <div className="problem-visual">
              <ProblemVisual kind={p.kind} />
            </div>
            <div className="problem-card-foot">
              <span className="label">{p.label}</span>
              <span className="x-mark">×</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ============ Solution ============
const SolutionBlockVisual = ({ kind }) => {
  if (kind === "web") {
    return (
      <svg viewBox="0 0 280 80" style={{ width: "100%", height: "100%" }}>
        <defs>
          <linearGradient id="webg" x1="0" x2="1" y1="0" y2="0">
            <stop offset="0" stopColor="oklch(0.6 0.2 295)" />
            <stop offset="1" stopColor="oklch(0.6 0.2 295 / 0)" />
          </linearGradient>
        </defs>
        <rect x="0" y="20" width="280" height="44" rx="8" fill="rgba(255,255,255,0.025)" stroke="rgba(255,255,255,0.1)" />
        <rect x="10" y="32" width="60" height="6" rx="3" fill="rgba(255,255,255,0.15)" />
        <rect x="10" y="44" width="100" height="4" rx="2" fill="rgba(255,255,255,0.06)" />
        <rect x="10" y="52" width="80" height="4" rx="2" fill="rgba(255,255,255,0.06)" />
        <rect x="180" y="32" width="88" height="24" rx="12" fill="url(#webg)" stroke="oklch(0.6 0.2 295 / 0.5)" />
      </svg>
    );
  }
  if (kind === "auto") {
    return (
      <svg viewBox="0 0 280 80" style={{ width: "100%", height: "100%" }}>
        {[0, 1, 2].map((i) => (
          <g key={i} transform={`translate(${10 + i * 90}, 26)`}>
            <rect width="74" height="28" rx="8" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.12)" />
            <circle cx="14" cy="14" r="5" fill="oklch(0.65 0.2 295)" />
            <rect x="26" y="10" width="40" height="3" rx="1.5" fill="rgba(255,255,255,0.4)" />
            <rect x="26" y="17" width="28" height="3" rx="1.5" fill="rgba(255,255,255,0.18)" />
          </g>
        ))}
        <path d="M84 40 L96 40 M174 40 L186 40" stroke="oklch(0.6 0.2 295 / 0.6)" strokeWidth="1.5" />
        <circle cx="92" cy="40" r="1.5" fill="oklch(0.78 0.2 295)" />
        <circle cx="180" cy="40" r="1.5" fill="oklch(0.78 0.2 295)" />
      </svg>
    );
  }
  // optimize
  return (
    <svg viewBox="0 0 280 80" style={{ width: "100%", height: "100%" }}>
      <path d="M0 60 L40 50 L80 56 L120 38 L160 42 L200 24 L240 28 L280 12"
        fill="none" stroke="oklch(0.65 0.2 295)" strokeWidth="1.5" />
      <path d="M0 60 L40 50 L80 56 L120 38 L160 42 L200 24 L240 28 L280 12 L280 80 L0 80 Z"
        fill="url(#optg)" />
      <defs>
        <linearGradient id="optg" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="oklch(0.6 0.2 295 / 0.25)" />
          <stop offset="1" stopColor="oklch(0.6 0.2 295 / 0)" />
        </linearGradient>
      </defs>
      {[40, 80, 120, 160, 200, 240].map((x, i) => (
        <circle key={i} cx={x} cy={[50, 56, 38, 42, 24, 28][i]} r="2.5" fill="oklch(0.78 0.2 295)" />
      ))}
    </svg>
  );
};

const Solution = () => (
  <section className="section section-glow" id="oplossing">
    <div className="wrap">
      <div className="section-title reveal">
        <span className="eyebrow">De oplossing</span>
        <h2>
          Wij bouwen geen losse website. <br />
          <span className="grad">Wij bouwen je digitale groeisysteem.</span>
        </h2>
        <p className="lead">
          Van website tot hosting, SEO, analytics, formulieren, funnels, automatisering en
          AI-ondersteunde klantenservice: NOJU zorgt dat alles technisch strak staat en logisch samenwerkt.
        </p>
      </div>
      <div className="solution-row reveal-stagger">
        {[
          { kind: "web", title: "Websitebouw", body: "Conversiegerichte websites die snel laden, goed ogen en logisch zijn opgebouwd." },
          { kind: "auto", title: "Automatisering", body: "Workflows en AI-agents die terugkerend werk overnemen of versnellen." },
          { kind: "opt", title: "Beheer & optimalisatie", body: "Hosting, SEO en data — zodat je site sneller, slimmer en stabieler wordt." },
        ].map((b, i) => (
          <div key={i} className="card solution-block">
            <div>
              <h3>{b.title}</h3>
              <p style={{ marginTop: 12 }}>{b.body}</p>
            </div>
            <div className="visual">
              <SolutionBlockVisual kind={b.kind} />
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ============ Services ============
const WebVisual = () => (
  <div className="web-visual">
    <div className="header">
      <div className="lights"><span /><span /><span /></div>
      <div className="url">{"https://klant.nl —— 99 / 100 performance"}</div>
    </div>
    <div className="body">
      <div className="skeleton tall" />
      <div className="skeleton" />
      <div className="skeleton" />
    </div>
    <div className="metric"><span>LCP</span><span className="v">0.9s</span></div>
    <div className="metric"><span>CLS</span><span className="v">0.01</span></div>
    <div className="metric"><span>Conversion</span><span className="v">+38%</span></div>
  </div>
);

const FlowVisual = () => (
  <div className="flow-visual">
    {[
      { icn: "→", name: "Lead binnenkomt via formulier", stat: "trigger" },
      { icn: "↳", name: "Verrijk + score in CRM", stat: "0.4s" },
      { icn: "↳", name: "Stuur welkomstmail + interne taak", stat: "1.1s" },
      { icn: "✓", name: "Sales gepingd in kanaal", stat: "gereed" },
    ].map((s, i, a) => (
      <React.Fragment key={i}>
        <div className="flow-step">
          <div className="icn">{s.icn}</div>
          <div className="name">{s.name}</div>
          <div className="stat">{s.stat}</div>
        </div>
        {i < a.length - 1 && <div className="flow-connector" />}
      </React.Fragment>
    ))}
  </div>
);

const InboxVisual = () => {
  const [active, setActive] = React.useState(0);
  const rows = [
    { from: "m.janssen@klant.nl", sub: "Offerte aanvraag — keuken renovatie", tag: "sales", label: "Sales" },
    { from: "info@—.nl", sub: "Vraag over factuur 2026-0418", tag: "facturation", label: "Facturatie" },
    { from: "jan.devries@—.nl", sub: "Schade aan ontvangen product (foto)", tag: "urgent", label: "Spoed" },
    { from: "support@—.nl", sub: "Hoe reset ik mijn wachtwoord?", tag: "support", label: "Support" },
    { from: "p.willems@—.nl", sub: "Afspraak verzetten naar volgende week", tag: "planning", label: "Planning" },
    { from: "claim@—.nl", sub: "Garantie — gevoelig dossier", tag: "human", label: "Mens" },
  ];
  React.useEffect(() => {
    const t = setInterval(() => setActive((a) => (a + 1) % rows.length), 1800);
    return () => clearInterval(t);
  }, []);
  return (
    <div className="inbox-visual">
      <div style={{
        display: "flex", justifyContent: "space-between", padding: "4px 6px 12px",
        borderBottom: "1px solid var(--line)", marginBottom: 6,
        fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-muted)",
      }}>
        <span>Inbox routing — live</span>
        <span style={{ color: "oklch(0.75 0.18 150)" }}>● actief</span>
      </div>
      {rows.map((r, i) => (
        <div key={i} className={`inbox-row ${i === active ? "routing" : ""}`}>
          <span className="inbox-dot" style={{ opacity: i === active ? 1 : 0.3 }} />
          <div className="meta">
            <span className="from">{r.from}</span>
            <span className="sub">{r.sub}</span>
          </div>
          <span className={`tag ${r.tag}`}>{r.label}</span>
        </div>
      ))}
    </div>
  );
};

const HostVisual = () => (
  <div className="host-visual">
    <div className="host-row"><span className="k">Uptime · 30d</span><span className="v">99.99%</span></div>
    <div className="host-bar"><div className="fill" style={{ width: "99.9%" }} /></div>
    <div className="host-row"><span className="k">Performance score</span><span className="v">97 / 100</span></div>
    <div className="host-bar"><div className="fill" style={{ width: "97%" }} /></div>
    <div className="host-row"><span className="k">Core Web Vitals</span><span className="v">3 / 3 PASS</span></div>
    <div className="host-bar"><div className="fill" style={{ width: "100%" }} /></div>
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 10 }}>
      <div className="metric" style={{
        padding: "12px 14px", border: "1px solid var(--line)", borderRadius: 10,
        display: "grid", gap: 4,
      }}>
        <span className="mono" style={{ fontSize: 10, color: "var(--text-muted)", letterSpacing: "0.1em" }}>BACKUPS</span>
        <span style={{ fontSize: 18 }}>Dagelijks</span>
      </div>
      <div className="metric" style={{
        padding: "12px 14px", border: "1px solid var(--line)", borderRadius: 10,
        display: "grid", gap: 4,
      }}>
        <span className="mono" style={{ fontSize: 10, color: "var(--text-muted)", letterSpacing: "0.1em" }}>SSL / WAF</span>
        <span style={{ fontSize: 18 }}>Actief</span>
      </div>
    </div>
  </div>
);

const services = [
  {
    label: "Websitebouw",
    title: "Moderne websites die vertrouwen en aanvragen opleveren.",
    body: "Wij bouwen snelle, professionele websites die goed ogen, logisch zijn opgebouwd en bezoekers omzetten in aanvragen.",
    points: ["Responsive design", "Conversiegerichte pagina's", "Snelle oplevering", "Sterke technische basis", "SEO-vriendelijke structuur", "Makkelijk schaalbaar"],
    visual: <WebVisual />,
    id: "websitebouw",
  },
  {
    label: "Automatisering",
    title: "Minder handmatig werk. Meer grip op je processen.",
    body: "NOJU helpt bedrijven met slimme workflows en AI-agent teams die terugkerende taken kunnen overnemen of versnellen.",
    points: ["Leads automatisch opvolgen", "E-mails verwerken", "Taken aanmaken", "Klantvragen structureren", "Data verzamelen", "Tools koppelen", "Processen versnellen"],
    visual: <FlowVisual />,
    id: "automatisering",
  },
  {
    label: "Klantenservice AI",
    title: "Laat je inbox grotendeels automatisch afhandelen.",
    body: "Slimme klantenservice-automatisering die e-mails leest, klantvragen begrijpt, bijlagen en foto's kan analyseren en automatisch passende antwoorden voorbereidt of verstuurt.",
    points: ["Veelgestelde vragen beantwoorden", "E-mails categoriseren op urgentie", "Foto's en bijlagen analyseren", "Antwoordconcepten maken", "Complexe vragen doorzetten", "Leads naar sales sturen", "Taken aanmaken uit e-mails"],
    visual: <InboxVisual />,
    note: "Automatisering waar het kan. Menselijke controle waar het moet.",
    id: "klantenservice",
  },
  {
    label: "Hosting, SEO & beheer",
    title: "Technisch strak geregeld, zonder gedoe.",
    body: "Wij zorgen dat je website snel, veilig en stabiel draait. Ook richten we de basis in voor vindbaarheid, analytics en conversiemeting.",
    points: ["Hosting en onderhoud", "Performance optimalisatie", "Beveiliging", "Updates", "Technische SEO", "Google Analytics", "Conversiemeting", "Basisrapportage"],
    visual: <HostVisual />,
    id: "hosting",
  },
];

const Services = () => (
  <section className="section section-glow" id="diensten">
    <div className="wrap">
      <div className="section-title reveal">
        <span className="eyebrow">Wat we doen</span>
        <h2>Vier blokken, <span className="grad">één samenhangend systeem.</span></h2>
      </div>
      <div className="services-stack">
        {services.map((s, i) => (
          <div key={i} className="card service reveal" id={s.id}>
            <div>
              <div className="label">{s.label}</div>
              <h3>{s.title}</h3>
              <p style={{ fontSize: 15.5 }}>{s.body}</p>
              <ul className="points">
                {s.points.map((p, j) => <li key={j}>{p}</li>)}
              </ul>
              {s.note && (
                <div style={{
                  marginTop: 24,
                  padding: "14px 18px",
                  background: "oklch(0.3 0.15 295 / 0.15)",
                  border: "1px solid oklch(0.5 0.18 295 / 0.3)",
                  borderRadius: 12,
                  fontFamily: "Geist, sans-serif",
                  fontSize: 14,
                  color: "var(--text)",
                  fontStyle: "italic",
                }}>
                  "{s.note}"
                </div>
              )}
            </div>
            <div>{s.visual}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ============ Agent Team ============
const agents = [
  { id: "A-01", name: "Inbox", desc: "Leest, sorteert en verwerkt binnenkomende e-mails.", glyph: "✉" },
  { id: "A-02", name: "Sales", desc: "Herkent leads en helpt met snelle opvolging.", glyph: "↗" },
  { id: "A-03", name: "Support", desc: "Beantwoordt veelgestelde vragen of zet door.", glyph: "?" },
  { id: "A-04", name: "Admin", desc: "Maakt taken, samenvattingen en interne updates.", glyph: "≡" },
  { id: "A-05", name: "Reporting", desc: "Zet data om in korte inzichten en rapportages.", glyph: "▣" },
];

const AgentTeam = () => {
  const ref = React.useRef(null);
  const [lines, setLines] = React.useState([]);

  React.useEffect(() => {
    const compute = () => {
      const container = ref.current;
      if (!container) return;
      const cards = container.querySelectorAll(".agent-card");
      const containerRect = container.getBoundingClientRect();
      const positions = [];
      cards.forEach((c) => {
        const r = c.getBoundingClientRect();
        positions.push({
          x: r.left - containerRect.left + r.width / 2,
          y: r.top - containerRect.top + r.height / 2,
        });
      });
      // Connect adjacent + cross
      const ls = [];
      for (let i = 0; i < positions.length - 1; i++) {
        ls.push([positions[i], positions[i + 1]]);
      }
      // Central crisscross
      if (positions.length >= 5) {
        ls.push([positions[0], positions[2]]);
        ls.push([positions[2], positions[4]]);
        ls.push([positions[1], positions[3]]);
      }
      setLines(ls);
    };
    compute();
    window.addEventListener("resize", compute);
    return () => window.removeEventListener("resize", compute);
  }, []);

  return (
    <section className="section section-glow" id="agent-team">
      <div className="wrap">
        <div className="section-title reveal">
          <span className="eyebrow">Agent team</span>
          <h2>
            Een digitaal team dat <span className="grad">basistaken voor je overneemt.</span>
          </h2>
          <p className="lead">
            NOJU helpt bedrijven met het opzetten van AI-agent teams die repetitief werk verminderen.
            Denk aan e-mailafhandeling, leadopvolging, klantvragen, interne samenvattingen,
            contentvoorbereiding en administratieve ondersteuning.
          </p>
        </div>

        <div className="agent-stage" ref={ref}>
          <svg className="agent-connections" preserveAspectRatio="none">
            {lines.map((l, i) => (
              <line
                key={i}
                x1={l[0].x} y1={l[0].y} x2={l[1].x} y2={l[1].y}
                stroke="oklch(0.55 0.18 295 / 0.3)"
                strokeWidth="1"
                strokeDasharray="3 4"
              />
            ))}
            {lines.map((l, i) => (
              <circle key={`p-${i}`} r="2.5" fill="oklch(0.78 0.2 295)">
                <animateMotion
                  dur={`${4 + i * 0.4}s`}
                  repeatCount="indefinite"
                  path={`M ${l[0].x},${l[0].y} L ${l[1].x},${l[1].y}`}
                />
              </circle>
            ))}
          </svg>
          <div className="agent-grid reveal-stagger">
            {agents.map((a, i) => (
              <div key={a.id} className="agent-card">
                <div>
                  <div className="glyph mono">{a.glyph}</div>
                  <div className="head">
                    <span className="id mono">{a.id} / agent</span>
                    <span className="status" />
                  </div>
                </div>
                <div>
                  <h4>{a.name} Agent</h4>
                  <p>{a.desc}</p>
                </div>
                <div className="mono" style={{
                  fontSize: 10, color: "var(--text-muted)", letterSpacing: "0.14em",
                  borderTop: "1px solid var(--line)", paddingTop: 10,
                }}>
                  READY · v1.4
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ============ Cases / Werk ============
const Cases = () => (
  <section className="section section-glow" id="werk">
    <div className="wrap">
      <div className="section-title reveal">
        <span className="eyebrow">Recent werk</span>
        <h2>Een voorbeeld van een <span className="grad">werkend systeem.</span></h2>
      </div>
      <div className="cases-grid reveal-stagger">
        <a href="https://zuiverjebank.nl/" target="_blank" rel="noopener noreferrer" className="card case-card" style={{ display: "grid" }}>
          <div className="case-frame">
            <div className="chrome">
              <div className="lights"><span /><span /><span /></div>
              <div className="url">zuiverjebank.nl</div>
            </div>
            <img
              className="shot"
              src="assets/case-zuiverjebank.webp"
              alt="Zuiver Je Bank — homepage"
              loading="lazy"
              decoding="async"
            />
          </div>
          <div className="case-meta">
            <div className="client">Klant · Zuiver Je Bank</div>
            <h3>Bankreiniging aan huis in de Gooi en Vechtstreek.</h3>
            <p>
              Een conversiegerichte website met duidelijke offerte-flow, lokale SEO en
              technisch onderhoud — zodat aanvragen automatisch op de juiste plek
              binnenkomen en de site snel blijft draaien.
            </p>
            <div className="tags">
              <span className="tag-pill">Websitebouw</span>
              <span className="tag-pill">Lokale SEO</span>
              <span className="tag-pill">Hosting & beheer</span>
              <span className="tag-pill">Analytics</span>
            </div>
            <div className="stats">
              <div className="stat"><span className="k">Performance</span><span className="v">98 / 100</span></div>
              <div className="stat"><span className="k">LCP</span><span className="v">1.1s</span></div>
              <div className="stat"><span className="k">Regio</span><span className="v">Gooi & Vecht</span></div>
            </div>
            <span className="visit">
              Bekijk de live site <span className="arrow">↗</span>
            </span>
          </div>
        </a>
      </div>
    </div>
  </section>
);

// ============ Process ============
const Process = () => {
  const steps = [
    { num: "01", t: "Analyse", d: "We brengen je website, doelen en terugkerende processen in kaart." },
    { num: "02", t: "Systeemplan", d: "We bepalen welke website-onderdelen, koppelingen en automatiseringen direct waarde leveren." },
    { num: "03", t: "Bouw", d: "We bouwen de website, richten de systemen in en koppelen alles logisch aan elkaar." },
    { num: "04", t: "Livegang", d: "We zetten alles live, testen de flow en optimaliseren op snelheid, conversie en betrouwbaarheid." },
  ];
  return (
    <section className="section section-glow" id="proces">
      <div className="wrap">
        <div className="section-title reveal">
          <span className="eyebrow">Proces</span>
          <h2>Van idee naar <span className="grad">werkend systeem.</span></h2>
        </div>
        <div className="process-grid reveal-stagger">
          {steps.map((s, i) => (
            <div key={i} className="process-step">
              <div className="num">
                <span className="big">{s.num}</span>
              </div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============ Why NOJU ============
const IconLayers = () => (
  <svg viewBox="0 0 24 24"><path d="M2 12 12 7l10 5-10 5-10-5Z"/><path d="m2 17 10 5 10-5"/><path d="m2 7 10 5 10-5"/></svg>
);
const IconTrendingUp = () => (
  <svg viewBox="0 0 24 24"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
);
const IconZap = () => (
  <svg viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>
);
const IconCpu = () => (
  <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M15 2v2M9 2v2M15 20v2M9 20v2M2 15h2M2 9h2M20 15h2M20 9h2"/></svg>
);
const IconSliders = () => (
  <svg viewBox="0 0 24 24"><line x1="21" y1="4" x2="14" y2="4"/><line x1="10" y1="4" x2="3" y2="4"/><line x1="21" y1="12" x2="12" y2="12"/><line x1="8" y1="12" x2="3" y2="12"/><line x1="21" y1="20" x2="16" y2="20"/><line x1="12" y1="20" x2="3" y2="20"/><circle cx="12" cy="4" r="2"/><circle cx="10" cy="12" r="2"/><circle cx="14" cy="20" r="2"/></svg>
);
const IconMessage = () => (
  <svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
);
const IconWrench = () => (
  <svg viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
);
const IconKey = () => (
  <svg viewBox="0 0 24 24"><circle cx="7.5" cy="15.5" r="5.5"/><path d="m21 2-9.6 9.6"/><path d="m15.5 7.5 3 3L22 7l-3-3"/></svg>
);
const IconTag = () => (
  <svg viewBox="0 0 24 24"><path d="M12 2H2v10l9.29 9.29a1 1 0 0 0 1.41 0l7.29-7.29a1 1 0 0 0 0-1.41L12 2z"/><path d="M7 7h.01"/></svg>
);

const Why = () => {
  const items = [
    { t: "Alles onder één dak", d: "Eén partij voor website, automatisering en beheer.", g: <IconLayers /> },
    { t: "Focus op resultaat", d: "Niet alleen design — meetbare impact op aanvragen en doorlooptijd.", g: <IconTrendingUp /> },
    { t: "Snelle oplevering", d: "Strakke planning, korte iteraties, geen eindeloze trajecten.", g: <IconZap /> },
    { t: "Moderne basis", d: "Performante stack, schaalbaar van dag één tot honderdduizend bezoekers.", g: <IconCpu /> },
    { t: "Praktische automatisering", d: "Geen overkill — alleen workflows die echt tijd besparen.", g: <IconSliders /> },
    { t: "Simpele communicatie", d: "Geen jargon, geen vage AI-praat. Duidelijk over wat we bouwen.", g: <IconMessage /> },
    { t: "Onderhoudbaar", d: "Code en systemen die je team of opvolger gewoon kan blijven gebruiken.", g: <IconWrench /> },
    { t: "Eigenaarschap", d: "Jij blijft eigenaar van je website, je data en je tools.", g: <IconKey /> },
    { t: "Transparante prijzen", d: "Heldere scope, vaste prijzen waar mogelijk, geen verrassingen.", g: <IconTag /> },
  ];
  return (
    <section className="section section-glow" id="waarom">
      <div className="wrap">
        <div className="section-title reveal">
          <span className="eyebrow">Waarom NOJU</span>
          <h2>Snel gebouwd. Slim ingericht. <span className="grad">Klaar om door te groeien.</span></h2>
        </div>
        <div className="why-grid reveal-stagger">
          {items.map((it, i) => (
            <div key={i} className="why-cell">
              <div className="glyph">{it.g}</div>
              <h4>{it.t}</h4>
              <p>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============ Final CTA ============
const CTANetwork = () => {
  const t = React.useContext(window.TweakCtx);
  return <NetworkCanvas density={Math.round(t.nodeDensity * 0.6)} glow={t.glowIntensity * 0.7} mouseParallax={false} />;
};

// ============ Contact Form ============
const RadioGroup = ({ name, options, value, onChange }) => (
  <div className="form-options">
    {options.map(o => (
      <label key={o.v} className={"form-option" + (value === o.v ? " selected" : "")}>
        <input type="radio" name={name} value={o.v} checked={value === o.v} onChange={() => onChange(o.v)} />
        {o.l}
      </label>
    ))}
  </div>
);

const CheckGroup = ({ options, values, onChange }) => (
  <div className="form-options">
    {options.map(o => (
      <label key={o.v} className={"form-option" + (values.includes(o.v) ? " selected" : "")}>
        <input type="checkbox" value={o.v} checked={values.includes(o.v)} onChange={() => onChange(o.v)} />
        {o.l}
      </label>
    ))}
  </div>
);

const ContactForm = () => {
  const [form, setForm] = React.useState({
    service: "", goals: [], hasWebsite: "", websiteUrl: "",
    description: "", timeline: "", budget: "",
    naam: "", bedrijf: "", email: "", telefoon: "", contactPref: "",
  });
  const [errors, setErrors] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const toggleGoal = (g) => setForm(f => ({
    ...f, goals: f.goals.includes(g) ? f.goals.filter(x => x !== g) : [...f.goals, g],
  }));

  const handleSubmit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.naam.trim()) errs.naam = "Naam is verplicht";
    if (!form.email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) errs.email = "Geldig e-mailadres is verplicht";
    if (Object.keys(errs).length) { setErrors(errs); return; }
    // TODO: Formspree endpoint — fetch("https://formspree.io/f/XXXXXXXX", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(form) })
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div className="form-success">
        <div className="form-success-icon">✓</div>
        <h3>Aanvraag ontvangen</h3>
        <p>Bedankt. We hebben je aanvraag ontvangen en nemen snel contact met je op.</p>
      </div>
    );
  }

  return (
    <form className="contact-form" onSubmit={handleSubmit} noValidate>

      <div className="form-group">
        <span className="form-section-label">01 — Hulpvraag</span>
        <label className="form-label">Waarmee kunnen we je helpen?</label>
        <RadioGroup name="service" value={form.service} onChange={v => set("service", v)} options={[
          { v: "nieuwe-website", l: "Nieuwe website" },
          { v: "website-verbeteren", l: "Website verbeteren" },
          { v: "funnel", l: "Funnel / landingspagina" },
          { v: "automatisering", l: "Automatisering" },
          { v: "beheer", l: "Beheer / onderhoud" },
          { v: "weet-niet", l: "Weet ik nog niet" },
        ]} />
      </div>

      <div className="form-group">
        <span className="form-section-label">02 — Doel</span>
        <label className="form-label">Wat is je belangrijkste doel? <span className="form-optional">(meerdere mogelijk)</span></label>
        <CheckGroup values={form.goals} onChange={toggleGoal} options={[
          { v: "meer-aanvragen", l: "Meer aanvragen" },
          { v: "professioneler", l: "Professioneler overkomen" },
          { v: "minder-handmatig", l: "Minder handmatig werk" },
          { v: "vindbaarheid", l: "Beter gevonden worden" },
          { v: "leads", l: "Leads sneller opvolgen" },
          { v: "anders", l: "Iets anders" },
        ]} />
      </div>

      <div className="form-group">
        <span className="form-section-label">03 — Website</span>
        <label className="form-label">Heb je al een website?</label>
        <RadioGroup name="hasWebsite" value={form.hasWebsite} onChange={v => set("hasWebsite", v)} options={[
          { v: "ja", l: "Ja" },
          { v: "nee", l: "Nee" },
          { v: "ja-maar", l: "Ja, maar die moet beter" },
        ]} />
      </div>

      {(form.hasWebsite === "ja" || form.hasWebsite === "ja-maar") && (
        <div className="form-group">
          <label className="form-label">Huidige website <span className="form-optional">(optioneel)</span></label>
          <input className="form-input" type="url" placeholder="https://jouwwebsite.nl"
            value={form.websiteUrl} onChange={e => set("websiteUrl", e.target.value)} />
        </div>
      )}

      <div className="form-group">
        <span className="form-section-label">04 — Omschrijving</span>
        <label className="form-label">Wat wil je laten maken?</label>
        <textarea className="form-textarea" rows={3}
          placeholder="Bijv: nieuwe website met offerteformulier, automatische opvolgmail, afsprakenplanner of CRM-koppeling."
          value={form.description} onChange={e => set("description", e.target.value)} />
      </div>

      <div className="form-grid-2">
        <div className="form-group">
          <span className="form-section-label">05 — Startmoment</span>
          <label className="form-label">Wanneer wil je starten?</label>
          <RadioGroup name="timeline" value={form.timeline} onChange={v => set("timeline", v)} options={[
            { v: "zsm", l: "Zo snel mogelijk" },
            { v: "1-maand", l: "Binnen 1 maand" },
            { v: "2-3-maanden", l: "Binnen 2–3 maanden" },
            { v: "orienterend", l: "Ik oriënteer me" },
          ]} />
        </div>
        <div className="form-group">
          <span className="form-section-label">06 — Budget</span>
          <label className="form-label">Budgetindicatie <span className="form-optional">(optioneel)</span></label>
          <select className="form-select" value={form.budget} onChange={e => set("budget", e.target.value)}>
            <option value="">Kies een optie</option>
            <option value="tot-1000">Tot €1.000</option>
            <option value="1000-2500">€1.000 – €2.500</option>
            <option value="2500-5000">€2.500 – €5.000</option>
            <option value="5000plus">€5.000+</option>
            <option value="weet-niet">Weet ik nog niet</option>
          </select>
        </div>
      </div>

      <div className="form-group">
        <span className="form-section-label">07 — Contactgegevens</span>
        <div className="form-grid-2">
          <div>
            <label className="form-label">Naam</label>
            <input className={"form-input" + (errors.naam ? " form-input-error" : "")} type="text" placeholder="Jan de Vries"
              value={form.naam} onChange={e => { set("naam", e.target.value); setErrors(er => ({ ...er, naam: null })); }} />
            {errors.naam && <span className="form-error">{errors.naam}</span>}
          </div>
          <div>
            <label className="form-label">Bedrijfsnaam <span className="form-optional">(optioneel)</span></label>
            <input className="form-input" type="text" placeholder="Jouw Bedrijf BV"
              value={form.bedrijf} onChange={e => set("bedrijf", e.target.value)} />
          </div>
          <div>
            <label className="form-label">E-mailadres</label>
            <input className={"form-input" + (errors.email ? " form-input-error" : "")} type="email" placeholder="jan@jouwbedrijf.nl"
              value={form.email} onChange={e => { set("email", e.target.value); setErrors(er => ({ ...er, email: null })); }} />
            {errors.email && <span className="form-error">{errors.email}</span>}
          </div>
          <div>
            <label className="form-label">Telefoon <span className="form-optional">(optioneel)</span></label>
            <input className="form-input" type="tel" placeholder="+31 6 12345678"
              value={form.telefoon} onChange={e => set("telefoon", e.target.value)} />
          </div>
        </div>
      </div>

      <div className="form-group">
        <span className="form-section-label">08 — Contactvoorkeur</span>
        <RadioGroup name="contactPref" value={form.contactPref} onChange={v => set("contactPref", v)} options={[
          { v: "mail", l: "Mail" },
          { v: "telefoon", l: "Telefoon" },
          { v: "whatsapp", l: "WhatsApp" },
        ]} />
      </div>

      <button type="submit" className="btn btn-primary form-submit">
        Vraag vrijblijvend advies aan <span className="arrow">→</span>
      </button>
    </form>
  );
};

const FinalCTA = () => (
  <section className="section section-glow" id="contact">
    <div className="wrap">
      <div className="final-cta reveal">
        <CTANetwork />
        <span className="eyebrow" style={{ justifyContent: "center", display: "inline-flex" }}>Plan kennismaking</span>
        <h2 style={{ marginTop: 14 }}>
          Klaar voor een website die meer doet dan er <span className="grad">goed uitzien?</span>
        </h2>
        <p className="lead">
          Laat NOJU een digitaal systeem bouwen dat bezoekers omzet in aanvragen,
          klantvragen sneller verwerkt en handmatig werk vermindert.
        </p>
        <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap", marginTop: 8 }}>
          <a href="mailto:info@bynoju.com" className="btn btn-primary">
            Plan een kennismaking <span className="arrow">→</span>
          </a>
          <a href="#diensten" className="btn btn-ghost">Bekijk diensten</a>
        </div>
        <div style={{
          marginTop: 36, display: "flex", justifyContent: "center", gap: 24, flexWrap: "wrap",
          fontFamily: "Geist Mono, monospace", fontSize: 11, color: "var(--text-muted)",
          letterSpacing: "0.16em", textTransform: "uppercase",
        }}>
          <span>~30 min · vrijblijvend</span>
          <span style={{ opacity: 0.4 }}>·</span>
          <span>Reactie binnen 1 werkdag</span>
          <span style={{ opacity: 0.4 }}>·</span>
          <span>Remote of in NL</span>
        </div>
      </div>

      <div className="form-section">
        <div className="form-section-intro">
          <span className="eyebrow">Gratis groeicheck aanvragen</span>
          <h3 style={{ marginTop: 10 }}>Vertel ons waar je mee geholpen wilt worden.</h3>
          <p className="lead">
            Vertel kort waar je hulp bij nodig hebt. We kijken mee en laten weten wat de simpelste en slimste vervolgstap is.
          </p>
          <div style={{ display: "grid", gap: 10, marginTop: 8, paddingTop: 24, borderTop: "1px solid var(--line)", fontFamily: "Geist Mono, monospace", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--text-muted)" }}>
            <span><span style={{ display: "inline-block", width: 5, height: 5, borderRadius: "50%", background: "oklch(0.7 0.2 150)", marginRight: 8, verticalAlign: "middle" }} />Vrijblijvend</span>
            <span><span style={{ display: "inline-block", width: 5, height: 5, borderRadius: "50%", background: "oklch(0.7 0.2 150)", marginRight: 8, verticalAlign: "middle" }} />Reactie binnen 1 werkdag</span>
            <span><span style={{ display: "inline-block", width: 5, height: 5, borderRadius: "50%", background: "oklch(0.7 0.2 150)", marginRight: 8, verticalAlign: "middle" }} />Remote of in NL</span>
          </div>
        </div>
        <div className="contact-card">
          <ContactForm />
        </div>
      </div>
    </div>
  </section>
);

// ============ Footer ============
const Footer = () => (
  <footer>
    <div className="wrap">
      <div className="footer-grid">
        <div>
          <a href="#top" className="nav-logo" style={{ marginBottom: 14, display: "inline-flex" }}>
            <img src="assets/noju-white.png" alt="NOJU" />
            <span>NOJU</span>
          </a>
          <p style={{ fontSize: 13, maxWidth: "32ch" }}>
            Digitale systeempartner voor websites, automatisering en AI-ondersteunde bedrijfsprocessen.
          </p>
        </div>
        <div>
          <h5>Wat we doen</h5>
          <a href="#diensten">Websitebouw</a>
          <a href="#automatisering">Automatisering</a>
          <a href="#klantenservice">Klantenservice AI</a>
          <a href="#hosting">Hosting & SEO</a>
        </div>
        <div>
          <h5>Bedrijf</h5>
          <a href="#proces">Proces</a>
          <a href="#waarom">Waarom NOJU</a>
          <a href="#contact">Contact</a>
        </div>
        <div>
          <h5>Contact</h5>
          <a href="mailto:info@bynoju.com">info@bynoju.com</a>
          <a href="#">Nederland</a>
          <a href="#">Remote of on-site</a>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 NOJU · Digitale systeempartner</span>
        <span>NL</span>
      </div>
    </div>
  </footer>
);

// ============ App ============
const NOJUInner = () => {
  useReveal();
  return (
    <React.Fragment>
      <BackgroundCanvas />
      <CustomCursor />
      <ScrollSpine />
      <Nav />
      <main>
        <Hero />
        <Problem />
        <Solution />
        <Services />
        <AgentTeam />
        <Process />
        <Cases />
        <Why />
        <FinalCTA />
      </main>
      <Footer />
    </React.Fragment>
  );
};

const NOJUApp = () => (
  <window.NOJUTweaksProvider>
    <NOJUInner />
  </window.NOJUTweaksProvider>
);

window.NOJUApp = NOJUApp;