// ====== PROBLEM ======
const Problem = () => {
  const ref = React.useRef(null);
  const textRef = React.useRef(null);
  const [revealedCount, setRevealedCount] = React.useState(0);

  React.useEffect(() => {
    const onScroll = () => {
      if (!textRef.current) return;
      const rect = textRef.current.getBoundingClientRect();
      const winH = window.innerHeight;
      const start = winH * 0.75;
      const end = winH * 0.2;
      const prog = Math.max(0, Math.min(1, (start - rect.top) / (start - end)));
      setRevealedCount(Math.floor(prog * words.length));
    };
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const body = "OpenClaw is de krachtigste AI agent op aarde. 247.000+ GitHub stars. 900+ contributors. De kracht om vrijwel elke business workflow te automatiseren. Elk bedrijf zou het moeten draaien. Bijna niemand kan het veilig deployen.";
  const words = body.split(' ');

  const threats = [
    { n: '341', l: 'Malicious Skills', sub: 'actief gedetecteerd' },
    { n: 'CVE', l: 'Data Extraction', sub: 'cred leaks in 12 skills' },
    { n: 'RCE', l: 'Code Injection', sub: 'via unvetted plugins' },
    { n: 'SC', l: 'Supply Chain', sub: 'upstream compromise' },
  ];

  return (
    <section className="relative py-32 px-6 md:px-8 max-w-5xl mx-auto text-center">
      <div className="text-[11px] tracking-[0.32em] text-muted-foreground uppercase mb-6 font-mono">
        Het Probleem
      </div>
      <h2 className="text-4xl md:text-5xl lg:text-6xl font-medium tracking-[-2px] mb-16 leading-[1.05]">
        Krachtig om te deployen.{' '}
        <span className="font-accent italic font-normal">Gevaarlijk</span>{' '}
        om fout te deployen.
      </h2>

      <div ref={ref} className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
        {threats.map((t, i) => (
          <div key={t.l}
            className="liquid-glass rounded-xl p-5 text-left"
            style={{ animationDelay: `${i * 80}ms` }}>
            <div className="flex items-center justify-between mb-3">
              <div className="text-xs font-mono tracking-widest text-red-400/80">THREAT</div>
              <div className="w-1.5 h-1.5 bg-red-400 rounded-full pulse-dot"></div>
            </div>
            <div className="font-accent italic text-4xl text-white mb-1">{t.n}</div>
            <div className="text-sm font-medium">{t.l}</div>
            <div className="text-xs text-muted-foreground font-mono mt-1">{t.sub}</div>
          </div>
        ))}
      </div>

      <div className="liquid-glass-strong rounded-xl p-7 md:p-8 mb-16 text-left">
        <div className="flex items-start gap-4">
          <div className="shrink-0 mt-1 w-8 h-8 rounded-full bg-red-400/10 flex items-center justify-center">
            <span className="text-red-400 text-lg font-mono leading-none">!</span>
          </div>
          <div>
            <div className="text-[11px] tracking-[0.28em] uppercase text-muted-foreground font-mono mb-2">
              Advisory · april 2026
            </div>
            <p className="text-base md:text-lg text-foreground/90 leading-relaxed">
              <span className="font-medium">Microsoft</span>, <span className="font-medium">CrowdStrike</span> en <span className="font-medium">CyberArk</span> hebben alle drie waarschuwingen uitgebracht.
              Community-built skills stelen user data.
            </p>
          </div>
        </div>
      </div>

      <div ref={textRef} className="max-w-4xl mx-auto">
        <p className="text-2xl md:text-3xl lg:text-4xl font-medium tracking-[-1px] leading-[1.25]">
          {words.map((w, i) => (
            <span key={i} className={`reveal-word ${i < revealedCount ? 'is-on' : ''} mr-[0.28em]`}>
              {w}
            </span>
          ))}
        </p>
      </div>
    </section>
  );
};

// ====== SECURITY ======
const Security = () => {
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(false);
  React.useEffect(() => {
    const o = new IntersectionObserver(([e]) => e.isIntersecting && setInView(true), { threshold: 0.2 });
    if (ref.current) o.observe(ref.current);
    return () => o.disconnect();
  }, []);

  return (
    <section id="security" className="relative py-32 px-6 md:px-8 max-w-5xl mx-auto">
      <div className="text-[11px] tracking-[0.32em] text-muted-foreground uppercase mb-6 text-center font-mono">
        Security
      </div>
      <h2 className="text-4xl md:text-5xl lg:text-6xl font-medium tracking-[-2px] text-center mb-16 leading-[1.05]">
        Enterprise-grade security.{' '}
        <span className="font-accent italic font-normal">Geen bijzaak.</span>
      </h2>

      <div ref={ref} className={`liquid-glass-strong rounded-2xl p-5 md:p-7 fade-up ${inView ? 'is-in' : ''}`}>
        <div className="flex items-center justify-between mb-6 font-mono text-[11px] tracking-widest text-muted-foreground uppercase">
          <span>Security Architecture</span>
          <span className="flex items-center gap-2"><span className="op-dot"></span> verified</span>
        </div>

        <SecurityDiagram />

        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mt-6">
          {[
            'Exec Allowlists',
            'Malicious Skill Vetting',
            'Firewall Rules',
            'Air-Gap Ready',
          ].map(b => (
            <div key={b} className="liquid-glass rounded-lg px-3 py-2.5 text-xs font-mono tracking-wider flex items-center gap-2">
              <span className="op-dot"></span>
              {b.toUpperCase()}
            </div>
          ))}
        </div>
      </div>

      <p className="text-muted-foreground text-base md:text-lg text-center mt-10 max-w-2xl mx-auto">
        Elke deployment is in containers, gehard en gedocumenteerd. Jouw data verlaat je omgeving nooit.
      </p>
    </section>
  );
};

const SecurityDiagram = () => {
  const layers = [
    { name: 'Network Firewall', sub: 'iptables · rate-limit · geo-block' },
    { name: 'Docker Container', sub: 'hardened image · read-only fs' },
    { name: 'OpenClaw Instance', sub: 'vetted skills · exec allowlist' },
  ];
  return (
    <div className="relative aspect-[21/9] md:aspect-[21/8] bg-black/30 rounded-xl overflow-hidden p-5 md:p-7 flex flex-col justify-center gap-2.5">
      {/* grid bg */}
      <div className="absolute inset-0 opacity-40 grid-overlay"></div>

      {layers.map((l, i) => (
        <div key={l.name} className="relative z-10">
          <div className="liquid-glass rounded-xl px-4 md:px-5 py-3 flex items-center justify-between"
               style={{ marginLeft: `${i * 3}%`, marginRight: `${i * 3}%` }}>
            <div className="flex items-center gap-3">
              <div className="w-7 h-7 rounded-md bg-white/[0.08] flex items-center justify-center font-mono text-[10px]">
                {String(i + 1).padStart(2, '0')}
              </div>
              <div>
                <div className="text-sm font-medium leading-tight">{l.name}</div>
                <div className="text-[10px] font-mono text-muted-foreground">{l.sub}</div>
              </div>
            </div>
            <div className="op-dot pulse-dot"></div>
          </div>
          {i < layers.length - 1 && (
            <div className="flex justify-center my-1">
              <div className="w-px h-4 bg-gradient-to-b from-white/30 to-white/5"></div>
            </div>
          )}
        </div>
      ))}

      {/* data vein */}
      <div className="absolute left-4 top-4 bottom-4 w-px bg-gradient-to-b from-transparent via-white/10 to-transparent"></div>
      <div className="absolute right-4 top-4 bottom-4 w-px bg-gradient-to-b from-transparent via-white/10 to-transparent"></div>
    </div>
  );
};

// ====== BUILT FOR ======
const BuiltFor = () => {
  const cards = [
    { title: 'Online Bedrijven', icon: 'bag',
      body: 'Teams die 10-20 uur per week besteden aan AI-automatiseerbare taken zoals email triage, planning en opvolging.' },
    { title: 'Service Bedrijven', icon: 'briefcase',
      body: 'Agencies die verzuipen in handmatige workflows — client onboarding, rapportages en repetitief taakbeheer.' },
    { title: 'Teams van 4–50+', icon: 'users',
      body: 'Multi-department AI deployment met role-based permissions en cross-team orchestratie.' },
    { title: 'Security-Bewuste Orgs', icon: 'shield',
      body: 'Organisaties die container-geïsoleerde, air-gapped deployment met volledige audit trails eisen.' },
  ];

  const icon = (name) => {
    const s = "w-5 h-5";
    switch(name) {
      case 'bag': return <svg className={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M6 7h12l-1 13H7L6 7Z"/><path d="M9 7a3 3 0 1 1 6 0"/></svg>;
      case 'briefcase': return <svg className={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="7" width="18" height="13" rx="1"/><path d="M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/></svg>;
      case 'users': return <svg className={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="9" cy="8" r="3"/><path d="M3 20c0-3 3-5 6-5s6 2 6 5"/><circle cx="17" cy="9" r="2.5"/><path d="M15.5 14c2.5.2 5 1.8 5 5"/></svg>;
      case 'shield': return <svg className={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3Z"/><path d="m9 12 2 2 4-4"/></svg>;
      default: return null;
    }
  };

  return (
    <section className="relative py-32 px-6 md:px-8 max-w-6xl mx-auto">
      <div className="text-[11px] tracking-[0.32em] text-muted-foreground uppercase mb-6 text-center font-mono">
        Gebouwd Voor
      </div>
      <h2 className="text-4xl md:text-5xl lg:text-6xl font-medium tracking-[-2px] text-center mb-16 leading-[1.05]">
        Voor operators die schalen. <span className="font-accent italic font-normal">Niet</span> voor hobbyisten die experimenteren.
      </h2>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {cards.map((c, i) => (
          <div key={c.title} className="liquid-glass rounded-2xl p-6 md:p-7 flex flex-col h-full"
               style={{ minHeight: 280 }}>
            <div className="w-10 h-10 rounded-lg bg-white/[0.06] flex items-center justify-center mb-6">
              {icon(c.icon)}
            </div>
            <div className="text-[10px] tracking-[0.28em] uppercase text-muted-foreground font-mono mb-2">
              0{i + 1} / segment
            </div>
            <div className="text-lg font-medium mb-3 leading-snug">{c.title}</div>
            <div className="text-sm text-muted-foreground leading-relaxed">{c.body}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

// ====== HOW IT WORKS ======
const HowItWorks = () => {
  const steps = [
    { n: '01', week: 'Week 1', title: 'Discovery & Scope',
      body: 'Wij mappen afdelingen, workflows, pijnpunten. Tier bevestigen, prijs vastzetten, timeline plannen.' },
    { n: '02', week: 'Week 2–3', title: 'Architectuur & Build',
      body: 'Wij ontwerpen je AI operations layer, agent configs, security policies. Daarna deployen met Docker containerisatie.' },
    { n: '03', week: 'Week 4', title: 'Handoff & Training',
      body: 'Volledige documentatie, walkthrough sessie, 14–30 dagen post-deployment support. Je bent autonoom.' },
  ];
  return (
    <section id="proces" className="relative py-32 px-6 md:px-8 max-w-4xl mx-auto">
      <div className="text-[11px] tracking-[0.32em] text-muted-foreground uppercase mb-6 text-center font-mono">
        Hoe Het Werkt
      </div>
      <h2 className="text-4xl md:text-5xl lg:text-6xl font-medium tracking-[-2px] text-center mb-16 leading-[1.05]">
        Drie stappen. Volledig gedeployed. <span className="font-accent italic font-normal">Zero headaches.</span>
      </h2>

      <div className="space-y-3">
        {steps.map((s) => (
          <div key={s.n} className="liquid-glass rounded-xl p-6 md:p-8 flex gap-6 md:gap-8 items-start">
            <div className="font-accent italic text-5xl md:text-7xl text-muted-foreground leading-none shrink-0">
              {s.n}
            </div>
            <div className="flex-1 pt-2">
              <div className="text-[10px] tracking-[0.28em] uppercase text-muted-foreground font-mono mb-2">
                {s.week}
              </div>
              <div className="text-xl md:text-2xl font-medium mb-2">{s.title}</div>
              <div className="text-sm md:text-base text-muted-foreground leading-relaxed">{s.body}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Chat mockup */}
      <div className="liquid-glass-strong rounded-2xl p-6 max-w-xl mx-auto mt-14">
        <div className="flex items-center justify-between mb-4 pb-3 border-b border-white/5">
          <div className="flex items-center gap-2">
            <span className="op-dot pulse-dot"></span>
            <span className="text-xs font-mono tracking-widest text-muted-foreground">CLIENT · AGENT · LIVE</span>
          </div>
          <span className="text-xs font-mono text-muted-foreground">#onboarding</span>
        </div>
        <div className="space-y-4">
          <div className="flex justify-end">
            <div className="bubble-user rounded-2xl rounded-tr-sm px-4 py-2.5 max-w-[80%] text-sm">
              Hoe snel kunnen jullie een multi-dep deployment draaien?
            </div>
          </div>
          <div className="flex justify-start">
            <div className="bubble-ai liquid-glass rounded-2xl rounded-tl-sm px-4 py-2.5 max-w-[80%] text-sm">
              4 weken van kickoff tot handoff. Week 1 scope, week 2–3 build, week 4 training.
            </div>
          </div>
          <div className="flex justify-end">
            <div className="bubble-user rounded-2xl rounded-tr-sm px-4 py-2.5 max-w-[80%] text-sm">
              En daarna ben ik mijn team kwijt aan onderhoud?
            </div>
          </div>
          <div className="flex justify-start">
            <div className="bubble-ai liquid-glass rounded-2xl rounded-tl-sm px-4 py-2.5 max-w-[80%] text-sm">
              Nee. 30 dagen nazorg plus documentatie. Daarna draait het zelfstandig.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ====== VIDEO SHOWCASE (parallax overlap) ======
const VideoShowcase = () => {
  return (
    <section className="relative h-[650px] overflow-hidden -mt-[200px] z-0 loop-bg">
      <div className="absolute inset-0 flex items-center justify-center">
        <div className="relative">
          <InfinityLoop className="w-[500px] h-[500px] md:w-[800px] md:h-[800px]" />
        </div>
      </div>
      <div className="absolute inset-0 shimmer pointer-events-none"></div>
      <div className="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-background to-transparent z-10"></div>
      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-background to-transparent z-10"></div>
    </section>
  );
};

Object.assign(window, { Problem, Security, BuiltFor, HowItWorks, VideoShowcase });