// ─── OP LOCATIE / IN DE STUDIO — stille twee-koloms split ──────────────────
// Tweetalig (NL/EN). Exporteert window.LocatieStudioSection.
(function () {
  const IMG_LOCATIE = [
    'uploads/IMG_0345 groot.jpeg',
    'uploads/IMG_9812 groot.jpeg',
    'uploads/IMG_9227 groot.jpeg',
    'uploads/IMG_9347 groot.jpeg',
    'uploads/IMG_0079 groot.jpeg',
    'uploads/IMG_9464 groot.jpeg'
  ];
  const IMG_STUDIO = [
    'uploads/podcast-studio-amsterdam-ingeborg.jpeg',
    'uploads/podcast-studio-amsterdam-merol.jpeg',
    'uploads/podcast-studio-amsterdam-farouk.jpeg',
    'uploads/podcast-studio-amsterdam-kwetta.jpeg',
    'uploads/podcast-studio-amsterdam-ingrid-tappin.jpeg'
  ];

  const COPY = {
    nl: {
      eyebrow: 'Twee manieren van opnemen',
      title: 'Op locatie of in de studio.',
      sub: 'Twee manieren van werken, dezelfde zorg voor geluid en verhaal.',
      cta: 'Neem contact op',
      left: {
        label: 'Op locatie',
        heading: 'Jouw verhaal, op jouw plek',
        body: [
          'Soms is de context deel van het verhaal. Een gesprek midden op de werkvloer, aan de zijlijn van een event, of in de boardroom waar de beslissingen vallen, dat geeft een opname iets wat je niet kunt nabootsen.',
          'Wij komen naar je toe. Met professionele opnameapparatuur die past in een rugzak maar klinkt als een volwaardige studio. Geen reistijd voor je gasten, geen onbekende omgeving. Gewoon een goed gesprek, op de plek waar jij thuis bent.',
          'We nemen op bij conferenties, op kantoor, of waar jouw verhaal het best tot zijn recht komt. Voor één aflevering of een hele dag vol gesprekken. Wij regelen de techniek, jij zorgt voor de mensen.'
        ]
      },
      right: {
        label: 'In de studio',
        heading: 'Een ruimte die gemaakt is voor podcasts',
        body: [
          'Onze studio in Amsterdam is ingericht voor één ding: de best mogelijke opname. Akoestisch behandeld, zodat omgevingsgeluid geen rol speelt. Professionele microfoons voor elke gast aan tafel. Een regie die live meekijkt en meteen bijstuurt als er iets niet goed zit.',
          'Maar een goede studio is meer dan goede apparatuur. Het is een omgeving waar gasten zich op hun gemak voelen. Waar het gesprek centraal staat, niet de techniek. Wij zorgen ervoor dat je vergeet dat er opgenomen wordt.',
          'De studio is geschikt voor twee tot vier personen. Zowel audio als video, dus de opname is meteen bruikbaar als podcast én als visuele content voor LinkedIn of je website.'
        ]
      }
    },
    en: {
      eyebrow: 'Two ways of recording',
      title: 'On location or in the studio.',
      sub: 'Two ways of working, the same care for sound and story.',
      cta: 'Get in touch',
      left: {
        label: 'On location',
        heading: 'Your story, in your space',
        body: [
          'Sometimes the context is part of the story. A conversation in the middle of the workplace, on the sidelines of an event, or in the boardroom where decisions are made: that gives a recording something you cannot recreate.',
          'We come to you. With professional recording equipment that fits in a backpack but sounds like a full studio. No travel time for your guests, no unfamiliar surroundings. Just a good conversation, in the place where you feel at home.',
          'We record at conferences, at the office, or wherever your story comes into its own. For a single episode or a whole day of conversations. We handle the tech, you bring the people.'
        ]
      },
      right: {
        label: 'In the studio',
        heading: 'A space built for podcasts',
        body: [
          'Our studio in Amsterdam is set up for one thing: the best possible recording. Acoustically treated, so ambient noise plays no part. Professional microphones for every guest at the table. A control room that watches live and adjusts the moment something is off.',
          'But a good studio is more than good equipment. It is an environment where guests feel at ease. Where the conversation takes centre stage, not the technology. We make sure you forget you are being recorded.',
          'The studio suits two to four people. Both audio and video, so the recording is immediately usable as a podcast and as visual content for LinkedIn or your website.'
        ]
      }
    }
  };

  // Zachte crossfade door een fotopool
  function RotatingBanner({ photos, interval, pos }) {
    const [idx, setIdx] = React.useState(0);
    React.useEffect(() => {
      if (photos.length < 2) return;
      const id = setInterval(() => setIdx((c) => (c + 1) % photos.length), interval);
      return () => clearInterval(id);
    }, []);
    return (
      <div className="ls-banner" aria-hidden="true">
        {photos.map((src, i) => (
          <img
            key={src}
            src={src}
            alt=""
            className={'ls-banner-img' + (i === idx ? ' is-active' : '')}
            style={{ objectPosition: pos || 'center 32%' }}
            draggable="false"
          />
        ))}
      </div>
    );
  }

  function Panel({ side, data, photos, interval, pos, cta }) {
    return (
      <article className={'ls-panel ls-panel-' + side}>
        <RotatingBanner photos={photos} interval={interval} pos={pos} />
        <div className="ls-content">
          <span className="ls-label">{data.label}</span>
          <h3 className="ls-heading">{data.heading}</h3>
          {data.body.map((p, i) => (
            <p key={i} className="ls-para">{p}</p>
          ))}
          <a className="ls-cta" href="#contact">{cta}<span className="ls-cta-arrow" aria-hidden="true">→</span></a>
        </div>
      </article>
    );
  }

  function LocatieStudioSection({ lang }) {
    const t = COPY[lang] || COPY.nl;
    return (
      <section id="opnemen" className="ls-section">
        <style>{LS_CSS}</style>
        <div className="ls-head">
          <div className="ls-eyebrow"><span className="ls-dot"></span>{t.eyebrow}</div>
          <h2 className="ls-title">{t.title}</h2>
          <p className="ls-sub">{t.sub}</p>
        </div>
        <div className="ls-grid">
          <Panel side="left" data={t.left} photos={IMG_LOCATIE} interval={4600} pos="center 34%" cta={t.cta} />
          <Panel side="right" data={t.right} photos={IMG_STUDIO} interval={5300} pos="center 30%" cta={t.cta} />
        </div>
      </section>
    );
  }

  window.LocatieStudioSection = LocatieStudioSection;

  const LS_CSS = `
  .ls-section { background: var(--bg); color: var(--fg); padding: clamp(64px,9vw,120px) clamp(24px,5vw,64px); }
  .ls-head { max-width: 1400px; margin: 0 auto clamp(32px,4vw,56px); }
  .ls-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
  .ls-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .ls-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500; font-size: clamp(30px,4.5vw,56px); line-height: 1.02; letter-spacing: -.035em; color: var(--fg); text-wrap: balance; margin-bottom: 14px; }
  .ls-sub { font-size: clamp(15px,2vw,19px); line-height: 1.55; color: var(--muted); max-width: 60ch; text-wrap: pretty; }

  .ls-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2vw,28px); }
  @media (max-width: 860px) { .ls-grid { grid-template-columns: 1fr; } }

  .ls-panel { background: var(--card); border: 1px solid var(--border); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s cubic-bezier(.2,.7,.2,1), opacity .4s ease; }
  /* Hover: de andere kant dimt subtiel */
  @media (hover: hover) and (min-width: 861px) {
    .ls-grid:hover .ls-panel { opacity: .62; }
    .ls-grid:hover .ls-panel:hover { opacity: 1; transform: translateY(-4px); box-shadow: 0 30px 70px -34px rgba(16,6,159,.42); }
    .ls-panel:hover .ls-banner-img.is-active { transform: scale(1.04); }
  }

  .ls-banner { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--night); }
  .ls-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s ease, transform .6s cubic-bezier(.2,.7,.2,1); -webkit-user-drag: none; }
  .ls-banner-img.is-active { opacity: 1; }

  .ls-content { padding: clamp(26px,3vw,44px); }
  .ls-label { display: inline-block; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
  .ls-heading { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500; font-size: clamp(24px,2.6vw,34px); line-height: 1.08; letter-spacing: -.03em; color: var(--fg); text-wrap: balance; margin-bottom: 20px; }
  .ls-para { font-family: 'Inter', sans-serif; font-size: clamp(14px,1.5vw,16px); line-height: 1.62; color: var(--muted); text-wrap: pretty; }
  .ls-para + .ls-para { margin-top: 14px; }
  .ls-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 14px 24px; background: var(--accent); color: #fff; text-decoration: none; border-radius: 100px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; transition: transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .16s ease; }
  .ls-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(16,6,159,.6); opacity: 1; }
  .ls-cta-arrow { font-size: 16px; }

  @media (prefers-reduced-motion: reduce) {
    .ls-panel, .ls-banner-img { transition: none; }
  }
  `;
})();
