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

/* =========================================================
   Klikbaar — landing page
   ========================================================= */

// ─────────── Icons ───────────
const I = {
  arrow: (p)=> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  check: (p)=> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M4 12.5l5 5L20 6.5"/></svg>,
  click: (p)=> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M7 3.8L7 11M3.8 7L11 7M4.5 4.5l3.2 3.2"/><path d="M10 11l10 4-4.5 2-2 4.5L10 11z"/></svg>,
  bolt: (p)=> <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z"/></svg>,
  spark: (p)=> <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M12 2l2 6 6 2-6 2-2 6-2-6-6-2 6-2 2-6z"/></svg>,
  layers: (p)=> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" {...p}><path d="M12 3L2 8l10 5 10-5-10-5z"/><path d="M2 13l10 5 10-5M2 18l10 5 10-5"/></svg>,
  gauge: (p)=> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M12 14l4-5"/><circle cx="12" cy="14" r="1.5" fill="currentColor" stroke="none"/><path d="M4 18a9 9 0 1 1 16 0"/></svg>,
  shield: (p)=> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" {...p}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z"/></svg>,
  chat: (p)=> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" {...p}><path d="M4 5h16v12h-9l-4 4v-4H4z"/></svg>,
  star: (p)=> <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M12 2l2.9 6.9L22 10l-5.5 4.7L18.2 22 12 18l-6.2 4 1.7-7.3L2 10l7.1-1.1z"/></svg>,
  plus: (p)=> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M12 5v14M5 12h14"/></svg>,
  minus:(p)=> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M5 12h14"/></svg>,
  figma:(p)=> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><circle cx="15" cy="12" r="3"/><path d="M9 3h6a3 3 0 0 1 0 6H9a3 3 0 0 1 0-6zM9 9h6a3 3 0 0 1 0 6H9a3 3 0 0 1 0-6zM9 15h3a3 3 0 1 1-3 3v-3z"/></svg>,
  menu: (p)=> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M3 6h18M3 12h18M3 18h18"/></svg>,
  close:(p)=> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M18 6L6 18M6 6l12 12"/></svg>,
};

// ─────────── Mobile-first CSS ───────────
function GlobalStyles(){
  return (
    <style>{`
      /* ── Container ── */
      .container { max-width: 1360px; margin: 0 auto; }

      /* ── Section padding: mobile base ── */
      .sec      { padding: 60px 20px; }
      .sec-lg   { padding: 60px 20px; }
      .sec-hero { padding: 60px 20px 80px; position: relative; overflow: hidden; }
      .sec-logobar { padding: 0 20px 40px; }

      /* ── Header ── */
      .header-inner {
        max-width: 1360px; margin: 0 auto;
        padding: 14px 20px;
        display: flex; align-items: center; justify-content: space-between; gap: 16px;
      }
      .header-nav  { display: none; }
      .header-cta  { display: none; }
      .hamburger   {
        display: flex; align-items: center; justify-content: center;
        background: none; border: none; cursor: pointer;
        padding: 6px; color: var(--ink); border-radius: 8px;
      }
      .hamburger:hover { background: var(--bg-soft); }

      /* ── Mobile menu overlay ── */
      .mmenu {
        position: fixed; inset: 0;
        background: rgba(255,255,255,.97);
        backdrop-filter: saturate(160%) blur(20px);
        z-index: 200;
        display: flex; flex-direction: column;
        padding: 80px 28px 40px; gap: 4px;
        overflow-y: auto;
      }
      .mmenu a {
        font-size: 24px; font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--blue-deep); text-decoration: none;
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
        display: block;
      }
      .mmenu a:last-of-type { border-bottom: none; }
      .mmenu-close {
        position: absolute; top: 18px; right: 20px;
        background: none; border: none; cursor: pointer;
        color: var(--ink); padding: 8px; border-radius: 8px;
      }
      .mmenu-close:hover { background: var(--bg-soft); }
      .mmenu-cta { margin-top: 28px; }

      /* ── Grids: 1 column on mobile ── */
      .g-hero    { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
      .g-2       { display: grid; grid-template-columns: 1fr; gap: 28px; }
      .g-2-end   { display: grid; grid-template-columns: 1fr; gap: 28px; margin-bottom: 40px; }
      .g-4       { display: grid; grid-template-columns: 1fr; gap: 16px; }
      .g-process { display: grid; grid-template-columns: 1fr; border-top: 1px solid rgba(255,255,255,.15); }
      .g-3       { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
      .g-footer  { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; align-items: start; }

      /* ── Work & CTA inner boxes ── */
      .work-box {
        position: relative; overflow: hidden;
        background: var(--blue-deep); color: #fff;
        border-radius: 18px; padding: 40px 28px;
        display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center;
        max-width: 1080px; margin: 0 auto;
      }
      .cta-box {
        background: var(--yellow); border-radius: 18px; padding: 40px 28px;
        position: relative; overflow: hidden;
        display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center;
        max-width: 1360px; margin: 0 auto;
      }

      /* ── Process step ── */
      .process-step {
        padding: 28px 20px 24px;
        border-bottom: 1px solid rgba(255,255,255,.15);
        position: relative;
      }
      .process-step:last-child { border-bottom: none; }

      /* ── Hero visual: hidden on mobile, visible on tablet+ ── */
      .hero-visual { display: none; }

      /* ── Cases grid always 2-col ── */
      .g-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

      /* ── Footer ── */
      .footer-bottom {
        display: flex; justify-content: space-between; align-items: center;
        flex-wrap: wrap; gap: 12px;
        margin-top: 40px; padding-top: 32px;
        border-top: 1px solid rgba(255,255,255,.15);
        font-size: 13px; color: rgba(255,255,255,.6);
      }

      /* ══════════════════════════════════════
         Tablet: 768px+
         ══════════════════════════════════════ */
      @media (min-width: 768px) {
        .sec      { padding: 80px 32px; }
        .sec-lg   { padding: 120px 32px; }
        .sec-hero { padding: 80px 32px 120px; }
        .sec-logobar { padding: 0 32px 60px; }

        .header-inner { padding: 18px 32px; gap: 40px; }
        .header-nav   { display: flex; gap: 32px; font-size: 15px; color: var(--ink); list-style: none; margin: 0; padding: 0; }
        .header-cta   { display: flex; gap: 10px; align-items: center; }
        .hamburger    { display: none; }

        .g-hero    { grid-template-columns: 1.05fr 1fr; gap: 80px; }
        .g-2       { grid-template-columns: 1fr 1.2fr; gap: 60px; }
        .g-2-end   { grid-template-columns: 1fr 1.2fr; gap: 60px; margin-bottom: 70px; align-items: end; }
        .g-4       { grid-template-columns: repeat(2, 1fr); gap: 20px; }
        .g-process { grid-template-columns: repeat(2, 1fr); }
        .g-footer  { grid-template-columns: 1.4fr 1fr 1.2fr; gap: 60px; margin-bottom: 60px; }

        .work-box { grid-template-columns: 1.2fr 1fr; padding: 80px 60px; border-radius: 28px; gap: 40px; }
        .cta-box  { grid-template-columns: 1.2fr 1fr; padding: 80px 60px; border-radius: 28px; gap: 40px; }

        .process-step { padding: 32px 28px 28px; border-bottom: none; border-right: 1px solid rgba(255,255,255,.15); }
        .process-step:last-child { border-right: none; }

        .hero-visual { display: block; }
      }

      /* ══════════════════════════════════════
         Desktop: 1024px+
         ══════════════════════════════════════ */
      @media (min-width: 1024px) {
        .g-4       { grid-template-columns: repeat(4, 1fr); }
        .g-process { grid-template-columns: repeat(4, 1fr); }
        .g-3       { grid-template-columns: repeat(3, 1fr); gap: 24px; }
      }

      @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.4)} }
      @keyframes fly   { 0%{transform:translate(0,0)} 50%{transform:translate(140px,-30px)} 100%{transform:translate(0,0)} }
    `}</style>
  );
}

// ─────────── Reveal: scroll-triggered entrance ───────────
function Reveal({children, delay=0, from="up", as="div", style, ...rest}){
  const [visible,setVisible] = useState(false);
  const ref = useRef(null);
  useEffect(()=>{
    if(!ref.current) return;
    const io = new IntersectionObserver(([e])=>{
      if(e.isIntersecting){ setVisible(true); io.disconnect(); }
    },{threshold:0.12});
    io.observe(ref.current);
    return ()=>io.disconnect();
  },[]);
  const offsets = {
    up:    "translate(0,40px)",
    down:  "translate(0,-40px)",
    left:  "translate(-40px,0)",
    right: "translate(40px,0)",
    zoom:  "scale(.94)",
    none:  "none",
  };
  const Tag = as;
  return (
    <Tag ref={ref} style={{
      ...style,
      opacity: visible? 1 : 0,
      transform: visible? "none" : offsets[from],
      transition:`opacity .8s cubic-bezier(.2,.8,.2,1) ${delay}ms, transform .9s cubic-bezier(.2,.8,.2,1) ${delay}ms`,
      willChange:"opacity, transform",
    }} {...rest}>{children}</Tag>
  );
}

// ─────────── useCountUp ───────────
function useCountUp(target, {duration=1400, decimals=0}={}){
  const [val,setVal] = useState(0);
  const [start,setStart] = useState(false);
  const ref = useRef(null);
  useEffect(()=>{
    if(!ref.current) return;
    const io = new IntersectionObserver(([e])=>{ if(e.isIntersecting){ setStart(true); io.disconnect(); }},{threshold:0.3});
    io.observe(ref.current);
    return ()=>io.disconnect();
  },[]);
  useEffect(()=>{
    if(!start) return;
    const t0 = performance.now();
    let raf;
    const tick = (t)=>{
      const p = Math.min(1,(t-t0)/duration);
      const eased = 1 - Math.pow(1-p,3);
      setVal(eased*target);
      if(p<1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return ()=>cancelAnimationFrame(raf);
  },[start,target,duration]);
  return [ref, val.toFixed(decimals)];
}

// ─────────── Wordmark / logo ───────────
function Logo({variant="bracket", color="var(--ink)"}){
  const isDark = color==="#fff"||color==="white";
  const plate  = isDark ? "#fff" : "#0B1C1B";
  const letter = isDark ? "#0B1C1B" : "#FAFAF7";
  return (
    <div style={{display:"flex",alignItems:"center",gap:14,color}}>
      <svg width="38" height="38" viewBox="0 0 140 140" style={{flexShrink:0}} aria-label="Klikbaar">
        <rect x="0" y="0" width="140" height="140" rx="30" fill={plate}/>
        <g fill={letter}>
          <rect x="32" y="32" width="14" height="76" rx="2"/>
          <path d="M48 70 L82 32 L98 32 L62 71 Z"/>
          <path d="M48 70 L84 108 L100 108 L64 70 Z"/>
        </g>
        <g transform="translate(82 60) rotate(-6)">
          <path d="M0 0 L0 24 L6.2 18.4 L10.2 27.4 L14.0 25.9 L10.2 17 L18.6 17 Z" fill="#0E8E8A"/>
        </g>
      </svg>
      <div style={{fontWeight:700,fontSize:22,letterSpacing:"-0.035em",fontFamily:"'Geist','Inter',sans-serif"}}>
        klikbaar
      </div>
    </div>
  );
}

// ─────────── Button ───────────
function Btn({children, kind="primary", size="md", onClick, icon=true}){
  const base = {
    display:"inline-flex",alignItems:"center",gap:10,
    borderRadius:10,fontWeight:600,letterSpacing:"-0.01em",
    padding: size==="lg"? "18px 26px" : "14px 22px",
    fontSize: size==="lg"? 17 : 15,
    transition:"transform .15s ease, box-shadow .2s ease, background .2s ease",
  };
  const styles = {
    primary: {...base, background:"var(--blue)", color:"#fff", boxShadow:"0 10px 24px -10px rgba(79,156,249,.6)"},
    yellow:  {...base, background:"var(--yellow)", color:"var(--blue-deep)"},
    ghost:   {...base, background:"transparent", color:"var(--blue-deep)", boxShadow:"inset 0 0 0 1.5px var(--blue-deep)"},
    dark:    {...base, background:"var(--blue-deep)", color:"#fff"},
    white:   {...base, background:"#fff", color:"var(--blue-deep)"},
  };
  return (
    <button onClick={onClick} style={styles[kind]}
      onMouseEnter={e=>e.currentTarget.style.transform="translateY(-1px)"}
      onMouseLeave={e=>e.currentTarget.style.transform="translateY(0)"}>
      {children}
      {icon && <I.arrow width="16" height="16"/>}
    </button>
  );
}

// ─────────── Header ───────────
function Header({tweaks}){
  const nav = ["Werk","Diensten","Proces","Tarieven","Contact"];
  const [scrolled,setScrolled] = useState(false);
  const [menuOpen,setMenuOpen] = useState(false);

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

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

  return (
    <>
      <header style={{
        position:"sticky",top:0,zIndex:50,
        background: scrolled? "rgba(255,255,255,.85)" : "transparent",
        backdropFilter: scrolled? "saturate(160%) blur(14px)" : "none",
        borderBottom: scrolled? "1px solid var(--line)" : "1px solid transparent",
        transition:"background .2s, border .2s",
      }}>
        <div className="header-inner">
          <Logo variant={tweaks.logoStyle}/>

          <nav className="header-nav">
            {nav.map(n=>{
              const href = n==="Contact" ? "./Contact.html" : "#"+n.toLowerCase();
              return (
                <a key={n} href={href} style={{opacity:.85,fontWeight:500,color:"var(--ink)"}}
                  onMouseEnter={e=>e.currentTarget.style.color="var(--blue)"}
                  onMouseLeave={e=>e.currentTarget.style.color=""}>{n}</a>
              );
            })}
          </nav>

          <div className="header-cta">
            <Btn kind="primary">Plan een afspraak</Btn>
          </div>

          <button className="hamburger" onClick={()=>setMenuOpen(true)} aria-label="Menu openen">
            <I.menu width="24" height="24"/>
          </button>
        </div>
      </header>

      {menuOpen && (
        <div className="mmenu">
          <button className="mmenu-close" onClick={()=>setMenuOpen(false)} aria-label="Sluiten">
            <I.close width="24" height="24"/>
          </button>
          {nav.map(n=>{
            const href = n==="Contact" ? "./Contact.html" : "#"+n.toLowerCase();
            return <a key={n} href={href} onClick={()=>setMenuOpen(false)}>{n}</a>;
          })}
          <div className="mmenu-cta">
            <Btn kind="primary" size="lg">Plan een afspraak</Btn>
          </div>
        </div>
      )}
    </>
  );
}

// ─────────── Hero ───────────
function Hero({tweaks}){
  return (
    <section className="sec-hero">
      <svg style={{position:"absolute",inset:0,width:"100%",height:"100%",opacity:.25,pointerEvents:"none"}} viewBox="0 0 1400 800" preserveAspectRatio="none">
        <defs>
          <pattern id="dots" width="24" height="24" patternUnits="userSpaceOnUse">
            <circle cx="2" cy="2" r="1.2" fill="#4F9CF9"/>
          </pattern>
        </defs>
        <rect x="0" y="0" width="1400" height="800" fill="url(#dots)" mask="url(#heromask)"/>
        <mask id="heromask">
          <rect width="1400" height="800" fill="black"/>
          <path d="M -100 520 Q 300 280 700 440 T 1500 320" stroke="white" strokeWidth="220" fill="none"/>
        </mask>
      </svg>

      <div className="g-hero container" style={{position:"relative"}}>
        <div>
          <Reveal from="up" delay={50} style={{
            display:"inline-flex",alignItems:"center",gap:10,
            padding:"8px 14px",borderRadius:999,
            background:"var(--yellow)",color:"var(--blue-deep)",
            fontSize:13,fontWeight:600,letterSpacing:"-0.01em",marginBottom:28
          }}>
            <span style={{width:7,height:7,borderRadius:"50%",background:"var(--blue-deep)",animation:"pulse 1.6s infinite"}}/>
            Nu gratis website voor de eerste 2 klanten
          </Reveal>

          <Reveal as="h1" from="up" delay={150} style={{
            fontSize:"clamp(38px,5.4vw,82px)",lineHeight:.98,margin:0,
            fontWeight:800,letterSpacing:"-0.035em",color:"var(--blue-deep)"
          }}>
            {tweaks.heroHeadline.split(" ").map((w,i,a)=>(
              <span key={i}>
                {i===a.length-2 ? (
                  <span style={{position:"relative",display:"inline-block"}}>
                    {w}
                    <svg style={{position:"absolute",left:-4,right:-4,bottom:-10,width:"calc(100% + 8px)",height:16}} viewBox="0 0 200 16" preserveAspectRatio="none">
                      <path d="M2 10 Q 50 2 100 8 T 198 6" stroke="var(--blue)" strokeWidth="4" fill="none" strokeLinecap="round"/>
                    </svg>
                  </span>
                ) : w}{i<a.length-1?" ":""}
              </span>
            ))}
          </Reveal>

          <Reveal as="p" from="up" delay={300} style={{
            fontSize:"clamp(16px,2vw,20px)",lineHeight:1.5,color:"var(--ink-2)",
            marginTop:28,maxWidth:540,letterSpacing:"-0.01em"
          }}>
            Wij ontwerpen en bouwen websites voor ambitieuze lokale bedrijven.
            Snel, meetbaar, en zonder templates. Van gesprek tot website in 5–7 dagen.
          </Reveal>

          <Reveal from="up" delay={450} style={{display:"flex",gap:14,marginTop:36,alignItems:"center",flexWrap:"wrap"}}>
            <Btn kind="primary" size="lg">Plan een kennismaking</Btn>
          </Reveal>

          <Reveal from="up" delay={600} style={{display:"flex",gap:14,marginTop:32,flexWrap:"wrap",alignItems:"center"}}>
            <div style={{
              display:"inline-flex",alignItems:"center",gap:10,
              padding:"10px 16px",borderRadius:999,
              background:"#EEF5FF",color:"var(--blue-deep)",
              fontSize:14,fontWeight:600,letterSpacing:"-0.01em",
              border:"1px solid rgba(79,156,249,0.25)"
            }}>
              <I.bolt width="15" height="15" style={{color:"var(--blue)"}}/>
              Levertijd: 5–7 werkdagen
            </div>
            <div style={{fontSize:13,color:"var(--ink-2)"}}>
              Vaste prijs · geen verrassingen
            </div>
          </Reveal>
        </div>

        <Reveal from="right" delay={250} className="hero-visual">
          <HeroVisual cursor={tweaks.cursorTrail}/>
        </Reveal>
      </div>
    </section>
  );
}

function HeroVisual({cursor}){
  return (
    <div style={{position:"relative",aspectRatio:"1/0.82"}}>
      <div style={{
        position:"absolute",inset:"10% -6% 10% 6%",borderRadius:40,
        background:"var(--yellow)",transform:"rotate(-3deg)"
      }}/>
      <svg style={{position:"absolute",right:-20,top:-20,width:130,height:130}} viewBox="0 0 130 130">
        {Array.from({length:7}).map((_,r)=>Array.from({length:7}).map((_,c)=>(
          <circle key={r+"-"+c} cx={10+c*18} cy={10+r*18} r="2.2" fill="var(--blue-deep)"/>
        )))}
      </svg>
      <div style={{
        position:"absolute",inset:"4% 4% 4% 4%",
        borderRadius:18,background:"#fff",
        boxShadow:"0 40px 80px -30px rgba(4,56,115,.35), 0 0 0 1px rgba(4,56,115,.08)",
        overflow:"hidden",transform:"rotate(1.5deg)"
      }}>
        <div style={{height:38,background:"#F3F4F6",borderBottom:"1px solid var(--line)",display:"flex",alignItems:"center",padding:"0 14px",gap:7}}>
          <span style={{width:11,height:11,borderRadius:"50%",background:"#FF605C"}}/>
          <span style={{width:11,height:11,borderRadius:"50%",background:"#FFBD44"}}/>
          <span style={{width:11,height:11,borderRadius:"50%",background:"#00CA4E"}}/>
          <div style={{flex:1,margin:"0 14px",height:20,borderRadius:6,background:"#fff",fontSize:11,color:"#888",display:"flex",alignItems:"center",padding:"0 10px",fontFamily:"JetBrains Mono,monospace"}}>
            klikbaar.com/cases/voorbeeld
          </div>
        </div>
        <div style={{padding:"26px 26px 18px",display:"flex",flexDirection:"column",gap:14}}>
          <div style={{height:14,width:120,background:"var(--blue)",borderRadius:4}}/>
          <div style={{height:28,width:"88%",background:"var(--blue-deep)",borderRadius:6}}/>
          <div style={{height:28,width:"62%",background:"var(--blue-deep)",borderRadius:6}}/>
          <div style={{height:10,width:"74%",background:"#DCE3EA",borderRadius:4,marginTop:6}}/>
          <div style={{height:10,width:"58%",background:"#DCE3EA",borderRadius:4}}/>
          <div style={{display:"flex",gap:10,marginTop:10}}>
            <div style={{height:38,width:130,background:"var(--blue)",borderRadius:8}}/>
            <div style={{height:38,width:110,background:"transparent",border:"1.5px solid var(--blue-deep)",borderRadius:8}}/>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:10,marginTop:12}}>
            {[0,1,2].map(i=>(
              <div key={i} style={{aspectRatio:"1/0.9",background:"repeating-linear-gradient(135deg,#F3F4F6 0 6px,#E8ECEF 6px 12px)",borderRadius:8}}/>
            ))}
          </div>
        </div>
      </div>
      {cursor && (
        <div style={{
          position:"absolute",right:"-2%",bottom:"8%",
          display:"flex",alignItems:"flex-start",gap:0,
          animation:"fly 5s ease-in-out infinite"
        }}>
          <svg width="26" height="32" viewBox="0 0 24 24" fill="var(--blue-deep)"><path d="M4 2l5 18 3.2-7.5L20 11 4 2z"/></svg>
          <div style={{
            marginLeft:-4,marginTop:22,padding:"6px 12px",borderRadius:"0 10px 10px 10px",
            background:"var(--blue-deep)",color:"#fff",fontSize:13,fontWeight:600,whiteSpace:"nowrap"
          }}>jij · net nu</div>
        </div>
      )}
      <Reveal from="left" delay={500} style={{
        position:"absolute",left:"-4%",top:"18%",
        background:"#fff",borderRadius:14,padding:"14px 18px",
        boxShadow:"0 20px 40px -20px rgba(4,56,115,.4)",
        display:"flex",alignItems:"center",gap:14
      }}>
        <div style={{width:42,height:42,borderRadius:10,background:"var(--yellow)",display:"grid",placeItems:"center",color:"var(--blue-deep)"}}>
          <I.bolt width="22" height="22"/>
        </div>
        <div>
          <div style={{fontSize:12,color:"var(--ink-2)"}}>PageSpeed</div>
          <div style={{fontSize:22,fontWeight:800,color:"var(--green)"}}>99 / 100</div>
        </div>
      </Reveal>
    </div>
  );
}

// ─────────── Logo bar ───────────
function LogoBar(){
  const clients = ["NOORDKAAP","Studio Merel","Haverkamp & Co","Fietshelden","Noord-Archief","Bakkerij Os"];
  return (
    <section className="sec-logobar">
      <div className="container" style={{borderTop:"1px solid var(--line)",borderBottom:"1px solid var(--line)",padding:"28px 0"}}>
        <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",gap:24,flexWrap:"wrap"}}>
          <div style={{fontSize:13,color:"var(--ink-2)",fontWeight:500,textTransform:"uppercase",letterSpacing:"0.08em"}}>
            Vertrouwd door 60+ merken
          </div>
          {clients.map((c,i)=>(
            <Reveal key={c} from="up" delay={i*80} as="div" style={{fontSize:18,fontWeight:700,color:"var(--ink-2)",opacity:.7,letterSpacing:"-0.01em",fontFamily: c.includes("Studio")?"Inter":"JetBrains Mono,monospace"}}>
              {c}
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────── Services ───────────
function Services(){
  const items = [
    {icon:<I.layers/>, title:"Strategie & merk", desc:"Positionering, messaging en design system. We vertrekken niet vanuit wireframes — we vertrekken vanuit je klant."},
    {icon:<I.click/>,  title:"Design dat klikt", desc:"Bold, brand-first ontwerp in Figma. Geen templates, geen compromis. Interactie die klopt op elk scherm."},
    {icon:<I.bolt/>,   title:"Razendsnelle build", desc:"Next.js of Webflow — we kiezen wat past. 99/100 PageSpeed als uitgangspunt, niet als bonus."},
    {icon:<I.gauge/>,  title:"Meten & groeien", desc:"Analytics, A/B tests en CRO. We stoppen niet bij launch, we stoppen bij resultaat."},
  ];
  return (
    <section id="diensten" className="sec-lg" style={{background:"var(--bg-soft)"}}>
      <div className="container">
        <div className="g-2-end">
          <Reveal from="up" delay={0}>
            <Eyebrow>Diensten</Eyebrow>
            <h2 style={h2Style}>Eén team,<br/>vier <Underline>superkrachten</Underline>.</h2>
          </Reveal>
          <Reveal as="p" from="up" delay={150} style={{fontSize:19,lineHeight:1.5,color:"var(--ink-2)",maxWidth:560}}>
            We dekken de volledige cyclus van een website. Eén vaste lead, één prijs, één deadline.
          </Reveal>
        </div>
        <div className="g-4">
          {items.map((it,i)=>(
            <ServiceCard key={i} {...it} n={i+1}/>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceCard({icon,title,desc,n}){
  const [hover,setHover] = useState(false);
  const [visible,setVisible] = useState(false);
  const ref = useRef(null);
  useEffect(()=>{
    if(!ref.current) return;
    const io = new IntersectionObserver(([e])=>{
      if(e.isIntersecting){ setVisible(true); io.disconnect(); }
    },{threshold:0.15});
    io.observe(ref.current);
    return ()=>io.disconnect();
  },[]);
  const delay = (n-1)*120;
  return (
    <div
      ref={ref}
      onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      style={{
        background: hover? "var(--blue-deep)" : "#fff",
        color: hover? "#fff" : "var(--ink)",
        borderRadius:18,padding:"28px 24px 26px",
        border:"1px solid "+(hover?"var(--blue-deep)":"var(--line)"),
        transition:`opacity .7s ease ${delay}ms, transform .7s cubic-bezier(.2,.8,.2,1) ${delay}ms, background .25s ease, color .25s ease, border-color .25s ease`,
        opacity: visible? 1 : 0,
        transform: visible
          ? (hover? "translate(0,-4px)":"translate(0,0)")
          : "translate(-40px,0)",
        minHeight:280,
        display:"flex",flexDirection:"column",justifyContent:"space-between"
      }}>
      <div>
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",marginBottom:30}}>
          <div style={{
            width:48,height:48,borderRadius:12,
            background: hover? "var(--yellow)" : "#EEF5FF",
            color: hover? "var(--blue-deep)" : "var(--blue)",
            display:"grid",placeItems:"center"
          }}>
            {React.cloneElement(icon,{width:22,height:22})}
          </div>
          <div style={{fontFamily:"JetBrains Mono,monospace",fontSize:12,opacity:.5}}>0{n}</div>
        </div>
        <h3 style={{fontSize:22,fontWeight:700,letterSpacing:"-0.02em",margin:"0 0 10px"}}>{title}</h3>
        <p style={{fontSize:14.5,lineHeight:1.55,margin:0,opacity: hover?.85:1,color:hover?"rgba(255,255,255,.85)":"var(--ink-2)"}}>{desc}</p>
      </div>
      <div style={{marginTop:22,display:"flex",alignItems:"center",gap:8,fontSize:13,fontWeight:600,color:hover?"var(--yellow)":"var(--blue)"}}>
        Lees meer <I.arrow width="14" height="14"/>
      </div>
    </div>
  );
}

// ─────────── Work / Cases ───────────
function Work(){
  return (
    <section id="werk" className="sec-lg">
      <div className="work-box">
        <svg style={{position:"absolute",inset:0,width:"100%",height:"100%",opacity:.18,pointerEvents:"none"}} viewBox="0 0 800 400" preserveAspectRatio="none">
          <defs>
            <pattern id="workdots" width="22" height="22" patternUnits="userSpaceOnUse">
              <circle cx="2" cy="2" r="1.6" fill="#FFE492"/>
            </pattern>
          </defs>
          <rect width="800" height="400" fill="url(#workdots)"/>
        </svg>

        <div style={{position:"relative",zIndex:1}}>
          <Reveal from="left">
            <Eyebrow light>Recent werk</Eyebrow>
            <h2 style={{...h2Style,color:"#fff",marginTop:12}}>Wees onze<br/><Underline color="var(--yellow)">eerste klant</Underline>.</h2>
          </Reveal>
          <Reveal as="p" from="left" delay={150} style={{fontSize:18,lineHeight:1.5,marginTop:18,color:"rgba(255,255,255,.85)",maxWidth:440}}>
            We zijn net gestart en bouwen aan onze portfolio. Daarom: <strong style={{color:"var(--yellow)"}}>gratis website voor de eerste twee klanten</strong> en jouw case prominent op deze plek.
          </Reveal>
          <Reveal from="left" delay={300} style={{display:"flex",gap:12,marginTop:32,flexWrap:"wrap"}}>
            <Btn kind="yellow" size="lg">Plan een afspraak</Btn>
          </Reveal>
        </div>

        <div style={{position:"relative",zIndex:1}} className="g-cases">
          {[0,1,2,3].map(i=>(
            <Reveal key={i} from="right" delay={i*120} style={{
              aspectRatio:"1/1",borderRadius:14,
              background:"rgba(255,255,255,.06)",
              border:"1.5px dashed rgba(255,228,146,.35)",
              display:"grid",placeItems:"center",
              color:"rgba(255,228,146,.55)",fontFamily:"JetBrains Mono,monospace",fontSize:13
            }}>
              {String(i+1).padStart(2,"0")} · binnenkort
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────── Process ───────────
function Process(){
  const steps = [
    {n:"01",t:"Gesprek", d:"Persoonlijk gesprek waarin we jouw wensen en behoeften bespreken."},
    {n:"02",t:"Prototype", d:"Bekijk het prototype. Niet tevreden? We passen het direct aan."},
    {n:"03",t:"Bouwen", d:"We bouwen jouw website binnen 5–7 dagen. Niet tevreden? Geld terug."},
    {n:"04",t:"Live", d:"Je website gaat live. Klaar om jouw bedrijf te laten groeien en meer klanten te bereiken."},
  ];
  return (
    <section id="proces" className="sec-lg" style={{background:"var(--blue-deep)",color:"#fff",position:"relative",overflow:"hidden"}}>
      <svg style={{position:"absolute",inset:0,width:"100%",height:"100%",opacity:.12}} viewBox="0 0 1400 700" preserveAspectRatio="xMidYMid slice">
        {Array.from({length:60}).map((_,i)=>{
          const x = (i*73)%1400, y=(i*131)%700;
          return <path key={i} d={`M${x} ${y-8} l2.4 5.8 6 0.6 -4.5 4.2 1.2 6 -5.4-3 -5.4 3 1.2-6 -4.5-4.2 6-0.6z`} fill="#FFE492"/>
        })}
      </svg>

      <div className="container" style={{position:"relative"}}>
        <Reveal from="up" style={{maxWidth:640,marginBottom:50}}>
          <Eyebrow light>Proces</Eyebrow>
          <h2 style={{...h2Style,color:"#fff"}}>Van gesprek naar website in <Underline color="var(--yellow)">7 dagen</Underline>.</h2>
          <p style={{fontSize:18,lineHeight:1.5,color:"rgba(255,255,255,.8)",marginTop:16}}>
            Geen onduidelijke trajecten. Vaste prijs, vast team en binnen 7 dagen jouw website live.
          </p>
        </Reveal>

        <div className="g-process">
          {steps.map((s,i)=>(
            <Reveal key={s.n} from="up" delay={i*150} className="process-step">
              <div style={{fontFamily:"JetBrains Mono,monospace",fontSize:14,color:"var(--yellow)",fontWeight:500,marginBottom:20}}>
                {s.n} / 04
              </div>
              <h3 style={{fontSize:24,fontWeight:700,letterSpacing:"-0.02em",margin:"0 0 12px"}}>{s.t}</h3>
              <p style={{fontSize:14.5,lineHeight:1.55,margin:0,color:"rgba(255,255,255,.75)"}}>{s.d}</p>
            </Reveal>
          ))}
        </div>

        <Reveal from="up" delay={600} style={{marginTop:50,display:"flex",alignItems:"center",gap:14,fontFamily:"JetBrains Mono,monospace",fontSize:12,color:"rgba(255,255,255,.7)"}}>
          <span>Dag 1</span>
          <div style={{flex:1,height:6,borderRadius:3,background:"rgba(255,255,255,.15)",position:"relative",overflow:"hidden"}}>
            <div style={{position:"absolute",inset:0,background:"linear-gradient(90deg,var(--yellow),var(--blue))"}}/>
            {[0,25,55,80].map((p,i)=>(
              <div key={i} style={{position:"absolute",left:p+"%",top:-4,width:14,height:14,borderRadius:"50%",background:"var(--yellow)",border:"3px solid var(--blue-deep)"}}/>
            ))}
          </div>
          <span>Dag 7 · Live</span>
        </Reveal>
      </div>
    </section>
  );
}

// ─────────── Pricing ───────────
function Pricing(){
  const plans = [
    {
      name:"Basic", badge:null,
      price:"€150", sub:"eenmalig · excl. btw",
      tagline:"Een strakke one-pager om snel online te zijn.",
      features:["1 pagina (one-pager)","Mobielvriendelijk design","Contactformulier","Basis SEO","1 revisieronde"],
      cta:"Basic kiezen", kind:"ghost"
    },
    {
      name:"Standard", badge:"Meest gekozen",
      price:"€300", sub:"eenmalig · excl. btw",
      tagline:"Complete website voor groeiende bedrijven.",
      features:["Tot 5 pagina's","Custom design","CMS (zelf bewerkbaar)","On-page SEO","2 revisierondes","30 dagen support"],
      cta:"Standard kiezen", kind:"primary", highlight:true
    },
    {
      name:"Custom", badge:null,
      price:"Op maat", sub:"prijs op aanvraag",
      tagline:"Voor projecten met specifieke wensen of integraties.",
      features:["Onbeperkt aantal pagina's","Maatwerk functionaliteit","Webshop / integraties","Headless / Next.js mogelijk","Onbeperkt revisies","Persoonlijke begeleiding"],
      cta:"Vraag offerte aan", kind:"dark"
    },
  ];
  return (
    <section id="tarieven" className="sec-lg" style={{background:"var(--bg-soft)"}}>
      <div className="container">
        <Reveal from="up" style={{textAlign:"center",maxWidth:720,margin:"0 auto 32px"}}>
          <Eyebrow center>Tarieven</Eyebrow>
          <h2 style={{...h2Style,textAlign:"center"}}>Transparante prijzen.<br/><Underline>Geen verrassingen.</Underline></h2>
          <p style={{fontSize:18,lineHeight:1.5,color:"var(--ink-2)",marginTop:16}}>
            Drie duidelijke pakketten. Vaste prijs vooraf, geen uurtje-factuurtje.
          </p>
        </Reveal>

        <Reveal from="up" delay={150} style={{display:"flex",justifyContent:"center",marginBottom:40}}>
          <div style={{
            display:"inline-flex",alignItems:"center",gap:10,
            padding:"10px 18px",borderRadius:999,
            background:"#fff",color:"var(--blue-deep)",
            fontSize:14,fontWeight:600,letterSpacing:"-0.01em",
            border:"1px solid rgba(79,156,249,0.3)",
            boxShadow:"0 4px 12px -4px rgba(4,56,115,0.08)"
          }}>
            <I.bolt width="15" height="15" style={{color:"var(--blue)"}}/>
            Levertijd: 5–7 werkdagen
          </div>
        </Reveal>

        <div className="g-3">
          {plans.map((p,i)=> <Reveal key={p.name} from="up" delay={i*120} style={{display:"flex"}}><PriceCard {...p}/></Reveal>)}
        </div>

        <p style={{textAlign:"center",marginTop:18,fontSize:13,color:"var(--ink-2)",opacity:.75}}>
          Hosting: €49,99/maand (incl. domein)
        </p>
        <p style={{textAlign:"center",marginTop:24,fontSize:14,color:"var(--ink-2)"}}>
          Niet zeker welk pakket past? <a href="#" style={{color:"var(--blue)",fontWeight:600}}>Neem contact op →</a>
        </p>
      </div>
    </section>
  );
}

function PriceCard({name,badge,price,sub,tagline,features,cta,kind,highlight}){
  const [hover,setHover] = useState(false);
  return (
    <div
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>setHover(false)}
      style={{
        background: highlight? "var(--blue-deep)" : "#fff",
        color: highlight? "#fff" : "var(--ink)",
        borderRadius:22,padding:"36px 32px",
        border: highlight
          ? "1px solid var(--blue-deep)"
          : (hover ? "1px solid var(--blue)" : "1px solid var(--line)"),
        position:"relative",
        transform: hover
          ? "scale(1.03)"
          : (highlight ? "scale(1.02)" : "scale(1)"),
        boxShadow: hover
          ? "0 30px 60px -15px rgba(4,56,115,0.35)"
          : (highlight ? "0 30px 60px -20px rgba(4,56,115,.35)" : "none"),
        transition:"all 0.3s ease",
        display:"flex",flexDirection:"column",
        cursor:"pointer",
        zIndex: hover ? 2 : 1,
        width:"100%"
      }}>
      {badge && (
        <div style={{
          position:"absolute",top:-14,right:28,
          background:"var(--yellow)",color:"var(--blue-deep)",
          padding:"6px 14px",borderRadius:999,
          fontSize:12,fontWeight:700,letterSpacing:"0.04em",textTransform:"uppercase"
        }}>{badge}</div>
      )}
      <div style={{fontSize:14,fontWeight:600,color:highlight?"var(--yellow)":"var(--blue)",letterSpacing:"-0.01em",marginBottom:6}}>{name}</div>
      <div style={{fontSize:44,fontWeight:800,letterSpacing:"-0.03em",lineHeight:1}}>{price}</div>
      <div style={{fontSize:13,color:highlight?"rgba(255,255,255,.7)":"var(--ink-2)",marginTop:6}}>{sub}</div>
      <p style={{fontSize:15,lineHeight:1.5,marginTop:18,marginBottom:26,color:highlight?"rgba(255,255,255,.88)":"var(--ink-2)"}}>{tagline}</p>
      <ul style={{listStyle:"none",padding:0,margin:"0 0 28px",display:"flex",flexDirection:"column",gap:11}}>
        {features.map(f=>(
          <li key={f} style={{display:"flex",alignItems:"flex-start",gap:10,fontSize:14.5}}>
            <span style={{
              width:20,height:20,borderRadius:"50%",flexShrink:0,marginTop:1,
              background: highlight? "var(--yellow)" : "#EEF5FF",
              color: highlight? "var(--blue-deep)" : "var(--blue)",
              display:"grid",placeItems:"center"
            }}><I.check width="12" height="12"/></span>
            {f}
          </li>
        ))}
      </ul>
      <div style={{marginTop:"auto"}}>
        <Btn kind={highlight?"yellow":kind}>{cta}</Btn>
      </div>
    </div>
  );
}

// ─────────── Testimonial ───────────
function Testimonial(){
  return (
    <section className="sec-lg">
      <div className="container" style={{textAlign:"center",maxWidth:1080,margin:"0 auto"}}>
        <Reveal from="zoom" style={{display:"inline-flex",gap:4,marginBottom:28}}>
          {[0,1,2,3,4].map(i=><I.star key={i} width="22" height="22" style={{color:"var(--yellow)"}}/>)}
        </Reveal>
        <Reveal as="blockquote" from="up" delay={150} style={{
          margin:0,fontSize:"clamp(20px,2.6vw,38px)",lineHeight:1.3,
          fontWeight:600,letterSpacing:"-0.025em",color:"var(--blue-deep)"
        }}>
          "Klikbaar bouwde in zes weken de site die ons drie bureaus niet konden leveren.
          Zes maanden later is onze organische omzet verdrievoudigd — en we weten precies waaróm."
        </Reveal>
        <Reveal from="up" delay={350} style={{marginTop:36,display:"flex",alignItems:"center",justifyContent:"center",gap:14}}>
          <div style={{width:48,height:48,borderRadius:"50%",background:"var(--yellow)",display:"grid",placeItems:"center",fontWeight:800,color:"var(--blue-deep)"}}>MV</div>
          <div style={{textAlign:"left"}}>
            <div style={{fontWeight:700,fontSize:15}}>Maartje Vermeer</div>
            <div style={{fontSize:13,color:"var(--ink-2)"}}>Head of Growth · Noordkaap</div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─────────── FAQ ───────────
function FAQ(){
  const qs = [
    ["Hoe lang duurt een gemiddeld project?","Voor het Groei-pakket rekenen we zes weken van brief tot live — dat is onze belofte. Starter is 4 weken, Schaal loopt doorlopend."],
    ["Werken jullie met templates?","Nooit. Elk design system bouwen we vanaf nul op basis van jullie merk en doelgroep. Templates lekken snelheid en persoonlijkheid."],
    ["In welke CMS bouwen jullie?","Webflow, Sanity, Payload of een headless Next.js setup. We kiezen samen wat het beste past bij jullie content- en dev-capaciteit."],
    ["Wat als ik niet tevreden ben?","Na sprint 1 kun je stoppen tegen gemaakte uren. Geen vendor lock-in, geen piepkleine lettertjes."],
    ["Doen jullie ook alleen design of alleen dev?","Ja — maar alleen als losse traject. We leveren dan Figma files of doen alleen de implementatie vanuit bestaande designs."],
  ];
  const [open,setOpen] = useState(0);
  return (
    <section className="sec-lg" style={{background:"var(--bg-soft)"}}>
      <div className="container" style={{maxWidth:960,margin:"0 auto"}}>
        <div style={{textAlign:"center",marginBottom:50}}>
          <Eyebrow center>FAQ</Eyebrow>
          <h2 style={{...h2Style,textAlign:"center"}}>Antwoorden, kort en bondig.</h2>
        </div>
        <div style={{display:"flex",flexDirection:"column",gap:12}}>
          {qs.map(([q,a],i)=>(
            <div key={i} style={{
              background:"#fff",borderRadius:14,border:"1px solid var(--line)",
              overflow:"hidden"
            }}>
              <button onClick={()=>setOpen(open===i?-1:i)} style={{
                width:"100%",padding:"22px 24px",background:"transparent",
                display:"flex",alignItems:"center",justifyContent:"space-between",gap:20,
                textAlign:"left",fontSize:17,fontWeight:600,color:"var(--blue-deep)",letterSpacing:"-0.01em"
              }}>
                {q}
                <span style={{color:"var(--blue)",flexShrink:0,transition:"transform .2s",transform:open===i?"rotate(45deg)":"rotate(0)"}}>
                  <I.plus width="18" height="18"/>
                </span>
              </button>
              {open===i && (
                <div style={{padding:"0 24px 24px",fontSize:15.5,lineHeight:1.55,color:"var(--ink-2)",maxWidth:720}}>
                  {a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────── CTA ───────────
function CTA(){
  return (
    <section className="sec">
      <div className="cta-box">
        <svg style={{position:"absolute",right:-30,top:-30,width:360,height:360,opacity:.5}} viewBox="0 0 200 200">
          <circle cx="100" cy="100" r="70" fill="none" stroke="var(--blue-deep)" strokeWidth="1.5" strokeDasharray="3 6"/>
          <circle cx="100" cy="100" r="50" fill="none" stroke="var(--blue-deep)" strokeWidth="1.5" strokeDasharray="3 6"/>
          <circle cx="100" cy="100" r="30" fill="none" stroke="var(--blue-deep)" strokeWidth="1.5" strokeDasharray="3 6"/>
        </svg>

        <Reveal from="left" style={{position:"relative"}}>
          <h2 style={{fontSize:"clamp(32px,4vw,58px)",fontWeight:800,letterSpacing:"-0.03em",lineHeight:1,margin:0,color:"var(--blue-deep)"}}>
            Laten we iets bouwen<br/>dat <Underline color="var(--blue)">klikt</Underline>.
          </h2>
          <p style={{fontSize:18,lineHeight:1.5,color:"var(--blue-deep)",marginTop:20,opacity:.85,maxWidth:480}}>
            30 minuten, geen verkoperstruc. We luisteren, stellen scherpe vragen,
            en sturen dezelfde dag een concrete aanpak op.
          </p>
          <div style={{display:"flex",gap:12,marginTop:32,flexWrap:"wrap"}}>
            <Btn kind="dark" size="lg">Plan kennismaking</Btn>
            <Btn kind="ghost" size="lg" icon={false}>Info@klikbaar.com</Btn>
          </div>
        </Reveal>

        <Reveal from="right" delay={200} style={{position:"relative",zIndex:1,display:"flex",justifyContent:"flex-end",alignItems:"center"}}>
          <svg width="220" height="220" viewBox="0 0 220 220" style={{opacity:.85}}>
            <circle cx="110" cy="110" r="80" fill="none" stroke="var(--blue-deep)" strokeWidth="1.5" strokeDasharray="4 7"/>
            <circle cx="110" cy="110" r="55" fill="none" stroke="var(--blue-deep)" strokeWidth="1.5" strokeDasharray="4 7"/>
            <g transform="translate(78 78) rotate(-10 32 32)">
              <path d="M8 6 L14 30 L20 22 L34 30 L38 22 L24 14 L32 8 Z" fill="var(--blue-deep)"/>
            </g>
          </svg>
        </Reveal>
      </div>
    </section>
  );
}

// ─────────── Footer ───────────
function Footer(){
  const navItems = ["Werk","Diensten","Proces","Tarieven","Contact"];
  return (
    <footer className="sec" style={{background:"var(--blue-deep)",color:"#fff",paddingTop:80,paddingBottom:40}}>
      <div className="container">
        <div className="g-footer">
          <Reveal from="up">
            <Logo color="#fff"/>
            <p style={{fontSize:14.5,lineHeight:1.55,color:"rgba(255,255,255,.7)",marginTop:18,maxWidth:380}}>
              Klikbaar is een bedrijf opgericht in omgeving Alkmaar voor lokale bedrijven.
            </p>
          </Reveal>
          <Reveal from="up" delay={120}>
            <div style={{fontSize:13,textTransform:"uppercase",letterSpacing:"0.08em",color:"var(--yellow)",fontWeight:600,marginBottom:18}}>Navigatie</div>
            <div style={{display:"flex",flexDirection:"column",gap:12}}>
              {navItems.map(n=>{
                const href = n==="Contact" ? "./Contact.html" : "#"+n.toLowerCase();
                return <a key={n} href={href} style={{fontSize:14.5,color:"rgba(255,255,255,.8)"}}>{n}</a>;
              })}
            </div>
          </Reveal>
          <Reveal from="up" delay={240}>
            <div style={{fontSize:13,textTransform:"uppercase",letterSpacing:"0.08em",color:"var(--yellow)",fontWeight:600,marginBottom:18}}>Contact</div>
            <div style={{display:"flex",flexDirection:"column",gap:12}}>
              <a href="mailto:Info@klikbaar.com" style={{fontSize:14.5,color:"rgba(255,255,255,.8)"}}>Info@klikbaar.com</a>
              <a href="./Contact.html" style={{fontSize:14.5,color:"rgba(255,255,255,.8)"}}>Contact</a>
            </div>
          </Reveal>
        </div>

        <div className="footer-bottom">
          <div>© 2026 Klikbaar BV. Alle rechten voorbehouden.</div>
          <div style={{display:"flex",gap:20}}>
            <a href="#">Privacy</a>
            <a href="#">Cookies</a>
            <a href="#">Voorwaarden</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ─────────── Shared pieces ───────────
const h2Style = {
  fontSize:"clamp(36px,5vw,72px)",fontWeight:800,letterSpacing:"-0.035em",
  lineHeight:.98,margin:"12px 0 0",color:"var(--blue-deep)"
};
function Eyebrow({children,light,center}){
  return <div style={{
    fontSize:13,fontWeight:600,letterSpacing:"0.14em",textTransform:"uppercase",
    color: light? "var(--yellow)" : "var(--blue)", fontFamily:"JetBrains Mono,monospace",
    textAlign: center? "center":"left"
  }}>— {children}</div>;
}
function Underline({children,color="var(--yellow)"}){
  return (
    <span style={{position:"relative",display:"inline-block",whiteSpace:"nowrap"}}>
      <span style={{position:"absolute",left:0,right:0,bottom:"0.06em",height:"0.3em",background:color,zIndex:0,borderRadius:3}}/>
      <span style={{position:"relative",zIndex:1}}>{children}</span>
    </span>
  );
}

// ─────────── Tweaks panel ───────────
function Tweaks({tweaks,setTweaks}){
  const [visible,setVisible] = useState(false);
  useEffect(()=>{
    const on = (e)=>{
      if(e.data?.type==="__activate_edit_mode") setVisible(true);
      if(e.data?.type==="__deactivate_edit_mode") setVisible(false);
    };
    window.addEventListener("message",on);
    window.parent.postMessage({type:"__edit_mode_available"},"*");
    return ()=>window.removeEventListener("message",on);
  },[]);
  const update = (k,v)=>{
    const next = {...tweaks,[k]:v};
    setTweaks(next);
    window.parent.postMessage({type:"__edit_mode_set_keys",edits:{[k]:v}},"*");
  };
  if(!visible) return null;

  const headlines = [
    "Websites die écht klikken.",
    "Websites die verkopen.",
    "Merken bouwen online begint hier.",
    "De beste websites van Nederland.",
  ];

  return (
    <div data-print-hide="true" style={{
      position:"fixed",right:24,bottom:24,zIndex:100,
      background:"#fff",borderRadius:16,padding:18,width:300,
      boxShadow:"0 20px 50px -10px rgba(0,0,0,.2), 0 0 0 1px var(--line)",
      fontSize:13
    }}>
      <div style={{fontWeight:700,fontSize:14,marginBottom:14,display:"flex",justifyContent:"space-between"}}>
        Tweaks
        <span style={{color:"var(--blue)",fontFamily:"JetBrains Mono,monospace",fontSize:11}}>klikbaar</span>
      </div>
      <Field label="Hero headline">
        <select value={tweaks.heroHeadline} onChange={e=>update("heroHeadline",e.target.value)} style={tweaksInput}>
          {headlines.map(h=> <option key={h} value={h}>{h}</option>)}
        </select>
      </Field>
      <Field label="Logo stijl">
        <div style={{display:"flex",gap:6}}>
          {["bracket","plain"].map(v=>(
            <button key={v} onClick={()=>update("logoStyle",v)} style={{
              ...tweaksChip,
              background: tweaks.logoStyle===v? "var(--blue-deep)":"#F3F4F6",
              color:tweaks.logoStyle===v?"#fff":"var(--ink)"
            }}>{v}</button>
          ))}
        </div>
      </Field>
      <Field label="Zwevende cursor in hero">
        <button onClick={()=>update("cursorTrail",!tweaks.cursorTrail)} style={{
          ...tweaksChip,
          background: tweaks.cursorTrail? "var(--blue)":"#F3F4F6",
          color: tweaks.cursorTrail? "#fff":"var(--ink)"
        }}>{tweaks.cursorTrail?"Aan":"Uit"}</button>
      </Field>
    </div>
  );
}
const tweaksInput = {width:"100%",padding:"8px 10px",borderRadius:8,border:"1px solid var(--line)",fontSize:13,fontFamily:"inherit"};
const tweaksChip = {padding:"7px 12px",borderRadius:8,fontSize:12,fontWeight:600,cursor:"pointer",border:"none"};
function Field({label,children}){
  return (
    <div style={{marginBottom:12}}>
      <div style={{fontSize:11,textTransform:"uppercase",letterSpacing:"0.08em",color:"var(--ink-2)",marginBottom:6,fontWeight:600}}>{label}</div>
      {children}
    </div>
  );
}

// ─────────── App ───────────
function App(){
  const [tweaks,setTweaks] = useState(window.__TWEAKS);
  return (
    <>
      <GlobalStyles/>
      <Header tweaks={tweaks}/>
      <Hero tweaks={tweaks}/>
      <LogoBar/>
      <Services/>
      <Work/>
      <Process/>
      <Pricing/>
      <Testimonial/>
      <FAQ/>
      <CTA/>
      <Footer/>
      <Tweaks tweaks={tweaks} setTweaks={setTweaks}/>
    </>
  );
}

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