// ASA Timmerwerken v2 — All Pages

// ── Shared Data ──────────────────────────────────────────────
const SERVICES = [
  { slug: 'aanbouw',    num: '01', title: 'Aanbouw en uitbouw',      short: 'Meer ruimte, meer licht.',    body: 'Een uitbreiding die naadloos aansluit op de bestaande woning — van fundering tot dakrand doordacht.', long: 'Meer woonoppervlak zonder te verhuizen. Een aanbouw vergroot niet alleen de ruimte, maar verandert ook hoe je huis aanvoelt. We denken mee over lichtinval, gebruik en architectuur.', img: () => MEDIA.aanbouw },
  { slug: 'renovatie',  num: '02', title: 'Complete renovaties',     short: 'Van verouderd naar strak.',   body: 'Van sloopwerk tot afwerking — wij coördineren het gehele traject, zodat jij geen bouwstress hebt.', long: 'Van verouderde indeling naar een frisse, logische leefomgeving. We begeleiden het volledige traject van sloopwerk tot sleutelklaar opleveren.', img: () => MEDIA.renovatie },
  { slug: 'badkamers',  num: '03', title: 'Badkamers en zolders',   short: 'Elke centimeter benut.',     body: 'Slimme maatoplossingen voor ruimtes die intensief gebruik aankunnen, met aandacht voor ventilatie en comfort.', long: 'Badkamers en zolders vragen om maatoplossingen. We denken na over elke centimeter: afvoer, ventilatie, tegels en inbouwkasten.', img: () => MEDIA.badkamer },
  { slug: 'maatwerk',   num: '04', title: 'Maatwerk en houtdetail', short: 'Karakter door vakwerk.',     body: 'Kozijnen, gevelbekleding en maatwerkkasten die sfeer en kwaliteit toevoegen voor decennialange duurzaamheid.', long: 'Van kozijnen en gevelbekleding tot maatwerkkasten en houtdetailwerk. Duurzame oplossingen die karakter geven en decennialang meegaan.', img: () => MEDIA.maatwerk },
];

const STEPS = [
  { title: 'Verzoek indienen',     body: 'Stuur ons je plannen. We beantwoorden elk verzoek binnen één werkdag en stellen gerichte vragen.' },
  { title: 'Opname op locatie',    body: 'We meten en beoordelen de bestaande situatie ter plekke. Geen verrassing achteraf.' },
  { title: 'Offerte en planning',  body: 'Een heldere begroting, realistische planning en duidelijke afspraken. Zonder verborgen kosten.' },
  { title: 'Uitvoering en oplevering', body: 'Vakkundig uitgevoerd, netjes opgeleverd — met aandacht tot de allerlaatste hand.' },
];

const FAQS = [
  { q: 'In welk gebied zijn jullie actief?',     a: 'Primair Utrecht en de directe omgeving: Zeist, Houten, Nieuwegein, Maarssen en IJsselstein.' },
  { q: 'Hoe vraag ik een offerte aan?',          a: 'Via het contactformulier of telefonisch. We plannen daarna een locatiebezoek en sturen een uitgewerkte offerte.' },
  { q: 'Hoe lang duurt een gemiddeld project?',  a: 'Een badkamerrenovatie duurt doorgaans 1–2 weken. Een aanbouw 6–10 weken. We geven altijd een realistische planning.' },
  { q: 'Regelen jullie ook vergunningen?',       a: 'We adviseren over welke vergunningen nodig zijn en helpen bij de aanvraag. Kleine aanbouwen zijn vaak vergunningsvrij.' },
  { q: 'Werken jullie ook voor bedrijven?',      a: 'Ja. Naast particulieren werken we voor bedrijfspanden: kantoorverbouwingen, gevelbekleding en maatwerk.' },
  { q: 'Kan ik ook terecht voor klein onderhoud?', a: 'Neem contact op. Afhankelijk van onze agenda kijken we wat mogelijk is. Renovaties en aanbouwen hebben prioriteit.' },
];

// ── Responsieve stijlen hook ─────────────────────────────────
function useG() {
  const mob = useMobile();
  const G = {
    cont: { maxWidth: 1280, margin: '0 auto', padding: mob ? '0 20px' : '0 48px' },
    h1l: { fontFamily:"'Syne',sans-serif", fontSize: mob ? 34 : 62, fontWeight: 700, color: '#FAF6EF', lineHeight: 1.07, letterSpacing: '-0.025em' },
    h1d: { fontFamily:"'Syne',sans-serif", fontSize: mob ? 30 : 56, fontWeight: 700, color: '#1C1916', lineHeight: 1.07, letterSpacing: '-0.025em' },
    h2:  { fontFamily:"'Syne',sans-serif", fontSize: mob ? 26 : 42, fontWeight: 700, color: '#1C1916', lineHeight: 1.12, letterSpacing: '-0.02em' },
    h2l: { fontFamily:"'Syne',sans-serif", fontSize: mob ? 26 : 42, fontWeight: 700, color: '#FAF6EF', lineHeight: 1.12, letterSpacing: '-0.02em' },
    h3:  { fontFamily:"'Syne',sans-serif", fontSize: 20, fontWeight: 600, color: '#1C1916', lineHeight: 1.2 },
    p:   { fontSize: 16, color: '#6A6058', lineHeight: 1.8 },
    pl:  { fontSize: 16, color: '#9A8F84', lineHeight: 1.8 },
    sec: mob ? '64px 0' : '112px 0',
    secSm: mob ? '48px 0' : '80px 0',
    gap2: mob ? 32 : 80,
  };
  return { mob, G };
}

// ── HOME PAGE ────────────────────────────────────────────────
function HomePage({ navigate }) {
  const { mob, G } = useG();
  const [videoOpen, setVideoOpen] = React.useState(false);

  return (
    <div>
      {videoOpen && <VideoModal src={MEDIA.showcaseVideo} onClose={() => setVideoOpen(false)} />}

      {/* Hero — full-screen video */}
      <VideoBg src={MEDIA.heroVideo} poster={MEDIA.heroPoster} overlay={0.52}>
        <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', paddingBottom: mob ? 48 : 80 }}>
          <div style={{ ...G.cont, paddingTop: mob ? 90 : 120 }}>
            <Reveal>
              <Tag light>Vakmanschap in Utrecht</Tag>
            </Reveal>
            <Reveal delay={100}>
              <h1 style={{ ...G.h1l, maxWidth: mob ? '100%' : 720, marginBottom: mob ? 20 : 28 }}>
                Renovatie, aanbouw en onderhoud met oog voor detail.
              </h1>
            </Reveal>
            <Reveal delay={200}>
              <p style={{ ...G.pl, maxWidth: 500, marginBottom: mob ? 28 : 40 }}>
                ASA Timmerwerken verzorgt renovaties, aanbouwen en maatwerk voor woningen en bedrijfspanden in Utrecht en omgeving — vakkundig en helder geregeld.
              </p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', flexDirection: mob ? 'column' : 'row', alignItems: 'flex-start' }}>
                <GoldBtn onClick={() => { navigate('contact'); window.scrollTo(0,0); }}>Offerte aanvragen</GoldBtn>
                <GoldBtn outline onClick={() => { navigate('diensten'); window.scrollTo(0,0); }}>Onze diensten</GoldBtn>
              </div>
            </Reveal>

            {/* Stats row */}
            <Reveal delay={300}>
              <div style={{ display: 'flex', gap: 0, marginTop: mob ? 40 : 72, borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: mob ? 24 : 36, flexWrap: 'wrap' }}>
                {[['30+','Jaar ervaring'],['100+','Projecten afgerond'],['Utrecht','Werkgebied']].map(([n,l],i) => (
                  <div key={i} style={{ paddingRight: mob ? 24 : 44, marginRight: mob ? 24 : 44, borderRight: i < 2 ? '1px solid rgba(255,255,255,0.1)' : 'none', marginBottom: mob ? 16 : 0 }}>
                    <div style={{ fontFamily:"'Syne',sans-serif", fontSize: n.includes('+') ? (mob ? 26 : 34) : (mob ? 18 : 22), fontWeight: 800, color: '#FAF6EF' }}>
                      {n.includes('+') ? <>{n.replace('+','')}<span style={{color:P.gold}}>+</span></> : n}
                    </div>
                    <div style={{ fontSize: 11, color: '#7A7064', marginTop: 4, letterSpacing: '0.06em' }}>{l}</div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </VideoBg>

      {/* Scrolling marquee strip */}
      <div style={{ background: P.ink, padding: '20px 0', overflow: 'hidden', borderTop: `1px solid ${P.ink3}`, borderBottom: `1px solid ${P.ink3}` }}>
        <div className="marquee-inner" style={{ display: 'flex', gap: 0, whiteSpace: 'nowrap' }}>
          {[1,2].map(k => (
            <div key={k} style={{ display: 'flex', gap: 0, flexShrink: 0 }}>
              {['Renovatie','Aanbouw','Badkamers','Maatwerk','Kozijnen','Gevelbekleding','Zolders','Utrecht'].map((t,j) => (
                <React.Fragment key={j}>
                  <span style={{ fontFamily:"'Syne',sans-serif", fontSize: 13, fontWeight: 700, letterSpacing: '0.14em', color: '#3A3530', textTransform: 'uppercase', padding: '0 28px' }}>{t}</span>
                  <span style={{ color: P.gold, fontSize: 10, lineHeight: '1', alignSelf: 'center' }}>◆</span>
                </React.Fragment>
              ))}
            </div>
          ))}
        </div>
      </div>

      {/* About intro */}
      <section style={{ background: P.parch, padding: G.sec }}>
        <div style={{ ...G.cont, display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 1fr', gap: G.gap2, alignItems: 'center' }}>
          <Reveal>
            <Tag>Over ons</Tag>
            <h2 style={{ ...G.h2, marginBottom: 24 }}>Een bouwpartner die meedenkt van idee tot oplevering.</h2>
            <p style={{ ...G.p, marginBottom: 20 }}>ASA Timmerwerken verzorgt renovaties, aanbouwen en maatwerk voor woningen en bedrijfspanden. Meer dan 30 jaar ervaring, heldere afspraken en een afwerking die het verschil maakt.</p>
            <p style={{ ...G.p, marginBottom: 36 }}>We geloven in korte lijnen en transparante communicatie. Van eerste gesprek tot sleutelklare oplevering.</p>
            <GoldBtn outline dark onClick={() => { navigate('over'); window.scrollTo(0,0); }}>Lees meer over ons</GoldBtn>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ position: 'relative' }}>
              <img src={MEDIA.overOns} alt="ASA Timmerwerken" style={{ width: '100%', aspectRatio: '4/3', objectFit: 'cover', display: 'block' }} />
              {!mob && (
                <div style={{ position: 'absolute', bottom: -24, left: -24, background: P.ink, padding: '24px 32px', maxWidth: 280 }}>
                  <div style={{ fontFamily:"'Syne',sans-serif", fontSize: 36, fontWeight: 800, color: '#FAF6EF' }}>30<span style={{color:P.gold}}>+</span></div>
                  <div style={{ fontSize: 12, color: P.warmMid, marginTop: 4, letterSpacing: '0.06em' }}>Jaar vakmanschap in Utrecht</div>
                </div>
              )}
            </div>
          </Reveal>
        </div>
      </section>

      {/* Diensten grid */}
      <section style={{ background: '#fff', padding: G.sec }}>
        <div style={G.cont}>
          <Reveal>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: mob ? 'flex-start' : 'flex-end', flexDirection: mob ? 'column' : 'row', gap: mob ? 16 : 0, marginBottom: mob ? 32 : 56 }}>
              <div>
                <Tag>Onze diensten</Tag>
                <h2 style={{ ...G.h2, maxWidth: 440 }}>Wat kunnen we voor je bouwen?</h2>
              </div>
              {!mob && <GoldBtn outline dark onClick={() => { navigate('diensten'); window.scrollTo(0,0); }}>Alle diensten bekijken</GoldBtn>}
            </div>
          </Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 1fr', gap: 3 }}>
            {SERVICES.map((s, i) => (
              <Reveal key={s.slug} delay={i * 80}>
                <div style={{ position: 'relative', overflow: 'hidden', cursor: 'pointer', aspectRatio: mob ? '16/9' : '16/10' }}
                  onClick={() => { navigate('dienst-detail'); window.scrollTo(0,0); }}>
                  <img src={s.img()} alt={s.title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94)' }}
                    onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.06)'}
                    onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'} />
                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(26,22,18,0.82) 0%, rgba(26,22,18,0.1) 55%)' }}></div>
                  <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '28px 24px' }}>
                    <div style={{ fontFamily:"'DM Mono',monospace", fontSize: 10, color: P.gold, letterSpacing: '0.14em', marginBottom: 8 }}>{s.num}</div>
                    <div style={{ fontFamily:"'Syne',sans-serif", fontSize: mob ? 17 : 20, fontWeight: 700, color: '#FAF6EF', marginBottom: 4 }}>{s.title}</div>
                    <div style={{ fontSize: 13, color: 'rgba(250,246,239,0.6)', lineHeight: 1.5 }}>{s.short}</div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
          {mob && (
            <div style={{ marginTop: 24 }}>
              <GoldBtn outline dark onClick={() => { navigate('diensten'); window.scrollTo(0,0); }}>Alle diensten bekijken</GoldBtn>
            </div>
          )}
        </div>
      </section>

      {/* Video showcase */}
      <section style={{ background: P.ink, padding: G.sec }}>
        <div style={G.cont}>
          <Reveal>
            <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 1fr', gap: mob ? 24 : 80, alignItems: 'center', marginBottom: mob ? 24 : 56 }}>
              <div>
                <Tag light>Bekijk ons werk</Tag>
                <h2 style={{ ...G.h2l, fontSize: mob ? 24 : 38 }}>Prachtige resultaten, vakkundig afgewerkt.</h2>
              </div>
              <p style={G.pl}>Elk project is uniek. Van interieur tot exterieur, van badkamer tot volledige verbouwing — de kwaliteit van de afwerking is altijd ons visitekaartje.</p>
            </div>
          </Reveal>
          <Reveal delay={100}>
            <div style={{ position: 'relative', aspectRatio: mob ? '16/10' : '16/8', overflow: 'hidden', cursor: 'pointer' }}
              onClick={() => setVideoOpen(true)}>
              <img src={MEDIA.heroPoster} alt="Bekijk ons werk" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform 0.6s' }}
                onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.03)'}
                onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'} />
              <div style={{ position: 'absolute', inset: 0, background: 'rgba(26,22,18,0.45)' }}></div>
              <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 16 }}>
                <div style={{ width: 72, height: 72, borderRadius: '50%', border: `1px solid rgba(250,246,239,0.4)`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M7 4L16 10L7 16V4Z" fill="white"/></svg>
                </div>
                <span style={{ fontFamily:"'DM Mono',monospace", fontSize: 10, color: 'rgba(250,246,239,0.6)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>Bekijk de video</span>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Werkwijze */}
      <section style={{ background: P.parch, padding: G.sec }}>
        <div style={G.cont}>
          <Reveal>
            <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '5fr 7fr', gap: mob ? 32 : 80, alignItems: 'start' }}>
              <div style={mob ? {} : { position: 'sticky', top: 100 }}>
                <Tag>Onze aanpak</Tag>
                <h2 style={{ ...G.h2, marginBottom: 20 }}>Heldere stappen, geen verrassingen.</h2>
                <p style={{ ...G.p, marginBottom: 36 }}>ASA Timmerwerken werkt met een doordachte volgorde zodat je altijd weet wat je mag verwachten.</p>
                {!mob && <GoldBtn onClick={() => { navigate('contact'); window.scrollTo(0,0); }}>Start jouw project</GoldBtn>}
              </div>
              <div>
                {STEPS.map((s, i) => (
                  <Reveal key={i} delay={i * 80}>
                    <div style={{ display: 'grid', gridTemplateColumns: '40px 1fr', gap: mob ? 16 : 24, padding: mob ? '24px 0' : '32px 0', borderBottom: i < STEPS.length - 1 ? `1px solid ${P.warmBdr}` : 'none' }}>
                      <div style={{ fontFamily:"'DM Mono',monospace", fontSize: 11, color: P.gold, paddingTop: 5 }}>0{i+1}</div>
                      <div>
                        <div style={{ ...G.h3, fontSize: 18, marginBottom: 8 }}>{s.title}</div>
                        <div style={{ ...G.p, fontSize: 15 }}>{s.body}</div>
                      </div>
                    </div>
                  </Reveal>
                ))}
                {mob && (
                  <div style={{ marginTop: 24 }}>
                    <GoldBtn onClick={() => { navigate('contact'); window.scrollTo(0,0); }}>Start jouw project</GoldBtn>
                  </div>
                )}
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Photo CTA banner */}
      <section style={{ position: 'relative', overflow: 'hidden' }}>
        <img src={MEDIA.cta} alt="" style={{ width: '100%', height: mob ? 400 : 520, objectFit: 'cover', display: 'block' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to right, rgba(26,22,18,0.90) 0%, rgba(26,22,18,0.5) 60%, rgba(26,22,18,0.2) 100%)' }}></div>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center' }}>
          <div style={{ ...G.cont, display: 'flex', flexDirection: 'column', gap: mob ? 20 : 32, maxWidth: 620 }}>
            <Reveal>
              <Tag light>Klaar om te starten?</Tag>
              <h2 style={{ ...G.h2l, fontSize: mob ? 24 : 46, marginBottom: mob ? 12 : 16 }}>Vraag vrijblijvend een offerte aan.</h2>
              <p style={{ ...G.pl, marginBottom: mob ? 20 : 32 }}>We denken graag met je mee over jouw project in Utrecht en omgeving. Geen verplichtingen, gewoon een goed gesprek.</p>
              <div style={{ display: 'flex', gap: 12, flexDirection: mob ? 'column' : 'row', alignItems: 'flex-start' }}>
                <GoldBtn onClick={() => { navigate('contact'); window.scrollTo(0,0); }}>Offerte aanvragen</GoldBtn>
                <GoldBtn outline onClick={() => { navigate('over'); window.scrollTo(0,0); }}>Over ons</GoldBtn>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </div>
  );
}

// ── OVER ONS ─────────────────────────────────────────────────
function OverOnsPage({ navigate }) {
  const { mob, G } = useG();
  const [openFaq, setOpenFaq] = React.useState(null);

  return (
    <div>
      {/* Hero */}
      <VideoBg src={MEDIA.workVideo} poster={MEDIA.overOns} overlay={0.65}>
        <div style={{ minHeight: mob ? 420 : 540, display: 'flex', alignItems: 'flex-end', paddingBottom: mob ? 48 : 72, paddingTop: mob ? 90 : 140 }}>
          <div style={G.cont}>
            <Reveal><Tag light>Over ons</Tag></Reveal>
            <Reveal delay={80}><h1 style={{ ...G.h1l, maxWidth: 600 }}>Vakmanschap als fundament.</h1></Reveal>
          </div>
        </div>
      </VideoBg>

      {/* Intro */}
      <section style={{ background: P.parch, padding: G.sec }}>
        <div style={{ ...G.cont, display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 1fr', gap: G.gap2 }}>
          <Reveal>
            <h2 style={{ ...G.h2, marginBottom: 24 }}>Een bouwpartner die meedenkt van idee tot nette oplevering.</h2>
            <p style={{ ...G.p, marginBottom: 20 }}>ASA Timmerwerken is opgericht vanuit de overtuiging dat bouwen en verbouwen helder en rustig kan verlopen. Meer dan 30 jaar ervaring, honderden projecten en een vaste basis in Utrecht.</p>
            <p style={{ ...G.p, marginBottom: 36 }}>We geloven in korte communicatielijnen en transparante afspraken. Niet alleen bouwen, maar zorgen dat het eindresultaat rustig, netjes en duurzaam aanvoelt.</p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <GoldBtn onClick={() => { navigate('contact'); window.scrollTo(0,0); }}>Offerte aanvragen</GoldBtn>
              <GoldBtn outline dark onClick={() => { navigate('diensten'); window.scrollTo(0,0); }}>Onze diensten</GoldBtn>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: P.warmBdr }}>
              {[['Heldere communicatie','Korte lijnen, duidelijke afspraken en een planning die overzicht geeft.'],['Strakke afwerking','Het eindresultaat voelt rustig, netjes en duurzaam aan.'],['Meedenken','Oplossingen die passen bij woning, lichtinval, gebruik en budget.'],['Betrouwbaar','Van opname tot oplevering met aandacht voor elk detail.']].map(([t,b],i) => (
                <div key={i} style={{ background: '#fff', padding: mob ? 20 : 28 }}>
                  <div style={{ fontFamily:"'DM Mono',monospace", fontSize: 10, color: P.gold, marginBottom: 12, letterSpacing: '0.1em' }}>0{i+1}</div>
                  <div style={{ fontFamily:"'Syne',sans-serif", fontSize: 14, fontWeight: 600, color: P.ink, marginBottom: 8 }}>{t}</div>
                  <div style={{ fontSize: 13, color: '#6A6058', lineHeight: 1.7 }}>{b}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* Stats */}
      <section style={{ background: P.ink }}>
        <div style={{ ...G.cont, display: 'grid', gridTemplateColumns: mob ? '1fr' : 'repeat(3,1fr)', gap: 1, background: mob ? P.ink : P.ink3 }}>
          {[['30+','Jaar ervaring','Opgericht midden jaren negentig met een focus op kwaliteit boven kwantiteit.'],['100+','Afgeronde projecten','Van kleine renovatie tot complete verbouwing, steeds met dezelfde toewijding.'],['Utrecht','Werkgebied','Actief in Utrecht en alle omliggende gemeenten. Thuis in de regio.']].map(([n,l,d]) => (
            <Reveal key={l}>
              <div style={{ background: P.ink, padding: mob ? '32px 0' : '56px 40px', borderBottom: mob ? `1px solid ${P.ink3}` : 'none' }}>
                <div style={{ fontFamily:"'Syne',sans-serif", fontSize: n.includes('+') ? (mob ? 40 : 56) : (mob ? 24 : 32), fontWeight: 800, color: '#FAF6EF', lineHeight: 1, marginBottom: 8 }}>
                  {n.includes('+') ? <>{n.replace('+','')}<span style={{color:P.gold}}>+</span></> : n}
                </div>
                <div style={{ fontSize: 11, color: P.gold, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 12 }}>{l}</div>
                <div style={{ fontSize: 13, color: P.warmMid, lineHeight: 1.7 }}>{d}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* FAQ */}
      <section style={{ background: '#fff', padding: G.sec }}>
        <div style={{ maxWidth: 820, margin: '0 auto', padding: mob ? '0 20px' : '0 48px' }}>
          <Reveal>
            <Tag>Veelgestelde vragen</Tag>
            <h2 style={{ ...G.h2, marginBottom: mob ? 32 : 56 }}>Alles wat je wilt weten.</h2>
          </Reveal>
          {FAQS.map((f, i) => (
            <Reveal key={i} delay={i * 40}>
              <div style={{ borderTop: `1px solid ${P.warmBdr}`, ...(i === FAQS.length - 1 ? { borderBottom: `1px solid ${P.warmBdr}` } : {}) }}>
                <button onClick={() => setOpenFaq(openFaq === i ? null : i)}
                  style={{ width: '100%', textAlign: 'left', background: 'none', border: 'none', cursor: 'pointer', padding: '24px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16 }}>
                  <span style={{ fontFamily:"'Syne',sans-serif", fontSize: mob ? 15 : 17, fontWeight: 600, color: P.ink }}>{f.q}</span>
                  <span style={{ color: P.gold, fontSize: 24, flexShrink: 0, display: 'inline-block', transition: 'transform 0.25s', transform: openFaq === i ? 'rotate(45deg)' : 'none', lineHeight: 1 }}>+</span>
                </button>
                {openFaq === i && <div style={{ fontSize: 15, color: '#6A6058', lineHeight: 1.8, paddingBottom: 28 }}>{f.a}</div>}
              </div>
            </Reveal>
          ))}
        </div>
      </section>
    </div>
  );
}

// ── DIENSTEN ─────────────────────────────────────────────────
function DienstenPage({ navigate }) {
  const { mob, G } = useG();

  return (
    <div>
      <VideoBg src={MEDIA.paintVideo} poster={MEDIA.aanbouw} overlay={0.70}>
        <div style={{ minHeight: mob ? 400 : 480, display: 'flex', alignItems: 'flex-end', paddingBottom: mob ? 48 : 72, paddingTop: mob ? 90 : 140 }}>
          <div style={G.cont}>
            <Reveal><Tag light>Diensten</Tag></Reveal>
            <Reveal delay={80}><h1 style={{ ...G.h1l, maxWidth: 560, marginBottom: 16 }}>Wat kunnen we voor je bouwen?</h1></Reveal>
            <Reveal delay={160}><p style={{ ...G.pl, maxWidth: 440 }}>Van kleine renovatie tot complete verbouwing — elk project met dezelfde aandacht en kwaliteit.</p></Reveal>
          </div>
        </div>
      </VideoBg>

      <section style={{ background: '#fff' }}>
        {SERVICES.map((s, i) => (
          <Reveal key={s.slug}>
            <div style={{ borderBottom: `1px solid ${P.sand}` }}>
              <div style={{ ...G.cont, display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 1fr', gap: mob ? 24 : 80, alignItems: 'center', padding: mob ? `48px 20px` : `80px 48px` }}>
                <div style={{ order: mob ? 2 : (i % 2 !== 0 ? 2 : 1) }}>
                  <div style={{ fontFamily:"'DM Mono',monospace", fontSize: 10, color: P.gold, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 20 }}>{s.num} — Dienst</div>
                  <h2 style={{ ...G.h2, fontSize: mob ? 24 : 34, marginBottom: 20 }}>{s.title}</h2>
                  <p style={{ ...G.p, marginBottom: 32 }}>{s.long}</p>
                  <GoldBtn onClick={() => { navigate('dienst-detail'); window.scrollTo(0,0); }}>Bekijk deze dienst</GoldBtn>
                </div>
                <div style={{ order: mob ? 1 : (i % 2 !== 0 ? 1 : 2), overflow: 'hidden' }}>
                  <img src={s.img()} alt={s.title} style={{ width: '100%', aspectRatio: '4/3', objectFit: 'cover', display: 'block', transition: 'transform 0.6s' }}
                    onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.04)'}
                    onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'} />
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </section>

      <section style={{ background: P.parch, padding: G.secSm }}>
        <div style={{ ...G.cont, display: 'flex', justifyContent: mob ? 'flex-start' : 'space-between', alignItems: mob ? 'flex-start' : 'center', gap: 24, flexDirection: mob ? 'column' : 'row', flexWrap: 'wrap' }}>
          <Reveal>
            <h2 style={{ ...G.h2, fontSize: mob ? 22 : 30, marginBottom: 10 }}>Twijfel je welke dienst past?</h2>
            <p style={G.p}>We denken graag met je mee. Neem contact op voor een vrijblijvend gesprek.</p>
          </Reveal>
          <GoldBtn onClick={() => { navigate('contact'); window.scrollTo(0,0); }}>Neem contact op</GoldBtn>
        </div>
      </section>
    </div>
  );
}

// ── DIENST DETAIL ────────────────────────────────────────────
function DienstDetailPage({ navigate }) {
  const { mob, G } = useG();
  const s = SERVICES[0];
  const gallery = [MEDIA.gallery1, MEDIA.gallery2, MEDIA.gallery3, MEDIA.gallery4, MEDIA.gallery5, MEDIA.gallery6];
  const galleryLabels = ['Woonhuis Rotterdam-wijk, Utrecht','Uitbouw woonkeuken, Zeist','Extra verdieping, Utrecht','Serre-uitbouw, Houten','Kozijnen & uitbouw, Maarssen','Kantoor aan huis, Utrecht'];

  return (
    <div>
      {/* Hero with video */}
      <VideoBg src={MEDIA.heroVideo} poster={s.img()} overlay={0.60}>
        <div style={{ minHeight: mob ? 460 : 580, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', paddingBottom: mob ? 48 : 72, paddingTop: mob ? 90 : 140 }}>
          <div style={G.cont}>
            <button onClick={() => { navigate('diensten'); window.scrollTo(0,0); }} style={{ background: 'none', border: 'none', color: 'rgba(250,246,239,0.5)', fontSize: 11, cursor: 'pointer', marginBottom: 28, padding: 0, letterSpacing: '0.09em', textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 8 }}>← Alle diensten</button>
            <Reveal><Tag light>{s.num} — Dienst</Tag></Reveal>
            <Reveal delay={80}><h1 style={{ ...G.h1l, maxWidth: 600, marginBottom: 16 }}>{s.title}</h1></Reveal>
            <Reveal delay={160}><p style={{ ...G.pl, maxWidth: 440, marginBottom: 32 }}>{s.short}</p>
            <GoldBtn onClick={() => { navigate('contact'); window.scrollTo(0,0); }}>Offerte aanvragen</GoldBtn></Reveal>
          </div>
        </div>
      </VideoBg>

      {/* Content */}
      <section style={{ background: P.parch, padding: G.sec }}>
        <div style={{ ...G.cont, display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 1fr', gap: G.gap2 }}>
          <Reveal>
            <Tag>Wat je krijgt</Tag>
            <h2 style={{ ...G.h2, fontSize: mob ? 24 : 34, marginBottom: 24 }}>Meer ruimte, meer licht — aangebouwd op maat.</h2>
            <p style={{ ...G.p, marginBottom: 16 }}>{s.long}</p>
            <p style={G.p}>We ontwerpen mee, denken na over lichtinval en gebruik, en leveren op met een nette afwerking die naadloos aansluit op het bestaande pand.</p>
          </Reveal>
          <Reveal delay={100}>
            <div style={{ fontSize: 11, color: P.warmMid, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 24 }}>Inbegrepen in het traject</div>
            {['Intakegesprek en inmeting op locatie','Uitgewerkt budgetvoorstel zonder verborgen kosten','Coördinatie van vergunningen indien nodig','Uitvoering inclusief fundering en dakwerk','Afwerking passend bij de bestaande architectuur','Nette oplevering met eindcontrole'].map((item, i) => (
              <div key={i} style={{ display: 'flex', gap: 20, padding: '16px 0', borderBottom: `1px solid ${P.warmBdr}`, alignItems: 'flex-start' }}>
                <span style={{ fontFamily:"'DM Mono',monospace", fontSize: 10, color: P.gold, paddingTop: 3, flexShrink: 0 }}>0{i+1}</span>
                <span style={{ fontSize: 15, color: P.ink, lineHeight: 1.55 }}>{item}</span>
              </div>
            ))}
          </Reveal>
        </div>
      </section>

      {/* Gallery */}
      <section style={{ background: '#fff', padding: G.sec }}>
        <div style={G.cont}>
          <Reveal>
            <Tag>Realisaties</Tag>
            <h2 style={{ ...G.h2, marginBottom: mob ? 24 : 48 }}>Uitgevoerde aanbouwprojecten.</h2>
          </Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : 'repeat(3,1fr)', gap: 3 }}>
            {gallery.map((src, i) => (
              <Reveal key={i} delay={i * 60}>
                <div style={{ position: 'relative', overflow: 'hidden', aspectRatio: '4/3' }}>
                  <img src={src} alt={galleryLabels[i]} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform 0.6s' }}
                    onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.06)'; e.currentTarget.nextSibling.style.opacity = '1'; }}
                    onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.nextSibling.style.opacity = '0'; }} />
                  <div style={{ position: 'absolute', inset: 0, background: 'rgba(26,22,18,0.55)', opacity: 0, transition: 'opacity 0.3s', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: 20, pointerEvents: 'none' }}>
                    <div style={{ fontFamily:"'Syne',sans-serif", fontSize: 13, fontWeight: 600, color: '#FAF6EF' }}>{galleryLabels[i]}</div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Related */}
      <section style={{ background: P.parch, padding: G.secSm }}>
        <div style={G.cont}>
          <Reveal>
            <Tag>Meer diensten</Tag>
            <h2 style={{ ...G.h2, fontSize: mob ? 22 : 30, marginBottom: mob ? 24 : 40 }}>Misschien ook interessant.</h2>
          </Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : 'repeat(3,1fr)', gap: 3 }}>
            {SERVICES.slice(1).map((sv, i) => (
              <Reveal key={sv.slug} delay={i * 70}>
                <div style={{ position: 'relative', overflow: 'hidden', cursor: 'pointer', aspectRatio: '4/3' }}
                  onClick={() => window.scrollTo(0,0)}>
                  <img src={sv.img()} alt={sv.title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform 0.6s' }}
                    onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.06)'}
                    onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'} />
                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(26,22,18,0.78) 0%, rgba(26,22,18,0.1) 55%)' }}></div>
                  <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '20px 24px' }}>
                    <div style={{ fontFamily:"'DM Mono',monospace", fontSize: 10, color: P.gold, marginBottom: 6 }}>{sv.num}</div>
                    <div style={{ fontFamily:"'Syne',sans-serif", fontSize: 16, fontWeight: 600, color: '#FAF6EF' }}>{sv.title}</div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ── CONTACT ──────────────────────────────────────────────────
function ContactPage() {
  const { mob, G } = useG();
  const [form, setForm] = React.useState({ naam:'', tel:'', email:'', type:'', bericht:'' });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);

  const validate = () => {
    const e = {};
    if (!form.naam.trim()) e.naam = 'Vul je naam in';
    if (!/\S+@\S+\.\S+/.test(form.email)) e.email = 'Geldig e-mailadres vereist';
    if (!form.type) e.type = 'Selecteer een type project';
    if (!form.bericht.trim()) e.bericht = 'Omschrijf je project';
    return e;
  };

  const submit = e => { e.preventDefault(); const er = validate(); setErrors(er); if (!Object.keys(er).length) setSent(true); };

  const inp = (err) => ({ width:'100%', fontFamily:"'DM Sans',sans-serif", fontSize:15, background:'#fff', color:P.ink, border:`1px solid ${err ? '#B05A3A' : P.warmBdr}`, padding:'13px 16px', outline:'none', boxSizing:'border-box', transition:'border 0.15s', fontWeight: 300 });

  return (
    <div>
      <VideoBg src={MEDIA.workVideo} poster={MEDIA.overOns} overlay={0.75}>
        <div style={{ minHeight: mob ? 380 : 420, display: 'flex', alignItems: 'flex-end', paddingBottom: mob ? 48 : 72, paddingTop: mob ? 90 : 140 }}>
          <div style={G.cont}>
            <Reveal><Tag light>Contact</Tag></Reveal>
            <Reveal delay={80}><h1 style={{ ...G.h1l, maxWidth: 560, marginBottom: 16 }}>Laten we het over jouw project hebben.</h1></Reveal>
            <Reveal delay={160}><p style={{ ...G.pl, maxWidth: 440 }}>Vraag vrijblijvend een offerte aan. Actief in Utrecht en omgeving.</p></Reveal>
          </div>
        </div>
      </VideoBg>

      <section style={{ background: P.parch, padding: G.sec }}>
        <div style={{ ...G.cont, display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 1.7fr', gap: mob ? 32 : 80 }}>

          {/* Contact info */}
          <Reveal>
            <div style={{ display: 'flex', flexDirection: 'column', gap: mob ? 20 : 32 }}>
              {[['Telefoon','+31 6 30133754','tel:+31630133754'],['E-mail','asatimmerwerken@gmail.com','mailto:asatimmerwerken@gmail.com'],['Adres','Pahud de Mortangesdreef 50\n3562 AB Utrecht',null],['Werkgebied','Utrecht en omgeving',null]].map(([l,v,h]) => (
                <div key={l}>
                  <div style={{ fontSize: 10, color: P.warmMid, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 6 }}>{l}</div>
                  {h ? <a href={h} style={{ fontSize: 16, color: P.ink, fontWeight: 500, textDecoration: 'none' }}>{v}</a>
                     : <div style={{ fontSize: 16, color: P.ink, fontWeight: 500, whiteSpace: 'pre-line' }}>{v}</div>}
                </div>
              ))}
            </div>
            <div style={{ marginTop: mob ? 24 : 48, background: P.ink, padding: mob ? '20px 24px' : '28px 32px' }}>
              <div style={{ fontFamily:"'Syne',sans-serif", fontSize: 16, fontWeight: 600, color: '#FAF6EF', marginBottom: 8 }}>Snel antwoord nodig?</div>
              <div style={{ fontSize: 13, color: P.warmMid, lineHeight: 1.7, marginBottom: 20 }}>Bel direct. We zijn bereikbaar op werkdagen van 08:00–17:00.</div>
              <a href="tel:+31630133754" style={{ display: 'inline-flex', background: P.gold, color: '#fff', padding: '11px 24px', fontSize: 12, textDecoration: 'none', letterSpacing: '0.09em', textTransform: 'uppercase', fontFamily:"'DM Sans',sans-serif" }}>Bel direct</a>
            </div>
          </Reveal>

          {/* Form */}
          <Reveal delay={100}>
            <div style={{ background: '#fff', padding: mob ? 24 : 48, boxShadow: '0 2px 32px rgba(28,25,22,0.07)' }}>
              {sent ? (
                <div style={{ textAlign: 'center', padding: mob ? '32px 0' : '48px 0' }}>
                  <div style={{ width: 64, height: 64, borderRadius: '50%', background: P.gold, margin: '0 auto 24px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </div>
                  <h3 style={{ fontFamily:"'Syne',sans-serif", fontSize: 24, fontWeight: 700, color: P.ink, marginBottom: 12 }}>Aanvraag ontvangen</h3>
                  <p style={{ fontSize: 15, color: '#6A6058', lineHeight: 1.75, maxWidth: 340, margin: '0 auto 32px' }}>
                    Bedankt, {form.naam.split(' ')[0]}. We nemen binnen 1–2 werkdagen contact met je op.
                  </p>
                  <button onClick={() => { setSent(false); setForm({naam:'',tel:'',email:'',type:'',bericht:''}); setErrors({}); }} style={{ background: 'none', border: `1px solid ${P.warmBdr}`, color: P.warmMid, padding: '11px 24px', cursor: 'pointer', fontSize: 12, letterSpacing: '0.09em', textTransform: 'uppercase', fontFamily:"'DM Sans',sans-serif" }}>Nieuwe aanvraag</button>
                </div>
              ) : (
                <form onSubmit={submit} noValidate style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
                  <div style={{ marginBottom: 8 }}>
                    <Tag>Offerte aanvragen</Tag>
                    <h3 style={{ ...G.h3, fontSize: 21 }}>Vertel ons over je project</h3>
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 1fr', gap: 14 }}>
                    <div>
                      <label style={{ fontSize: 11, color: P.warmMid, marginBottom: 6, display: 'block', letterSpacing: '0.09em', textTransform: 'uppercase' }}>Naam *</label>
                      <input style={inp(errors.naam)} value={form.naam} onChange={e => setForm({...form, naam:e.target.value})} placeholder="Jan de Vries"
                        onFocus={e => e.target.style.borderColor = P.gold} onBlur={e => e.target.style.borderColor = errors.naam ? '#B05A3A' : P.warmBdr} />
                      {errors.naam && <div style={{ fontSize: 11, color: '#B05A3A', marginTop: 4 }}>{errors.naam}</div>}
                    </div>
                    <div>
                      <label style={{ fontSize: 11, color: P.warmMid, marginBottom: 6, display: 'block', letterSpacing: '0.09em', textTransform: 'uppercase' }}>Telefoon</label>
                      <input style={inp()} value={form.tel} onChange={e => setForm({...form, tel:e.target.value})} placeholder="+31 6 ..."
                        onFocus={e => e.target.style.borderColor = P.gold} onBlur={e => e.target.style.borderColor = P.warmBdr} />
                    </div>
                  </div>
                  <div>
                    <label style={{ fontSize: 11, color: P.warmMid, marginBottom: 6, display: 'block', letterSpacing: '0.09em', textTransform: 'uppercase' }}>E-mailadres *</label>
                    <input type="email" style={inp(errors.email)} value={form.email} onChange={e => setForm({...form, email:e.target.value})} placeholder="jan@voorbeeld.nl"
                      onFocus={e => e.target.style.borderColor = P.gold} onBlur={e => e.target.style.borderColor = errors.email ? '#B05A3A' : P.warmBdr} />
                    {errors.email && <div style={{ fontSize: 11, color: '#B05A3A', marginTop: 4 }}>{errors.email}</div>}
                  </div>
                  <div>
                    <label style={{ fontSize: 11, color: P.warmMid, marginBottom: 6, display: 'block', letterSpacing: '0.09em', textTransform: 'uppercase' }}>Type project *</label>
                    <select style={{ ...inp(errors.type), color: form.type ? P.ink : P.warmMid }} value={form.type} onChange={e => setForm({...form, type:e.target.value})}>
                      <option value="">Selecteer type</option>
                      {SERVICES.map(sv => <option key={sv.slug} value={sv.slug}>{sv.title}</option>)}
                      <option value="anders">Anders</option>
                    </select>
                    {errors.type && <div style={{ fontSize: 11, color: '#B05A3A', marginTop: 4 }}>{errors.type}</div>}
                  </div>
                  <div>
                    <label style={{ fontSize: 11, color: P.warmMid, marginBottom: 6, display: 'block', letterSpacing: '0.09em', textTransform: 'uppercase' }}>Projectomschrijving *</label>
                    <textarea style={{ ...inp(errors.bericht), height: 112, resize: 'none' }} value={form.bericht} onChange={e => setForm({...form, bericht:e.target.value})} placeholder="Omschrijf uw project kort..."
                      onFocus={e => e.target.style.borderColor = P.gold} onBlur={e => e.target.style.borderColor = errors.bericht ? '#B05A3A' : P.warmBdr} />
                    {errors.bericht && <div style={{ fontSize: 11, color: '#B05A3A', marginTop: 4 }}>{errors.bericht}</div>}
                  </div>
                  <GoldBtn submit>Offerte aanvragen</GoldBtn>
                </form>
              )}
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

// ── CALCULATOR ───────────────────────────────────────────────
// Realistische richtprijzen voor de regio Utrecht (incl. materiaal + arbeid,
// excl. btw). Indicatief — de definitieve prijs volgt na opname op locatie.
const CALC_TYPES = [
  { id: 'aanbouw',   label: 'Aanbouw / uitbouw',  base: 2250, blurb: 'Extra woonruimte op de begane grond.' },
  { id: 'renovatie', label: 'Complete renovatie', base: 1450, blurb: 'Bestaande ruimte volledig vernieuwen.' },
  { id: 'badkamer',  label: 'Badkamer',           base: 1950, blurb: 'Inclusief tegelwerk, sanitair en afvoer.' },
  { id: 'zolder',    label: 'Zolder / verdieping', base: 1150, blurb: 'Onbenutte ruimte bewoonbaar maken.' },
];

const CALC_FINISH = [
  { id: 'casco',     label: 'Casco',          factor: 1.0,  blurb: 'Wind- en waterdicht, zelf afwerken.' },
  { id: 'standaard', label: 'Netjes afgewerkt', factor: 1.18, blurb: 'Instapklaar, nette standaardmaterialen.' },
  { id: 'luxe',      label: 'Luxe maatwerk',  factor: 1.38, blurb: 'Hoogwaardige materialen en maatwerk.' },
];

const CALC_EXTRAS = [
  { id: 'opening',  label: 'Constructieve doorbraak / stalen ligger', add: 6500, weeks: 1 },
  { id: 'pui',      label: 'Grote schuifpui of veel glas',            add: 7500, weeks: 1 },
  { id: 'daklicht', label: 'Daklicht of lichtstraat',                 add: 4200, weeks: 1 },
  { id: 'vloer',    label: 'Vloerverwarming',                         perM2: 55, weeks: 0 },
  { id: 'gevel',    label: 'Luxe gevelbekleding',                     add: 4800, weeks: 0 },
];

const eur = new Intl.NumberFormat('nl-NL', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 });
const num1 = new Intl.NumberFormat('nl-NL', { minimumFractionDigits: 0, maximumFractionDigits: 1 });
const round500 = (v) => Math.round(v / 500) * 500;

function CalculatorPage({ navigate }) {
  const { mob, G } = useG();
  const [type, setType]     = React.useState('aanbouw');
  const [finish, setFinish] = React.useState('standaard');
  const [width, setWidth]   = React.useState(5);
  const [depth, setDepth]   = React.useState(4);
  const [extras, setExtras] = React.useState([]);
  const [form, setForm]     = React.useState({ naam: '', email: '', tel: '', locatie: '', bericht: '' });
  const [errors, setErrors] = React.useState({});
  const [status, setStatus] = React.useState(null); // null | 'sending' | 'sent' | 'error'

  const toggleExtra = (id) =>
    setExtras((p) => (p.includes(id) ? p.filter((x) => x !== id) : [...p, id]));

  // ── Berekening ──────────────────────────────────────────────
  const calc = React.useMemo(() => {
    const t = CALC_TYPES.find((x) => x.id === type);
    const f = CALC_FINISH.find((x) => x.id === finish);
    const area = Math.max(width * depth, 0);
    const chosen = CALC_EXTRAS.filter((e) => extras.includes(e.id));

    const baseConstruction = area * t.base * f.factor;
    const extrasTotal = chosen.reduce((s, e) => s + (e.add || 0) + (e.perM2 ? e.perM2 * area : 0), 0);
    const extraWeeks = chosen.reduce((s, e) => s + (e.weeks || 0), 0);

    const low  = round500(baseConstruction + extrasTotal);
    const high = round500(low * 1.16 + area * 90);
    const perM2 = area > 0 ? Math.round(low / area) : 0;
    const weeks = area > 0 ? Math.max(3, Math.round(2.5 + area * 0.22 + extraWeeks)) : 0;

    return { t, f, area, chosen, low, high, perM2, weeks };
  }, [type, finish, width, depth, extras]);

  // ── Verzenden naar CRM ──────────────────────────────────────
  const submit = async (e) => {
    e.preventDefault();
    const err = {};
    if (!form.naam.trim()) err.naam = 'Vul je naam in';
    if (!/\S+@\S+\.\S+/.test(form.email) && !form.tel.trim()) err.email = 'Vul e-mail of telefoon in';
    setErrors(err);
    if (Object.keys(err).length) return;

    setStatus('sending');
    const payload = {
      locatie: form.locatie || '—',
      type: calc.t.label,
      afmetingen: `${num1.format(width)} × ${num1.format(depth)} m (${num1.format(calc.area)} m²)`,
      afwerking: calc.f.label,
      extras: calc.chosen.map((x) => x.label),
      indicatie: `${eur.format(calc.low)} – ${eur.format(calc.high)} (excl. btw)`,
      prijs_per_m2: `${eur.format(calc.perM2)} / m²`,
      bouwtijd_weken: calc.weeks,
      toelichting: form.bericht || '—',
    };
    try {
      const res = await fetch('api/api.php?action=lead.create', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: form.naam,
          email: form.email,
          phone: form.tel,
          source: 'website-calculator',
          amount: calc.low,
          payload,
        }),
      });
      const data = await res.json().catch(() => ({}));
      setStatus(res.ok && data.ok ? 'sent' : 'error');
    } catch (_) {
      setStatus('error');
    }
  };

  // ── Gedeelde stijlen ────────────────────────────────────────
  const card = { background: '#fff', border: `1px solid ${P.warmBdr}`, padding: mob ? 20 : 28 };
  const lbl = { fontFamily: "'DM Mono',monospace", fontSize: 10, color: P.warmMid, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 14, display: 'block' };
  const inp = (err) => ({ width: '100%', fontFamily: "'DM Sans',sans-serif", fontSize: 15, background: '#fff', color: P.ink, border: `1px solid ${err ? '#B05A3A' : P.warmBdr}`, padding: '12px 14px', outline: 'none', boxSizing: 'border-box', fontWeight: 300 });

  const ChoiceBtn = ({ active, onClick, title, sub }) => {
    const [hov, setHov] = React.useState(false);
    return (
      <button type="button" onClick={onClick}
        onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
        style={{
          textAlign: 'left', cursor: 'pointer', padding: '14px 16px', width: '100%',
          background: active ? P.ink : (hov ? P.linen : '#fff'),
          border: `1px solid ${active ? P.ink : P.warmBdr}`,
          transition: 'all 0.18s', display: 'block',
        }}>
        <div style={{ fontFamily: "'Syne',sans-serif", fontSize: 14, fontWeight: 600, color: active ? '#FAF6EF' : P.ink, marginBottom: 3 }}>{title}</div>
        {sub && <div style={{ fontSize: 12, color: active ? 'rgba(250,246,239,0.6)' : P.warmMid, lineHeight: 1.45 }}>{sub}</div>}
      </button>
    );
  };

  const Slider = ({ label, value, set, min, max, step }) => (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
        <span style={{ fontSize: 13, color: P.ink, fontWeight: 500 }}>{label}</span>
        <span style={{ fontFamily: "'DM Mono',monospace", fontSize: 15, color: P.goldDk, fontWeight: 500 }}>{num1.format(value)} m</span>
      </div>
      <input type="range" min={min} max={max} step={step} value={value}
        onChange={(e) => set(Number(e.target.value))}
        style={{ width: '100%', accentColor: P.gold, cursor: 'pointer' }} />
    </div>
  );

  return (
    <div>
      {/* Hero */}
      <VideoBg src={MEDIA.paintVideo} poster={MEDIA.aanbouw} overlay={0.74}>
        <div style={{ minHeight: mob ? 360 : 420, display: 'flex', alignItems: 'flex-end', paddingBottom: mob ? 44 : 64, paddingTop: mob ? 90 : 140 }}>
          <div style={G.cont}>
            <Reveal><Tag light>Prijsindicatie</Tag></Reveal>
            <Reveal delay={80}><h1 style={{ ...G.h1l, maxWidth: 620, marginBottom: 16 }}>Wat kost jouw project ongeveer?</h1></Reveal>
            <Reveal delay={160}><p style={{ ...G.pl, maxWidth: 460 }}>Stel je project samen en zie direct een richtprijs en bouwtijd. Vrijblijvend en zonder verplichtingen.</p></Reveal>
          </div>
        </div>
      </VideoBg>

      {/* Calculator */}
      <section style={{ background: P.parch, padding: G.sec }}>
        <div style={{ ...G.cont, display: 'grid', gridTemplateColumns: mob ? '1fr' : '1.4fr 1fr', gap: mob ? 32 : 56, alignItems: 'start' }}>

          {/* ── Linker kolom: keuzes ── */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: mob ? 20 : 28 }}>

            {/* Type */}
            <div style={card}>
              <span style={lbl}>1 — Type project</span>
              <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 1fr', gap: 8 }}>
                {CALC_TYPES.map((t) => (
                  <ChoiceBtn key={t.id} active={type === t.id} onClick={() => setType(t.id)} title={t.label} sub={t.blurb} />
                ))}
              </div>
            </div>

            {/* Afmetingen */}
            <div style={card}>
              <span style={lbl}>2 — Afmetingen</span>
              <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 1fr', gap: mob ? 18 : 28 }}>
                <Slider label="Breedte" value={width} set={setWidth} min={2} max={12} step={0.5} />
                <Slider label="Diepte"  value={depth} set={setDepth} min={2} max={10} step={0.5} />
              </div>
              <div style={{ marginTop: 18, paddingTop: 16, borderTop: `1px solid ${P.sand}`, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontSize: 13, color: P.warmMid }}>Oppervlakte</span>
                <span style={{ fontFamily: "'Syne',sans-serif", fontSize: 22, fontWeight: 700, color: P.ink }}>{num1.format(calc.area)} m²</span>
              </div>
            </div>

            {/* Afwerking */}
            <div style={card}>
              <span style={lbl}>3 — Afwerkingsniveau</span>
              <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : 'repeat(3,1fr)', gap: 8 }}>
                {CALC_FINISH.map((f) => (
                  <ChoiceBtn key={f.id} active={finish === f.id} onClick={() => setFinish(f.id)} title={f.label} sub={f.blurb} />
                ))}
              </div>
            </div>

            {/* Extra's */}
            <div style={card}>
              <span style={lbl}>4 — Extra opties</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {CALC_EXTRAS.map((e) => {
                  const on = extras.includes(e.id);
                  const price = e.perM2 ? `${eur.format(e.perM2)}/m²` : `+ ${eur.format(e.add)}`;
                  return (
                    <button key={e.id} type="button" onClick={() => toggleExtra(e.id)}
                      style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, width: '100%', textAlign: 'left', cursor: 'pointer', padding: '13px 16px', background: on ? P.linen : '#fff', border: `1px solid ${on ? P.gold : P.warmBdr}`, transition: 'all 0.18s' }}>
                      <span style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                        <span style={{ width: 18, height: 18, flexShrink: 0, border: `1px solid ${on ? P.gold : P.warmBdr}`, background: on ? P.gold : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                          {on && <svg width="11" height="11" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" /></svg>}
                        </span>
                        <span style={{ fontSize: 14, color: P.ink }}>{e.label}</span>
                      </span>
                      <span style={{ fontFamily: "'DM Mono',monospace", fontSize: 12, color: P.warmMid, whiteSpace: 'nowrap' }}>{price}</span>
                    </button>
                  );
                })}
              </div>
            </div>
          </div>

          {/* ── Rechter kolom: resultaat (sticky) ── */}
          <div style={mob ? {} : { position: 'sticky', top: 88 }}>
            <div style={{ background: P.ink, padding: mob ? 24 : 32 }}>
              <Tag light>Jouw richtprijs</Tag>
              <div style={{ fontFamily: "'Syne',sans-serif", fontSize: mob ? 30 : 38, fontWeight: 800, color: '#FAF6EF', lineHeight: 1.1, marginBottom: 4 }}>
                {eur.format(calc.low)}
                <span style={{ color: P.warmMid, fontWeight: 400 }}> – </span>
                {eur.format(calc.high)}
              </div>
              <div style={{ fontSize: 12, color: P.warmMid, marginBottom: 24 }}>Indicatie excl. btw · regio Utrecht</div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: P.ink3, marginBottom: 24 }}>
                {[['Oppervlakte', `${num1.format(calc.area)} m²`], ['Prijs per m²', eur.format(calc.perM2)], ['Bouwtijd', `± ${calc.weeks} wkn`], ['Afwerking', calc.f.label]].map(([k, v]) => (
                  <div key={k} style={{ background: P.ink, padding: '14px 16px' }}>
                    <div style={{ fontSize: 10, color: P.warmMid, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 5 }}>{k}</div>
                    <div style={{ fontFamily: "'Syne',sans-serif", fontSize: 16, fontWeight: 600, color: '#FAF6EF' }}>{v}</div>
                  </div>
                ))}
              </div>

              {calc.chosen.length > 0 && (
                <div style={{ marginBottom: 24 }}>
                  <div style={{ fontSize: 10, color: P.warmMid, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 10 }}>Inbegrepen extra's</div>
                  {calc.chosen.map((x) => (
                    <div key={x.id} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'rgba(250,246,239,0.8)', padding: '4px 0' }}>
                      <span style={{ color: P.gold }}>◆</span>{x.label}
                    </div>
                  ))}
                </div>
              )}

              {/* Contact / verzenden */}
              {status === 'sent' ? (
                <div style={{ textAlign: 'center', padding: '12px 0' }}>
                  <div style={{ width: 56, height: 56, borderRadius: '50%', background: P.gold, margin: '0 auto 16px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
                  </div>
                  <div style={{ fontFamily: "'Syne',sans-serif", fontSize: 20, fontWeight: 700, color: '#FAF6EF', marginBottom: 8 }}>Aanvraag verstuurd</div>
                  <p style={{ fontSize: 14, color: P.warmMid, lineHeight: 1.7 }}>Bedankt {form.naam.split(' ')[0]}. We nemen binnen 1–2 werkdagen contact met je op voor een opname op locatie.</p>
                </div>
              ) : (
                <form onSubmit={submit} noValidate style={{ display: 'flex', flexDirection: 'column', gap: 10, borderTop: `1px solid ${P.ink3}`, paddingTop: 22 }}>
                  <div style={{ fontSize: 13, color: 'rgba(250,246,239,0.85)', lineHeight: 1.6, marginBottom: 4 }}>
                    Ontvang deze berekening en een vrijblijvende offerte op maat:
                  </div>
                  <input style={inp(errors.naam)} value={form.naam} placeholder="Naam *"
                    onChange={(e) => setForm({ ...form, naam: e.target.value })} />
                  {errors.naam && <div style={{ fontSize: 11, color: '#E8A98F' }}>{errors.naam}</div>}
                  <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 1fr', gap: 10 }}>
                    <input style={inp(errors.email)} value={form.email} placeholder="E-mailadres"
                      onChange={(e) => setForm({ ...form, email: e.target.value })} />
                    <input style={inp(errors.email)} value={form.tel} placeholder="Telefoon"
                      onChange={(e) => setForm({ ...form, tel: e.target.value })} />
                  </div>
                  {errors.email && <div style={{ fontSize: 11, color: '#E8A98F' }}>{errors.email}</div>}
                  <input style={inp()} value={form.locatie} placeholder="Plaats (bijv. Utrecht)"
                    onChange={(e) => setForm({ ...form, locatie: e.target.value })} />
                  <textarea style={{ ...inp(), height: 70, resize: 'none' }} value={form.bericht} placeholder="Toelichting (optioneel)"
                    onChange={(e) => setForm({ ...form, bericht: e.target.value })} />
                  {status === 'error' && (
                    <div style={{ fontSize: 12, color: '#E8A98F', lineHeight: 1.5 }}>
                      Versturen lukte niet. Bel ons gerust op <a href="tel:+31630133754" style={{ color: P.gold }}>+31 6 30133754</a>.
                    </div>
                  )}
                  <GoldBtn submit>{status === 'sending' ? 'Bezig met versturen…' : 'Verstuur mijn aanvraag'}</GoldBtn>
                  <div style={{ fontSize: 11, color: P.warmMid, lineHeight: 1.5, textAlign: 'center' }}>
                    Richtprijs is indicatief. De exacte prijs volgt na opname op locatie.
                  </div>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* Uitleg / vertrouwen */}
      <section style={{ background: '#fff', padding: G.secSm }}>
        <div style={G.cont}>
          <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : 'repeat(3,1fr)', gap: mob ? 24 : 48 }}>
            {[
              ['Hoe komt deze prijs tot stand?', 'De richtprijs is gebaseerd op gangbare tarieven in de regio Utrecht: materiaal én arbeid, op basis van oppervlakte, afwerkingsniveau en gekozen opties.'],
              ['Waarom een prijsrange?', 'Elke situatie is anders. De bandbreedte houdt rekening met variatie in ondergrond, bereikbaarheid en detaillering. Na opname krijg je een vaste offerte.'],
              ['Wat is de volgende stap?', 'Stuur je berekening op. We plannen een vrijblijvende opname op locatie en werken daarna een heldere, vaste offerte uit — zonder verborgen kosten.'],
            ].map(([t, b], i) => (
              <Reveal key={i} delay={i * 80}>
                <div style={{ fontFamily: "'DM Mono',monospace", fontSize: 10, color: P.gold, letterSpacing: '0.14em', marginBottom: 14 }}>0{i + 1}</div>
                <h3 style={{ ...G.h3, fontSize: 18, marginBottom: 10 }}>{t}</h3>
                <p style={{ ...G.p, fontSize: 15 }}>{b}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { SERVICES, STEPS, FAQS, HomePage, OverOnsPage, DienstenPage, DienstDetailPage, ContactPage, CalculatorPage });
