// ====== PRICING ======
const Pricing = () => {
  const tw = useTweaks();
  const tiers = [
    {
      name: 'Single Department',
      price: '€4.000 – €7.000',
      bullets: [
        'Meerdere OpenClaw instances voor één afdeling',
        'Afdelingsspecifieke AI agent configuraties',
        'Docker containerisatie + security hardening',
        'Management dashboard',
        'Volledige documentatie + team walkthrough',
        '14 dagen post-deployment support',
      ],
      button: 'glass',
      popular: false,
    },
    {
      name: 'Multi-Department',
      price: '€10.000 – €15.000',
      bullets: [
        'Alles van Single, geschaald over afdelingen',
        'Cross-department workflow orchestratie',
        'Employee assignment dashboard',
        'Role-based permissions + access control',
        '30 dagen post-deployment support',
        'Priority Slack support kanaal',
      ],
      button: 'solid',
      popular: true,
    },
    {
      name: 'Fully Local',
      price: '€20.000 – €30.000',
      bullets: [
        'Alles van Multi-Department',
        'On-site hardware installatie',
        'Network-level security configuratie',
        'Air-gapped deployment optie',
        'In-person team training',
        '30 dagen post-deployment support',
      ],
      button: 'glass',
      popular: false,
    },
  ];

  return (
    <section id="pricing" 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">
        Pricing
      </div>
      <h2 className="text-4xl md:text-5xl lg:text-6xl font-medium tracking-[-2px] text-center mb-16 leading-[1.05]">
        Eenmalige investering. Oneindig rendement.{' '}
        <span className="font-accent italic font-normal">Geen abonnementen.</span>
      </h2>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
        {tiers.map((t) => (
          <div key={t.name}
            className={`${t.popular ? `liquid-glass-strong md:-mt-4 md:mb-4 ${tw.showPricingGlow ? 'tier-glow' : ''}` : 'liquid-glass'} rounded-2xl p-7 md:p-8 relative flex flex-col`}>
            {t.popular && (
              <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                <span className="popular-badge">Populair</span>
              </div>
            )}
            <div className="text-[10px] tracking-[0.28em] uppercase text-muted-foreground font-mono mb-3">
              Tier
            </div>
            <div className="text-xl md:text-2xl font-medium mb-4">{t.name}</div>
            <div className="font-accent italic text-3xl md:text-4xl mb-6 leading-none">{t.price}</div>
            <div className="h-px w-full bg-white/10 mb-6"></div>
            <ul className="space-y-3 flex-1 mb-8">
              {t.bullets.map(b => (
                <li key={b} className="flex items-start gap-3 text-sm text-muted-foreground">
                  <span className="mt-[7px] w-1 h-1 rounded-full bg-white shrink-0"></span>
                  <span className="leading-relaxed">{b}</span>
                </li>
              ))}
            </ul>
            <a href={tw.ctaHref} target="_blank" rel="noopener noreferrer" className={`w-full rounded-full py-3 text-sm font-medium btn-hover inline-flex items-center justify-center ${t.button === 'solid' ? 'bg-foreground text-background' : 'liquid-glass-strong'}`}>
              {tw.ctaLabel}
            </a>
          </div>
        ))}
      </div>
    </section>
  );
};

// ====== OUTCOMES ======
const Outcomes = () => {
  const [on, setOn] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const o = new IntersectionObserver(([e]) => e.isIntersecting && setOn(true), { threshold: 0.3 });
    if (ref.current) o.observe(ref.current);
    return () => o.disconnect();
  }, []);

  const Counter = ({ target, suffix = '', active, duration = 1400 }) => {
    const [val, setVal] = React.useState(0);
    React.useEffect(() => {
      if (!active) return;
      const start = performance.now();
      let raf;
      const tick = (t) => {
        const p = Math.min(1, (t - start) / duration);
        const eased = 1 - Math.pow(1 - p, 3);
        setVal(Math.floor(eased * target));
        if (p < 1) raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
      return () => cancelAnimationFrame(raf);
    }, [active, target, duration]);
    return <span>{val}{suffix}</span>;
  };

  return (
    <section ref={ref} 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">
        Resultaten
      </div>
      <h2 className="text-4xl md:text-5xl lg:text-6xl font-medium tracking-[-2px] text-center mb-16 leading-[1.05]">
        Resultaten die harder praten dan <span className="font-accent italic font-normal">pitch decks.</span>
      </h2>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
        <div className="liquid-glass rounded-2xl p-8 md:p-10">
          <div className="font-accent italic text-6xl md:text-7xl mb-4 leading-none">
            <Counter target={20} suffix="u" active={on} />
          </div>
          <div className="text-base font-medium mb-2">Bespaard Per Week</div>
          <div className="text-sm text-muted-foreground leading-relaxed">Per team per afdeling — email triage, planning, opvolging volledig autonoom.</div>
        </div>
        <div className="liquid-glass rounded-2xl p-8 md:p-10">
          <div className="font-accent italic text-6xl md:text-7xl mb-4 leading-none">
            <Counter target={24} active={on} />/<Counter target={7} active={on} duration={1800} />
          </div>
          <div className="text-base font-medium mb-2">Autonome Operaties</div>
          <div className="text-sm text-muted-foreground leading-relaxed">Agents draaien 24/7 — taken afhandelen en workflows uitvoeren terwijl jij slaapt.</div>
        </div>
        <div className="liquid-glass rounded-2xl p-8 md:p-10">
          <div className="font-accent italic text-6xl md:text-7xl mb-4 leading-none">
            <Counter target={30} active={on} /> Dagen
          </div>
          <div className="text-base font-medium mb-2">Nazorg Inbegrepen</div>
          <div className="text-sm text-muted-foreground leading-relaxed">Volledige post-deployment support. Wij verdwijnen niet na handoff. Jouw succes is onze reputatie.</div>
        </div>
      </div>
    </section>
  );
};

// ====== TEAM ======
const Team = () => {
  const team = [
    { name: 'Leon Ghatas', role: 'Founder', hue: 'from-[#1a1a1a] to-[#0a0a0a]', photo: 'assets/leon-ghatas.png' },
    { name: 'Damian Schneider', role: 'CEO', hue: 'from-[#161616] to-[#050505]', photo: 'assets/damian-schneider.png' },
    { name: 'Trevor Onueseke', role: 'COO', hue: 'from-[#1c1c1c] to-[#0a0a0a]', photo: 'assets/trevor-onueseke.png' },
  ];
  return (
    <section id="team" 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">
        Team
      </div>
      <h2 className="text-4xl md:text-5xl lg:text-6xl font-medium tracking-[-2px] mb-16 leading-[1.05]">
        Het <span className="font-accent italic font-normal">Team</span>
      </h2>
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 md:gap-5 max-w-3xl mx-auto">
        {team.map((p, i) => (
          <div key={p.name} className="group relative aspect-[3/4] liquid-glass rounded-2xl overflow-hidden">
            {p.photo ? (
              <img src={p.photo} alt={p.name} className="absolute inset-0 w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500" />
            ) : (
              <div className="absolute inset-0 photo-placeholder"></div>
            )}
            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/80"></div>
            {/* initials placeholder — only when no photo */}
            {!p.photo && (
              <div className="absolute inset-0 flex items-center justify-center">
                <div className="font-accent italic text-6xl md:text-7xl text-white/30 mix-blend-overlay">
                  {p.name.split(' ').map(x => x[0]).join('')}
                </div>
              </div>
            )}
            {/* corner mono tag */}
            <div className="absolute top-3 left-3 text-[10px] font-mono tracking-widest text-white/40">
              0{i + 1}
            </div>
            <div className="absolute bottom-0 left-0 right-0 p-4 text-left transition-all duration-300 translate-y-2 group-hover:translate-y-0">
              <div className="text-sm font-medium">{p.name}</div>
              <div className="text-[11px] text-muted-foreground font-mono tracking-wide">{p.role}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

// ====== FAQ ======
const FAQ = () => {
  const items = [
    { q: 'OpenClaw is gratis. Waarom €4.000–€30.000 betalen?',
      a: 'OpenClaw is gratis om te downloaden. Niet gratis om veilig te deployen, configureren over afdelingen, in containers te zetten, harden, documenteren en ondersteunen. Daar betaal je voor — de architectuur, de security en de operationele gereedheid.' },
    { q: 'Ik kan een freelancer op Upwork vinden voor €150.',
      a: 'Kan je. Business owners rapporteren dat freelancers het installeren en verdwijnen. Drie weken later breekt er iets. Geen documentatie, geen support, niemand om te bellen. Wij deployen het als business infrastructure met 14–30 dagen toegewijde support.' },
    { q: 'We gebruiken al ChatGPT / Copilot.',
      a: 'ChatGPT is een gesprekstool. Copilot is een coding assistant. OpenClaw is een autonome agent die taken uitvoert over je messaging, email, agenda en 50+ integraties 24/7 zonder tussenkomst. Hij beantwoordt geen vragen. Hij doet het werk.' },
    { q: 'Wat gebeurt er na de support-periode?',
      a: 'Jij bezit de infrastructure. Hij draait zelfstandig. De documentatie is uitgebreid genoeg voor je team om te onderhouden, troubleshooten en uitbreiden. Optionele maandelijkse retainer add-ons beschikbaar.' },
    { q: 'Hoe weet ik dat dit echt veilig is?',
      a: 'Elke deployment bevat Docker containerisatie, firewall rules, exec allowlists, malicious skill vetting en volledige security documentatie. Voor Tier 3 bieden we volledig air-gapped deployment met nul internet dependency.' },
  ];

  return (
    <section id="faq" className="relative py-32 px-6 md:px-8 max-w-3xl mx-auto">
      <div className="text-[11px] tracking-[0.32em] text-muted-foreground uppercase mb-6 text-center font-mono">
        FAQ
      </div>
      <h2 className="text-4xl md:text-5xl lg:text-6xl font-medium tracking-[-2px] text-center mb-16 leading-[1.05]">
        Alles wat je moet weten <span className="font-accent italic font-normal">voordat je deployed.</span>
      </h2>
      <div className="space-y-3">
        {items.map((it, i) => (
          <details key={i} className="liquid-glass rounded-xl p-6 md:p-7 group">
            <summary className="flex items-center justify-between gap-6">
              <div className="flex items-start gap-4">
                <div className="text-[11px] font-mono text-muted-foreground tracking-widest mt-1">
                  0{i + 1}
                </div>
                <div className="text-base md:text-lg font-medium leading-snug">{it.q}</div>
              </div>
              <div className="chev shrink-0 w-6 h-6 rounded-full border border-white/20 flex items-center justify-center transition-transform duration-300">
                <svg className="w-3 h-3" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5">
                  <path d="M6 2v8M2 6h8"/>
                </svg>
              </div>
            </summary>
            <div className="text-sm md:text-base text-muted-foreground mt-4 pl-10 leading-relaxed">
              {it.a}
            </div>
          </details>
        ))}
      </div>
    </section>
  );
};

// ====== FINAL CTA ======
const FinalCTA = () => {
  const tw = useTweaks();
  return (
    <section className="relative w-full min-h-[100vh] overflow-hidden flex items-center justify-center z-10">
      {/* background video */}
      <video
        autoPlay muted loop playsInline
        className="absolute inset-0 w-full h-full object-cover z-0"
        src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260327_053348_d1b3e997-e822-44eb-9056-718270060d72.mp4"
      />
      <div className="absolute inset-0 bg-black/60 z-0"></div>

      <div className="absolute top-0 left-0 right-0 h-40 bg-gradient-to-b from-background to-transparent z-10"></div>
      <div className="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-background to-transparent z-10"></div>

      <div className="relative z-20 flex flex-col items-center text-center max-w-3xl mx-auto px-6">
        <div className="text-[11px] tracking-[0.32em] text-muted-foreground uppercase mb-6 font-mono">
          Deploy · Scale · Secure
        </div>
        <h2 className="text-4xl md:text-5xl lg:text-6xl font-medium tracking-[-2px] mb-6 leading-[1.05]">
          {tw.finalCtaHeadingPre}<span className="font-accent italic font-normal" style={{ color: tw.accentColor }}>{tw.finalCtaHeadingAccent}</span>
        </h2>
        <p className="text-base md:text-lg text-muted-foreground mb-10 max-w-xl leading-relaxed">
          Elke week zonder AI operations is nóg een week handmatige workflows en gemiste efficiency. Laten we dat fixen.
        </p>
        <a href={tw.ctaHref} target="_blank" rel="noopener noreferrer" className="bg-foreground text-background rounded-full px-10 py-4 text-sm font-medium btn-hover inline-flex items-center justify-center">
          {tw.ctaLabel} →
        </a>
        <div className="mt-10 flex items-center gap-3 text-xs font-mono text-muted-foreground">
          <span className="op-dot pulse-dot"></span>
          <span>accepteert nu 2 nieuwe deployments voor Q2 · 2026</span>
        </div>
      </div>
    </section>
  );
};

// ====== FOOTER ======
const Footer = () => {
  return (
    <footer className="relative border-t border-border px-6 md:px-8 py-16">
      <div className="max-w-6xl mx-auto">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-10">
          <div className="col-span-2 md:col-span-1">
            <div className="flex items-center gap-2 text-xl font-semibold tracking-tight mb-3">
              <img src="assets/logo.png" alt="" className="w-6 h-6 object-contain" draggable="false" />
              187N<span className="text-muted-foreground">.AI</span>
            </div>
            <div className="text-sm text-muted-foreground leading-relaxed max-w-[240px]">
              Enterprise AI Infrastructuur. Full-stack deployment. Onderhouden. Geschaald.
            </div>
          </div>

          <div>
            <div className="text-[10px] tracking-[0.28em] uppercase text-muted-foreground font-mono mb-4">
              Navigation
            </div>
            <ul className="space-y-2 text-sm">
              {['Security', 'Proces', 'Pricing', 'Team', 'FAQ'].map(l => (
                <li key={l}><a href={`#${l.toLowerCase()}`} className="text-muted-foreground hover:text-foreground transition-colors">{l}</a></li>
              ))}
            </ul>
          </div>

          <div>
            <div className="text-[10px] tracking-[0.28em] uppercase text-muted-foreground font-mono mb-4">
              Bedrijf
            </div>
            <ul className="space-y-2 text-sm">
              {['Over ons', 'Plan een Gesprek', 'Case studies', 'Blog'].map(l => (
                <li key={l}><a href="#" className="text-muted-foreground hover:text-foreground transition-colors">{l}</a></li>
              ))}
            </ul>
          </div>

          <div>
            <div className="text-[10px] tracking-[0.28em] uppercase text-muted-foreground font-mono mb-4">
              Contact
            </div>
            <ul className="space-y-2 text-sm text-muted-foreground">
              <li><a href="mailto:hello@187n.ai" className="hover:text-foreground transition-colors">hello@187n.ai</a></li>
              <li>Amsterdam × Dubai</li>
              <li><a href="#" className="hover:text-foreground transition-colors">Instagram @187n</a></li>
            </ul>
          </div>
        </div>

        <div className="border-t border-border pt-8 mt-12 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 text-xs text-muted-foreground">
          <div>© 2026 187N.AI — All systems operational.</div>
          <div className="flex items-center gap-2 font-mono">
            <span className="op-dot pulse-dot"></span>
            <span>system status: operational_</span>
          </div>
          <div className="flex items-center gap-5">
            {['Terms', 'Privacy', 'Security'].map(l => (
              <a key={l} href="#" className="hover:text-foreground transition-colors">{l}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
};

// ====== FULL-BLEED VIDEO INTERLUDE ======
const VideoInterlude = () => {
  return (
    <section className="relative w-full overflow-hidden -my-16 md:-my-24 pointer-events-none">
      <div className="relative h-[55vh] min-h-[420px] md:h-[70vh]">
        <video
          autoPlay muted loop playsInline
          className="absolute inset-0 w-full h-full object-cover"
          src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260327_053348_d1b3e997-e822-44eb-9056-718270060d72.mp4"
        />
        <div className="absolute inset-0 bg-black/35"></div>
        {/* Heavy top/bottom fades so it blends into black sections */}
        <div className="absolute top-0 left-0 right-0 h-40 md:h-56 bg-gradient-to-b from-background via-background/80 to-transparent"></div>
        <div className="absolute bottom-0 left-0 right-0 h-40 md:h-56 bg-gradient-to-t from-background via-background/80 to-transparent"></div>
        <div className="absolute inset-y-0 left-0 w-24 bg-gradient-to-r from-background to-transparent"></div>
        <div className="absolute inset-y-0 right-0 w-24 bg-gradient-to-l from-background to-transparent"></div>
      </div>
    </section>
  );
};

Object.assign(window, { VideoInterlude });
