// De Buurtkok — "Eetbaar Manifest" website

const V1Manifest = ({ width = 1280 }) => {
  const isMobile = width < 600;

  const partners = [
    { naam: 'LEADER', tekst: 'Stichting De Buurtkok ontvangt voor dit project een subsidie vanuit LEADER / GLB (SNN). Met deze ondersteuning werken wij aan het toegankelijk maken van gezonde voeding, het organiseren van sociale activiteiten en het versterken van gemeenschappen in Zuidoost Friesland. LEADER draagt daarmee bij aan duurzame, lokale initiatieven met maatschappelijke impact.\n\nDe steun vanuit LEADER maakt het mogelijk om onze activiteiten verder te ontwikkelen en toegankelijk te houden voor mensen met een kleine portemonnee, in samenwerking met lokale partners en vrijwilligers.' },
    { naam: 'Rabobank Foundation', tekst: 'De steun van Rabobank Foundation draagt bij aan de maatschappelijke impact van De Buurtkok. Met deze ondersteuning kan de stichting werken aan duurzame voedselinitiatieven en het toegankelijk maken van gezonde maaltijden voor kwetsbare doelgroepen.' },
    { naam: 'Stichting DOEN', tekst: 'Met steun van Stichting DOEN werkt De Buurtkok aan het project Zorg voor een vitale plattelandsgemeenschap. Deze ondersteuning maakt het mogelijk om te investeren in ontmoetingsplaatsen, educatie, vrijwilligers en duurzame voedselinitiatieven in de regio.' },
    { naam: 'Stichting Coöperatiekring Fryslân', tekst: 'Dankzij de bijdrage van Stichting Coöperatiekring Fryslân kan De Buurtkok structureel inzetten op kinderkookworkshops en voedingseducatie. Hiermee vergroten we kennis en bewustwording over gezonde voeding bij kinderen en hun ouders in Friesland.' },
    { naam: 'Gemeente Heerenveen', tekst: 'Dit project wordt mede mogelijk gemaakt door ondersteuning van gemeente Heerenveen. Dankzij deze samenwerking kan De Buurtkok bijdragen aan sociale verbinding, het tegengaan van eenzaamheid en het toegankelijk maken van gezonde voeding voor inwoners van de gemeente.' },
    { naam: 'Distributiecentrum Voedselbanken Fryslân', tekst: 'In samenwerking met het Distributiecentrum Voedselbanken Fryslân draagt De Buurtkok bij aan het beschikbaar maken van gezonde maaltijden voor mensen die afhankelijk zijn van de Voedselbank. Via deze samenwerking bereiken onze maaltijden kwetsbare huishoudens in de provincie.' },
    { naam: 'Caleidoscoop', tekst: 'In samenwerking met Caleidoscoop organiseert De Buurtkok sociale etentjes en activiteiten voor mensen die extra ondersteuning kunnen gebruiken. Deze samenwerking versterkt ontmoeting, participatie en betrokkenheid binnen de gemeenschap.' },
    { naam: 'Odd Fellows', tekst: 'Met ondersteuning van Odd Fellows werkt De Buurtkok aan het opzetten van lokale ontmoetingsplaatsen in buitendorpen. Deze plekken dragen bij aan sociale cohesie, inclusiviteit en het verminderen van eenzaamheid.' },
    { naam: 'Regiofonds', tekst: 'Dankzij de bijdrage van het Regiofonds kan De Buurtkok blijven werken aan projecten die gericht zijn op sociale cohesie, gezonde voeding en het versterken van gemeenschappen in Friesland.' },
    { naam: 'Friese Preventieaanpak', tekst: 'Binnen de Friese Preventieaanpak werkt De Buurtkok samen met diverse partners aan het bevorderen van gezonde voeding en het verkleinen van gezondheidsverschillen. De Buurtkok levert hieraan een bijdrage via maaltijden, educatie en sociale activiteiten, met speciale aandacht voor kwetsbare doelgroepen.' },
    { naam: 'Heerenveen Vitaal', tekst: 'In samenwerking met Heerenveen Vitaal zet De Buurtkok zich in voor een gezondere leefstijl en het verkleinen van gezondheidsverschillen. Gezonde voeding, ontmoeting en bewustwording vormen hierbij belangrijke pijlers.' },
    { naam: 'Vermilion', tekst: 'Met ondersteuning van Vermilion kan De Buurtkok investeren in maatschappelijke activiteiten die bijdragen aan leefbaarheid, gezondheid en sociale verbinding in de regio. Deze betrokkenheid helpt om initiatieven voor kwetsbare doelgroepen mogelijk te maken.' },
    { naam: 'Femme van der Schaaf', tekst: 'De Buurtkok werkt samen met Femme van der Schaaf op het gebied van maatschappelijke betrokkenheid en ondersteuning. Deze samenwerking draagt bij aan het realiseren van sociale initiatieven en het versterken van lokale netwerken rondom gezonde voeding en ontmoeting.' },
    { naam: 'Ekoplaza Heerenveen', tekst: 'Ekoplaza Heerenveen is een betrokken lokale partner van De Buurtkok. Dankzij deze samenwerking zijn gezonde, duurzame maaltijden toegankelijk voor een breder publiek en wordt de verbinding gelegd tussen lokale, biologische voeding en sociale impact.' },
  ];

  const navItems = ['Missie', 'Verhaal', 'Foodprint', 'Vrienden', 'Doneer'];

  return (
    <div style={{ background: '#FDFCF7', fontFamily: 'Assistant', color: '#1a1614', overflowX: 'hidden' }}>

      {/* NAV */}
      <header style={{
        position: 'sticky', top: 0, zIndex: 50,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: isMobile ? '14px 20px' : '20px 56px',
        background: 'rgba(253,252,247,.92)', backdropFilter: 'blur(8px)',
        borderBottom: '1px solid rgba(83,51,115,.1)'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <img src="assets/logo.png" alt="De Buurtkok" style={{ width: 44, height: 44, objectFit: 'contain' }} />
          <span style={{ fontFamily: 'Dosis', fontWeight: 700, fontSize: 18, color: '#533373', letterSpacing: '-.01em' }}>
            De Buurtkok
          </span>
        </div>
        {!isMobile && (
          <nav style={{ display: 'flex', gap: 32 }}>
            {navItems.map(item => (
              <a key={item} href={`#${item.toLowerCase()}`} style={{ fontSize: 14, fontWeight: 600, color: '#1a1614', textDecoration: 'none' }}>
                {item}
              </a>
            ))}
          </nav>
        )}
        <a href="#doneer" style={{
          background: '#533373', color: '#FDFCF7', padding: isMobile ? '8px 16px' : '11px 22px',
          borderRadius: 999, fontSize: 14, fontWeight: 700, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6
        }}>
          Doneer ♥
        </a>
      </header>

      {/* HERO */}
      <section style={{ position: 'relative', padding: isMobile ? '80px 20px' : '120px 56px', overflow: 'hidden', minHeight: isMobile ? 'auto' : 520 }}>
        {/* Achtergrond foto */}
        <img
          src="assets/hero-tafel.jpg"
          alt=""
          aria-hidden="true"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 40%' }}
        />
        {/* Crème overlay */}
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(105deg, rgba(253,252,247,.96) 0%, rgba(253,252,247,.92) 50%, rgba(253,252,247,.7) 100%)' }} />
        <div style={{ position: 'relative', zIndex: 2, maxWidth: 1100 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 14px', background: 'rgba(77,138,45,.12)', borderRadius: 999, marginBottom: 28 }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: '#4D8A2D', display: 'inline-block' }}></span>
            <span style={{ fontSize: 12, fontWeight: 600, color: '#386520', letterSpacing: '.06em', textTransform: 'uppercase' }}>Stichting · Oranjewoud · Sinds 2021</span>
          </div>
          <h1 style={{
            fontFamily: 'Dosis', fontWeight: 700,
            fontSize: isMobile ? 48 : 'clamp(64px, 9vw, 132px)',
            lineHeight: .92, letterSpacing: '-.025em',
            color: '#1a1614', margin: 0
          }}>
            Goed voor<br />
            <span style={{ color: '#533373' }}>elkaar.</span>
          </h1>
          <p style={{
            maxWidth: 640, fontSize: isMobile ? 17 : 21, lineHeight: 1.5, marginTop: 28,
            color: '#3a342f', fontWeight: 400
          }}>
            Wij vinden dat iedereen recht heeft op een voedzame maaltijd. Wij geloven dat met veel passie en liefde gezond eten bereikbaar moet zijn voor iedereen. Doe je mee?
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 36 }}>
            <a href="#doneer" style={{
              background: '#533373', color: '#FDFCF7', padding: '16px 28px', borderRadius: 999,
              fontSize: 15, fontWeight: 700, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8
            }}>
              Word vriend van De Buurtkok <span>→</span>
            </a>
            <a href="#missie" style={{
              background: 'transparent', color: '#1a1614', padding: '16px 28px', borderRadius: 999,
              fontSize: 15, fontWeight: 700, textDecoration: 'none',
              border: '1.5px solid rgba(26,22,20,.2)', display: 'inline-flex', alignItems: 'center', gap: 8
            }}>
              Lees onze missie
            </a>
          </div>
        </div>
      </section>

      {/* MISSIE */}
      <section id="missie" style={{ background: '#ECE9CD', padding: isMobile ? '70px 20px' : '110px 56px' }}>
        <div style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: '#4D8A2D', letterSpacing: '.18em', textTransform: 'uppercase', marginBottom: 16 }}>
            Onze missie
          </div>
          <h2 style={{ fontFamily: 'Dosis', fontSize: isMobile ? 32 : 52, fontWeight: 600, lineHeight: 1.05, letterSpacing: '-.02em', margin: 0, color: '#533373' }}>
            Gezond eten bereikbaar maken voor iedereen.
          </h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20, marginTop: 36, fontSize: 17, lineHeight: 1.65, color: '#3a342f', textAlign: 'left' }}>
            <p style={{ margin: 0 }}>
              Bij Stichting De Buurtkok zijn wij ervan overtuigd dat iedereen recht heeft op gezonde voeding. Helaas zijn gezonde maaltijden vaak te duur, en hebben prijsverschillen tussen gezond en ongezond grote gevolgen. Het is de missie van De Buurtkok om duurzame keuzes en gezonde voeding voor iedereen toegankelijk te maken — op de manier die iedereen die dat zelf nodig heeft, ondersteunt.
            </p>
            <p style={{ margin: 0 }}>
              Dankzij de bijdragen van vrienden, fondsen en subsidies kunnen we elke maaltijd helpen voor buurtgenoten die het financieel zwaar hebben. Hoe meer steun we ontvangen, hoe meer we kunnen geven én hoe groter de impact wordt. Laten we samen het verschil maken. Doe je mee?
            </p>
          </div>
        </div>
      </section>

      {/* GOED VOOR ELKAAR */}
      <section id="verhaal" style={{ padding: isMobile ? '80px 20px' : '120px 56px', maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.1fr', gap: isMobile ? 32 : 64, alignItems: 'center' }}>
          <img
            src="assets/team-groot.webp"
            alt="Het team en de vrijwilligers van De Buurtkok"
            style={{ width: '100%', aspectRatio: '1/1', objectFit: 'cover', borderRadius: 18, display: 'block' }}
          />
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, color: '#4D8A2D', letterSpacing: '.18em', textTransform: 'uppercase', marginBottom: 16 }}>
              Goed voor jezelf, goed voor een ander
            </div>
            <h2 style={{ fontFamily: 'Dosis', fontSize: isMobile ? 36 : 56, fontWeight: 700, lineHeight: 1, letterSpacing: '-.02em', margin: 0, color: '#1a1614' }}>
              Goed voor elkaar
            </h2>
            <div style={{ marginTop: 20, fontSize: 17, lineHeight: 1.65, color: '#3a342f', display: 'flex', flexDirection: 'column', gap: 16 }}>
              <p style={{ margin: 0 }}>
                Wij vinden dat iedereen recht heeft op een voedzame maaltijd. Wij geloven dat met veel passie en liefde gezond eten bereikbaar moet zijn voor iedereen. Zodat iedereen de kracht van gezonde voeding kan ervaren.
              </p>
              <p style={{ margin: 0 }}>
                Bij De Buurtkok is iedereen welkom. We maken niet alleen maar gezond eten, maar willen ook dat mensen zich verbonden voelen en elkaar helpen. Door samen te werken, willen we de buurt een beetje mooier maken voor iedereen.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ONZE BASISINGREDIËNTEN */}
      <section id="foodprint" style={{ background: '#533373', color: '#FDFCF7', padding: isMobile ? '80px 20px' : '120px 56px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', left: -80, bottom: -100, opacity: .1 }}>
          <BeetSilhouette size={400} color="#FDFCF7" leafColor="#DAD6B2" />
        </div>
        <div style={{ position: 'relative', zIndex: 2, maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: '#DAD6B2', letterSpacing: '.18em', textTransform: 'uppercase', marginBottom: 16 }}>
            Smaak, gezond, sociaal, bewust
          </div>
          <h2 style={{ fontFamily: 'Dosis', fontSize: isMobile ? 36 : 64, fontWeight: 600, lineHeight: 1, letterSpacing: '-.02em', margin: 0, maxWidth: 900 }}>
            Onze basisingrediënten
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, opacity: .85, maxWidth: 700, marginTop: 24 }}>
            Als non-profit heeft De Buurtkok respect voor mens, dier en milieu. We streven naar een zo groot mogelijke sociale-maatschappelijke impact en een zo klein mogelijke voetafdruk.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 24, marginTop: 56 }}>
            {[
              { naam: 'Healthy', nl: 'Gezond', tekst: 'Onze maaltijden zijn een gezond alternatief voor gemaksvoeding. Een eerste stap naar een gezondere leefstijl. Niet vullen, maar voeden.' },
              { naam: 'Social', nl: 'Sociaal', tekst: 'Door te werken als stichting met een ideëel doel maken we gezonde voeding bereikbaar voor iedereen — ook voor wie het financieel zwaar heeft.' },
              { naam: 'Sustainable', nl: 'Duurzaam', tekst: 'Duurzaamheid staat hoog in het vaandel. Lokaal inkopen, weinig verspilling — onze ecologische foodprint zo klein mogelijk houden.' }
            ].map((f, i) => (
              <div key={i} style={{ background: 'rgba(255,255,255,.06)', borderRadius: 18, padding: 32, border: '1px solid rgba(255,255,255,.12)' }}>
                <div style={{ fontFamily: 'Dosis', fontSize: 14, color: '#DAD6B2', letterSpacing: '.1em', textTransform: 'uppercase', marginBottom: 12 }}>{f.naam} foodprint</div>
                <div style={{ fontFamily: 'Dosis', fontSize: 38, fontWeight: 700, marginBottom: 16, lineHeight: 1 }}>{f.nl}</div>
                <p style={{ fontSize: 15, lineHeight: 1.55, opacity: .85, margin: 0 }}>{f.tekst}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* DE BUURTKOK — initiatief */}
      <section style={{ padding: isMobile ? '80px 20px' : '120px 56px', maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.2fr 1fr', gap: isMobile ? 32 : 64, alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, color: '#4D8A2D', letterSpacing: '.18em', textTransform: 'uppercase', marginBottom: 16 }}>
              Samen voor elkaar, voor de buurt
            </div>
            <h2 style={{ fontFamily: 'Dosis', fontSize: isMobile ? 32 : 52, fontWeight: 600, lineHeight: 1.05, letterSpacing: '-.02em', margin: '0 0 20px' }}>
              De Buurtkok
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: '#3a342f', margin: 0 }}>
              De Buurtkok is een initiatief van een enthousiaste ondernemer uit Oranjewoud die met veel liefde en passie een verschil wil maken in de buurt. Met gezonde, voedzame maaltijden — en de overtuiging dat eten mensen samenbrengt.
            </p>
          </div>
          <img
            src="assets/knollen.webp"
            alt="Vers geoogste knollen"
            style={{ width: '100%', aspectRatio: '4/3', objectFit: 'cover', borderRadius: 18, display: 'block' }}
          />
        </div>
      </section>

      {/* VRIENDEN VAN DE BUURTKOK */}
      <section id="vrienden" style={{ background: '#ECE9CD', padding: isMobile ? '80px 20px' : '120px 56px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <div style={{ fontSize: 12, fontWeight: 700, color: '#4D8A2D', letterSpacing: '.18em', textTransform: 'uppercase', marginBottom: 16 }}>
              Samen maken we het verschil
            </div>
            <h2 style={{ fontFamily: 'Dosis', fontSize: isMobile ? 36 : 64, fontWeight: 600, lineHeight: 1, letterSpacing: '-.02em', margin: 0, color: '#533373' }}>
              Vrienden van De Buurtkok
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: '#3a342f', maxWidth: 680, margin: '20px auto 0' }}>
              Achter De Buurtkok staat een groeiende groep betrokken mensen en organisaties die geloven in gezonde voeding voor iedereen. Hieronder lees je wie dit zijn en hoe zij bijdragen aan onze missie.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 16 }}>
            {partners.map((p, i) => (
              <div key={i} style={{ background: '#FDFCF7', borderRadius: 14, padding: 24, borderLeft: '3px solid #533373' }}>
                <h3 style={{ fontFamily: 'Dosis', fontSize: 20, fontWeight: 700, color: '#533373', margin: '0 0 8px' }}>{p.naam}</h3>
                {p.tekst.split('\n\n').map((alinea, j) => (
                  <p key={j} style={{ fontSize: 14, lineHeight: 1.55, color: '#3a342f', margin: j > 0 ? '8px 0 0' : 0 }}>{alinea}</p>
                ))}
              </div>
            ))}
          </div>
          <p style={{ textAlign: 'center', fontFamily: 'Dosis', fontSize: 22, fontWeight: 700, color: '#533373', marginTop: 56, letterSpacing: '.04em' }}>
            GOED VOOR ELKAAR
          </p>
        </div>
      </section>

      {/* DONEER */}
      <section id="doneer" style={{ background: '#FDFCF7', padding: isMobile ? '70px 20px 80px' : '120px 56px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.1fr 1fr', gap: isMobile ? 40 : 80, alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, color: '#4D8A2D', letterSpacing: '.18em', textTransform: 'uppercase', marginBottom: 16 }}>Word vriend van De Buurtkok</div>
            <h2 style={{ fontFamily: 'Dosis', fontSize: isMobile ? 40 : 64, fontWeight: 700, lineHeight: .95, letterSpacing: '-.02em', margin: 0 }}>
              Steun ons<br />en steun <span style={{ color: '#533373' }}>elkaar.</span>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: '#3a342f', margin: '20px 0 24px', maxWidth: 480 }}>
              Met jouw bijdrage maken we gezonde maaltijden mogelijk voor buurtgenoten die het financieel zwaar hebben. Eenmalig of als <strong style={{ color: '#533373' }}>vriend van De Buurtkok</strong>.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                'Stichting Buurtkok — KvK 82488444',
                'Elke euro gaat naar maaltijden en de buurt',
                'Stoppen kan altijd, geen verplichtingen'
              ].map((t, i) => (
                <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 15, color: '#3a342f' }}>
                  <span style={{ color: '#4D8A2D', fontWeight: 700, marginTop: 1 }}>✓</span> {t}
                </li>
              ))}
            </ul>
            <div style={{ marginTop: 24, padding: 16, background: '#ECE9CD', borderRadius: 12, fontSize: 13, lineHeight: 1.55, color: '#3a342f' }}>
              <strong style={{ color: '#533373' }}>Liever zelf overmaken?</strong><br />
              IBAN <span style={{ fontFamily: 'JetBrains Mono, ui-monospace, monospace' }}>NL58 RBRB 8835 0496 01</span> · t.n.v. Stichting Buurtkok
            </div>
          </div>
          <DonatieModule variant="purple" />
        </div>
      </section>

      {/* DOE MEE STRIP */}
      <section style={{ position: 'relative', overflow: 'hidden', minHeight: isMobile ? 420 : 520 }}>
        <img
          src="assets/handen-cirkel.jpg"
          alt="Handen die elkaar vasthouden in een cirkel"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: isMobile ? 'center' : 'center 35%' }}
        />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(83,51,115,.45), rgba(83,51,115,.85))' }} />
        <div style={{ position: 'relative', padding: isMobile ? '80px 20px' : '120px 56px', textAlign: 'center', color: '#FDFCF7' }}>
          <h3 style={{ fontFamily: 'Dosis', fontSize: isMobile ? 36 : 56, fontWeight: 700, margin: 0, letterSpacing: '-.02em' }}>
            Liever meekoken of meedoen?
          </h3>
          <p style={{ fontSize: 18, opacity: .92, maxWidth: 580, margin: '20px auto 32px', lineHeight: 1.55 }}>
            We zijn altijd op zoek naar vrijwilligers, leveranciers en buurtmaatjes. Eén ochtend per week, of vaker. Mail of bel ons gerust.
          </p>
          <a href="mailto:info@debuurtkok.nl" style={{ display: 'inline-flex', background: '#FDFCF7', color: '#533373', padding: '16px 32px', borderRadius: 999, fontSize: 15, fontWeight: 700, textDecoration: 'none', gap: 8, alignItems: 'center' }}>
            info@debuurtkok.nl <span>→</span>
          </a>
        </div>
      </section>

      {/* CONTACT */}
      <section id="contact" style={{ background: '#ECE9CD', padding: isMobile ? '70px 20px' : '110px 56px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.6fr', gap: isMobile ? 40 : 80, alignItems: 'start' }}>
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, color: '#4D8A2D', letterSpacing: '.18em', textTransform: 'uppercase', marginBottom: 16 }}>
              Neem contact op
            </div>
            <h2 style={{ fontFamily: 'Dosis', fontSize: isMobile ? 36 : 52, fontWeight: 700, lineHeight: 1, letterSpacing: '-.02em', margin: '0 0 20px', color: '#533373' }}>
              Heb je een vraag?
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: '#3a342f', margin: '0 0 24px' }}>
              Stel je vraag via het formulier of bereik ons direct via e-mail of telefoon.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, fontSize: 15, color: '#3a342f' }}>
              <li><a href="mailto:info@debuurtkok.nl" style={{ color: '#533373', textDecoration: 'none', fontWeight: 600 }}>info@debuurtkok.nl</a></li>
              <li><a href="tel:+31513201215" style={{ color: '#533373', textDecoration: 'none', fontWeight: 600 }}>+31 (0)513 201 215</a></li>
              <li style={{ opacity: .8 }}>Sophia Hedwiglaan 3, 8453 VC Oranjewoud</li>
            </ul>
          </div>
          <ContactFormulier />
        </div>
      </section>

      {/* FOOTER */}
      <footer id="contact" style={{ background: '#1a1614', color: '#FDFCF7', padding: isMobile ? '50px 20px 32px' : '72px 56px 40px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '2fr 1fr 1fr 1.2fr', gap: 40 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <img src="assets/logo.png" alt="" style={{ width: 40, height: 40, objectFit: 'contain', filter: 'brightness(1.1)' }} />
              <span style={{ fontFamily: 'Dosis', fontWeight: 700, fontSize: 18 }}>De Buurtkok</span>
            </div>
            <p style={{ fontSize: 14, opacity: .7, lineHeight: 1.6, maxWidth: 320, margin: 0 }}>
              Gezond eten bereikbaar maken voor iedereen. Stichting Buurtkok · sinds 2021.
            </p>
          </div>
          <div>
            <div style={{ fontFamily: 'Dosis', fontSize: 14, fontWeight: 700, color: '#DAD6B2', marginBottom: 14, letterSpacing: '.1em', textTransform: 'uppercase' }}>Bezoek</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {['Missie', 'Verhaal', 'Foodprint', 'Vrienden', 'Doneer'].map((it, j) => (
                <li key={j}>
                  <a href={`#${it.toLowerCase()}`} style={{ fontSize: 14, opacity: .8, color: '#FDFCF7', textDecoration: 'none' }}>{it}</a>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <div style={{ fontFamily: 'Dosis', fontSize: 14, fontWeight: 700, color: '#DAD6B2', marginBottom: 14, letterSpacing: '.1em', textTransform: 'uppercase' }}>Contact</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 14, opacity: .8 }}>
              <li>Sophia Hedwiglaan 3</li>
              <li>8453 VC Oranjewoud</li>
              <li><a href="tel:+31513201215" style={{ color: 'inherit', textDecoration: 'none' }}>+31 (0)513 201 215</a></li>
              <li><a href="mailto:info@debuurtkok.nl" style={{ color: 'inherit', textDecoration: 'none' }}>info@debuurtkok.nl</a></li>
              <li><a href="https://www.debuurtkok.nl" style={{ color: 'inherit', textDecoration: 'none' }}>www.debuurtkok.nl</a></li>
            </ul>
          </div>
          <div>
            <div style={{ fontFamily: 'Dosis', fontSize: 14, fontWeight: 700, color: '#DAD6B2', marginBottom: 14, letterSpacing: '.1em', textTransform: 'uppercase' }}>Stichting</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13, opacity: .75, fontFamily: 'JetBrains Mono, ui-monospace, monospace' }}>
              <li>KvK 82488444</li>
              <li>SBI 94993</li>
              <li>BTW NL862490406B01</li>
              <li>IBAN NL58 RBRB 8835 0496 01</li>
              <li>BIC RBRBNL21</li>
            </ul>
          </div>
        </div>
        <div style={{ maxWidth: 1280, margin: '40px auto 0', paddingTop: 24, borderTop: '1px solid rgba(255,255,255,.1)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, fontSize: 12, opacity: .6 }}>
          <span>© 2026 Stichting Buurtkok · Goed voor elkaar</span>
          <span>
            <a href="Privacybeleid De Buurtkok (1 feb 2022).pdf" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'none' }}>Privacy</a>
            {' · '}
            <a href="Algemene voorwaarden De Buurtkok.pdf" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'none' }}>Algemene voorwaarden</a>
          </span>
        </div>
      </footer>

    </div>
  );
};

window.V1Manifest = V1Manifest;