/* global React */

// ============================================================
// Hi-Fi Variant A — Light theme, production-ready
// All copy lives in CONTENT below. Freeze = single object replace.
// ============================================================

const CONTENT = /*CONTENT-BEGIN*/{
  "nav.cta": "Nu Aanmelden",
  "hero.badge": "Full-Time Head Of Content (Remote)",
  "hero.h1a": "Full-Time Head of Content (Remote)",
  "hero.h1b": "voor Ecom Freedom - Thomas v/d Leck.",
  "hero.lead": "De operationele rechterhand die onze content-machine runt. 6-figures basis plus performance based mogelijkheden richting meerdere 6-figs per jaar.",
  "hero.video.caption": "Thomas vertelt — 60 sec",
  "hero.cta.primary": "Nu Aanmelden",
  "hero.cta.secondary": "Lees verder",
  "thomas.eyebrow": "WIE IS THOMAS",
  "thomas.h2a": "Over ",
  "thomas.h2b": "Thomas en de missie",
  "thomas.h2c": ".",
  "thomas.body_html": "Thomas is toen hij 12 was begonnen met ondernemen. Eieren verkopen in de buurt en andere kleine side hustles.<br><br>Hij heeft altijd al een passie gehad om andere mensen te inspireren. Dat begon met een podcast die hij startte op zijn 17e, en dat heeft zich inmiddels vertaald naar verschillende social media kanalen vol met waardevolle content.<br><br>Op zijn 16e is Thomas gestart met e-commerce en inmiddels dus 6+ jaar actief in deze space. Veel fouten, en miljoenen aan omzet verder en nadat hij zijn eigen leven heeft omgegooid is het nu de beurt aan andere.<br><br>Thomas is een beetje klaar met het 'denk groot', 'snel rijk' worden gedoe in NL/BE en voelt daarom de verplichting om zoveel mogelijk bruikbare waarde te delen zodat ook andere (met hard werken), hun leven om kunnen gooien, om in meer vrijheid te leven.",
  "thomas.handle1": "@thomasvdleck",
  "thomas.handle2": "YT 37k+ subs",
  "role.eyebrow": "DE ROL",
  "role.h2a": "De ",
  "role.h2b": "cruciale schakel",
  "role.h2c": " tussen Thomas en het creative team.",
  "role.lead": "Je bent dagelijks close in contact met het creatieve talent binnen ons creative team. Je speelt de grote visie door en je zet dit om in dagelijkse acties om de doelen te behalen. Je zorgt daarnaast voor een toffe positieve sfeer onderling waardoor iedereen optimaal kan presteren en groeien.",
  "bridge.thomas.label": "Thomas",
  "bridge.thomas.sub": "VISIONAIR · FOUNDER",
  "bridge.you.pill": "JIJ",
  "bridge.you.label": "Head of Content",
  "bridge.you.sub": "OPERATIONS · SCHAKEL",
  "bridge.team.label": "Creative team",
  "bridge.team.sub": "EDITORS · THUMBS · ANIMATORS",
  "resp.1.title": "Het creative team",
  "resp.1.text": "Editors, thumbnail designer, animators, en de mensen die helpen voorbereiden. Long-form (YouTube) én short-form (TikTok, Shorts, Instagram).",
  "resp.2.title": "De content-pipeline",
  "resp.2.text": "Welke video's lopen, wat komt er live, lopen we op schema. Project management: deadlines halen — en zorgen dat het hele team dat ook doet.",
  "resp.3.title": "Team management",
  "resp.3.text": "Je bent altijd op zoek naar nieuw talent om de doelen en daarmee de impact te kunnen waarmaken. Knopen doorhakken binnen de visie is voor jou vanzelfsprekend. Denk hierbij aan hiring, firing etc.",
  "fit.wel.title": "Dit is voor jou als…",
  "fit.wel.0": "Je de visie ziet en de operationele machine erachter wil bouwen én managen.",
  "fit.wel.1": "Je super goed bent in operations en ziet wat er nodig is om een target te halen.",
  "fit.wel.2": "Je goed bent met mensen — leadership skills, duidelijke communicatie en mensen enthousiast krijgen voor een doel.",
  "fit.wel.3": "Je nieuwsgierig en hongerig bent: je wil constant weten hoe de grootste spelers in de internationale markt werken en waarom bepaalde content zo goed aanslaat.",
  "fit.wel.4": "Je connecting the dots ziet: dit doen ze, dat werkt, hier zit de lijn.",
  "fit.wel.5": "Het lijkt je uitdagend en tof om close 1-op-1 samen te werken met een succesvolle ondernemer en daar veel van te leren",
  "fit.wel.6": "Je niet wacht op input — je ziet het zelf en pakt het op.",
  "fit.niet.title": "Dit is niet voor jou als…",
  "fit.niet.0": "Je iemand bent die denkt dat deze rol gaat om even wat \"filmen\" en \"editten\" - Nee. Jij bent de schakel tussen de visie en het uitvoerende creative team. ",
  "fit.niet.1": "Je niet tegen directe communicatie kan, of feedback persoonlijk opvat.",
  "fit.niet.2": "Je niet mega hongerig bent om te groeien.",
  "fit.niet.3": "Je een victim-mentaliteit hebt of slordig bent.",
  "fit.niet.4": "Je dit \"even on the side\" wil doen — dit is een fulltime commitment en life changing in alle opzichten. ",
  "fit.niet.5": "Je wacht tot iemand je vertelt wat je moet doen.",
  "clar.eyebrow": "BELANGRIJK",
  "clar.body": "Voor deze rol is het niet cruciaal om een YouTube, thumbnail- of short-form \"expert\" te zijn. De experts hebben we intern al rondlopen. Jij bent de operationele schakel tussen de visie (Thomas) en de creatives. Jij bent de olie in de machine. Uiteraard is het een + als je kan editten, film skills etc hebt. Maar dat is niet waar deze rol in de essentie om draait. ",
  "comp.basis.label": "BASIS FEE",
  "comp.basis.value": "€100.000",
  "comp.basis.unit": "/jaar",
  "comp.basis.note": "±€8.000+ per maand",
  "comp.perf.label": "PERFORMANCE BASED",
  "comp.perf.value": "Meerdere 6-figs p/jaar",
  "comp.perf.note": "Volledig in eigen hand — hoe meer waarde jij levert.",
  "comp.tag": "Een unieke, uitdagende kans voor die ene juiste persoon.",
  "out.eyebrow": "OUTPUT",
  "out.h2": "Dit is waar je aan gaat werken.",
  "out.lead": "",
  "yt.1.title": "Dag in het leven + onze Paris Mastermind met members van Ecom Freedom",
  "yt.1.views": "124K views",
  "yt.2.title": "Zo Bouw Je in 20 Minuten een Shopify Store (Met AI)",
  "yt.2.views": "",
  "yt.3.title": "Geef Me 8 Minuten En Je Twijfelt Nooit Meer Aan Jezelf",
  "yt.3.views": "",
  "yt.label": "YouTube",
  "short.eyebrow": "SHORT-FORM",
  "short.h2": "Als ook de short-form...",
  "short.lead": "",
  "short.1.title": "",
  "short.1.tag": "PODCAST",
  "short.2.title": "",
  "short.2.tag": "STUDIO",
  "team.eyebrow": "HET TEAM",
  "team.h2a": "Met wie je ",
  "team.h2b": "dagelijks samenwerkt",
  "team.h2c": ".",
  "team.lead": "Een hecht creative team — editors, thumbnail designers, animators. Klein, scherp, en allemaal gefocust op één ding: betere content.",
  "cta.h3a": "Ben jij ervan overtuigd dat jij de a-player bent die we zoeken? ",
  "cta.h3b": "Meld je nu aan hieronder.",
  "cta.body": "",
  "cta.btn": "Nu Aanmelden",
  "ig.eyebrow": "INSTAGRAM",
  "ig.h2": "@thomasvdleck",
  "ig.cta": "Volg @thomasvdleck",
  "footer.copy": "© Ecom Freedom 2026",
  "footer.label": "Head of Content · Vacature",
  "bottombar.totop": "↑ Terug naar boven"
}/*CONTENT-END*/;

// All media URLs / asset paths live here. Edit a value, push to GitHub,
// Vercel deploys → live. Empty string = render a styled placeholder.
const MEDIA = /*MEDIA-BEGIN*/{
  "hero.video":      "https://vimeo.com/1189675388",
  "thomas.portrait": "assets/thomas-palm.jpg",
  "short.1.video":   "https://vimeo.com/1190467886?fl=ip&fe=ec",
  "short.2.video":   "https://vimeo.com/1190468531?fl=ip&fe=ec"
}/*MEDIA-END*/;

// E renders text from CONTENT. Production-mode: no contentEditable, no
// in-place editing. To change copy: edit the CONTENT object above and
// push. Add ?edit=1 to URL to temporarily re-enable in-browser editing
// (useful for local tweak + window.__hfFreeze() to re-extract CONTENT).
const __EDIT_MODE = typeof window !== "undefined"
  && /[?&]edit=1\b/.test(window.location.search);

const E = ({ k, tag = "span", className = "", children, html, ...rest }) => {
  const Tag = tag;
  const value = k != null ? CONTENT[k] : undefined;
  const props = {
    className: __EDIT_MODE ? `hf-edit ${className}` : className,
    "data-ck": k,
    ...rest
  };
  if (__EDIT_MODE) {
    props.contentEditable = true;
    props.suppressContentEditableWarning = true;
    props.spellCheck = false;
  }
  if (html || (k != null && k.endsWith("_html"))) {
    props.dangerouslySetInnerHTML = { __html: value != null ? value : (html || "") };
    return React.createElement(Tag, props);
  }
  return React.createElement(Tag, props, value != null ? value : children);
};

// Freeze helper: read all live edits and rebuild CONTENT.
// Call window.__hfFreeze() in console — returns a JSON object you can
// paste back into CONTENT, or just call with no arg to log it.
window.__hfFreeze = () => {
  const out = {};
  document.querySelectorAll('[data-ck]').forEach((el) => {
    const k = el.getAttribute('data-ck');
    if (!k || k === "null") return;
    out[k] = k.endsWith("_html") ? el.innerHTML : el.innerText;
  });
  console.log(JSON.stringify(out, null, 2));
  return out;
};

// Convert a Vimeo / Wistia / YouTube / TikTok / Instagram URL to its
// proper embed src. Same matching as before, just no editor surface.
const toEmbedSrc = (raw) => {
  if (!raw) return "";
  const s = raw.trim();
  const iframeMatch = s.match(/<iframe[^>]*src=["']([^"']+)["']/i);
  if (iframeMatch) return iframeMatch[1];
  const vimeo = s.match(/vimeo\.com\/(?:video\/)?(\d+)(?:\/([a-z0-9]+))?/i);
  if (vimeo) {
    const h = vimeo[2] ? `?h=${vimeo[2]}` : "";
    return `https://player.vimeo.com/video/${vimeo[1]}${h}`;
  }
  const wistia = s.match(/wistia\.(?:com|net)\/(?:medias|embed\/iframe)\/([a-z0-9]+)/i);
  if (wistia) return `https://fast.wistia.net/embed/iframe/${wistia[1]}`;
  const tiktok = s.match(/tiktok\.com\/(?:@[^/]+\/video\/|v\/|embed\/v2\/|embed\/)?(\d{6,})/i);
  if (tiktok) return `https://www.tiktok.com/embed/v2/${tiktok[1]}`;
  const ig = s.match(/instagram\.com\/(?:p|reel|reels|tv)\/([a-zA-Z0-9_-]+)/i);
  if (ig) return `https://www.instagram.com/p/${ig[1]}/embed`;
  const yt = s.match(/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|shorts\/))([a-zA-Z0-9_-]{11})/);
  if (yt) return `https://www.youtube.com/embed/${yt[1]}`;
  return s;
};

// Hero/short video embed. Pure render — URL comes from MEDIA, no
// localStorage, no editor UI. Empty MEDIA value → poster fallback link.
const VideoUploader = ({ id, mediaKey, fallbackHref, captionKey, portrait }) => {
  // Derive mediaKey from id if not provided ("hero-video" → "hero.video",
  // "short-video-1" → "short.1.video"). Keeps existing call-sites working.
  const key = mediaKey
    || (id === "hero-video" ? "hero.video"
       : id && id.startsWith("short-video-") ? `short.${id.slice("short-video-".length)}.video`
       : id);
  const embedUrl = toEmbedSrc(MEDIA[key] || "");

  return (
    <div className={`hf-video-frame${portrait ? ' hf-video-frame-portrait' : ''}`}>
      <div id={id} className="hf-video-wrap">
        {embedUrl ? (
          <iframe
            src={embedUrl}
            allow="autoplay; fullscreen; picture-in-picture"
            allowFullScreen
            style={{ width: "100%", height: "100%", border: 0, display: "block", background: "#000" }}
            title="Video"
          />
        ) : (
          <a
            href={fallbackHref || "#"}
            target="_blank"
            rel="noopener"
            className="hf-video-poster-link"
            aria-label="Bekijk de video"
          >
            <div className="hf-video-poster-placeholder" aria-hidden="true" />
            <div className="hf-video-overlay">
              <div className="hf-video-play" aria-hidden="true">▶</div>
            </div>
            {captionKey && (
              <div className="hf-video-caption">
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#FF4040" }}></span>
                <E tag="span" k={captionKey} />
              </div>
            )}
          </a>
        )}
      </div>
    </div>
  );
};

const YTCard = ({ v }) => {
  const [oeTitle, setOeTitle] = React.useState("");
  React.useEffect(() => {
    let cancelled = false;
    fetch(`https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${v.vid}&format=json`)
      .then(r => r.ok ? r.json() : null)
      .then(j => { if (j && !cancelled) setOeTitle(j.title || ""); })
      .catch(() => {});
    return () => { cancelled = true; };
  }, [v.vid]);
  const titleKey = `yt.${v.n}.title`;
  const stored = CONTENT[titleKey];
  const titleEl = stored
    ? <E tag="span" k={titleKey} />
    : (__EDIT_MODE
        ? <span className="hf-edit" contentEditable suppressContentEditableWarning spellCheck={false} data-ck={titleKey}>{oeTitle}</span>
        : <span data-ck={titleKey}>{oeTitle}</span>);
  return (
    <a href={v.href} target="_blank" rel="noopener" className="hf-yt-card">
      <div className="hf-yt-thumb">
        <img
          src={`https://i.ytimg.com/vi/${v.vid}/maxresdefault.jpg`}
          alt={stored || oeTitle}
          onError={(e) => {
            if (!e.target.dataset.fb) {
              e.target.dataset.fb = "1";
              e.target.src = `https://i.ytimg.com/vi/${v.vid}/hqdefault.jpg`;
            }
          }}
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }}
        />
        <div className="hf-yt-tag">
          <span style={{ fontSize: 9 }}>▶</span>
          <span>YOUTUBE</span>
        </div>
        {v.duration ? <div className="hf-yt-duration">{v.duration}</div> : null}
        <div className="hf-yt-thumb-overlay">
          <div className="hf-yt-play">▶</div>
        </div>
      </div>
      <div className="hf-yt-meta">
        <div className="hf-yt-title">{titleEl}</div>
        <div className="hf-yt-stats">
          {CONTENT[`yt.${v.n}.views`] ? <><span><E tag="span" k={`yt.${v.n}.views`} /></span><span>·</span></> : null}
          <span><E tag="span" k="yt.label" /></span>
        </div>
      </div>
    </a>
  );
};

const HiFiA = () => {
  return (
    <div className="hf" data-screen-label="Hi-fi — Variant A (light)">

      {/* TOP NAV */}
      <div className="hf-nav">
        <a href="#" className="hf-nav-logo" aria-label="Ecom Freedom">
          <img src="assets/ef-logo-transparent.png" alt="Ecom Freedom" />
        </a>
        <a
          href="https://n28xc9nzyan.typeform.com/to/BvZygcjk"
          target="_blank"
          rel="noopener"
          className="hf-btn hf-btn-primary hf-btn-compact">
          <E tag="span" k="nav.cta" />
          <span aria-hidden="true">→</span>
        </a>
      </div>

      {/* HERO */}
      <div className="hf-hero">
        <div className="hf-glow" />

        <div className="hf-hero-badges">
          <E className="hf-badge hf-badge-orange" k="hero.badge" />
        </div>

        <h1 className="hf-h1 hf-hero-h1">
          <E tag="span" k="hero.h1a" />
          <br />
          <E tag="span" className="hf-orange-text" k="hero.h1b" />
        </h1>

        <p className="hf-lead hf-hero-sub">
          <E tag="span" style={{ fontSize: "27px", fontWeight: 500 }} k="hero.lead" />
        </p>

        <VideoUploader
          id="hero-video"
          fallbackHref="https://www.youtube.com/watch?v=3YB2DsXuNhg"
          posterSlotId="hero-video-poster"
          posterPlaceholder="Drop een poster-frame voor de intro-video van Thomas"
          captionKey="hero.video.caption"
        />

        <div className="hf-hero-cta-row" style={{ marginTop: 40 }}>
          <a
            href="https://n28xc9nzyan.typeform.com/to/BvZygcjk"
            target="_blank"
            rel="noopener"
            className="hf-btn hf-btn-primary hf-btn-large">
            <E tag="span" k="hero.cta.primary" />
            <span aria-hidden="true">→</span>
          </a>
          <a
            href="#hf-fit-anchor"
            onClick={(e) => {
              e.preventDefault();
              const target = document.getElementById('hf-fit-anchor');
              if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }}
            className="hf-btn hf-btn-secondary hf-btn-large">
            <E tag="span" k="hero.cta.secondary" />
            <span aria-hidden="true">↓</span>
          </a>
        </div>
      </div>

      {/* SECTIE 2 — WIE IS THOMAS */}
      <div className="hf-section">
        <div className="hf-container">
          <div className="hf-thomas">
            <div className="hf-thomas-portrait-wrap">
              <div className="hf-thomas-portrait" style={{ overflow: "hidden" }}>
                {MEDIA["thomas.portrait"] ? (
                  <img
                    src={MEDIA["thomas.portrait"]}
                    alt="Thomas van der Leck"
                    style={{
                      width: "100%",
                      height: "100%",
                      objectFit: "cover",
                      display: "block",
                      // Match Claude Design's stored crop (scale 1.66, +11.7% x, -38.5% y)
                      transform: "translate(11.7%, -38.5%) scale(1.66)",
                      transformOrigin: "center"
                    }}
                  />
                ) : (
                  <div className="hf-portrait-placeholder" aria-hidden="true" />
                )}
              </div>
            </div>

            <div>
              <p className="hf-eyebrow"><E tag="span" k="thomas.eyebrow" /></p>
              <h2 className="hf-h2" style={{ marginBottom: 24 }}>
                <E tag="span" k="thomas.h2a" />
                <E tag="span" className="hf-orange-text" k="thomas.h2b" />
                <E tag="span" k="thomas.h2c" />
              </h2>
              <p className="hf-body" style={{ fontSize: 18, marginBottom: 24 }}>
                <E tag="span" k="thomas.body_html" />
              </p>

              <div className="hf-thomas-handles">
                <span className="hf-badge"><E tag="span" k="thomas.handle1" /></span>
                <span className="hf-badge"><E tag="span" k="thomas.handle2" /></span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* SECTIE 3 — DE ROL */}
      <div className="hf-section" style={{ background: "var(--hf-surface-1)" }}>
        <div className="hf-container">
          <div id="hf-fit-anchor" data-hf-top="1"></div>

          <div className="hf-section-head">
            <p className="hf-eyebrow"><E tag="span" k="role.eyebrow" /></p>
            <h2 className="hf-h2" style={{ maxWidth: 880 }}>
              <E tag="span" k="role.h2a" />
              <E tag="span" className="hf-orange-text" k="role.h2b" />
              <E tag="span" k="role.h2c" />
            </h2>
            <p className="hf-lead" style={{ marginTop: 16, maxWidth: 720 }}>
              <E tag="span" k="role.lead" />
            </p>
          </div>

          <div className="hf-bridge">
            <div className="hf-bridge-node hf-bridge-thomas">
              <div className="hf-bridge-node-label"><E tag="span" k="bridge.thomas.label" /></div>
              <div className="hf-bridge-node-sub"><E tag="span" k="bridge.thomas.sub" /></div>
            </div>
            <div className="hf-bridge-line" aria-hidden="true"></div>
            <div className="hf-bridge-node hf-bridge-you">
              <div className="hf-bridge-node-pill"><E tag="span" k="bridge.you.pill" /></div>
              <div className="hf-bridge-node-label"><E tag="span" k="bridge.you.label" /></div>
              <div className="hf-bridge-node-sub"><E tag="span" k="bridge.you.sub" /></div>
            </div>
            <div className="hf-bridge-line" aria-hidden="true"></div>
            <div className="hf-bridge-node hf-bridge-team">
              <div className="hf-bridge-node-label"><E tag="span" k="bridge.team.label" /></div>
              <div className="hf-bridge-node-sub"><E tag="span" k="bridge.team.sub" /></div>
            </div>
          </div>

          <div className="hf-resp-grid">
            {[1,2,3].map(n => (
              <div key={n} className="hf-resp-card">
                <div className="hf-resp-num">{String(n).padStart(2, '0')}</div>
                <div className="hf-resp-title"><E tag="span" k={`resp.${n}.title`} /></div>
                <div className="hf-resp-text"><E tag="span" k={`resp.${n}.text`} /></div>
              </div>
            ))}
          </div>

          <div className="hf-fit">
            <div className="hf-fit-col hf-fit-wel">
              <div className="hf-fit-head">
                <span className="hf-fit-tick">✓</span>
                <E tag="span" className="hf-fit-title" k="fit.wel.title" />
              </div>
              <ul className="hf-fit-list">
                {[0,1,2,3,4,5,6].map(i => (
                  <li key={i} className="hf-fit-item">
                    <span className="hf-fit-dot wel" aria-hidden="true">✓</span>
                    <E tag="span" k={`fit.wel.${i}`} />
                  </li>
                ))}
              </ul>
            </div>

            <div className="hf-fit-col hf-fit-niet">
              <div className="hf-fit-head">
                <span className="hf-fit-cross">✗</span>
                <E tag="span" className="hf-fit-title" k="fit.niet.title" />
              </div>
              <ul className="hf-fit-list">
                {[0,1,2,3,4,5].map(i => (
                  <li key={i} className="hf-fit-item">
                    <span className="hf-fit-dot niet" aria-hidden="true">✗</span>
                    <E tag="span" k={`fit.niet.${i}`} />
                  </li>
                ))}
              </ul>
            </div>
          </div>

          <div className="hf-clar">
            <div className="hf-clar-eyebrow"><E tag="span" k="clar.eyebrow" /></div>
            <div className="hf-clar-body"><E tag="span" k="clar.body" /></div>
          </div>

          <div className="hf-comp">
            <div className="hf-comp-row">
              <div className="hf-comp-block">
                <div className="hf-comp-label"><E tag="span" k="comp.basis.label" /></div>
                <div className="hf-comp-value">
                  <E tag="span" k="comp.basis.value" />
                  <span className="hf-comp-unit"><E tag="span" k="comp.basis.unit" /></span>
                </div>
                <div className="hf-comp-note"><E tag="span" k="comp.basis.note" /></div>
              </div>
              <div className="hf-comp-plus" aria-hidden="true">+</div>
              <div className="hf-comp-block">
                <div className="hf-comp-label"><E tag="span" k="comp.perf.label" /></div>
                <div className="hf-comp-value">
                  <E tag="span" className="hf-orange-text" k="comp.perf.value" />
                </div>
                <div className="hf-comp-note"><E tag="span" k="comp.perf.note" /></div>
              </div>
            </div>
            <p className="hf-comp-tag"><E tag="span" k="comp.tag" /></p>
          </div>
        </div>
      </div>

      {/* SECTIE 5 — OUTPUT (YT cards) */}
      <div className="hf-section" style={{ background: "var(--hf-surface-1)" }}>
        <div className="hf-container">
          <div className="hf-section-head">
            <p className="hf-eyebrow"><E tag="span" k="out.eyebrow" /></p>
            <h2 className="hf-h2"><E tag="span" k="out.h2" /></h2>
            <p className="hf-lead" style={{ marginTop: 16 }}><E tag="span" k="out.lead" /></p>
          </div>

          <div className="hf-yt-grid">
            {[
              { n: 1, href: "https://www.youtube.com/watch?v=3YB2DsXuNhg", vid: "3YB2DsXuNhg", duration: "18:42" },
              { n: 2, href: "https://www.youtube.com/watch?v=JZDOsYqh90U&t=33s", vid: "JZDOsYqh90U", duration: "" },
              { n: 3, href: "https://www.youtube.com/watch?v=Zly8bJwXmjI", vid: "Zly8bJwXmjI", duration: "" }
            ].map((v) => (
              <YTCard key={v.n} v={v} />
            ))}
          </div>

          {/* SHORT-FORM */}
          <div className="hf-section-head" style={{ marginTop: 96 }}>
            <p className="hf-eyebrow"><E tag="span" k="short.eyebrow" /></p>
            <h2 className="hf-h2"><E tag="span" k="short.h2" /></h2>
            <p className="hf-lead" style={{ marginTop: 16 }}><E tag="span" k="short.lead" /></p>
          </div>

          <div className="hf-short-grid">
            {[1,2].map((n) => (
              <div key={n} className="hf-short-card">
                <VideoUploader
                  id={`short-video-${n}`}
                  fallbackHref="#"
                  posterSlotId={`short-${n}`}
                  posterPlaceholder={n === 1 ? "Drop podcast frame (9:16)" : "Drop studio snippet frame (9:16)"}
                  captionKey={null}
                  portrait
                />
                <div className="hf-short-meta">
                  <div className="hf-short-tag-inline"><E tag="span" k={`short.${n}.tag`} /></div>
                  <div className="hf-yt-title"><E tag="span" k={`short.${n}.title`} /></div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* TEAM */}
      <div className="hf-section">
        <div className="hf-container">
          <div className="hf-section-head" style={{ textAlign: "center", margin: "0 auto 56px" }}>
            <p className="hf-eyebrow"><E tag="span" k="team.eyebrow" /></p>
            <h2 className="hf-h2">
              <E tag="span" k="team.h2a" />
              <E tag="span" className="hf-orange-text" k="team.h2b" />
              <E tag="span" k="team.h2c" />
            </h2>
            <p className="hf-lead" style={{ marginTop: 16 }}>
              <E tag="span" k="team.lead" />
            </p>
          </div>

          <div className="hf-team-collage-wrap">
            <div className="hf-team-collage">
              <img src="assets/team-collage.png" alt="Het creative team" className="hf-team-collage-img" />
            </div>
          </div>
        </div>
      </div>

      {/* FINAL CTA */}
      <div className="hf-section-tight">
        <div className="hf-container">
          <div className="hf-cta-band">
            <h3 className="hf-h3" style={{ maxWidth: 720 }}>
              <E tag="span" k="cta.h3a" />
              <E tag="span" className="hf-orange-text" k="cta.h3b" />
            </h3>
            <p className="hf-body" style={{ maxWidth: 480, fontSize: 17 }}>
              <E tag="span" k="cta.body" />
            </p>
            <a
              href="https://n28xc9nzyan.typeform.com/to/BvZygcjk"
              target="_blank"
              rel="noopener"
              className="hf-btn hf-btn-primary hf-btn-large">
              <E tag="span" k="cta.btn" />
              <span aria-hidden="true">→</span>
            </a>
          </div>
        </div>
      </div>

      {/* SOCIALS */}
      <div className="hf-section" style={{ background: "var(--hf-surface-1)" }}>
        <div className="hf-container">
          <div className="hf-section-head" style={{ textAlign: "center", margin: "0 auto 56px" }}>
            <p className="hf-eyebrow"><E tag="span" k="ig.eyebrow" /></p>
            <h2 className="hf-h2"><E tag="span" className="hf-orange-text" k="ig.h2" /></h2>
          </div>

          <div className="hf-ig-behold" dangerouslySetInnerHTML={{ __html: '<behold-widget feed-id="okAxGvyn4CGoLuck6sdm"></behold-widget>' }} />

          <div style={{ textAlign: "center", marginTop: 40 }}>
            <a
              href="https://instagram.com/thomasvdleck"
              target="_blank"
              rel="noopener"
              className="hf-btn hf-btn-secondary hf-btn-large">
              <E tag="span" k="ig.cta" />
              <span aria-hidden="true">→</span>
            </a>
          </div>
        </div>
      </div>

      {/* FOOTER */}
      <div className="hf-footer">
        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
          <div className="hf-footer-logo">
            <img src="assets/ef-logo-transparent.png" alt="Ecom Freedom" />
          </div>
          <span><E tag="span" k="footer.copy" /></span>
        </div>
        <span><E tag="span" k="footer.label" /></span>
      </div>

      <div className="hf-bottombar">
        <button
          type="button"
          className="hf-btn hf-btn-secondary hf-btn-large"
          onClick={(e) => {
            e.preventDefault();
            window.scrollTo({ top: 0, behavior: 'smooth' });
            document.documentElement.scrollTo({ top: 0, behavior: 'smooth' });
            document.body.scrollTo({ top: 0, behavior: 'smooth' });
          }}>
          <E tag="span" k="bottombar.totop" />
        </button>
      </div>
    </div>
  );
};

window.HiFiA = HiFiA;