// ─── SPRAAKMAKER MEDIA ─────────────────────────────────────────────────────
// Agency website — same DNA as PSA but editorial/bold layout system

// ─── COPY (NL/EN) ──────────────────────────────────────────────────────────
const COPY = {
  nl: {
    nav: { work: 'Podcasts', services: 'Wat we doen', process: 'Proces', studio: 'Studio', contact: 'Contact' },
    cta: 'Neem contact op',
    ctaShort: 'Contact',
    hero: {
      eyebrow: 'Podcast Agency',
      lineA: 'Uitgesproken',
      lineB: 'ideeën,',
      lineC: 'spraakmakende',
      lineD: 'podcasts.',
      sub: 'Spraakmaker Media is een productiehuis voor zakelijke podcasts. We werken voor bedrijven, NGO\'s en overheidsorganisaties die hun verhaal scherp én geloofwaardig willen vertellen, van strategie tot publicatie.',
      primary: 'Plan een kennismaking',
      secondary: 'Bekijk onze podcasts'
    },
    manifesto: {
      eyebrow: 'Wie we zijn',
      kickerPre: 'Wij maken',
      kickerAccent: 'zakelijke podcasts',
      kickerPost: 'voor bedrijven, NGO\'s en overheidsorganisaties.',
      kickerCaption: 'Onze leus, geen marketing-claim',
      sectionTag: '',
      // Explainer (B2)
      explainerEyebrow: 'Waar we voor staan',
      explainerTitle: ['De wereld een beetje', 'verbeteren', '.'],
      explainerSub: 'We werken met organisaties die ergens voor staan. Dit zijn de thema\'s die ons drijven en die we delen met de opdrachtgevers waar we het liefst mee werken.',
      explainerBadge: '',
      intro: '',
      history: 'Sinds 2018 maken wij podcasts die ertoe doen. We werken voor organisaties die geloven dat de wereld er anders uit kan zien en dat verhaal willen vertellen aan de mensen die het moeten horen.',
      approach: 'Van eerste concept tot publicatie begeleiden we het hele traject. Geen losse aflevering, maar een serie die blijft doorwerken. Op de werkvloer of daarbuiten.',
      values: [
        { num: '01', title: 'Diversiteit en inclusie', body: 'De wereld klinkt niet als één stem. Wij ook niet. We maken podcasts die ruimte geven aan verhalen die anders niet gehoord worden en werken bewust samen met makers, gasten en opdrachtgevers die dat verschil weerspiegelen.' },
        { num: '02', title: 'Democratie en vrijheid van meningsuiting', body: 'Audio is van iedereen. Een microfoon kan een podium zijn voor wie normaal geen podium krijgt. Wij geloven in het recht om te spreken, te luisteren en van mening te mogen verschillen en maken content die dat recht serieus neemt.' },
        { num: '03', title: 'Persvrijheid en mediawijsheid', body: 'Goede journalistiek begint bij een open oor. Wij maken geen nieuws, maar we weten hoe verhalen werken en hoe ze misbruikt kunnen worden. Daarom staan we achter een vrije pers en helpen we organisaties hun boodschap eerlijk en transparant te vertellen.' },
        { num: '04', title: 'Mentale gezondheid', body: 'Praten helpt. Écht luisteren ook. Audio heeft de unieke kracht om mensen het gevoel te geven dat ze er niet alleen in staan. We maken ruimte voor kwetsbare verhalen omdat die het hardst binnenkomen.' },
        { num: '05', title: 'Klimaat en duurzaamheid', body: 'We werken voor organisaties die serieus bezig zijn met een duurzamere wereld en proberen zelf ook bewuste keuzes te maken in hoe we produceren.' },
        { num: '06', title: 'Gelijkwaardigheid en respect', body: 'Geen ruimte voor discriminatie, racisme of seksisme. Niet in onze studio, niet in onze content, niet bij de opdrachtgevers waar we mee werken.' }
      ]
    },
    services: {
      eyebrow: 'Wij werken voor',
      title: 'Drie soorten opdrachtgevers.',
      sub: 'Elke organisatie heeft een ander verhaal en een andere aanpak. Dit is hoe we werken met de partners waar we in geloven.',
      items: [
      {
        num: '01',
        kind: 'Bedrijven',
        tagline: 'Van interne cultuur tot externe reputatie.',
        body: 'We helpen bedrijven hun verhaal scherp te krijgen: voor medewerkers, klanten of de buitenwereld. Denk aan thought leadership, employer branding of cultuurprogramma\'s.',
        outcome: 'Verhalen die intern verbinden en extern aantrekken.',
        tags: ['Thought leadership', 'Employer branding', 'Cultuur', 'Reputatie']
      },
      {
        num: '02',
        kind: 'NGO\'s & maatschappelijke organisaties',
        tagline: 'Verhalen die beweging brengen.',
        body: 'We werken voor organisaties die een onderwerp op de kaart willen zetten. Met podcasts die nuance toevoegen, draagvlak vergroten en doelgroepen binden.',
        outcome: 'Onderwerpen die niet meer te negeren zijn.',
        tags: ['Bewustwording', 'Draagvlak', 'Campagne', 'Doelgroepen']
      },
      {
        num: '03',
        kind: 'Overheid & publieke sector',
        tagline: 'Complexe vraagstukken, helder verteld.',
        body: 'Beleid, onderzoek en publieke opgaven verdienen meer dan een persbericht. Wij vertalen complexiteit naar luisterklare verhalen die ook buiten de eigen kring landen.',
        outcome: 'Beleid dat landt, ook buiten de eigen bubbel.',
        tags: ['Beleid', 'Onderzoek', 'Publieksbereik', 'Communicatie']
      }]

    },
    work: {
      eyebrow: 'Uitgelicht werk',
      title: 'Podcasts waar we trots op zijn.',
      sub: 'Een greep uit producties voor partners, makers en eigen titels.',
      cta: 'Bekijk alle podcasts'
    },
    process: {
      eyebrow: 'Zo werken we',
      title: 'Van idee tot publicatie.',
      intro: 'Een goede podcast begint niet met microfoons, maar met een helder verhaal. Dit is hoe wij dat vormgeven, in zes stappen van eerste gesprek tot stevig op de platforms.',
      steps: [
      { num: '01', title: 'Advies & strategie', body: 'Wat wil je vertellen, voor wie, en waarom juist in audio of video? We denken mee over inhoud, format, redactie en distributie. Niet vanuit trends, maar vanuit wat werkt voor jouw organisatie en doelgroep.' },
      { num: '02', title: 'Inhoud & redactie', body: 'Achter elk goed gesprek zit een redactionele lijn. We bepalen kern, toon en structuur, en formuleren vragen die verder gaan dan de oppervlakte. Soms is dat schrappen in plaats van toevoegen, of vertragen waar iedereen versnelt.' },
      { num: '03', title: 'Opname & montage', body: 'Onze studio is zo ingericht dat techniek naar de achtergrond verdwijnt en de aandacht volledig naar het gesprek kan. Wij bewaken geluid, beeld en tempo op de achtergrond, zodat jij je kunt richten op de inhoud.' },
      { num: '04', title: 'Muziek & sounddesign', body: 'Muziek bepaalt ritme, sfeer en herkenbaarheid. Met meer dan twintig jaar ervaring als muzikant en producer zorgt Mart dat elke podcast een eigen klankwereld krijgt, van herkenbare intro’s tot subtiele audiolagen die het verhaal dragen.' },
      { num: '05', title: 'Publicatie & distributie', body: 'We verzorgen publicatie op alle grote platforms zoals Spotify, Apple Podcasts en YouTube, en optimaliseren titels, beschrijvingen en metadata voor vindbaarheid. Daarnaast denken we mee over ritme, afleveringstitels en luisteraarsreis.' },
      { num: '06', title: 'Doorontwikkeling', body: 'Een podcast is geen eenmalig project. We evalueren samen wat werkt, sturen bij waar nodig, en denken mee over een volgend seizoen of vervolgformat.' }]

    },
    numbers: {
      items: [
      { big: '2018', label: 'Opgericht met één ambitie' },
      { big: '150+', label: 'Producties uitgebracht' },
      { big: '25+', label: 'Partners waar we mee werken' },
      { big: '1', label: 'Studio in hartje Amsterdam' }]

    },
    studio: {
      eyebrow: 'Onze studio in Amsterdam',
      title: 'Podcast Studio Amsterdam',
      sub: 'Ontworpen om verhalen op hun best vast te leggen. Professioneel ingericht, comfortabel om in te werken en technisch tot in de puntjes verzorgd.',
      body: 'Met haarscherp beeld en kristalhelder geluid creëren we een omgeving waarin gesprekken ontspannen aanvoelen, maar eindigen als producties van hoog niveau.',
      cta: 'Boek de studio',
      link: 'podcaststudio.amsterdam'
    },
    logos: {
      eyebrow: 'Vertrouwd door',
      title: 'Merken die met ons werken.'
    },
    contact: {
      eyebrow: 'Contact',
      title: 'Samen iets moois maken?',
      sub: 'Van idee tot publicatie denken we met je mee. Laat weten waar je aan werkt, dan plannen we een kennismaking.',
      name: 'Naam', email: 'Mail', phone: 'Telefoon', message: 'Waar kunnen we je mee helpen?',
      send: 'Verstuur bericht', sending: 'Verzenden…', sent: 'Je bericht is verstuurd. We nemen snel contact met je op.',
      error: 'Er gaat iets mis. Stuur een mail naar info@spraakmaker.media, dan komen we er snel op terug.',
      or: 'Of bel ons direct',
      address: 'Gibraltarstraat 42, Amsterdam'
    },
    footer: {
      tagline: 'Uitgesproken ideeën, spraakmakende podcasts.',
      address: 'Adres', email: 'Mail', phone: 'Telefoon',
      navHeading: 'Navigatie', socialHeading: 'Volg ons',
      colophon: '© 2026 Spraakmaker Media. Alle rechten voorbehouden.',
      kvk: 'KVK 71234567', btw: 'BTW NL123456789B01'
    }
  },
  en: {
    nav: { work: 'Podcasts', services: 'What we do', process: 'Process', studio: 'Studio', contact: 'Contact' },
    cta: 'Get in touch',
    ctaShort: 'Contact',
    hero: {
      eyebrow: 'Podcast Agency',
      lineA: 'Outspoken',
      lineB: 'ideas,',
      lineC: 'remarkable',
      lineD: 'podcasts.',
      sub: 'Spraakmaker Media is a production house for business podcasts. We work with companies, NGOs and government organisations that want to tell their story with clarity and credibility, from strategy to publication.',
      primary: 'Book an intro call',
      secondary: 'See our podcasts'
    },
    manifesto: {
      eyebrow: 'What we stand for',
      kickerPre: 'We make',
      kickerAccent: 'business podcasts',
      kickerPost: 'for companies, NGOs and government organisations.',
      kickerCaption: 'Our motto, not a marketing claim',
      sectionTag: '',
      explainerEyebrow: 'What we stand for',
      explainerTitle: ['Making the world', 'a little better', '.'],
      explainerSub: 'We work with organisations that stand for something. These are the themes that drive us and that we share with the clients we love working with most.',
      explainerBadge: '',
      intro: '',
      history: 'We started in 2018 with the ambition to use podcasts to make the world a little better, large and small. That\'s why we work with makers, advertisers and organisations who share this ambition.',
      approach: 'We guide the entire journey, from concept to publication and reach. That way we build stories together that don\'t disappear after one listen, but keep working.',
      values: [
        { num: '01', title: 'Diversity and inclusion', body: 'The world doesn\'t sound like one voice. Neither do we. We make podcasts that give space to stories that otherwise wouldn\'t be heard, and consciously work with makers, guests and clients who reflect that difference.' },
        { num: '02', title: 'Democracy and freedom of speech', body: 'Audio belongs to everyone. A microphone can be a stage for those who normally don\'t get one. We believe in the right to speak, listen and disagree, and make content that takes that right seriously.' },
        { num: '03', title: 'Press freedom and media literacy', body: 'Good journalism starts with an open ear. We don\'t make news, but we know how stories work and how they can be misused. That\'s why we stand behind a free press and help organisations tell their story honestly and transparently.' },
        { num: '04', title: 'Mental health', body: 'Talking helps. Really listening too. Audio has the unique power to make people feel they\'re not alone. We make space for vulnerable stories because those land the hardest.' },
        { num: '05', title: 'Climate and sustainability', body: 'We work for organisations that are seriously committed to a more sustainable world, and try to make conscious choices in how we produce.' },
        { num: '06', title: 'Equality and respect', body: 'No room for discrimination, racism or sexism. Not in our studio, not in our content, not at the clients we work with.' }
      ]
    },
    services: {
      eyebrow: 'We work for',
      title: 'Three kinds of clients.',
      sub: 'Every organisation has a different story and asks for a different approach. This is how we work with the partners we believe in.',
      items: [
      {
        num: '01',
        kind: 'Companies',
        tagline: 'From internal culture to external reputation.',
        body: 'We help companies sharpen their story for employees, customers or the outside world. Think thought leadership, employer branding or culture programmes.',
        outcome: 'Stories that connect inside and attract outside.',
        tags: ['Thought leadership', 'Employer branding', 'Culture', 'Reputation']
      },
      {
        num: '02',
        kind: 'NGOs & social organisations',
        tagline: 'Stories that create movement.',
        body: 'We work for organisations that want to put a subject on the map. With podcasts that add nuance, build support and connect with audiences.',
        outcome: 'Subjects that can no longer be ignored.',
        tags: ['Awareness', 'Support', 'Campaign', 'Audiences']
      },
      {
        num: '03',
        kind: 'Government & public sector',
        tagline: 'Complex questions, clearly told.',
        body: 'Policy, research and public challenges deserve more than a press release. We translate complexity into listen-ready stories that also land beyond the usual circles.',
        outcome: 'Policy that lands, also outside the bubble.',
        tags: ['Policy', 'Research', 'Public reach', 'Communication']
      }]

    },
    work: {
      eyebrow: 'Featured work',
      title: 'Podcasts we\'re proud of.',
      sub: 'A selection of productions for partners, makers and our own titles.',
      cta: 'See all podcasts'
    },
    process: {
      eyebrow: 'How we work',
      title: 'From idea to publication.',
      intro: 'A great podcast doesn’t start with microphones. It starts with a clear story. Here’s how we shape it, in six steps from first conversation to solid presence on the platforms.',
      steps: [
      { num: '01', title: 'Advice & strategy', body: 'What do you want to tell, for whom, and why in audio or video? We think through content, format, editorial and distribution. Not chasing trends, but rooted in what works for your organisation and audience.' },
      { num: '02', title: 'Content & editorial', body: 'Behind every good conversation is an editorial line. We set core, tone and structure, and shape questions that go beyond the surface. Sometimes that means cutting instead of adding, or slowing down where everyone else speeds up.' },
      { num: '03', title: 'Recording & editing', body: 'Our studio is built so technology fades into the background and attention can go fully to the conversation. We watch over sound, image and pacing behind the scenes, so you can focus on the content.' },
      { num: '04', title: 'Music & sound design', body: 'Music sets the rhythm, mood and identity of an episode. With over twenty years as a musician and producer, Mart gives every podcast its own sound world, from recognisable intros to subtle audio layers that carry the story.' },
      { num: '05', title: 'Publication & distribution', body: 'We handle publication across all major platforms like Spotify, Apple Podcasts and YouTube, and optimise titles, descriptions and metadata for discoverability. We also think with you about cadence, episode titles and the listener journey.' },
      { num: '06', title: 'Continued development', body: 'A podcast is not a one-off project. We evaluate together what works, adjust where needed, and think along about a next season or follow-up format.' }]

    },
    numbers: {
      items: [
      { big: '2018', label: 'Founded with one ambition' },
      { big: '150+', label: 'Productions released' },
      { big: '25+', label: 'Partners we work with' },
      { big: '1', label: 'Studio in central Amsterdam' }]

    },
    studio: {
      eyebrow: 'Our studio in Amsterdam',
      title: 'Podcast Studio Amsterdam',
      sub: 'Designed to capture stories at their best. Professionally equipped, comfortable to work in and technically impeccable.',
      body: 'With razor-sharp video and crystal-clear sound we create an environment where conversations feel relaxed, but end as productions of the highest standard.',
      cta: 'Book the studio',
      link: 'podcaststudio.amsterdam'
    },
    logos: {
      eyebrow: 'Trusted by',
      title: 'Brands working with us.'
    },
    contact: {
      eyebrow: 'Contact',
      title: 'Make something great together?',
      sub: 'From idea to publication we think along with you. Tell us what you\'re working on and we\'ll set up an intro call.',
      name: 'Name', email: 'Email', phone: 'Phone', message: 'How can we help you?',
      send: 'Send message', sending: 'Sending…', sent: 'Your message has been sent. We\'ll be in touch shortly.',
      error: 'Something went wrong. Please email info@spraakmaker.media and we\'ll get back to you.',
      or: 'Or call us directly',
      address: 'Gibraltarstraat 42, Amsterdam'
    },
    footer: {
      tagline: 'Outspoken ideas, remarkable podcasts.',
      address: 'Address', email: 'Email', phone: 'Phone',
      navHeading: 'Navigation', socialHeading: 'Follow us',
      colophon: '© 2026 Spraakmaker Media. All rights reserved.',
      kvk: 'KVK 71234567', btw: 'VAT NL123456789B01'
    }
  }
};

// ─── DATA ──────────────────────────────────────────────────────────────────
const PODCAST_COVERS = [
{ title: '7 People', cat: 'Branded', src: 'https://spraakmaker.media/wp-content/uploads/2026/01/Scherm­afbeelding-2026-01-29-om-10.19.29-300x298.png' },
{ title: 'De Marketing Formule', cat: 'Partner', src: 'https://spraakmaker.media/wp-content/uploads/2026/01/Scherm­afbeelding-2026-01-29-om-10.17.21-298x300.png' },
{ title: 'Over Werkgeluk Gesproken', cat: 'Partner', src: 'https://spraakmaker.media/wp-content/uploads/2026/01/Scherm­afbeelding-2026-01-29-om-10.15.18-295x300.png' },
{ title: 'Kunst en Bondcast', cat: 'Eigen', src: 'https://spraakmaker.media/wp-content/uploads/2026/01/Scherm­afbeelding-2026-01-29-om-09.55.48-298x300.png' },
{ title: 'Agents in Production', cat: 'Branded', src: 'https://spraakmaker.media/wp-content/uploads/2026/01/Agents-in-Production-1-300x300.png' },
{ title: 'Morele Wezens', cat: 'Partner', src: 'https://spraakmaker.media/wp-content/uploads/2026/01/Morele-Wezens-Centrum-Ethiek-en-Gezondheid-300x300.png' },
{ title: 'Leaders in Finance', cat: 'Partner', src: 'https://spraakmaker.media/wp-content/uploads/2026/01/Scherm­afbeelding-2026-01-29-om-10.39.27-300x300.png' },
{ title: 'Schiphol Art Moments', cat: 'Branded', src: 'https://spraakmaker.media/wp-content/uploads/2025/03/SCH_schiphol_art_moments_albumcover_opt-300x300.jpg' },
{ title: 'Vrij Nederland', cat: 'Partner', src: 'https://spraakmaker.media/wp-content/uploads/2025/09/ab6765630000ba8a6a87fe42a63862769026bfba-1-300x300.jpeg' },
{ title: 'Eigen titel', cat: 'Eigen', src: 'https://spraakmaker.media/wp-content/uploads/2025/09/ab6765630000ba8a21d8c88b366486703e5a0861-3-300x300.jpeg' },
{ title: 'Serie', cat: 'Branded', src: 'https://spraakmaker.media/wp-content/uploads/2025/02/54328cbe1909d36448e1f8f13f70ba78-300x300.webp' },
{ title: 'Audio essay', cat: 'Eigen', src: 'https://spraakmaker.media/wp-content/uploads/2026/01/schermafbeelding-2026-01-26-om-10-08-58-300x298.png' }];


const CLIENT_LOGOS = [
'logo-schiphol-zwart-wit.png',
'logo-just-eat-take-away-zwart-wit.png',
'logo-prosus-zwart-wit.png',
'logo-gemeente-amsterdam-zwart-wit.png',
'logo-van-de-amsterdamse-hogeschool-voor-de-kunsten.png',
'logo-universiteit-van-amsterdam-zwart-wit.png',
'logo-tu-delft-zwart-wit.png',
'logo-vu-zwart-wit.png',
'logo-ministerie-volkgezondheid-welzijn-en-sport-zwart-wit.png',
'logo-ey-ernst-young-zwart-wit.png',
'logo-deloitte-zwart-wit.png',
'logo-7-people-zwart-wit.png',
'logo-buma-stemra-zwart-wit.png',
'logo-port-of-amsterdam-zwart-wit.png',
'logo-sire-zwart-wit.png',
'logo-vrij-nederland-zwart-wit.png'];


// ─── HOOKS ─────────────────────────────────────────────────────────────────
function useIsMobile(bp = 768) {
  const [m, setM] = React.useState(typeof window !== 'undefined' ? window.innerWidth < bp : false);
  React.useEffect(() => {
    const o = () => setM(window.innerWidth < bp);
    window.addEventListener('resize', o);
    return () => window.removeEventListener('resize', o);
  }, [bp]);
  return m;
}

function useScrolled(threshold = 40) {
  const [s, setS] = React.useState(false);
  React.useEffect(() => {
    const o = () => setS(window.scrollY > threshold);
    o();
    window.addEventListener('scroll', o, { passive: true });
    return () => window.removeEventListener('scroll', o);
  }, [threshold]);
  return s;
}

// ─── NAVIGATION ────────────────────────────────────────────────────────────
function Nav({ lang, setLang, scrolled }) {
  const t = COPY[lang];
  const isMobile = useIsMobile(1024);
  const [open, setOpen] = React.useState(false);
  const onHero = !scrolled;

  const linkStyle = {
    fontSize: 14, fontWeight: 500, color: onHero ? '#fff' : 'var(--fg)',
    textDecoration: 'none', letterSpacing: '-0.01em',
    whiteSpace: 'nowrap'
  };

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: scrolled ? 'rgba(247,248,252,0.85)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(180%) blur(20px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'saturate(180%) blur(20px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
      transition: 'all 0.3s ease'
    }}>
      <div style={{
        maxWidth: 1400, margin: '0 auto', padding: isMobile ? '18px 24px' : '22px 48px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between'
      }}>
        <a href="#top" style={{ textDecoration: 'none', color: onHero ? '#fff' : 'var(--fg)', display: 'flex', alignItems: 'baseline', gap: 0 }}>
          <span style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 22, letterSpacing: '-0.03em' }}>spraakmaker</span>
          <span style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 400, fontSize: 22, letterSpacing: '-0.03em', marginLeft: 6, color: onHero ? 'rgba(255,255,255,0.6)' : 'var(--muted)' }}>media</span>
        </a>

        {!isMobile &&
        <div style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
            <a href="#work" style={linkStyle}>{t.nav.work}</a>
            <a href="#services" style={linkStyle}>{t.nav.services}</a>
            <a href="#process" style={linkStyle}>{t.nav.process}</a>
            <a href="#studio" style={linkStyle}>{t.nav.studio}</a>
            <a href="#contact" style={linkStyle}>{t.nav.contact}</a>

            <div style={{ display: 'flex', alignItems: 'center', gap: 2, background: onHero ? 'rgba(255,255,255,0.18)' : 'var(--accent-light)', padding: 3, borderRadius: 100 }}>
              <button onClick={() => setLang('nl')} style={{
              padding: '5px 12px', fontSize: 12, fontWeight: 600, border: 'none', cursor: 'pointer',
              background: lang === 'nl' ? (onHero ? '#fff' : 'var(--accent)') : 'transparent',
              color: lang === 'nl' ? (onHero ? 'var(--accent)' : '#fff') : 'var(--accent)',
              borderRadius: 100, fontFamily: 'Inter'
            }}>NL</button>
              <button onClick={() => setLang('en')} style={{
              padding: '5px 12px', fontSize: 12, fontWeight: 600, border: 'none', cursor: 'pointer',
              background: lang === 'en' ? (onHero ? '#fff' : 'var(--accent)') : 'transparent',
              color: lang === 'en' ? (onHero ? 'var(--accent)' : '#fff') : 'var(--accent)',
              borderRadius: 100, fontFamily: 'Inter'
            }}>EN</button>
            </div>

            <a href="#contact" style={{
            padding: '10px 20px', background: onHero ? '#fff' : 'var(--accent)', color: onHero ? 'var(--accent)' : '#fff',
            textDecoration: 'none', borderRadius: 100, fontSize: 14, fontWeight: 600,
            whiteSpace: 'nowrap'
          }}>{t.cta}</a>
          </div>
        }

        {isMobile &&
        <button onClick={() => setOpen(!open)} aria-label="Menu" style={{
          background: onHero ? '#fff' : 'var(--fg)', color: onHero ? 'var(--accent)' : '#fff', border: 'none', padding: '10px 14px',
          borderRadius: 100, fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'Inter'
        }}>{open ? '✕' : 'Menu'}</button>
        }
      </div>

      {isMobile && open &&
      <div style={{ background: 'var(--bg)', borderTop: '1px solid var(--border)', padding: '24px' }}>
          {['work', 'services', 'process', 'studio', 'contact'].map((k) =>
        <a key={k} href={`#${k}`} onClick={() => setOpen(false)} style={{
          display: 'block', padding: '14px 0', fontSize: 20,
          fontFamily: 'Plus Jakarta Sans', fontWeight: 500, color: 'var(--fg)',
          textDecoration: 'none', borderBottom: '1px solid var(--border)'
        }}>{t.nav[k]}</a>
        )}
          <a href="#contact" onClick={() => setOpen(false)} style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            marginTop: 24, padding: '16px 24px', background: 'var(--accent)', color: '#fff',
            textDecoration: 'none', borderRadius: 100, fontSize: 15, fontWeight: 600
          }}>{t.cta} <span>→</span></a>
          <div style={{ display: 'flex', gap: 12, marginTop: 16 }}>
            <button onClick={() => setLang('nl')} style={{
            flex: 1, padding: '12px', fontSize: 14, fontWeight: 600,
            background: lang === 'nl' ? 'var(--accent)' : 'transparent',
            color: lang === 'nl' ? '#fff' : 'var(--accent)',
            border: '1.5px solid var(--accent)', borderRadius: 8, cursor: 'pointer'
          }}>Nederlands</button>
            <button onClick={() => setLang('en')} style={{
            flex: 1, padding: '12px', fontSize: 14, fontWeight: 600,
            background: lang === 'en' ? 'var(--accent)' : 'transparent',
            color: lang === 'en' ? '#fff' : 'var(--accent)',
            border: '1.5px solid var(--accent)', borderRadius: 8, cursor: 'pointer'
          }}>English</button>
          </div>
        </div>
      }
    </nav>);

}

// ─── HERO ──────────────────────────────────────────────────────────────────
function Hero({ lang }) {
  const t = COPY[lang].hero;
  const isMobile = useIsMobile();

  return (
    <section id="top" style={{
      position: 'relative', minHeight: isMobile ? 'auto' : '100vh',
      paddingTop: isMobile ? 120 : 140, paddingBottom: isMobile ? 80 : 100,
      paddingLeft: isMobile ? 24 : 48, paddingRight: isMobile ? 24 : 48,
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
      background: 'var(--accent)', color: '#fff',
      overflow: 'hidden'
    }}>
      {/* Animated bg */}
      <style>{`
        @keyframes wave-drift { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }
        @keyframes wave-drift-slow { 0% { transform: translateX(-50%) } 100% { transform: translateX(0) } }
        @keyframes blob-float-1 { 0%, 100% { transform: translate(0, 0) scale(1) } 50% { transform: translate(60px, -40px) scale(1.15) } }
        @keyframes blob-float-2 { 0%, 100% { transform: translate(0, 0) scale(1) } 50% { transform: translate(-50px, 50px) scale(0.9) } }
      `}</style>

      {/* Soft color blobs */}
      <div aria-hidden="true" style={{
        position: 'absolute', top: '-15%', right: '-15%',
        width: 900, height: 900, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 40%, transparent 70%)',
        filter: 'blur(60px)', pointerEvents: 'none',
        animation: 'blob-float-1 16s ease-in-out infinite'
      }} />
      <div aria-hidden="true" style={{
        position: 'absolute', bottom: '-20%', left: '-10%',
        width: 750, height: 750, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.08) 40%, transparent 70%)',
        filter: 'blur(70px)', pointerEvents: 'none',
        animation: 'blob-float-2 20s ease-in-out infinite'
      }} />

      {/* Sine waves drifting */}
      <svg aria-hidden="true" style={{
        position: 'absolute', left: 0, bottom: isMobile ? 60 : 140, width: '200%', height: 180,
        opacity: 0.22, pointerEvents: 'none',
        animation: 'wave-drift 28s linear infinite'
      }} viewBox="0 0 2400 180" preserveAspectRatio="none">
        <path d="M0,90 Q150,10 300,90 T600,90 T900,90 T1200,90 T1500,90 T1800,90 T2100,90 T2400,90"
          stroke="#fff" strokeWidth="2.5" fill="none" />
      </svg>
      <svg aria-hidden="true" style={{
        position: 'absolute', left: 0, bottom: isMobile ? 20 : 60, width: '200%', height: 140,
        opacity: 0.15, pointerEvents: 'none',
        animation: 'wave-drift-slow 40s linear infinite'
      }} viewBox="0 0 2400 140" preserveAspectRatio="none">
        <path d="M0,70 Q200,0 400,70 T800,70 T1200,70 T1600,70 T2000,70 T2400,70"
          stroke="#fff" strokeWidth="2" fill="none" />
      </svg>
      <svg aria-hidden="true" style={{
        position: 'absolute', left: 0, top: isMobile ? 120 : 180, width: '200%', height: 100,
        opacity: 0.12, pointerEvents: 'none',
        animation: 'wave-drift 52s linear infinite'
      }} viewBox="0 0 2400 100" preserveAspectRatio="none">
        <path d="M0,50 Q300,5 600,50 T1200,50 T1800,50 T2400,50"
          stroke="#fff" strokeWidth="1.5" fill="none" />
      </svg>

      {/* Eyebrow */}
      <div style={{ maxWidth: 1400, margin: '0 auto', width: '100%', position: 'relative', zIndex: 2 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          padding: '8px 16px', background: 'rgba(255,255,255,0.12)', borderRadius: 100,
          marginBottom: isMobile ? 32 : 48
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 100, background: '#fff' }}></span>
          <span style={{ fontSize: 13, fontWeight: 600, color: '#fff', letterSpacing: '-0.01em' }}>
            {t.eyebrow}
          </span>
        </div>

        {/* Big statement */}
        <h1 style={{
          fontFamily: 'Plus Jakarta Sans',
          fontSize: isMobile ? 'clamp(44px, 13vw, 80px)' : 'clamp(72px, 9.5vw, 180px)',
          fontWeight: 500,
          lineHeight: 0.92,
          letterSpacing: '-0.04em',
          color: '#fff',
          marginBottom: isMobile ? 32 : 48,
          textWrap: 'pretty'
        }}>
          <span style={{ display: 'block', fontSize: isMobile ? 'inherit' : 109 }}>{t.lineA} <span style={{ color: 'rgba(255,255,255,0.6)', fontWeight: 400 }}>{t.lineB}</span></span>
          <span style={{ display: 'block', fontSize: isMobile ? 'inherit' : 107 }}>{t.lineC} <span style={{ fontWeight: 400, color: 'rgba(255,255,255,0.6)' }}>{t.lineD}</span></span>
        </h1>

        {/* Sub + CTAs in grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 32 : 80,
          alignItems: 'end',
          maxWidth: 1400
        }}>
          <p style={{
            fontSize: isMobile ? 17 : 20, lineHeight: 1.55, color: 'rgba(255,255,255,0.8)',
            maxWidth: 560, textWrap: 'pretty', whiteSpace: 'pre-line'
          }}>{t.sub}</p>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: isMobile ? 'flex-start' : 'flex-end' }}>
            <a href="#contact" style={{
              padding: '16px 28px', background: '#fff', color: 'var(--accent)',
              textDecoration: 'none', borderRadius: 100, fontSize: 15, fontWeight: 600,
              display: 'inline-flex', alignItems: 'center', gap: 10
            }}>
              {t.primary}
              <span style={{ fontSize: 16 }}>→</span>
            </a>
            <a href="#work" style={{
              padding: '16px 28px', background: 'transparent', color: '#fff',
              textDecoration: 'none', borderRadius: 100, fontSize: 15, fontWeight: 600,
              border: '1.5px solid rgba(255,255,255,0.3)'
            }}>{t.secondary}</a>
          </div>
        </div>
      </div>
    </section>);

}

// ─── MANIFESTO BAND — Variant B (Statement Kicker + Explainer) ────────────
const MANIFESTO_IMAGES = {
  stack1: 'uploads/Schermafbeelding 2025-02-17 om 10.16-46b40001.jpeg',
  stack2: 'uploads/Schermafbeelding 2025-02-17 om 10.18-902bd477.jpeg',
  stack3: 'uploads/Schermafbeelding 2025-02-17 om 10.41-bea3f898.jpeg',
  portrait: 'uploads/Schermafbeelding 2025-02-17 om 10.16-46b40001.jpeg'
};

// ─── PHOTO POOLS — rotate a random photo per pool on each reload ──────────
// Source of truth is photo-pools.json (edited via "Foto kiezen.html" picker).
// Inline defaults are a safety-net if the JSON fails to load.
const PHOTO_POOLS = (window.__PHOTO_POOLS__ && window.__PHOTO_POOLS__.waar_we_voor_staan)
  ? window.__PHOTO_POOLS__
  : {
      waar_we_voor_staan: ['uploads/Schermafbeelding 2025-02-17 om 10.16-46b40001.jpeg'],
      zo_werken_we:       ['uploads/Schermafbeelding 2025-02-17 om 10.18-902bd477.jpeg'],
      opdrachtgevers:     ['uploads/Schermafbeelding 2025-02-17 om 10.31-71f5db4e.jpeg']
    };
// Fallback voor opdrachtgevers als pool nog niet bestaat
if (!PHOTO_POOLS.opdrachtgevers || PHOTO_POOLS.opdrachtgevers.length === 0) {
  PHOTO_POOLS.opdrachtgevers = PHOTO_POOLS.waar_we_voor_staan || ['uploads/Schermafbeelding 2025-02-17 om 10.31-71f5db4e.jpeg'];
}
const pickFrom = (arr) => arr[Math.floor(Math.random() * arr.length)];
const MANIFESTO_PORTRAIT = { src: pickFrom(PHOTO_POOLS.waar_we_voor_staan), pos: 'center 30%' };
const PROCESS_PHOTO      = { src: pickFrom(PHOTO_POOLS.zo_werken_we),       pos: 'center 30%' };
const VALUES_PHOTO       = { src: pickFrom(PHOTO_POOLS.waar_we_voor_staan), pos: 'center 30%' };
const SERVICES_PHOTO     = { src: pickFrom(PHOTO_POOLS.opdrachtgevers),     pos: 'center 30%' };
// Vaste foto's per opdrachtgever-type (Bedrijven, NGO's, Overheid)
const SERVICES_PHOTOS = [
  { src: 'uploads/Just-Eat-Takeaway.jpg',                            pos: 'center center' },
  { src: 'uploads/Amsterdamse_Hogeschool_voor_de_Kunsten groot.jpeg', pos: 'center center' },
  { src: 'uploads/ministerie-den-haag-turfmarkt.jpg',                pos: 'center center' }
];

function Manifesto({ lang }) {
  const t = COPY[lang].manifesto;
  const isMobile = useIsMobile();
  return (
    <section style={{
      background: 'var(--bg)', color: 'var(--fg)',
      padding: isMobile ? '72px 24px' : '96px 64px'
    }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          marginBottom: isMobile ? 32 : 56
        }}>
          <span style={{
            fontSize: 11, fontWeight: 700, letterSpacing: '2.5px',
            textTransform: 'uppercase', color: 'var(--accent)'
          }}>{t.eyebrow}</span>
          <span style={{
            fontSize: 11, color: 'var(--muted)',
            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace'
          }}>{t.sectionTag}</span>
        </div>

        <div style={{ maxWidth: 1100 }}>
          <h2 style={{
            fontFamily: 'Plus Jakarta Sans',
            fontSize: isMobile ? 'clamp(44px, 11vw, 72px)' : '100.128px',
            fontWeight: 500, lineHeight: 0.98,
            letterSpacing: '-0.04em', color: 'var(--fg)',
            textWrap: 'balance'
          }}>
            {t.kickerPre}{' '}
            <span style={{
              fontWeight: 300, color: 'var(--accent)', fontStyle: 'normal'
            }}>{t.kickerAccent}</span>{' '}
            {t.kickerPost}
          </h2>
        </div>
      </div>
    </section>);

}

// ─── VALUES (kernwaarden) — 3 layouts via Tweaks ─────────────────────────
function Values({ lang, layout }) {
  const t = COPY[lang].manifesto;
  const isMobile = useIsMobile();
  const [open, setOpen] = React.useState(0); // default eerste open
  const toggle = (i) => setOpen((p) => p === i ? -1 : i);

  const header = (
    <React.Fragment>
      <p style={{
        fontSize: 12, fontWeight: 700, letterSpacing: '2px',
        textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 20
      }}>{t.explainerEyebrow}</p>
      <h2 style={{
        fontFamily: 'Plus Jakarta Sans',
        fontSize: isMobile ? 'clamp(32px, 7vw, 48px)' : 'clamp(40px, 4.5vw, 72px)',
        fontWeight: 500, lineHeight: 1.02,
        letterSpacing: '-0.03em', textWrap: 'balance', marginBottom: 24
      }}>
        {t.explainerTitle[0]} <span className="serif" style={{ color: 'var(--accent)' }}>{t.explainerTitle[1]}</span>{t.explainerTitle[2]}
      </h2>
      {t.explainerSub ? (
        <p style={{
          fontSize: isMobile ? 16 : 18, lineHeight: 1.55, color: 'var(--muted)',
          maxWidth: 640, textWrap: 'pretty'
        }}>{t.explainerSub}</p>
      ) : null}
    </React.Fragment>
  );

  // ── Layout 1: editorial header + accordion eronder ─────────────────
  if (layout === 1) {
    return (
      <section style={{
        background: 'var(--blush-soft)', color: 'var(--fg)',
        padding: isMobile ? '72px 24px' : '120px 64px'
      }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          {/* Header rij */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : '1.3fr 1fr',
            gap: isMobile ? 32 : 72,
            alignItems: 'end',
            marginBottom: isMobile ? 48 : 80
          }}>
            <div>{header}</div>
            <div style={{
              position: 'relative',
              aspectRatio: '4/3',
              borderRadius: 20, overflow: 'hidden',
              boxShadow: '0 20px 60px -20px rgba(0,0,0,0.25)'
            }}>
              <ManifestoPhoto src={MANIFESTO_PORTRAIT.src} alt="Maker in de Spraakmaker studio" pos={MANIFESTO_PORTRAIT.pos} fill />
            </div>
          </div>

          {/* Accordion */}
          <div style={{ borderTop: '1px solid var(--blush-deep)' }}>
            {t.values.map((v, i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{ borderBottom: '1px solid var(--blush-deep)' }}>
                  <button
                    onClick={() => toggle(i)}
                    aria-expanded={isOpen}
                    style={{
                      width: '100%', padding: isMobile ? '18px 0' : '24px 0',
                      background: 'transparent', border: 'none', cursor: 'pointer',
                      textAlign: 'left', display: 'flex', alignItems: 'center',
                      gap: isMobile ? 16 : 28, fontFamily: 'inherit'
                    }}>
                    <span style={{
                      flex: 1,
                      fontFamily: 'Plus Jakarta Sans',
                      fontSize: isMobile ? 18 : 24, fontWeight: 500,
                      letterSpacing: '-0.02em', lineHeight: 1.2,
                      color: isOpen ? 'var(--accent)' : 'var(--fg)',
                      transition: 'color 0.2s'
                    }}>{v.title}</span>
                    <span style={{
                      flexShrink: 0,
                      width: isMobile ? 28 : 36, height: isMobile ? 28 : 36,
                      borderRadius: 100,
                      border: '1.5px solid ' + (isOpen ? 'var(--accent)' : 'var(--blush-deep)'),
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      color: isOpen ? 'var(--accent)' : 'var(--muted)',
                      transition: 'all 0.25s ease',
                      transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
                      fontSize: 18, lineHeight: 1
                    }}>+</span>
                  </button>
                  <div style={{
                    maxHeight: isOpen ? 400 : 0,
                    overflow: 'hidden',
                    transition: 'max-height 0.4s ease, opacity 0.3s ease',
                    opacity: isOpen ? 1 : 0
                  }}>
                    <div style={{
                      paddingLeft: 0,
                      paddingRight: isMobile ? 0 : 80,
                      paddingBottom: isMobile ? 22 : 32
                    }}>
                      <p style={{
                        fontSize: isMobile ? 15 : 17, lineHeight: 1.6,
                        color: 'var(--fg)', maxWidth: 680, textWrap: 'pretty'
                      }}>{v.body}</p>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    );
  }

  // ── Layout 2: header bovenaan, accordion eronder (full-width) ──────
  if (layout === 2) {
    return (
      <section style={{
        background: 'var(--blush-soft)', color: 'var(--fg)',
        padding: isMobile ? '72px 24px' : '120px 64px'
      }}>
        <div style={{
          maxWidth: 1400, margin: '0 auto',
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 40 : 80,
          alignItems: 'start'
        }}>
          {/* Left: header */}
          <div style={{
            maxWidth: 560,
            position: isMobile ? 'static' : 'sticky', top: 100
          }}>
            {header}
            <div style={{
              marginTop: isMobile ? 32 : 40,
              position: 'relative',
              aspectRatio: '5/4',
              borderRadius: 16, overflow: 'hidden',
              boxShadow: '0 16px 48px -20px rgba(0,0,0,0.25)'
            }}>
              <RotatingPhoto
                photos={PHOTO_POOLS.waar_we_voor_staan}
                alt="Spraakmaker studio"
                pos="center 30%"
                interval={5000}
                fill
              />
            </div>
          </div>

          {/* Right: accordion */}
          <div>
            {t.values.map((v, i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{
                  background: isOpen ? '#fff' : 'transparent',
                  borderRadius: 16,
                  marginBottom: 8,
                  border: '1px solid ' + (isOpen ? 'var(--border)' : 'transparent'),
                  boxShadow: isOpen ? '0 8px 32px -16px rgba(16,6,159,0.2)' : 'none',
                  transition: 'all 0.25s ease'
                }}>
                  <button
                    onClick={() => toggle(i)}
                    aria-expanded={isOpen}
                    style={{
                      width: '100%', padding: isMobile ? '16px 18px' : '20px 26px',
                      background: 'transparent', border: 'none', cursor: 'pointer',
                      textAlign: 'left', display: 'flex', alignItems: 'center',
                      gap: 16, fontFamily: 'inherit',
                      borderBottom: isOpen ? '1px solid var(--border)' : 'none'
                    }}>
                    <span style={{
                      flex: 1,
                      fontFamily: 'Plus Jakarta Sans',
                      fontSize: isMobile ? 17 : 20, fontWeight: 400,
                      letterSpacing: '-0.015em', lineHeight: 1.3,
                      color: 'var(--fg)'
                    }}>{v.title}</span>
                    <span style={{
                      flexShrink: 0, fontSize: 18, lineHeight: 1,
                      color: isOpen ? 'var(--accent)' : 'var(--muted)',
                      transition: 'transform 0.25s ease',
                      transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)'
                    }}>+</span>
                  </button>
                  <div style={{
                    maxHeight: isOpen ? 400 : 0,
                    overflow: 'hidden',
                    transition: 'max-height 0.4s ease'
                  }}>
                    <p style={{
                      padding: isMobile ? '12px 16px 18px' : '14px 22px 22px',
                      fontSize: isMobile ? 13 : 14, lineHeight: 1.6,
                      color: 'var(--muted)', textWrap: 'pretty', maxWidth: 820
                    }}>{v.body}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    );
  }

  // ── Layout 3: index — header met foto, daaronder typografische lijst
  return (
    <section style={{
      background: 'var(--blush-soft)', color: 'var(--fg)',
      padding: isMobile ? '72px 24px' : '120px 64px'
    }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        {/* Header: heading links, foto rechts breed */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 32 : 64,
          alignItems: 'center',
          marginBottom: isMobile ? 56 : 96
        }}>
          <div>{header}</div>
          <div style={{
            position: 'relative',
            aspectRatio: isMobile ? '4/3' : '16/10',
            borderRadius: 20, overflow: 'hidden',
            boxShadow: '0 20px 60px -20px rgba(0,0,0,0.25)'
          }}>
            <ManifestoPhoto src={MANIFESTO_PORTRAIT.src} alt="Maker in de Spraakmaker studio" pos={MANIFESTO_PORTRAIT.pos} fill />
          </div>
        </div>

        {/* Typografische index — grote regels, click reveals onder */}
        <div style={{ borderTop: '2px solid var(--fg)' }}>
          {t.values.map((v, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderBottom: '1px solid var(--blush-deep)',
                background: isOpen ? 'var(--accent)' : 'transparent',
                color: isOpen ? '#fff' : 'var(--fg)',
                transition: 'background 0.3s ease, color 0.3s ease'
              }}>
                <button
                  onClick={() => toggle(i)}
                  aria-expanded={isOpen}
                  onMouseEnter={(e) => { if (!isOpen) e.currentTarget.style.background = 'rgba(16,6,159,0.05)'; }}
                  onMouseLeave={(e) => { if (!isOpen) e.currentTarget.style.background = 'transparent'; }}
                  style={{
                    width: '100%', padding: isMobile ? '18px 0' : '22px 28px',
                    background: 'transparent', border: 'none', cursor: 'pointer',
                    textAlign: 'left', display: 'flex', alignItems: 'center',
                    gap: isMobile ? 20 : 40, fontFamily: 'inherit',
                    color: 'inherit',
                    transition: 'background 0.2s'
                  }}>
                  <span style={{
                    flex: 1,
                    fontFamily: 'Plus Jakarta Sans',
                    fontSize: isMobile ? 20 : 28, fontWeight: 500,
                    letterSpacing: '-0.025em', lineHeight: 1.15
                  }}>{v.title}</span>
                  <span style={{
                    flexShrink: 0,
                    fontFamily: 'ui-monospace, monospace',
                    fontSize: isMobile ? 12 : 13, fontWeight: 600,
                    textTransform: 'uppercase', letterSpacing: '0.1em',
                    opacity: 0.85
                  }}>{isOpen ? (lang === 'nl' ? 'Sluit' : 'Close') : (lang === 'nl' ? 'Lees' : 'Read')}</span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 500 : 0,
                  overflow: 'hidden',
                  transition: 'max-height 0.45s ease'
                }}>
                  <div style={{
                    padding: isMobile ? '0 0 26px' : '0 28px 36px',
                    maxWidth: 760
                  }}>
                    <p style={{
                      fontSize: isMobile ? 15 : 17, lineHeight: 1.6,
                      color: '#fff', textWrap: 'pretty',
                      fontWeight: 400
                    }}>{v.body}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─── Manifesto photo (real images) ──────────────────────────────────────
function ManifestoPhoto({ src, alt, pos, fill }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      ...(fill ? { position: 'absolute', inset: 0 } : {}),
      overflow: 'hidden', background: '#1A1934'
    }}>
      <img src={src} alt={alt || ''}
        style={{
          width: '100%', height: '100%',
          objectFit: 'cover',
          objectPosition: pos || 'center',
          transform: 'scale(1.25)'
        }} />
    </div>
  );
}

// ─── Auto-rotating photo with crossfade ─────────────────────────────────
function RotatingPhoto({ photos, alt, pos, interval, fill, scale }) {
  const list = (photos && photos.length) ? photos : [];
  // Random start so the rotation doesn't always begin on the same image
  const [idx, setIdx] = React.useState(() => Math.floor(Math.random() * Math.max(list.length, 1)));
  React.useEffect(() => {
    if (list.length < 2) return;
    const id = setInterval(() => {
      setIdx((cur) => {
        // Pick a random index that isn't the current one
        let next = Math.floor(Math.random() * (list.length - 1));
        if (next >= cur) next += 1;
        return next;
      });
    }, interval || 5000);
    return () => clearInterval(id);
  }, [list.length, interval]);

  if (list.length === 0) return null;

  const baseStyle = {
    width: '100%', height: '100%',
    ...(fill ? { position: 'absolute', inset: 0 } : {}),
    overflow: 'hidden', background: '#1A1934'
  };
  return (
    <div style={baseStyle}>
      {list.map((src, i) => (
        <img
          key={src + i}
          src={src}
          alt={i === idx ? (alt || '') : ''}
          aria-hidden={i !== idx}
          loading={i === 0 ? 'eager' : 'lazy'}
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover',
            objectPosition: pos || 'center',
            transform: 'scale(' + (scale || 1.25) + ')',
            opacity: i === idx ? 1 : 0,
            transition: 'opacity 1.2s ease',
            willChange: 'opacity'
          }}
        />
      ))}
    </div>
  );
}

// ─── SERVICES — 3 client types ─────────────────────────────────────────────
function Services({ lang }) {
  const t = COPY[lang].services;
  const isMobile = useIsMobile();
  const [active, setActive] = React.useState(0);

  return (
    <section id="services" style={{
      padding: isMobile ? '80px 24px' : '140px 48px', background: 'var(--bg)'
    }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ maxWidth: 800, marginBottom: isMobile ? 48 : 80 }}>
          <p style={{
            fontSize: 12, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase',
            color: 'var(--accent)', marginBottom: 20
          }}>{t.eyebrow}</p>
          <h2 style={{
            fontFamily: 'Plus Jakarta Sans',
            fontSize: isMobile ? 'clamp(32px, 7vw, 48px)' : 'clamp(40px, 4.5vw, 72px)',
            fontWeight: 500, lineHeight: 1.02, letterSpacing: '-0.03em',
            marginBottom: 24, textWrap: 'balance'
          }}>{t.title}</h2>
          <p style={{
            fontSize: isMobile ? 16 : 18, lineHeight: 1.55, color: 'var(--muted)',
            maxWidth: 640, textWrap: 'pretty'
          }}>{t.sub}</p>
        </div>

        {/* Tabbed accordion on desktop, stacked cards on mobile */}
        {!isMobile ?
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 0,
          background: 'var(--card)',
          borderRadius: 24,
          overflow: 'hidden',
          border: '1px solid var(--border)'
        }}>
            {/* Left: tabs */}
            <div style={{ borderRight: '1px solid var(--border)' }}>
              {t.items.map((item, i) =>
            <button key={i} onClick={() => setActive(i)} style={{
              width: '100%', padding: '40px 48px', textAlign: 'left',
              background: active === i ? 'var(--accent-light)' : 'transparent',
              border: 'none', cursor: 'pointer', display: 'block',
              borderBottom: i < t.items.length - 1 ? '1px solid var(--border)' : 'none',
              transition: 'background 0.2s'
            }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 20, marginBottom: 8 }}>
                    <span style={{
                  fontFamily: 'Plus Jakarta Sans', fontSize: 14, fontWeight: 500,
                  color: active === i ? 'var(--accent)' : 'var(--muted)'
                }}>{item.num}</span>
                    <span style={{
                  fontFamily: 'Plus Jakarta Sans',
                  fontSize: 36, fontWeight: 500, letterSpacing: '-0.03em',
                  color: active === i ? 'var(--accent)' : 'var(--fg)'
                }}>{item.kind}</span>
                  </div>
                  <p className="serif" style={{
                fontSize: 22, color: active === i ? 'var(--fg)' : 'var(--muted)',
                paddingLeft: 40
              }}>{item.tagline}</p>
                </button>
            )}
            </div>

            {/* Right: detail */}
            <div style={{ display: 'flex', flexDirection: 'column', minHeight: 480 }}>
              <div key={active} style={{ animation: 'fadeInUp 0.35s ease', display: 'flex', flexDirection: 'column', height: '100%' }}>
                <div style={{
                  width: '100%', aspectRatio: '16/9', overflow: 'hidden',
                  background: '#1A1934', flexShrink: 0
                }}>
                  <img src={(SERVICES_PHOTOS[active] && SERVICES_PHOTOS[active].src) || SERVICES_PHOTO.src} alt="" loading="lazy" style={{
                    width: '100%', height: '100%', objectFit: 'cover',
                    objectPosition: (SERVICES_PHOTOS[active] && SERVICES_PHOTOS[active].pos) || SERVICES_PHOTO.pos, display: 'block'
                  }} />
                </div>
                <div style={{ padding: '40px 56px 56px', display: 'flex', flexDirection: 'column', flex: 1, justifyContent: 'center' }}>
                <p style={{
                fontSize: 12, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase',
                color: 'var(--accent)', marginBottom: 20
              }}>{t.items[active].kind}</p>
                <p style={{
                fontSize: 18, lineHeight: 1.6, color: 'var(--fg)',
                marginBottom: 32, textWrap: 'pretty'
              }}>{t.items[active].body}</p>

                <div style={{
                padding: 24, background: 'var(--accent-light)', borderRadius: 12,
                borderLeft: '3px solid var(--accent)', marginBottom: 32
              }}>
                  <p style={{
                  fontFamily: 'Plus Jakarta Sans', fontSize: 18, fontWeight: 500,
                  lineHeight: 1.4, color: 'var(--accent)', letterSpacing: '-0.01em'
                }}>{t.items[active].outcome}</p>
                </div>

                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {t.items[active].tags.map((tag, i) =>
                <span key={i} style={{
                  padding: '6px 14px', background: 'var(--bg)',
                  border: '1px solid var(--border)', borderRadius: 100,
                  fontSize: 13, fontWeight: 500, color: 'var(--muted)'
                }}>{tag}</span>
                )}
                </div>
                </div>
              </div>
            </div>
          </div> :

        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {t.items.map((item, i) =>
          <div key={i} style={{
            background: 'var(--card)', borderRadius: 20, padding: 28,
            border: '1px solid var(--border)'
          }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 8 }}>
                  <span style={{
                fontFamily: 'Plus Jakarta Sans', fontSize: 13, fontWeight: 500,
                color: 'var(--accent)'
              }}>{item.num}</span>
                  <h3 style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em' }}>{item.kind}</h3>
                </div>
                <p className="serif" style={{ fontSize: 20, color: 'var(--muted)', marginBottom: 16 }}>
                  {item.tagline}
                </p>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--fg)', marginBottom: 20 }}>
                  {item.body}
                </p>
                <div style={{
              padding: 16, background: 'var(--accent-light)', borderRadius: 10,
              borderLeft: '3px solid var(--accent)', marginBottom: 16
            }}>
                  <p style={{
                fontFamily: 'Plus Jakarta Sans', fontSize: 15, fontWeight: 500,
                color: 'var(--accent)', lineHeight: 1.4
              }}>{item.outcome}</p>
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {item.tags.map((tag, j) =>
              <span key={j} style={{
                padding: '4px 12px', background: 'var(--bg)',
                border: '1px solid var(--border)', borderRadius: 100,
                fontSize: 12, color: 'var(--muted)'
              }}>{tag}</span>
              )}
                </div>
              </div>
          )}
          </div>
        }
      </div>
    </section>);

}

// ─── FEATURED WORK (podcast covers) ────────────────────────────────────────
function Work({ lang }) {
  const t = COPY[lang].work;
  const isMobile = useIsMobile();
  const [cases, setCases] = React.useState([]);

  // Load cases & pick 8 random on mount (new set every reload — 2 rows of 4)
  React.useEffect(() => {
    const pick = (list) => {
      const published = list.filter(c => c.published !== false);
      const shuffled = [...published].sort(() => Math.random() - 0.5);
      setCases(shuffled.slice(0, 8));
    };
    if (window.SPRAAKMAKER_CASES) pick(window.SPRAAKMAKER_CASES);
  }, []);

  // Make current random selection available to the inner JSX via closure rewrite

  return (
    <section id="work" style={{
      padding: isMobile ? '80px 24px' : '140px 48px', background: 'var(--bg)'
    }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          marginBottom: isMobile ? 40 : 72, flexWrap: 'wrap', gap: 24
        }}>
          <div style={{ maxWidth: 700 }}>
            <p style={{
              fontSize: 12, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase',
              color: 'var(--accent)', marginBottom: 20
            }}>{t.eyebrow}</p>
            <h2 style={{
              fontFamily: 'Plus Jakarta Sans',
              fontSize: isMobile ? 'clamp(32px, 7vw, 48px)' : 'clamp(40px, 4.5vw, 72px)',
              fontWeight: 500, lineHeight: 1.02, letterSpacing: '-0.03em',
              marginBottom: 16, textWrap: 'balance'
            }}>{t.title}</h2>
            <p style={{ fontSize: isMobile ? 16 : 18, color: 'var(--muted)' }}>{t.sub}</p>
          </div>
          {!isMobile &&
          <a href="cases/archive.html" style={{
            padding: '12px 24px', border: '1.5px solid var(--fg)', color: 'var(--fg)',
            borderRadius: 100, fontSize: 14, fontWeight: 600, textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 8
          }}>{t.cta} <span>→</span></a>
          }
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)',
          gap: isMobile ? 20 : 24
        }}>
          {cases.map((p, i) =>
          <a key={i} href={`cases/case.html?id=${p.id}`} style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
              <div style={{
              position: 'relative', aspectRatio: '1', borderRadius: 16, overflow: 'hidden',
              background: 'var(--border)', marginBottom: 16,
              boxShadow: '0 1px 2px rgba(0,0,0,0.04)'
            }}>
                <img src={/^(https?:|\/|cases\/|\.\.\/)/.test(p.cover) ? p.cover : `cases/${p.cover}`} alt={`${p.title} podcastcover`} loading="lazy" style={{
                width: '100%', height: '100%', objectFit: 'cover',
                transition: 'transform 0.5s ease'
              }} onMouseEnter={(e) => e.target.style.transform = 'scale(1.04)'}
              onMouseLeave={(e) => e.target.style.transform = 'scale(1)'} />
                <div style={{
                position: 'absolute', top: 12, left: 12,
                padding: '4px 10px', background: 'rgba(255,255,255,0.92)',
                backdropFilter: 'blur(8px)', borderRadius: 100,
                fontSize: 11, fontWeight: 600, color: 'var(--accent)', letterSpacing: '-0.01em'
              }}>{p.client}</div>
              </div>
              <h3 style={{
              fontFamily: 'Plus Jakarta Sans', fontSize: isMobile ? 22 : 26, fontWeight: 500,
              letterSpacing: '-0.02em', lineHeight: 1.15, marginBottom: 8
            }}>{p.title}</h3>
              <p style={{
              fontSize: 14, lineHeight: 1.5, color: 'var(--muted)', textWrap: 'pretty',
            }}>{p.summary}</p>
            </a>
          )}
        </div>

        <div style={{ marginTop: isMobile ? 32 : 56, textAlign: 'center' }}>
          <a href="cases/archive.html" style={{
            padding: '14px 28px', border: '1.5px solid var(--fg)',
            color: 'var(--fg)', borderRadius: 100, fontSize: 14, fontWeight: 600,
            textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8
          }}>{t.cta} <span>→</span></a>
        </div>
      </div>
    </section>);

}

// ─── LOGOS CAROUSEL — vertrouwd door ───────────────────────────────────────

const LOGOS = [
  { src: 'uploads/logos/logo-7-people-zwart-wit.png', alt: '7People' },
  { src: 'uploads/logos/logo-buma-stemra-zwart-wit.png', alt: 'Buma Stemra' },
  { src: 'uploads/logos/logo-deloitte-zwart-wit.png', alt: 'Deloitte' },
  { src: 'uploads/logos/logo-ey-ernst-young-zwart-wit.png', alt: 'EY' },
  { src: 'uploads/logos/logo-gemeente-amsterdam-zwart-wit.png', alt: 'Gemeente Amsterdam' },
  { src: 'uploads/logos/logo-just-eat-take-away-zwart-wit.png', alt: 'Just Eat Takeaway' },
  { src: 'uploads/logos/logo-ministerie-volkgezondheid-welzijn-en-sport-zwart-wit.png', alt: 'Ministerie van VWS' },
  { src: 'uploads/logos/logo-port-of-amsterdam-zwart-wit.png', alt: 'Port of Amsterdam' },
  { src: 'uploads/logos/logo-prosus-zwart-wit.png', alt: 'Prosus' },
  { src: 'uploads/logos/logo-schiphol-zwart-wit.png', alt: 'Schiphol' },
  { src: 'uploads/logos/logo-sire-zwart-wit.png', alt: 'SIRE' },
  { src: 'uploads/logos/logo-tu-delft-zwart-wit.png', alt: 'TU Delft' },
  { src: 'uploads/logos/logo-universiteit-van-amsterdam-zwart-wit.png', alt: 'Universiteit van Amsterdam' },
  { src: 'uploads/logos/logo-van-de-amsterdamse-hogeschool-voor-de-kunsten.png', alt: 'Amsterdamse Hogeschool voor de Kunsten' },
  { src: 'uploads/logos/logo-van-sprints-en-sneakers.png', alt: 'Sprints & Sneakers' },
  { src: 'uploads/logos/logo-vrij-nederland-zwart-wit.png', alt: 'Vrij Nederland' },
  { src: 'uploads/logos/logo-vu-zwart-wit.png', alt: 'VU Amsterdam' }
];

function LogosCarousel({ lang }) {
  const t = COPY[lang].logos;
  const isMobile = useIsMobile();
  const doubled = [...LOGOS, ...LOGOS];

  return (
    <section style={{
      background: '#fff',
      padding: isMobile ? '48px 0' : '64px 0',
      overflow: 'hidden'
    }}>
      <style>{`
        @keyframes sm-logos-marquee {
          0%   { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .sm-logos-track { animation: sm-logos-marquee 80s linear infinite; }
        @media (prefers-reduced-motion: reduce) {
          .sm-logos-track { animation: none; }
        }
      `}</style>

      <div style={{
        maxWidth: 1400, margin: '0 auto',
        padding: isMobile ? '0 24px' : '0 48px',
        marginBottom: isMobile ? 28 : 40
      }}>
        <p style={{
          fontSize: 12, fontWeight: 700, letterSpacing: '2px',
          textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 0
        }}>
          {t.eyebrow}
        </p>
      </div>

      <div style={{
        position: 'relative',
        width: '100%',
        maskImage: 'linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%)',
        WebkitMaskImage: 'linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%)'
      }}>
        <div className="sm-logos-track" style={{
          display: 'flex',
          alignItems: 'center',
          gap: isMobile ? 24 : 36,
          width: 'max-content',
          paddingLeft: isMobile ? 24 : 48
        }}>
          {doubled.map((logo, i) => (
            <img
              key={i}
              src={logo.src}
              alt={logo.alt}
              loading="lazy"
              style={{
                height: isMobile ? 36 : 48,
                width: 'auto',
                maxWidth: isMobile ? 140 : 180,
                objectFit: 'contain',
                flexShrink: 0
              }}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── PROCESS ───────────────────────────────────────────────────────────────
function Process({ lang }) {
  const t = COPY[lang].process;
  const isMobile = useIsMobile();

  return (
    <section id="process" style={{
      padding: isMobile ? '80px 24px' : '140px 48px', background: 'var(--bg-alt)',
      position: 'relative', overflow: 'hidden'
    }}>
      {/* Soft blush blob accent */}
      <div aria-hidden="true" style={{
        position: 'absolute', top: '-10%', right: '-8%',
        width: 600, height: 600, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(200,196,224,0.55) 0%, transparent 70%)',
        filter: 'blur(50px)', pointerEvents: 'none'
      }} />
      <div style={{ maxWidth: 1400, margin: '0 auto', position: 'relative', zIndex: 1 }}>
        {/* Header + intro + hero photo */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.1fr 1fr',
          gap: isMobile ? 32 : 64,
          alignItems: 'end',
          marginBottom: isMobile ? 56 : 96
        }}>
          <div>
            <p style={{
              fontSize: 12, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase',
              color: 'var(--accent)', marginBottom: 20
            }}>{t.eyebrow}</p>
            <h2 style={{
              fontFamily: 'Plus Jakarta Sans',
              fontSize: isMobile ? 'clamp(32px, 7vw, 48px)' : 'clamp(40px, 4.5vw, 72px)',
              fontWeight: 500, lineHeight: 1.02, letterSpacing: '-0.03em',
              marginBottom: 24, textWrap: 'balance'
            }}>{t.title}</h2>
            <p style={{
              fontSize: isMobile ? 16 : 18, lineHeight: 1.55,
              color: 'var(--muted)', maxWidth: 520, textWrap: 'pretty'
            }}>{t.intro}</p>
          </div>
          <div style={{
            position: 'relative',
            aspectRatio: isMobile ? '4/3' : '5/4',
            borderRadius: 20, overflow: 'hidden',
            boxShadow: '0 20px 60px -20px rgba(0,0,0,0.25)'
          }}>
            <RotatingPhoto
              photos={PHOTO_POOLS.zo_werken_we}
              alt={lang === 'nl' ? 'Onze studio in Amsterdam' : 'Our studio in Amsterdam'}
              pos="center 30%"
              interval={5000}
              fill
            />
            <div style={{
              position: 'absolute', left: 16, bottom: 16,
              padding: '6px 12px', background: 'rgba(255,255,255,0.92)',
              backdropFilter: 'blur(8px)', borderRadius: 100,
              fontSize: 11, fontWeight: 600, color: 'var(--accent)', letterSpacing: '-0.01em'
            }}>{lang === 'nl' ? 'Studio, Amsterdam' : 'Studio, Amsterdam'}</div>
          </div>
        </div>

        {/* 6 steps in a 3x2 editorial grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          columnGap: isMobile ? 0 : 40,
          rowGap: isMobile ? 0 : 8,
          borderTop: '1px solid var(--blush-deep)'
        }}>
          {t.steps.map((step, i) => {
            const isLastCol = !isMobile && (i % 3 === 2);
            return (
              <div key={i} style={{
                position: 'relative',
                padding: isMobile ? '36px 0' : '40px 32px 40px 0',
                borderBottom: '1px solid var(--blush-deep)',
                // vertical hairline between columns (desktop only)
                borderRight: !isMobile && !isLastCol ? '1px solid var(--blush-deep)' : 'none'
              }}>
                <div style={{
                  display: 'flex', alignItems: 'baseline', gap: 16,
                  marginBottom: 16
                }}>
                  <div style={{
                    fontFamily: 'Plus Jakarta Sans',
                    fontSize: isMobile ? 40 : 52, fontWeight: 500,
                    color: 'var(--accent)', letterSpacing: '-0.04em',
                    lineHeight: 1
                  }}>{step.num}</div>
                  <h3 style={{
                    fontFamily: 'Plus Jakarta Sans',
                    fontSize: isMobile ? 22 : 24, fontWeight: 500,
                    letterSpacing: '-0.02em', lineHeight: 1.15
                  }}>{step.title}</h3>
                </div>
                <p style={{
                  fontSize: 15, lineHeight: 1.6, color: 'var(--muted)',
                  textWrap: 'pretty', maxWidth: 420
                }}>{step.body}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>);

}

// ─── NUMBERS BAND ──────────────────────────────────────────────────────────
function Numbers({ lang }) {
  const items = COPY[lang].numbers.items;
  const isMobile = useIsMobile();

  return (
    <section style={{
      padding: isMobile ? '56px 24px' : '80px 48px',
      background: 'var(--accent)', color: '#fff'
    }}>
      <div style={{
        maxWidth: 1400, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
        gap: isMobile ? 32 : 48
      }}>
        {items.map((n, i) =>
        <div key={i}>
            <div style={{
            fontFamily: 'Plus Jakarta Sans',
            fontSize: isMobile ? 44 : 'clamp(48px, 5vw, 88px)',
            fontWeight: 500, letterSpacing: '-0.04em', lineHeight: 1,
            marginBottom: 10
          }}>{n.big}</div>
            <p style={{
            fontSize: 13, color: 'rgba(255,255,255,0.75)',
            lineHeight: 1.4, textWrap: 'balance'
          }}>{n.label}</p>
          </div>
        )}
      </div>
    </section>);

}

// ─── LAZY HERO VIDEO ───────────────────────────────────────────────────────
// Renders a low-cost WebP poster immediately so visitors see something
// straight away, then swaps in the autoplaying MP4 only when the section
// scrolls near the viewport. Cuts initial payload from ~14 MB to ~40 KB.
function LazyHeroVideo({ isMobile }) {
  const containerRef = React.useRef(null);
  const videoRef = React.useRef(null);
  const [shouldLoad, setShouldLoad] = React.useState(false);
  const [videoReady, setVideoReady] = React.useState(false);

  React.useEffect(() => {
    if (!containerRef.current) return;
    // If IntersectionObserver isn't available, just load.
    if (typeof IntersectionObserver === 'undefined') {
      setShouldLoad(true);
      return;
    }
    const io = new IntersectionObserver((entries) => {
      for (const entry of entries) {
        if (entry.isIntersecting) {
          setShouldLoad(true);
          io.disconnect();
          break;
        }
      }
    }, { rootMargin: '400px 0px' /* start loading slightly before in view */ });
    io.observe(containerRef.current);
    return () => io.disconnect();
  }, []);

  React.useEffect(() => {
    if (!shouldLoad || !videoRef.current) return;
    const v = videoRef.current;
    const onPlaying = () => setVideoReady(true);
    v.addEventListener('playing', onPlaying);
    // Kick off load + play
    v.load();
    const playPromise = v.play();
    if (playPromise && playPromise.catch) playPromise.catch(() => {/* autoplay blocked, poster stays */});
    return () => v.removeEventListener('playing', onPlaying);
  }, [shouldLoad]);

  const poster = isMobile ? 'uploads/banner-poster-mobile.webp' : 'uploads/banner-poster.webp';

  return (
    <div ref={containerRef} aria-hidden="true" style={{
      position: 'absolute', inset: 0, zIndex: 0, overflow: 'hidden'
    }}>
      {/* Poster — paints immediately, no blocking */}
      <img
        src={poster}
        alt=""
        loading="eager"
        decoding="async"
        fetchpriority="high"
        style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'cover', objectPosition: 'center',
          opacity: videoReady ? 0 : 1,
          transition: 'opacity 600ms ease'
        }}
      />
      {/* Video — only mounted when section nears viewport */}
      {shouldLoad && (
        <video
          ref={videoRef}
          autoPlay
          muted
          loop
          playsInline
          preload="auto"
          poster={poster}
          style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            objectFit: 'cover', objectPosition: 'center',
            opacity: videoReady ? 1 : 0,
            transition: 'opacity 600ms ease'
          }}
        >
          {/* Smaller MP4 first — WebM here is currently larger so we skip it */}
          <source src="uploads/Banner Video 3 small.mp4" type="video/mp4" />
        </video>
      )}
    </div>);

}

// ─── STUDIO (PSA band) ─────────────────────────────────────────────────────
function StudioBand({ lang }) {
  const t = COPY[lang].studio;
  const isMobile = useIsMobile();
  const isNL = lang === 'nl';

  return (
    <section id="studio" style={{
      position: 'relative', minHeight: isMobile ? 'auto' : '78vh',
      paddingTop: isMobile ? 100 : 120, paddingBottom: isMobile ? 80 : 100,
      paddingLeft: isMobile ? 24 : 48, paddingRight: isMobile ? 24 : 48,
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
      color: '#fff', overflow: 'hidden'
    }}>
      {/* Video background — lazy loaded, poster shown immediately */}
      <LazyHeroVideo isMobile={isMobile} />
      {/* Dark overlay for readability */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background: isMobile
          ? 'linear-gradient(to bottom, rgba(7,6,26,0.55) 0%, rgba(7,6,26,0.85) 100%)'
          : 'linear-gradient(to right, rgba(7,6,26,0.82) 0%, rgba(7,6,26,0.65) 55%, rgba(7,6,26,0.35) 100%)'
      }} />

      {/* Content */}
      <div style={{ maxWidth: 1400, margin: '0 auto', width: '100%', position: 'relative', zIndex: 2 }}>
        {/* Eyebrow pill */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          padding: '8px 16px', background: 'rgba(255,255,255,0.12)', borderRadius: 100,
          marginBottom: isMobile ? 32 : 48,
          border: '1px solid rgba(255,255,255,0.2)',
          backdropFilter: 'blur(4px)'
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 100, background: '#fff' }}></span>
          <span style={{ fontSize: 13, fontWeight: 600, color: '#fff', letterSpacing: '-0.01em' }}>
            {t.eyebrow}
          </span>
        </div>

        {/* Big statement — mirrors PSA hero typography */}
        <h1 style={{
          fontFamily: 'Plus Jakarta Sans',
          fontSize: isMobile ? 'clamp(44px, 13vw, 80px)' : 'clamp(72px, 9.5vw, 180px)',
          fontWeight: 500,
          lineHeight: 0.92,
          letterSpacing: '-0.04em',
          color: '#fff',
          marginBottom: isMobile ? 32 : 48,
          textWrap: 'pretty',
          maxWidth: '14ch'
        }}>
          <span style={{ display: 'block', fontSize: isMobile ? undefined : 107, fontWeight: 500, color: '#fff' }}>
            Podcast <span style={{ fontWeight: 400, color: 'rgba(255,255,255,0.6)' }}>Studio</span>
          </span>
          <span style={{ display: 'block', fontSize: isMobile ? undefined : 107, fontWeight: 500, color: '#fff' }}>
            Amsterdam.
          </span>
        </h1>

        {/* Sub + CTAs in grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 32 : 80,
          alignItems: 'end',
          maxWidth: 1400
        }}>
          <p style={{
            fontSize: isMobile ? 17 : 20, lineHeight: 1.55, color: 'rgba(255,255,255,0.8)',
            maxWidth: 560, textWrap: 'pretty', margin: 0
          }}>{t.sub}</p>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: isMobile ? 'flex-start' : 'flex-end' }}>
            <a href="https://podcaststudio.amsterdam" target="_blank" rel="noopener noreferrer" style={{
              padding: '16px 28px', background: 'var(--accent)', color: '#fff',
              textDecoration: 'none', borderRadius: 100, fontSize: 15, fontWeight: 600,
              display: 'inline-flex', alignItems: 'center', gap: 10, fontFamily: 'Plus Jakarta Sans'
            }}>
              {t.cta}
              <span style={{ fontSize: 16 }}>↗</span>
            </a>
            <a href="https://podcaststudio.amsterdam" target="_blank" rel="noopener noreferrer" style={{
              padding: '16px 28px', background: 'transparent', color: '#fff',
              textDecoration: 'none', borderRadius: 100, fontSize: 15, fontWeight: 600,
              border: '1.5px solid rgba(255,255,255,0.3)', fontFamily: 'Plus Jakarta Sans'
            }}>{isNL ? "Bekijk studio's" : 'View studios'}</a>
          </div>
        </div>
      </div>
    </section>);

}

// ─── CLIENT LOGOS ──────────────────────────────────────────────────────────
function ClientLogos({ lang }) {
  const t = COPY[lang].logos;
  const isMobile = useIsMobile();
  const logos = [...CLIENT_LOGOS, ...CLIENT_LOGOS];

  return (
    <section style={{
      padding: isMobile ? '56px 0' : '80px 0', background: 'var(--bg)',
      overflow: 'hidden'
    }}>
      <div style={{ maxWidth: 1400, margin: '0 auto', padding: isMobile ? '0 24px' : '0 48px', marginBottom: 40 }}>
        <p style={{
          fontSize: 12, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase',
          color: 'var(--accent)', marginBottom: 16
        }}>{t.eyebrow}</p>
        <h3 style={{
          fontFamily: 'Plus Jakarta Sans',
          fontSize: isMobile ? 24 : 32, fontWeight: 500,
          letterSpacing: '-0.02em'
        }}>{t.title}</h3>
      </div>

      <div style={{ display: 'flex', overflow: 'hidden' }}>
        <div style={{
          display: 'flex', gap: isMobile ? 40 : 64,
          animation: 'marquee 60s linear infinite',
          flexShrink: 0, alignItems: 'center'
        }}>
          {logos.map((src, i) =>
          <img key={i} src={`uploads/logos/${src}`} alt={src.replace(/-/g, ' ').replace('.png', '')} loading="lazy"
          style={{
            height: isMobile ? 36 : 52, width: 'auto', maxWidth: isMobile ? 110 : 160,
            objectFit: 'contain', flexShrink: 0, opacity: 0.55,
            filter: 'grayscale(1)', transition: 'opacity 0.3s'
          }}
          onMouseEnter={(e) => e.target.style.opacity = '1'}
          onMouseLeave={(e) => e.target.style.opacity = '0.55'} />

          )}
        </div>
      </div>
    </section>);

}

// ─── CONTACT ───────────────────────────────────────────────────────────────
function Contact({ lang }) {
  const t = COPY[lang].contact;
  const isMobile = useIsMobile();
  const [form, setForm] = React.useState({ name: '', email: '', phone: '', message: '', _gotcha: '' });
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error

  const submit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    try {
      const res = await fetch('api/contact.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...form, lang })
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.success) {
        setStatus('sent');
      } else {
        setStatus('error');
      }
    } catch (err) {
      setStatus('error');
    }
  };

  const input = {
    width: '100%', padding: '16px 0', background: 'transparent',
    border: 'none', borderBottom: '1.5px solid var(--border)',
    fontSize: 16, fontFamily: 'Inter', color: 'var(--fg)',
    outline: 'none', transition: 'border-color 0.2s'
  };

  return (
    <section id="contact" style={{
      padding: isMobile ? '80px 24px' : '140px 48px',
      background: 'var(--bg-alt)', color: 'var(--ink)',
      position: 'relative', overflow: 'hidden'
    }}>
      <div style={{
        maxWidth: 1400, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '5fr 7fr',
        gap: isMobile ? 48 : 96, alignItems: 'start',
        position: 'relative', zIndex: 1
      }}>
        {/* Left: heading + contact info */}
        <div>
          <p style={{
            fontSize: 12, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase',
            color: 'var(--accent)', marginBottom: 20
          }}>{t.eyebrow}</p>
          <h2 style={{
            fontFamily: 'Plus Jakarta Sans',
            fontSize: isMobile ? 'clamp(36px, 8vw, 56px)' : 'clamp(48px, 5vw, 88px)',
            fontWeight: 500, lineHeight: 1.02, letterSpacing: '-0.03em',
            marginBottom: 24, textWrap: 'balance'
          }}>
            {t.title}
          </h2>
          <p style={{
            fontSize: isMobile ? 16 : 18, lineHeight: 1.55,
            color: 'var(--muted)', marginBottom: 40, textWrap: 'pretty'
          }}>{t.sub}</p>

          <div style={{
            paddingTop: 32, borderTop: '1px solid var(--border)',
            display: 'flex', flexDirection: 'column', gap: 14
          }}>
            <p style={{
              fontSize: 11, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase',
              color: 'var(--muted)', marginBottom: 4
            }}>{t.or}</p>
            <a href="tel:+31202117870" style={{
              color: 'var(--ink)', textDecoration: 'none',
              fontFamily: 'Plus Jakarta Sans', fontSize: 24, fontWeight: 500,
              letterSpacing: '-0.02em'
            }}>020 2117870</a>
            <a href="mailto:info@spraakmaker.media" style={{
              color: 'var(--ink)', textDecoration: 'none',
              fontFamily: 'Plus Jakarta Sans', fontSize: 24, fontWeight: 500,
              letterSpacing: '-0.02em'
            }}>info@spraakmaker.media</a>
            <p style={{ fontSize: 14, color: 'var(--muted)', marginTop: 6 }}>{t.address}</p>
          </div>
        </div>

        {/* Right: form */}
        <div>
          {status === 'sent' ?
          <div style={{
            padding: '48px 40px', background: '#fff',
            border: '1px solid var(--border)', borderRadius: 20,
            display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 16
          }}>
              <div style={{
              width: 56, height: 56, borderRadius: 100, background: 'var(--accent)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 24, color: '#fff'
            }}>✓</div>
              <h3 style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em' }}>
                {t.sent}
              </h3>
            </div> :

          <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
              {/* Honeypot — verborgen veld voor bots */}
              <input
                type="text"
                name="_gotcha"
                tabIndex={-1}
                autoComplete="off"
                value={form._gotcha}
                onChange={(e) => setForm({ ...form, _gotcha: e.target.value })}
                style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }}
                aria-hidden="true" />
              <div style={{
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
              gap: isMobile ? 0 : 32, rowGap: isMobile ? 0 : 32
            }}>
                <label style={{ display: 'block' }}>
                  <span style={{
                  fontSize: 11, fontWeight: 700, letterSpacing: '2px',
                  textTransform: 'uppercase', color: 'var(--muted)'
                }}>{t.name}</span>
                  <input required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })}
                style={{ ...input, color: 'var(--ink)', borderColor: 'var(--border)' }}
                onFocus={(e) => e.target.style.borderColor = 'var(--accent)'}
                onBlur={(e) => e.target.style.borderColor = 'var(--border)'} />
                </label>
                <label style={{ display: 'block' }}>
                  <span style={{
                  fontSize: 11, fontWeight: 700, letterSpacing: '2px',
                  textTransform: 'uppercase', color: 'var(--muted)'
                }}>{t.email}</span>
                  <input required type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })}
                style={{ ...input, color: 'var(--ink)', borderColor: 'var(--border)' }}
                onFocus={(e) => e.target.style.borderColor = 'var(--accent)'}
                onBlur={(e) => e.target.style.borderColor = 'var(--border)'} />
                </label>
              </div>

              <label style={{ display: 'block' }}>
                <span style={{
                fontSize: 11, fontWeight: 700, letterSpacing: '2px',
                textTransform: 'uppercase', color: 'var(--muted)'
              }}>{t.phone}</span>
                <input type="tel" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })}
              style={{ ...input, color: 'var(--ink)', borderColor: 'var(--border)' }}
              onFocus={(e) => e.target.style.borderColor = 'var(--accent)'}
              onBlur={(e) => e.target.style.borderColor = 'var(--border)'} />
              </label>

              <label style={{ display: 'block' }}>
                <span style={{
                fontSize: 11, fontWeight: 700, letterSpacing: '2px',
                textTransform: 'uppercase', color: 'var(--muted)'
              }}>{t.message}</span>
                <textarea required rows="4" value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })}
              style={{ ...input, color: 'var(--ink)', borderColor: 'var(--border)', resize: 'vertical', paddingTop: 12, fontFamily: 'Inter' }}
              onFocus={(e) => e.target.style.borderColor = 'var(--accent)'}
              onBlur={(e) => e.target.style.borderColor = 'var(--border)'} />
              </label>

              {status === 'error' &&
              <div role="alert" style={{
                padding: '16px 20px', background: '#FFF1F1',
                border: '1px solid #F5C6C6', borderRadius: 12,
                color: '#7A1F1F', fontSize: 14, lineHeight: 1.5
              }}>
                {t.error}
              </div>
              }

              <button type="submit" disabled={status === 'sending'} style={{
              alignSelf: 'flex-start', marginTop: 8,
              padding: '16px 32px', background: 'var(--accent)', color: '#fff',
              border: 'none', borderRadius: 100, fontSize: 15, fontWeight: 600,
              fontFamily: 'Inter', cursor: status === 'sending' ? 'wait' : 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 10
            }}>
                {status === 'sending' ? t.sending : t.send}
                {status !== 'sending' && <span>→</span>}
              </button>
            </form>
          }
        </div>
      </div>
    </section>);

}

// ─── FOOTER ────────────────────────────────────────────────────────────────
function Footer({ lang }) {
  const t = COPY[lang].footer;
  const nav = COPY[lang].nav;
  const isMobile = useIsMobile();

  return (
    <footer style={{
      padding: isMobile ? '56px 24px 32px' : '80px 48px 40px',
      background: 'var(--ink)', color: '#fff',
      borderTop: '1px solid rgba(255,255,255,0.1)'
    }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '2fr 1fr 1fr 1fr',
          gap: isMobile ? 40 : 48, marginBottom: 56
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'baseline', marginBottom: 16 }}>
              <span style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 28, letterSpacing: '-0.03em' }}>spraakmaker</span>
              <span style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 400, fontSize: 28, letterSpacing: '-0.03em', marginLeft: 8, color: 'rgba(255,255,255,0.55)' }}>media</span>
            </div>
            <p className="serif" style={{ fontSize: 22, color: 'rgba(255,255,255,0.7)', maxWidth: 380, lineHeight: 1.3 }}>
              {t.tagline}
            </p>
          </div>

          <div>
            <p style={{ fontSize: 11, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', marginBottom: 16 }}>
              {t.navHeading}
            </p>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
              {Object.entries(nav).map(([k, v]) =>
              <li key={k}><a href={`#${k}`} style={{ color: 'rgba(255,255,255,0.8)', textDecoration: 'none', fontSize: 15 }}>{v}</a></li>
              )}
            </ul>
          </div>

          <div>
            <p style={{ fontSize: 11, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', marginBottom: 16 }}>
              {t.address}
            </p>
            <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.8)', lineHeight: 1.6 }}>
              Gibraltarstraat 42<br />
              1055 NP Amsterdam<br /><br />
              <a href="tel:+31202117870" style={{ color: 'rgba(255,255,255,0.8)', textDecoration: 'none' }}>020 2117870</a><br />
              <a href="mailto:info@spraakmaker.media" style={{ color: 'rgba(255,255,255,0.8)', textDecoration: 'none' }}>info@spraakmaker.media</a>
            </p>
          </div>

          <div>
            <p style={{ fontSize: 11, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', marginBottom: 16 }}>
              {t.socialHeading}
            </p>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <li><a href="https://www.instagram.com/spraakmakermedia/" target="_blank" rel="noopener noreferrer" style={{ color: 'rgba(255,255,255,0.8)', textDecoration: 'none', fontSize: 15 }}>Instagram ↗</a></li>
              <li><a href="https://www.linkedin.com/company/spraakmaker-media/" target="_blank" rel="noopener noreferrer" style={{ color: 'rgba(255,255,255,0.8)', textDecoration: 'none', fontSize: 15 }}>LinkedIn ↗</a></li>
              <li><a href="https://www.youtube.com/@SpraakmakerMedia" target="_blank" rel="noopener noreferrer" style={{ color: 'rgba(255,255,255,0.8)', textDecoration: 'none', fontSize: 15 }}>YouTube ↗</a></li>
              <li style={{ marginTop: 12 }}><a href="https://podcaststudio.amsterdam" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--accent-light)', textDecoration: 'none', fontSize: 15, fontWeight: 600 }}>Podcast Studio Amsterdam ↗</a></li>
            </ul>
          </div>
        </div>

        <div style={{
          paddingTop: 28, borderTop: '1px solid rgba(255,255,255,0.1)',
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12,
          fontSize: 13, color: 'rgba(255,255,255,0.4)'
        }}>
          <span>{t.colophon}</span>
          <span>{t.kvk} · {t.btw}</span>
        </div>
      </div>
    </footer>);

}

// ─── TWEAKS ────────────────────────────────────────────────────────────────
function TweaksPanel({ tweaks, setTweaks, visible }) {
  if (!visible) return null;
  const accents = [
  { name: 'Spraakmaker Indigo', val: '#10069F' },
  { name: 'Diep Zwart', val: '#0A0920' },
  { name: 'Klassiek Blauw', val: '#1E3A8A' },
  { name: 'Warm Terra', val: '#C2410C' }];

  const fonts = ['Plus Jakarta Sans', 'Instrument Serif', 'Inter'];
  return (
    <div style={{
      position: 'fixed', bottom: 24, right: 24, zIndex: 9999,
      background: '#fff', padding: 20, borderRadius: 16,
      boxShadow: '0 20px 60px rgba(0,0,0,0.18)', border: '1px solid var(--border)',
      fontFamily: 'Inter', width: 320, maxHeight: '80vh', overflowY: 'auto'
    }}>
      <p style={{ fontSize: 11, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 16 }}>
        Tweaks
      </p>
      <p style={{ fontSize: 12, fontWeight: 600, marginBottom: 8, color: 'var(--muted)' }}>Accent kleur</p>
      <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
        {accents.map((a) =>
        <button key={a.val} onClick={() => setTweaks((p) => ({ ...p, accentColor: a.val }))}
        title={a.name}
        style={{
          width: 36, height: 36, borderRadius: 100, background: a.val,
          border: tweaks.accentColor === a.val ? '3px solid var(--fg)' : '2px solid var(--border)',
          cursor: 'pointer'
        }} />
        )}
      </div>
      <p style={{ fontSize: 12, fontWeight: 600, marginBottom: 8, color: 'var(--muted)' }}>Heading font</p>
      <select value={tweaks.headingFont} onChange={(e) => setTweaks((p) => ({ ...p, headingFont: e.target.value }))}
      style={{ width: '100%', padding: '8px 12px', fontSize: 13, border: '1px solid var(--border)', borderRadius: 8, fontFamily: 'Inter' }}>
        {fonts.map((f) => <option key={f} value={f}>{f}</option>)}
      </select>

      <p style={{ fontSize: 12, fontWeight: 600, marginTop: 20, marginBottom: 8, color: 'var(--muted)' }}>Kernwaarden-blok</p>
      <div style={{ display: 'flex', gap: 6 }}>
        {[
          { val: 1, label: 'Editorial', sub: 'Foto + accordion' },
          { val: 2, label: 'Split', sub: 'Sticky foto links' },
          { val: 3, label: 'Index', sub: 'Typografische lijst' }
        ].map((opt) => {
          const active = (tweaks.valuesLayout || 1) === opt.val;
          return (
            <button key={opt.val} onClick={() => setTweaks((p) => ({ ...p, valuesLayout: opt.val }))}
              style={{
                flex: 1, padding: '10px 8px', borderRadius: 10,
                border: active ? '2px solid var(--accent)' : '1px solid var(--border)',
                background: active ? 'var(--accent-light)' : '#fff',
                cursor: 'pointer', textAlign: 'center', fontFamily: 'Inter'
              }}>
              <div style={{
                fontSize: 18, fontWeight: 700, fontFamily: 'Plus Jakarta Sans',
                color: active ? 'var(--accent)' : 'var(--fg)', lineHeight: 1
              }}>0{opt.val}</div>
              <div style={{
                fontSize: 11, fontWeight: 600, marginTop: 6,
                color: active ? 'var(--accent)' : 'var(--fg)'
              }}>{opt.label}</div>
              <div style={{ fontSize: 9, color: 'var(--muted)', marginTop: 2, lineHeight: 1.3 }}>{opt.sub}</div>
            </button>
          );
        })}
      </div>
    </div>);

}

// ─── APP ───────────────────────────────────────────────────────────────────
function App() {
  const [lang, setLang] = React.useState(() => {
    const params = new URLSearchParams(window.location.search);
    return params.get('lang') || localStorage.getItem('sm_lang') || 'nl';
  });
  const scrolled = useScrolled(40);

  const [tweaks, setTweaks] = React.useState(/*EDITMODE-BEGIN*/{
    "accentColor": "#10069F",
    "headingFont": "Plus Jakarta Sans",
    "valuesLayout": 2
  } /*EDITMODE-END*/);
  const [tweaksVisible, setTweaksVisible] = React.useState(false);

  React.useEffect(() => {
    localStorage.setItem('sm_lang', lang);
    document.documentElement.lang = lang;
  }, [lang]);

  React.useEffect(() => {
    if (tweaks.accentColor) document.documentElement.style.setProperty('--accent', tweaks.accentColor);
  }, [tweaks.accentColor]);

  React.useEffect(() => {
    const font = tweaks.headingFont || 'Plus Jakarta Sans';
    let style = document.getElementById('sm-heading-override');
    if (!style) {style = document.createElement('style');style.id = 'sm-heading-override';document.head.appendChild(style);}
    style.textContent = `h1, h2, h3, h4, h5 { font-family: '${font}', sans-serif !important; }`;
  }, [tweaks.headingFont]);

  React.useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === '__activate_edit_mode') setTweaksVisible(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweaksVisible(false);
    };
    window.addEventListener('message', handler);
    const post = () => window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    post();
    const t = setTimeout(post, 500);
    return () => {window.removeEventListener('message', handler);clearTimeout(t);};
  }, []);

  const handleSetTweaks = (fn) => {
    setTweaks((prev) => {
      const next = typeof fn === 'function' ? fn(prev) : fn;
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: next }, '*');
      return next;
    });
  };

  return (
    <>
      <Nav lang={lang} setLang={setLang} scrolled={scrolled} />
      <Hero lang={lang} />
      <Manifesto lang={lang} />
      <Values lang={lang} layout={tweaks.valuesLayout || 2} />
      <Services lang={lang} />
      <Process lang={lang} />
      <LogosCarousel lang={lang} />
      <Work lang={lang} />
      <StudioBand lang={lang} />
      <Contact lang={lang} />
      <Footer lang={lang} />
      <TweaksPanel tweaks={tweaks} setTweaks={handleSetTweaks} visible={tweaksVisible} />
    </>);

}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);