// 10 porządnych heroes — focus: read-in-2-seconds, pokazać co najważniejsze
// Każdy wariant odpowiada na 4 pytania NA PIERWSZYM EKRANIE:
//   1) Kto? → Paweł Łukasz
//   2) Co robi? → buduje aplikacje mobilne (iOS + Android)
//   3) Dla kogo? → kontrakty / konsultacje
//   4) Proof? → 5 lat · Tinder 1.5 roku · 2 apki w sklepach
/* global React */

const HERO_ACCENT = '#FF4B1F';

// Wspólne dane — jeden punkt prawdy, wszystkie warianty ciągną stąd
function useHeroData(t) {
  return {
    name: 'Paweł Łukasz',
    role: 'Principal Mobile Engineer',
    // Ultra-zwięzły value prop, najważniejsze zdanie na stronie
    headline: t.hero.tagline1,
    subhead: t.hero.tagline2,
    // 3 twarde fakty, które budują zaufanie
    facts: [
      { n: '5', u: t.lang === 'pl' ? 'lat' : (t.lang === 'es' ? 'años' : 'yrs'), l: t.hero.meta1 },
      { n: '1.5', u: t.lang === 'pl' ? 'roku' : (t.lang === 'es' ? 'años' : 'yrs'), l: 'Tinder · Trust & Safety' },
      { n: '2', u: 'apps', l: 'iOS + Android · solo' },
    ],
    location: 'Warsaw · remote',
    status: t.hero.currently,
    cta1: t.hero.cta1,
    cta2: t.hero.cta2,
  };
}

// ────────────────────────────────────────────────────────────
// V1 — BILLBOARD
// Wielki nagłówek "CO ROBIĘ", podkreślenie akcentem, 3 fakty pod spodem.
// Każdy ważny fragment to osobny blok – zero przeciążenia.
// ────────────────────────────────────────────────────────────
function HeroV1_Billboard({ t }) {
  const d = useHeroData(t);
  return (
    <section className="mp-hero h2-v1" id="top">
      <div className="h2-v1-status">
        <span className="h2-dot-live"/>
        <span>{d.status}</span>
        <span className="h2-sep">·</span>
        <span>{d.location}</span>
      </div>

      <h1 className="h2-v1-title">
        <span className="h2-v1-who">{d.name}</span>
        <span className="h2-v1-build">
          {t.lang === 'pl' ? 'buduje ' : (t.lang === 'es' ? 'crea ' : 'builds ')}
          <span className="h2-mark">{t.lang === 'pl' ? 'aplikacje mobilne' : (t.lang === 'es' ? 'apps móviles' : 'mobile apps')}</span>
          {t.lang === 'pl' ? ', które ludzie otwierają codziennie.' : (t.lang === 'es' ? ' que la gente abre cada día.' : ' people open every day.')}
        </span>
      </h1>

      <div className="h2-v1-facts">
        {d.facts.map((f,i)=>(
          <div className="h2-v1-fact" key={i}>
            <div className="h2-v1-fact-n"><span>{f.n}</span><span className="h2-v1-fact-u">{f.u}</span></div>
            <div className="h2-v1-fact-l">{f.l}</div>
          </div>
        ))}
      </div>

      <div className="h2-v1-cta">
        <a href="#apps" className="mp-btn mp-btn-primary">{d.cta1} <span>↓</span></a>
        <a href="#contact" className="mp-btn mp-btn-ghost">{d.cta2}</a>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// V2 — ONE-LINER
// Jedno zdanie w całej szerokości, reszta to mikro-metadane.
// Maks. czytelność, zero dekoracji.
// ────────────────────────────────────────────────────────────
function HeroV2_OneLiner({ t }) {
  const d = useHeroData(t);
  return (
    <section className="mp-hero h2-v2" id="top">
      <div className="h2-v2-meta-top">
        <span>{d.role}</span>
        <span className="h2-v2-meta-dot"/>
        <span>{d.location}</span>
        <span className="h2-v2-meta-dot"/>
        <span className="h2-v2-avail"><span className="h2-dot-live"/>{d.status}</span>
      </div>

      <h1 className="h2-v2-title">
        {t.lang === 'pl' ? 'Jestem Paweł. Projektuję i wypuszczam' : (t.lang === 'es' ? 'Soy Paweł. Diseño y publico' : 'I’m Paweł. I design and ship')}
        {' '}
        <span className="h2-v2-hl">{t.lang === 'pl' ? 'aplikacje mobilne' : (t.lang === 'es' ? 'apps móviles' : 'mobile apps')}</span>
        {' '}
        {t.lang === 'pl' ? 'solo — od projektu po App Store.' : (t.lang === 'es' ? 'solo — del diseño a la App Store.' : 'solo — from design to the App Store.')}
      </h1>

      <div className="h2-v2-proof">
        <span><b>5 {t.lang === 'pl' ? 'lat' : (t.lang === 'es' ? 'años' : 'yrs')}</b> {t.hero.meta1}</span>
        <span className="h2-v2-meta-dot"/>
        <span><b>1.5 {t.lang === 'pl' ? 'roku' : (t.lang === 'es' ? 'años' : 'yrs')}</b> Tinder · Trust &amp; Safety</span>
        <span className="h2-v2-meta-dot"/>
        <span><b>2</b> {t.lang === 'pl' ? 'aplikacje w sklepach' : (t.lang === 'es' ? 'apps en tiendas' : 'apps live in stores')}</span>
      </div>

      <div className="h2-v2-cta">
        <a href="#apps" className="mp-btn mp-btn-primary">{d.cta1} <span>↓</span></a>
        <a href="#contact" className="mp-btn mp-btn-ghost">{d.cta2}</a>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// V3 — RESUME BLOCK
// Lewa kolumna: identyfikacja (kto, rola, lokalizacja).
// Prawa: nagłówek + 3 fakty w rzędzie jak w CV.
// Czyta się jak wizytówkę.
// ────────────────────────────────────────────────────────────
function HeroV3_Resume({ t }) {
  const d = useHeroData(t);
  const scrollToApp = (e, id) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.pageYOffset - 72;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };
  const viewLabel = t.apps.viewApp || 'View app';
  return (
    <section className="mp-hero h2-v3" id="top">
      <div className="h2-v3-grid">
        <aside className="h2-v3-id">
          <div className="h2-v3-label">{t.hero.resumeName}</div>
          <div className="h2-v3-val h2-v3-name">{t.hero.name}</div>
          <div className="h2-v3-label">{t.hero.resumeRole}</div>
          <div className="h2-v3-val">{t.hero.resumeRoleValue}</div>
          <div className="h2-v3-label">{t.hero.resumeBased}</div>
          <div className="h2-v3-val">{t.hero.resumeLocationValue}</div>
          <div className="h2-v3-label">{t.hero.resumeStatus}</div>
          <div className="h2-v3-val h2-v3-live">
            <span className="h2-dot-live"/>{d.status}
          </div>
        </aside>

        <div className="h2-v3-main">
          <div className="h2-v3-brand">Mobilepablo<span className="h2-v3-brand-dot">.</span></div>
          <h1 className="h2-v3-title">
            {t.hero.studioLine1}
            <br/>
            <span className="mp-serif mp-italic" style={{color: HERO_ACCENT}}>
              {t.hero.studioLine2}
            </span>
          </h1>

          <div className="h2-v3-apps">
            <a className="h2-v3-app" href="#app-photoclean" onClick={(e)=>scrollToApp(e,'app-photoclean')}>
              <div className="h2-v3-app-num">01</div>
              <img src="mobilepablo/assets/photoclean-icon.png" alt=""/>
              <div className="h2-v3-app-body">
                <div className="h2-v3-app-n mp-serif">{t.apps.photoclean.name}</div>
                <div className="h2-v3-app-t">{t.apps.photoclean.tag}</div>
                <div className="h2-v3-app-stores"><span>App Store</span><span>·</span><span>Google Play</span></div>
              </div>
              <div className="h2-v3-app-cta">{viewLabel} <span>→</span></div>
            </a>
            <a className="h2-v3-app" href="#app-prodoc" onClick={(e)=>scrollToApp(e,'app-prodoc')}>
              <div className="h2-v3-app-num">02</div>
              <img src="mobilepablo/assets/prodoc-icon.png" alt=""/>
              <div className="h2-v3-app-body">
                <div className="h2-v3-app-n mp-serif">{t.apps.prodoc.name}</div>
                <div className="h2-v3-app-t">{t.apps.prodoc.tag}</div>
                <div className="h2-v3-app-stores"><span>App Store</span><span>·</span><span>Google Play</span></div>
              </div>
              <div className="h2-v3-app-cta">{viewLabel} <span>→</span></div>
            </a>
          </div>

          <div className="h2-v3-cta">
            <a href="#apps" className="mp-btn mp-btn-primary">{d.cta1} <span>↓</span></a>
            <a href="#contact" className="mp-btn mp-btn-ghost">{d.cta2}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// V4 — THIS IS / THESE ARE
// "This is what I do." / "These are my apps." — narracja w 2 blokach.
// Po lewej deklaracja, po prawej dwie żywe aplikacje.
// ────────────────────────────────────────────────────────────
function HeroV4_Declaration({ t }) {
  const d = useHeroData(t);
  return (
    <section className="mp-hero h2-v4" id="top">
      <div className="h2-v4-grid">
        <div className="h2-v4-left">
          <div className="h2-v4-num">01 — {t.lang === 'pl' ? 'kim jestem' : (t.lang === 'es' ? 'quién soy' : 'who')}</div>
          <h1 className="h2-v4-title">
            <span className="mp-serif">Paweł Łukasz.</span>
            <br/>
            <span className="h2-v4-role">{t.lang === 'pl' ? 'Mobile engineer od 5 lat.' : (t.lang === 'es' ? 'Mobile engineer desde hace 5 años.' : 'Mobile engineer for 5 years.')}</span>
          </h1>
          <p className="h2-v4-lead">
            {t.lang === 'pl'
              ? 'Projektuję, koduję i wypuszczam aplikacje na iOS i Androida — sam, od pierwszej linii po App Store. 1.5 roku w Tinderze, Trust & Safety.'
              : (t.lang === 'es'
                  ? 'Diseño, programo y publico apps de iOS y Android — solo, de la primera línea a la App Store. 1.5 años en Tinder, Trust & Safety.'
                  : 'I design, code and ship iOS and Android apps — solo, from first line to App Store. 1.5 years at Tinder, Trust & Safety.')}
          </p>
          <div className="h2-v4-cta">
            <a href="#contact" className="mp-btn mp-btn-primary">{d.cta2}</a>
            <a href="#apps" className="mp-btn mp-btn-ghost">{d.cta1}</a>
          </div>
        </div>

        <div className="h2-v4-right">
          <div className="h2-v4-num">02 — {t.lang === 'pl' ? 'co robię' : (t.lang === 'es' ? 'qué hago' : 'what')}</div>
          <div className="h2-v4-apps">
            <a className="h2-v4-app" href="#apps">
              <img src="mobilepablo/assets/photoclean-icon.png" alt=""/>
              <div>
                <div className="h2-v4-app-n mp-serif">PhotoClean</div>
                <div className="h2-v4-app-t">Photo cleaner · swipe to clean</div>
                <div className="h2-v4-app-stores"><span>App Store</span><span>·</span><span>Google Play</span></div>
              </div>
            </a>
            <a className="h2-v4-app" href="#apps">
              <img src="mobilepablo/assets/prodoc-icon.png" alt=""/>
              <div>
                <div className="h2-v4-app-n mp-serif">ProDoc+</div>
                <div className="h2-v4-app-t">PDF Reader · scan &amp; edit</div>
                <div className="h2-v4-app-stores"><span>App Store</span><span>·</span><span>Google Play</span></div>
              </div>
            </a>
          </div>
          <div className="h2-v4-live">
            <span className="h2-dot-live"/>
            <span>{t.lang === 'pl' ? 'Na żywo · pobieralne teraz' : (t.lang === 'es' ? 'En vivo · descargables ahora' : 'Live · downloadable now')}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// V5 — PROOF FIRST
// Otwieramy dowodem: 5 YRS · TINDER · 2 APPS na samej górze,
// potem nagłówek. Skanowanie: liczby → zdanie → CTA.
// ────────────────────────────────────────────────────────────
function HeroV5_ProofFirst({ t }) {
  const d = useHeroData(t);
  return (
    <section className="mp-hero h2-v5" id="top">
      <div className="h2-v5-strip">
        {d.facts.map((f,i)=>(
          <div className="h2-v5-strip-item" key={i}>
            <div className="h2-v5-n mp-serif"><span>{f.n}</span><span className="h2-v5-u">{f.u}</span></div>
            <div className="h2-v5-l">{f.l}</div>
          </div>
        ))}
      </div>

      <h1 className="h2-v5-title mp-serif">
        {t.lang === 'pl' ? 'Jestem' : (t.lang === 'es' ? 'Soy' : 'I’m')} <span className="h2-v5-name">Paweł Łukasz</span><span style={{color:HERO_ACCENT}}>.</span>
        <br/>
        <span className="mp-italic">
          {t.lang === 'pl' ? 'Buduję aplikacje mobilne.' : (t.lang === 'es' ? 'Construyo apps móviles.' : 'I build mobile apps.')}
        </span>
      </h1>

      <p className="h2-v5-sub">
        {t.lang === 'pl'
          ? 'Android (Kotlin), iOS (Swift), Flutter. Solo, od pomysłu po App Store.'
          : (t.lang === 'es'
              ? 'Android (Kotlin), iOS (Swift), Flutter. Solo, de la idea a la App Store.'
              : 'Android (Kotlin), iOS (Swift), Flutter. Solo, from idea to App Store.')}
      </p>

      <div className="h2-v5-cta">
        <a href="#contact" className="mp-btn mp-btn-primary">{d.cta2} <span>→</span></a>
        <a href="#apps" className="mp-btn mp-btn-ghost">{d.cta1}</a>
        <span className="h2-v5-avail"><span className="h2-dot-live"/>{d.status}</span>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// V6 — TICKER / MANIFEST
// Jasny tag na górze + 3 ogromne linie w stylu manifestu.
// Każda linia to jedna prawda. Poniżej fakty + CTA.
// ────────────────────────────────────────────────────────────
function HeroV6_Manifest({ t }) {
  const d = useHeroData(t);
  const lines = t.lang === 'pl'
    ? [['Projektuję,', ''], ['koduję,', ''], ['wypuszczam.', '']]
    : (t.lang === 'es' ? [['Diseño,', ''], ['programo,', ''], ['publico.', '']] : [['Design.', ''], ['Code.', ''], ['Ship.', '']]);
  return (
    <section className="mp-hero h2-v6" id="top">
      <div className="h2-v6-kicker">
        <span className="h2-dot-live"/>
        <span>Paweł Łukasz · Mobile Engineer · {d.location}</span>
      </div>

      <h1 className="h2-v6-title mp-serif">
        {lines.map((l,i)=>(
          <span className="h2-v6-line" key={i}>
            <span className="h2-v6-idx">0{i+1}</span>
            <span className={i===lines.length-1 ? 'h2-v6-word mp-italic' : 'h2-v6-word'}>{l[0]}</span>
          </span>
        ))}
      </h1>

      <p className="h2-v6-lead">
        {t.lang === 'pl'
          ? 'Solo-founder mobile: Android + iOS + Flutter. 5 lat w produkcji, 1.5 roku w Tinderze, 2 własne aplikacje w sklepach.'
          : (t.lang === 'es'
              ? 'Solo-founder mobile: Android + iOS + Flutter. 5 años en producción, 1.5 años en Tinder, 2 apps propias en tiendas.'
              : 'Solo mobile founder: Android + iOS + Flutter. 5 yrs shipping, 1.5 yrs at Tinder, 2 apps of my own live in stores.')}
      </p>

      <div className="h2-v6-cta">
        <a href="#apps" className="mp-btn mp-btn-primary">{d.cta1} <span>↓</span></a>
        <a href="#contact" className="mp-btn mp-btn-ghost">{d.cta2}</a>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// V7 — FOR HIRE CARD
// Wielka karta "dostępny do kontraktu" — wygląda jak business card.
// Najwazniejsza informacja dla rekrutera: AVAILABLE + SKILLS + RATE range.
// ────────────────────────────────────────────────────────────
function HeroV7_HireCard({ t }) {
  const d = useHeroData(t);
  return (
    <section className="mp-hero h2-v7" id="top">
      <div className="h2-v7-card">
        <div className="h2-v7-top">
          <div className="h2-v7-avail">
            <span className="h2-dot-live"/>
            <span>{t.lang === 'pl' ? 'DOSTĘPNY DO KONTRAKTU' : (t.lang === 'es' ? 'DISPONIBLE PARA CONTRATO' : 'AVAILABLE FOR CONTRACT')}</span>
          </div>
          <div className="h2-v7-corner">NOW · 2026</div>
        </div>

        <h1 className="h2-v7-title mp-serif">
          Paweł Łukasz<span style={{color:HERO_ACCENT}}>.</span>
          <br/>
          <span className="mp-italic h2-v7-role">{t.lang === 'pl' ? 'Principal Mobile Engineer' : 'Principal Mobile Engineer'}</span>
        </h1>

        <div className="h2-v7-rows">
          <div className="h2-v7-row">
            <span className="h2-v7-k">{t.lang === 'pl' ? 'robię' : (t.lang === 'es' ? 'hago' : 'I do')}</span>
            <span className="h2-v7-v">{t.lang === 'pl' ? 'Android · iOS · Flutter · od projektu po App Store' : (t.lang === 'es' ? 'Android · iOS · Flutter · del diseño a la App Store' : 'Android · iOS · Flutter · design to App Store')}</span>
          </div>
          <div className="h2-v7-row">
            <span className="h2-v7-k">{t.lang === 'pl' ? 'staż' : (t.lang === 'es' ? 'exp.' : 'exp.')}</span>
            <span className="h2-v7-v">5 {t.lang==='pl'?'lat':(t.lang==='es'?'años':'years')} · Tinder Trust &amp; Safety 1.5 {t.lang==='pl'?'roku':(t.lang==='es'?'años':'yrs')}</span>
          </div>
          <div className="h2-v7-row">
            <span className="h2-v7-k">{t.lang === 'pl' ? 'wydane' : (t.lang === 'es' ? 'shipped' : 'shipped')}</span>
            <span className="h2-v7-v">PhotoClean, ProDoc+ · iOS &amp; Android · solo</span>
          </div>
          <div className="h2-v7-row">
            <span className="h2-v7-k">{t.lang === 'pl' ? 'gdzie' : (t.lang === 'es' ? 'dónde' : 'where')}</span>
            <span className="h2-v7-v">Warsaw · remote worldwide · EU / US hours</span>
          </div>
        </div>

        <div className="h2-v7-cta">
          <a href="#contact" className="mp-btn mp-btn-primary">{d.cta2} <span>→</span></a>
          <a href="#apps" className="mp-btn mp-btn-ghost">{d.cta1}</a>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// V8 — NUMBERS HERO
// 3 wielkie liczby jako główny bohater — 5 · 1.5 · 2.
// Nagłówek mniejszy, jako podpis. Idealne dla scanner-reader.
// ────────────────────────────────────────────────────────────
function HeroV8_BigNumbers({ t }) {
  const d = useHeroData(t);
  return (
    <section className="mp-hero h2-v8" id="top">
      <div className="h2-v8-intro">
        <div className="mp-hero-eyebrow">
          <span className="mp-dot-accent"/>
          <span>Paweł Łukasz · Principal Mobile Engineer · Warsaw</span>
        </div>
        <h1 className="h2-v8-headline">
          {t.lang === 'pl' ? 'Aplikacje mobilne, które ludzie faktycznie otwierają.' : (t.lang === 'es' ? 'Apps móviles que la gente realmente abre.' : 'Mobile apps people actually open.')}
        </h1>
      </div>

      <div className="h2-v8-grid">
        <div className="h2-v8-block">
          <div className="h2-v8-n mp-serif">5<span className="h2-v8-u">{t.lang==='pl'?'lat':(t.lang==='es'?'años':'yrs')}</span></div>
          <div className="h2-v8-l">{t.lang === 'pl' ? 'w produkcji · Android, iOS, Flutter' : (t.lang === 'es' ? 'en producción · Android, iOS, Flutter' : 'shipping · Android, iOS, Flutter')}</div>
        </div>
        <div className="h2-v8-block h2-v8-accent">
          <div className="h2-v8-n mp-serif">1.5<span className="h2-v8-u">{t.lang==='pl'?'roku':(t.lang==='es'?'años':'yrs')}</span></div>
          <div className="h2-v8-l">Tinder · Trust &amp; Safety</div>
        </div>
        <div className="h2-v8-block">
          <div className="h2-v8-n mp-serif">2<span className="h2-v8-u">apps</span></div>
          <div className="h2-v8-l">{t.lang === 'pl' ? 'w sklepach · solo, od kodu po marketing' : (t.lang === 'es' ? 'en tiendas · solo, de código a marketing' : 'live in stores · solo, code to marketing')}</div>
        </div>
      </div>

      <div className="h2-v8-cta">
        <a href="#apps" className="mp-btn mp-btn-primary">{d.cta1} <span>↓</span></a>
        <a href="#contact" className="mp-btn mp-btn-ghost">{d.cta2}</a>
        <span className="h2-v8-avail"><span className="h2-dot-live"/>{d.status}</span>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// V9 — NEWSPAPER
// Lead paragraph w stylu gazety + 3 fakty w bocznej szpalcie.
// Dla osób, które czytają — ale tylko pierwszy paragraf.
// ────────────────────────────────────────────────────────────
function HeroV9_Newspaper({ t }) {
  const d = useHeroData(t);
  return (
    <section className="mp-hero h2-v9" id="top">
      <div className="h2-v9-head">
        <div className="h2-v9-date">{t.lang === 'pl' ? 'PORTFOLIO · 2026' : 'PORTFOLIO · 2026'}</div>
        <div className="h2-v9-masthead mp-serif">Paweł Łukasz</div>
        <div className="h2-v9-sub">Principal Mobile Engineer · Warsaw · remote worldwide</div>
      </div>

      <div className="h2-v9-body">
        <div className="h2-v9-lead">
          <h1 className="h2-v9-title mp-serif">
            {t.lang === 'pl'
              ? <>5 lat buduję aplikacje mobilne <span className="mp-italic">— sam, od pierwszej linii po App Store.</span></>
              : (t.lang === 'es'
                  ? <>Llevo 5 años construyendo apps móviles <span className="mp-italic">— solo, de la primera línea a la App Store.</span></>
                  : <>I’ve been shipping mobile apps for 5 years <span className="mp-italic">— solo, from first line of code to the App Store.</span></>)}
          </h1>
          <p className="h2-v9-body-text">
            {t.lang === 'pl'
              ? <><span className="h2-v9-dropcap">O</span>d 1.5 roku w zespole <b>Trust &amp; Safety w Tinderze</b>. Po godzinach wypuszczam własne aplikacje na iOS i Androida — <b>PhotoClean</b> (photo cleaner) i <b>ProDoc+</b> (PDF reader). Projekt, kod, marketing w sklepach — robię całą pętlę sam.</>
              : (t.lang === 'es'
                  ? <><span className="h2-v9-dropcap">D</span>esde hace 1.5 años en el equipo <b>Trust &amp; Safety de Tinder</b>. Por mi cuenta publico apps propias en iOS y Android — <b>PhotoClean</b> (photo cleaner) y <b>ProDoc+</b> (PDF reader). Diseño, código y marketing — hago todo el ciclo solo.</>
                  : <><span className="h2-v9-dropcap">F</span>or the past 1.5 years I’ve been in <b>Tinder’s Trust &amp; Safety</b> team. On the side I ship my own iOS and Android apps — <b>PhotoClean</b> (photo cleaner) and <b>ProDoc+</b> (PDF reader). Design, code, marketing — I run the whole loop solo.</>)}
          </p>
          <div className="h2-v9-cta">
            <a href="#apps" className="mp-btn mp-btn-primary">{d.cta1} <span>↓</span></a>
            <a href="#contact" className="mp-btn mp-btn-ghost">{d.cta2}</a>
          </div>
        </div>

        <aside className="h2-v9-side">
          <div className="h2-v9-side-head">{t.lang === 'pl' ? 'Kluczowe fakty' : (t.lang === 'es' ? 'Datos clave' : 'Key facts')}</div>
          <dl className="h2-v9-side-list">
            <dt>Shipping experience</dt>
            <dd><b>5 {t.lang==='pl'?'lat':(t.lang==='es'?'años':'years')}</b></dd>
            <dt>Tinder · Trust &amp; Safety</dt>
            <dd><b>1.5 {t.lang==='pl'?'roku':(t.lang==='es'?'años':'years')}</b></dd>
            <dt>Apps in stores</dt>
            <dd><b>2</b> · iOS + Android</dd>
            <dt>Stack</dt>
            <dd>Kotlin · Swift · Flutter</dd>
            <dt>Status</dt>
            <dd className="h2-v9-live"><span className="h2-dot-live"/>{d.status}</dd>
          </dl>
        </aside>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// V10 — COVER SPLIT
// Po lewej gigantyczne imię + rola. Po prawej wertykalny "TL;DR" w 5 punktach.
// Czytelnik widzi od razu: kim jestem + dlaczego ma mi zaufać + co oferuję.
// ────────────────────────────────────────────────────────────
function HeroV10_TLDR({ t }) {
  const d = useHeroData(t);
  const tldr = t.lang === 'pl'
    ? [
        ['Kim', 'Paweł Łukasz · Principal Mobile Engineer'],
        ['Robię', 'Android · iOS · Flutter · od projektu po App Store'],
        ['Staż', '5 lat w produkcji'],
        ['Obecnie', 'Tinder · Trust & Safety · 1.5 roku'],
        ['Wydane', 'PhotoClean + ProDoc+ · solo, iOS + Android'],
        ['Dostępny', 'Kontrakty · remote · Warszawa'],
      ]
    : (t.lang === 'es'
        ? [
            ['Quién', 'Paweł Łukasz · Principal Mobile Engineer'],
            ['Qué', 'Android · iOS · Flutter · del diseño a la App Store'],
            ['Exp.', '5 años en producción'],
            ['Ahora', 'Tinder · Trust & Safety · 1.5 años'],
            ['Lanzadas', 'PhotoClean + ProDoc+ · solo, iOS + Android'],
            ['Disponible', 'Contratos · remoto · Varsovia'],
          ]
        : [
            ['Who', 'Paweł Łukasz · Principal Mobile Engineer'],
            ['What', 'Android · iOS · Flutter · design to App Store'],
            ['Exp.', '5 years shipping'],
            ['Now', 'Tinder · Trust & Safety · 1.5 yrs'],
            ['Shipped', 'PhotoClean + ProDoc+ · solo, iOS + Android'],
            ['Open to', 'Contracts · remote · Warsaw'],
          ]);
  return (
    <section className="mp-hero h2-v10" id="top">
      <div className="h2-v10-grid">
        <div className="h2-v10-cover">
          <div className="h2-v10-corner">
            <span>P.L.</span>
            <span>2026</span>
          </div>
          <h1 className="h2-v10-name mp-serif">
            Paweł<br/>Łukasz<span style={{color:HERO_ACCENT}}>.</span>
          </h1>
          <div className="h2-v10-role">
            <span className="mp-italic mp-serif">Principal</span> Mobile Engineer
          </div>
          <div className="h2-v10-footer">
            <span className="h2-dot-live"/>
            <span>{d.status} · Warsaw / remote</span>
          </div>
        </div>

        <div className="h2-v10-tldr">
          <div className="h2-v10-tldr-label">TL;DR</div>
          <dl className="h2-v10-rows">
            {tldr.map(([k,v],i)=>(
              <React.Fragment key={i}>
                <dt>{k}</dt>
                <dd>{v}</dd>
              </React.Fragment>
            ))}
          </dl>
          <div className="h2-v10-cta">
            <a href="#contact" className="mp-btn mp-btn-primary">{d.cta2} <span>→</span></a>
            <a href="#apps" className="mp-btn mp-btn-ghost">{d.cta1}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────
// Switcher
// ────────────────────────────────────────────────────────────
const HEROES_V2 = [
  { id: 'v3',  label: '3',  name: 'Resume block',  cmp: HeroV3_Resume },
];

function HeroV2Switcher({ variant, setVariant }) {
  return null;
}

// expose
Object.assign(window, {
  HEROES_V2,
  HeroV2Switcher,
  HeroV1_Billboard, HeroV2_OneLiner, HeroV3_Resume, HeroV4_Declaration,
  HeroV5_ProofFirst, HeroV6_Manifest, HeroV7_HireCard, HeroV8_BigNumbers,
  HeroV9_Newspaper, HeroV10_TLDR,
});