const { useState, useEffect, useRef } = React;

/* =========================================================
   Klikbaar — Contact page
   ========================================================= */

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>,
  bolt: (p)=> <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z"/></svg>,
  mail: (p)=> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>,
  phone:(p)=> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 4h4l2 5-3 2a12 12 0 006 6l2-3 5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z"/></svg>,
  pin:  (p)=> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 22s7-7.5 7-13a7 7 0 10-14 0c0 5.5 7 13 7 13z"/><circle cx="12" cy="9" r="2.5"/></svg>,
  clock:(p)=> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
};

// ─────────── Reveal ───────────
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>
  );
}

// ─────────── Logo / Btn / Eyebrow / Underline (mirrored from landing) ───────────
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>
  );
}

function Btn({children, kind="primary", size="md", onClick, type="button", icon=true, fullWidth=false, disabled=false}){
  const base = {
    display:"inline-flex",alignItems:"center",gap:10,justifyContent:"center",
    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, opacity .2s ease",
    width: fullWidth? "100%" : "auto",
    opacity: disabled? .55 : 1,
    cursor: disabled? "not-allowed" : "pointer",
  };
  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"},
  };
  return (
    <button type={type} onClick={onClick} disabled={disabled} style={styles[kind]}
      onMouseEnter={e=>{ if(!disabled) e.currentTarget.style.transform="translateY(-1px)"; }}
      onMouseLeave={e=>{ e.currentTarget.style.transform="translateY(0)"; }}>
      {children}
      {icon && <I.arrow width="16" height="16"/>}
    </button>
  );
}

const h2Style = {
  fontSize:"clamp(40px,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"}}>
      {children}
      <svg style={{position:"absolute",left:-4,right:-4,bottom:-8,width:"calc(100% + 8px)",height:14}} viewBox="0 0 200 14" preserveAspectRatio="none">
        <path d="M2 8 Q 50 2 100 6 T 198 5" stroke={color} strokeWidth="5" fill="none" strokeLinecap="round"/>
      </svg>
    </span>
  );
}

// ─────────── Header ───────────
function Header(){
  const [scrolled,setScrolled] = useState(false);
  useEffect(()=>{
    const on=()=>setScrolled(window.scrollY>8);
    window.addEventListener("scroll",on); return ()=>window.removeEventListener("scroll",on);
  },[]);
  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 style={{maxWidth:1360,margin:"0 auto",padding:"18px 32px",display:"flex",alignItems:"center",justifyContent:"space-between",gap:40}}>
        <a href="./Klikbaar Landing.html"><Logo/></a>
        <nav style={{display:"flex",gap:32,fontSize:15}}>
          {[
            ["Werk","./Klikbaar Landing.html#werk"],
            ["Diensten","./Klikbaar Landing.html#diensten"],
            ["Proces","./Klikbaar Landing.html#proces"],
            ["Tarieven","./Klikbaar Landing.html#tarieven"],
            ["Contact","./Contact.html"],
          ].map(([n,href])=>(
            <a key={n} href={href} style={{opacity:.85,fontWeight:500,color: n==="Contact"?"var(--blue)":"var(--ink)"}}>{n}</a>
          ))}
        </nav>
        <div style={{display:"flex",gap:10,alignItems:"center"}}>
          <Btn kind="primary">Plan een afspraak</Btn>
        </div>
      </div>
    </header>
  );
}

// ─────────── Hero ───────────
function ContactHero(){
  return (
    <section style={{padding:"60px 32px 30px",position:"relative",overflow:"hidden"}}>
      <svg style={{position:"absolute",inset:0,width:"100%",height:"100%",opacity:.22,pointerEvents:"none"}} viewBox="0 0 1400 500" preserveAspectRatio="none">
        <defs>
          <pattern id="cdots" width="24" height="24" patternUnits="userSpaceOnUse">
            <circle cx="2" cy="2" r="1.2" fill="#4F9CF9"/>
          </pattern>
          <mask id="cmask">
            <rect width="1400" height="500" fill="black"/>
            <path d="M -100 320 Q 400 100 800 260 T 1500 180" stroke="white" strokeWidth="200" fill="none"/>
          </mask>
        </defs>
        <rect width="1400" height="500" fill="url(#cdots)" mask="url(#cmask)"/>
      </svg>
      <div style={{maxWidth:1080,margin:"0 auto",position:"relative",textAlign:"center"}}>
        <Reveal from="up">
          <Eyebrow center>Contact</Eyebrow>
          <h1 style={{...h2Style,textAlign:"center"}}>Laten we<br/><Underline>kennismaken</Underline>.</h1>
        </Reveal>
        <Reveal as="p" from="up" delay={150} style={{fontSize:20,lineHeight:1.5,color:"var(--ink-2)",marginTop:24,maxWidth:560,marginLeft:"auto",marginRight:"auto",letterSpacing:"-0.01em"}}>
          Heb je een idee, vraag of project? Vul het formulier in en we reageren binnen één werkdag.
        </Reveal>
      </div>
    </section>
  );
}

// ─────────── Field ───────────
function Field({label, children, required, hint}){
  return (
    <label style={{display:"flex",flexDirection:"column",gap:8}}>
      <span style={{fontSize:13,fontWeight:600,color:"var(--blue-deep)",letterSpacing:"-0.005em"}}>
        {label} {required && <span style={{color:"var(--red)"}}>*</span>}
      </span>
      {children}
      {hint && <span style={{fontSize:12,color:"var(--ink-2)",opacity:.7}}>{hint}</span>}
    </label>
  );
}

const inputStyle = {
  width:"100%",padding:"14px 16px",borderRadius:10,
  border:"1.5px solid var(--line)",background:"#fff",
  fontSize:15,color:"var(--ink)",outline:"none",
  transition:"border-color .15s ease, box-shadow .15s ease",
};
function applyFocus(e){
  e.currentTarget.style.borderColor="var(--blue)";
  e.currentTarget.style.boxShadow="0 0 0 4px rgba(79,156,249,.15)";
}
function clearFocus(e){
  e.currentTarget.style.borderColor="var(--line)";
  e.currentTarget.style.boxShadow="none";
}

// ─────────── Form + Sidebar ───────────
function ContactBody(){
  const [form,setForm] = useState({name:"",company:"",email:"",phone:"",message:"",budget:"",topic:"Nieuwe website"});
  const [sent,setSent] = useState(false);
  const [submitting,setSubmitting] = useState(false);
  const set = (k)=>(e)=>setForm(f=>({...f,[k]:e.target.value}));

  const valid = form.name.trim() && form.email.trim() && form.message.trim();

  const submit = (e)=>{
    e.preventDefault();
    if(!valid) return;
    setSubmitting(true);
    setTimeout(()=>{ setSubmitting(false); setSent(true); },800);
  };

  return (
    <section style={{padding:"40px 32px 120px"}}>
      <div style={{maxWidth:1180,margin:"0 auto",display:"grid",gridTemplateColumns:"1.4fr 1fr",gap:40,alignItems:"start"}}>
        {/* Form card */}
        <Reveal from="up">
          <form onSubmit={submit} style={{
            background:"#fff",borderRadius:22,
            border:"1px solid var(--line)",
            padding:"40px 40px 36px",
            boxShadow:"0 24px 60px -30px rgba(4,56,115,.18)",
          }}>
            {sent ? (
              <div style={{padding:"40px 0",textAlign:"center"}}>
                <div style={{width:64,height:64,borderRadius:"50%",background:"var(--yellow)",display:"grid",placeItems:"center",margin:"0 auto 20px",color:"var(--blue-deep)"}}>
                  <I.check width="32" height="32"/>
                </div>
                <h3 style={{fontSize:28,fontWeight:800,letterSpacing:"-0.02em",color:"var(--blue-deep)",margin:"0 0 10px"}}>Bedankt, {form.name.split(" ")[0]}!</h3>
                <p style={{fontSize:16,color:"var(--ink-2)",lineHeight:1.5,margin:"0 auto",maxWidth:380}}>
                  Je bericht is binnen. We reageren binnen één werkdag op <strong>{form.email}</strong>.
                </p>
                <div style={{marginTop:28,display:"inline-flex"}}>
                  <Btn kind="ghost" onClick={()=>{setSent(false);setForm({name:"",company:"",email:"",phone:"",message:"",budget:"",topic:"Nieuwe website"});}} icon={false}>Nog een bericht sturen</Btn>
                </div>
              </div>
            ) : (
              <>
                <h2 style={{fontSize:28,fontWeight:800,letterSpacing:"-0.025em",color:"var(--blue-deep)",margin:"0 0 6px"}}>Stuur ons een bericht</h2>
                <p style={{fontSize:15,color:"var(--ink-2)",margin:"0 0 28px"}}>Velden met <span style={{color:"var(--red)"}}>*</span> zijn verplicht.</p>

                <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18}}>
                  <Field label="Naam" required>
                    <input required type="text" value={form.name} onChange={set("name")} placeholder="Voor- en achternaam" style={inputStyle} onFocus={applyFocus} onBlur={clearFocus}/>
                  </Field>
                  <Field label="Bedrijfsnaam">
                    <input type="text" value={form.company} onChange={set("company")} placeholder="Bijv. Studio Merel" style={inputStyle} onFocus={applyFocus} onBlur={clearFocus}/>
                  </Field>
                  <Field label="E-mail" required>
                    <input required type="email" value={form.email} onChange={set("email")} placeholder="naam@bedrijf.nl" style={inputStyle} onFocus={applyFocus} onBlur={clearFocus}/>
                  </Field>
                  <Field label="Telefoonnummer">
                    <input type="tel" value={form.phone} onChange={set("phone")} placeholder="+31 6 ..." style={inputStyle} onFocus={applyFocus} onBlur={clearFocus}/>
                  </Field>
                </div>

                <div style={{marginTop:18}}>
                  <Field label="Onderwerp">
                    <div style={{display:"flex",flexWrap:"wrap",gap:8}}>
                      {["Nieuwe website","Redesign","Webshop","Anders"].map(t=>(
                        <button key={t} type="button" onClick={()=>setForm(f=>({...f,topic:t}))} style={{
                          padding:"10px 16px",borderRadius:999,fontSize:13,fontWeight:600,
                          border: form.topic===t? "1.5px solid var(--blue)" : "1.5px solid var(--line)",
                          background: form.topic===t? "#EEF5FF" : "#fff",
                          color: form.topic===t? "var(--blue-deep)" : "var(--ink-2)",
                          transition:"all .15s ease",
                        }}>{t}</button>
                      ))}
                    </div>
                  </Field>
                </div>

                <div style={{marginTop:18}}>
                  <Field label="Bericht" required hint="Vertel ons kort over je project, doelen en eventuele deadline.">
                    <textarea required rows={6} value={form.message} onChange={set("message")} placeholder="Waar kunnen we je mee helpen?" style={{...inputStyle,resize:"vertical",fontFamily:"inherit",lineHeight:1.5}} onFocus={applyFocus} onBlur={clearFocus}/>
                  </Field>
                </div>

                <div style={{marginTop:28,display:"flex",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:14}}>
                  <div style={{fontSize:13,color:"var(--ink-2)",display:"flex",alignItems:"center",gap:8}}>
                    <I.bolt width="14" height="14" style={{color:"var(--blue)"}}/>
                    Reactie binnen 1 werkdag
                  </div>
                  <Btn kind="primary" size="lg" type="submit" disabled={!valid || submitting}>
                    {submitting? "Versturen..." : "Verstuur bericht"}
                  </Btn>
                </div>
              </>
            )}
          </form>
        </Reveal>

        {/* Sidebar: our details */}
        <Reveal from="right" delay={200}>
          <aside style={{display:"flex",flexDirection:"column",gap:16}}>
            {/* Top dark card */}
            <div style={{
              background:"var(--blue-deep)",color:"#fff",
              borderRadius:22,padding:"32px 28px",
              position:"relative",overflow:"hidden",
            }}>
              <svg style={{position:"absolute",right:-30,top:-30,width:200,height:200,opacity:.18,pointerEvents:"none"}} viewBox="0 0 200 200">
                <defs>
                  <pattern id="sd" width="14" height="14" patternUnits="userSpaceOnUse">
                    <circle cx="2" cy="2" r="1.4" fill="#FFE492"/>
                  </pattern>
                </defs>
                <circle cx="100" cy="100" r="100" fill="url(#sd)"/>
              </svg>
              <div style={{position:"relative"}}>
                <div style={{fontSize:13,fontFamily:"JetBrains Mono,monospace",color:"var(--yellow)",letterSpacing:"0.1em",textTransform:"uppercase",fontWeight:600}}>— Onze gegevens</div>
                <h3 style={{fontSize:24,fontWeight:800,letterSpacing:"-0.02em",margin:"10px 0 18px"}}>Direct contact</h3>
                <ul style={{listStyle:"none",padding:0,margin:0,display:"flex",flexDirection:"column",gap:18}}>
                  <ContactRow icon={<I.mail width="18" height="18"/>} label="E-mail" value="Info@klikbaar.com" href="mailto:Info@klikbaar.com"/>
                  <ContactRow icon={<I.phone width="18" height="18"/>} label="Telefoon" value="+31 6 12 34 56 78" href="tel:+31612345678"/>
                  <ContactRow icon={<I.pin width="18" height="18"/>} label="Locatie" value="Omgeving Alkmaar, NL"/>
                  <ContactRow icon={<I.clock width="18" height="18"/>} label="Bereikbaarheid" value="Ma–vr · 09:00–18:00"/>
                </ul>
              </div>
            </div>

            {/* Yellow promo card */}
            <div style={{background:"var(--yellow)",borderRadius:22,padding:"24px 26px",color:"var(--blue-deep)"}}>
              <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:8}}>
                <span style={{width:8,height:8,borderRadius:"50%",background:"var(--blue-deep)",animation:"pulseBeacon 1.6s infinite"}}/>
                <div style={{fontSize:12,fontWeight:700,textTransform:"uppercase",letterSpacing:"0.1em"}}>Gratis pilot</div>
              </div>
              <div style={{fontSize:18,fontWeight:700,lineHeight:1.35,letterSpacing:"-0.015em"}}>
                Eerste 2 klanten krijgen een gratis website. Wees er snel bij.
              </div>
            </div>
          </aside>
        </Reveal>
      </div>

      <style>{`
        @keyframes pulseBeacon { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.4)} }
      `}</style>
    </section>
  );
}

function ContactRow({icon,label,value,href}){
  const inner = (
    <div style={{display:"flex",alignItems:"center",gap:14}}>
      <div style={{
        width:38,height:38,borderRadius:10,
        background:"rgba(255,228,146,.18)",color:"var(--yellow)",
        display:"grid",placeItems:"center",flexShrink:0,
      }}>{icon}</div>
      <div>
        <div style={{fontSize:12,opacity:.7,fontFamily:"JetBrains Mono,monospace",letterSpacing:"0.06em",textTransform:"uppercase"}}>{label}</div>
        <div style={{fontSize:16,fontWeight:600,letterSpacing:"-0.01em",marginTop:2}}>{value}</div>
      </div>
    </div>
  );
  return <li>{href ? <a href={href} style={{color:"#fff"}}>{inner}</a> : inner}</li>;
}

// ─────────── Footer (mirrored) ───────────
function Footer(){
  return (
    <footer style={{background:"var(--blue-deep)",color:"#fff",padding:"80px 32px 40px"}}>
      <div style={{maxWidth:1360,margin:"0 auto"}}>
        <div style={{display:"grid",gridTemplateColumns:"1.4fr 1fr 1.2fr",gap:60,marginBottom:60,alignItems:"start"}}>
          <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}}>
              {[
                ["Werk","./Klikbaar Landing.html#werk"],
                ["Diensten","./Klikbaar Landing.html#diensten"],
                ["Proces","./Klikbaar Landing.html#proces"],
                ["Tarieven","./Klikbaar Landing.html#tarieven"],
                ["Contact","./Contact.html"],
              ].map(([n,href])=>(
                <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="tel:+31612345678" style={{fontSize:14.5,color:"rgba(255,255,255,.8)"}}>+31 6 12 34 56 78</a>
              <a href="./Contact.html" style={{fontSize:14.5,color:"rgba(255,255,255,.8)"}}>Stuur een bericht</a>
            </div>
          </Reveal>
        </div>

        <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",gap:12,marginTop:40,paddingTop:32,borderTop:"1px solid rgba(255,255,255,.15)",fontSize:13,color:"rgba(255,255,255,.6)"}}>
          <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>
  );
}

// ─────────── App ───────────
function App(){
  return (
    <>
      <Header/>
      <ContactHero/>
      <ContactBody/>
      <Footer/>
    </>
  );
}

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