// Main portfolio app
/* global React, ReactDOM, TRANSLATIONS */
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "en",
  "theme": "light",
  "heroV2": "v3"
}/*EDITMODE-END*/;

const ACCENT = '#FF4B1F';
const ACCENT_2 = '#FF7A3D';

function detectLang() {
  try {
    const supported = ['pl', 'en', 'es'];
    const nav = (navigator.languages && navigator.languages.length)
      ? navigator.languages
      : [navigator.language || navigator.userLanguage || 'en'];
    for (const l of nav) {
      const code = (l || '').toLowerCase().split('-')[0];
      if (supported.includes(code)) return code;
    }
  } catch (e) {}
  return null;
}

function useTweaks() {
  const [state, setState] = useState(() => {
    try {
      const saved = localStorage.getItem('mp_tweaks_v2');
      if (saved) return { ...TWEAK_DEFAULTS, ...JSON.parse(saved) };
    } catch (e) {}
    // First visit — detect browser language
    const browserLang = detectLang();
    if (browserLang) return { ...TWEAK_DEFAULTS, lang: browserLang };
    return TWEAK_DEFAULTS;
  });
  const update = (partial) => {
    setState(s => {
      const next = { ...s, ...partial };
      try { localStorage.setItem('mp_tweaks_v2', JSON.stringify(next)); } catch (e) {}
      try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: partial }, '*'); } catch (e) {}
      return next;
    });
  };
  return [state, update];
}

// ──────────────────────────────────────────────────────────────
// Nav
// ──────────────────────────────────────────────────────────────
function Nav({ lang, setLang, theme, setTheme, t, onNav, active }) {
  const langs = ['pl', 'en', 'es'];
  return (
    <nav className="mp-nav">
      <div className="mp-nav-inner">
        <a href="#top" className="mp-logo" onClick={(e)=>{e.preventDefault(); onNav('top');}}>
          <span className="mp-logo-text">Mobilepablo</span>
          <span className="mp-logo-dot"/>
        </a>
        <div className="mp-nav-links">
          <a href="#apps" onClick={(e)=>{e.preventDefault(); onNav('apps');}} className={active==='apps'?'active':''}>{t.nav.apps}</a>
          <a href="#skills" onClick={(e)=>{e.preventDefault(); onNav('skills');}} className={active==='skills'?'active':''}>{t.nav.skills}</a>
          <a href="#about" onClick={(e)=>{e.preventDefault(); onNav('about');}} className={active==='about'?'active':''}>{t.nav.about}</a>
          <a href="#contact" onClick={(e)=>{e.preventDefault(); onNav('contact');}} className={active==='contact'?'active':''}>{t.nav.contact}</a>
          <span className="mp-nav-sep"/>
          <a href="/photoclean" className="mp-nav-pc" target="_blank" rel="noopener">
            {t.nav.photoclean} <span style={{opacity:0.5}}>↗</span>
          </a>
        </div>
        <div className="mp-nav-controls">
          <div className="mp-lang-switch">
            {langs.map(l => (
              <button key={l} className={lang===l?'active':''} onClick={()=>setLang(l)}>{l.toUpperCase()}</button>
            ))}
          </div>
          <button className="mp-theme-btn" onClick={()=>setTheme(theme==='light'?'dark':'light')} aria-label="Toggle theme">
            {theme==='light' ? (
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
            ) : (
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
            )}
          </button>
        </div>
      </div>
    </nav>
  );
}

// ──────────────────────────────────────────────────────────────
// Hero variants
// ──────────────────────────────────────────────────────────────
function HeroA({ t }) {
  // Editorial, left-aligned, big serif
  return (
    <section className="mp-hero mp-hero-a" id="top">
      <div className="mp-hero-eyebrow">
        <span className="mp-dot-accent"/>
        <span>{t.hero.eyebrow}</span>
      </div>
      <h1 className="mp-hero-title">
        <span className="mp-serif">{t.hero.tagline1}</span><br/>
        <span className="mp-serif mp-italic">{t.hero.tagline2}</span>
      </h1>
      <div className="mp-hero-meta">
        <div className="mp-meta-item"><span className="mp-meta-num">05</span><span>{t.hero.meta1}</span></div>
        <div className="mp-meta-item"><span className="mp-meta-num">01</span><span>{t.hero.meta2}</span></div>
        <div className="mp-meta-item"><span className="mp-meta-num">02</span><span>{t.hero.meta3}</span></div>
      </div>
      <div className="mp-hero-ctas">
        <a href="#apps" className="mp-btn mp-btn-primary">{t.hero.cta1} <span>↓</span></a>
        <a href="#contact" className="mp-btn mp-btn-ghost">{t.hero.cta2}</a>
      </div>
      <div className="mp-hero-status">
        <span className="mp-status-dot"/>
        {t.hero.currently}
      </div>
    </section>
  );
}

function HeroB({ t }) {
  // Split — name + tagline on left, app preview stack on right
  return (
    <section className="mp-hero mp-hero-b" id="top">
      <div className="mp-hero-b-left">
        <div className="mp-hero-eyebrow">
          <span className="mp-dot-accent"/>
          <span>{t.hero.eyebrow}</span>
        </div>
        <h1 className="mp-hero-title">
          <span className="mp-name-huge">Paweł<br/>Łukasz<span style={{color:ACCENT}}>.</span></span>
        </h1>
        <p className="mp-hero-sub mp-serif mp-italic">{t.hero.tagline1} {t.hero.tagline2.toLowerCase()}</p>
        <div className="mp-hero-ctas">
          <a href="#apps" className="mp-btn mp-btn-primary">{t.hero.cta1} <span>↓</span></a>
          <a href="#contact" className="mp-btn mp-btn-ghost">{t.hero.cta2}</a>
        </div>
      </div>
      <div className="mp-hero-b-right">
        <div className="mp-stack-card mp-stack-1">
          <img src="mobilepablo/assets/photoclean-icon.png" alt="" />
          <div>
            <div className="mp-stack-name">PhotoClean</div>
            <div className="mp-stack-sub">Photo cleaner</div>
          </div>
          <div className="mp-stack-arrow">→</div>
        </div>
        <div className="mp-stack-card mp-stack-2">
          <img src="mobilepablo/assets/prodoc-icon.png" alt="" />
          <div>
            <div className="mp-stack-name">ProDoc+</div>
            <div className="mp-stack-sub">PDF Reader</div>
          </div>
          <div className="mp-stack-arrow">→</div>
        </div>
        <div className="mp-stack-tagline">
          <div className="mp-tagline-num">02</div>
          <div>apps live · 5 yrs shipping · solo</div>
        </div>
      </div>
    </section>
  );
}

function HeroC({ t }) {
  // Big number / index card style — like an editorial magazine cover
  return (
    <section className="mp-hero mp-hero-c" id="top">
      <div className="mp-hero-c-grid">
        <div className="mp-hero-c-index">
          <div className="mp-index-line">
            <span className="mp-index-label">ISSUE</span>
            <span className="mp-index-val">№ 01</span>
          </div>
          <div className="mp-index-line">
            <span className="mp-index-label">YEAR</span>
            <span className="mp-index-val">2026</span>
          </div>
          <div className="mp-index-line">
            <span className="mp-index-label">LOC</span>
            <span className="mp-index-val">WARSAW / PL</span>
          </div>
          <div className="mp-index-line">
            <span className="mp-index-label">APPS</span>
            <span className="mp-index-val">02 LIVE</span>
          </div>
        </div>
        <div className="mp-hero-c-main">
          <div className="mp-hero-eyebrow">
            <span className="mp-dot-accent"/>
            <span>{t.hero.eyebrow}</span>
          </div>
          <h1 className="mp-hero-c-title mp-serif">
            Paweł<br/>Łukasz<span style={{color:ACCENT}}>.</span>
          </h1>
          <p className="mp-hero-c-sub">{t.hero.tagline1} <span className="mp-serif mp-italic">{t.hero.tagline2.toLowerCase()}</span></p>
        </div>
        <div className="mp-hero-c-side">
          <div className="mp-side-stat"><div className="mp-side-num mp-serif">5</div><div className="mp-side-lbl">{t.hero.meta1}</div></div>
          <div className="mp-side-stat"><div className="mp-side-num mp-serif">1.5</div><div className="mp-side-lbl">{t.hero.meta2}</div></div>
          <div className="mp-side-stat"><div className="mp-side-num mp-serif">2</div><div className="mp-side-lbl">apps · iOS + Android</div></div>
          <a href="#contact" className="mp-btn mp-btn-primary" style={{marginTop:20, width:'100%', justifyContent:'center'}}>{t.hero.cta2}</a>
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// Hero D — Phone-forward: big 3D phone on right with orbiting labels
// ──────────────────────────────────────────────────────────────
function HeroD({ t }) {
  return (
    <section className="mp-hero mp-hero-d" id="top">
      <div className="mp-hero-d-grid">
        <div className="mp-hero-d-left">
          <div className="mp-hero-eyebrow">
            <span className="mp-dot-accent"/>
            <span>{t.hero.eyebrow}</span>
          </div>
          <h1 className="mp-hero-d-title">
            <span className="mp-serif">Paweł Łukasz<span style={{color:'var(--accent)'}}>.</span></span>
          </h1>
          <p className="mp-hero-d-sub">
            <span className="mp-serif mp-italic">Apps people actually open.</span>
            <br/>
            Android & Flutter · 5 yrs · Warsaw.
          </p>
          <div className="mp-hero-d-stats">
            <div className="mp-hero-d-stat">
              <div className="mp-hero-d-stat-n mp-serif">5y</div>
              <div className="mp-hero-d-stat-l">{t.hero.meta1}</div>
            </div>
            <div className="mp-hero-d-divider"/>
            <div className="mp-hero-d-stat">
              <div className="mp-hero-d-stat-n mp-serif">Tinder</div>
              <div className="mp-hero-d-stat-l">Trust &amp; Safety · 1.5y</div>
            </div>
            <div className="mp-hero-d-divider"/>
            <div className="mp-hero-d-stat">
              <div className="mp-hero-d-stat-n mp-serif">02</div>
              <div className="mp-hero-d-stat-l">apps live · solo</div>
            </div>
          </div>
          <div className="mp-hero-ctas">
            <a href="#apps" className="mp-btn mp-btn-primary">{t.hero.cta1} <span>↓</span></a>
            <a href="#contact" className="mp-btn mp-btn-ghost">{t.hero.cta2}</a>
          </div>
        </div>
        <div className="mp-hero-d-right">
          <div className="mp-hero-d-phone-wrap">
            <div className="mp-hero-d-phone" style={{transform:'perspective(1400px) rotateY(-12deg) rotateX(4deg)'}}>
              <div className="mp-phone" style={{width:'100%', height:'100%'}}>
                <div className="mp-phone-screen">
                  <HomeV3Screen/>
                </div>
                <div className="mp-phone-reflect"/>
              </div>
            </div>
            {/* Orbiting labels */}
            <div className="mp-hero-d-label mp-hero-d-label-1">
              <span className="mp-dot-accent" style={{width:6, height:6, boxShadow:'none'}}/>
              PhotoClean · Swipe
            </div>
            <div className="mp-hero-d-label mp-hero-d-label-2">
              <span style={{width:6, height:6, borderRadius:'50%', background:'#4B7BFF', boxShadow:'0 0 0 3px rgba(75,123,255,0.2)'}}/>
              ProDoc+ · PDF Reader
            </div>
            <div className="mp-hero-d-label mp-hero-d-label-3">
              Flutter · Kotlin · Compose
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// Hero E — Manifesto / statement with accent underlines
// ──────────────────────────────────────────────────────────────
function HeroE({ t }) {
  return (
    <section className="mp-hero mp-hero-e" id="top">
      <div className="mp-hero-e-marquee">
        <div className="mp-marquee-track">
          <span>FLUTTER</span><span className="mp-m-dot"/>
          <span>KOTLIN</span><span className="mp-m-dot"/>
          <span>JETPACK COMPOSE</span><span className="mp-m-dot"/>
          <span>FIREBASE</span><span className="mp-m-dot"/>
          <span>CI/CD</span><span className="mp-m-dot"/>
          <span>ANDROID</span><span className="mp-m-dot"/>
          <span>iOS</span><span className="mp-m-dot"/>
          <span>FLUTTER</span><span className="mp-m-dot"/>
          <span>KOTLIN</span><span className="mp-m-dot"/>
          <span>JETPACK COMPOSE</span><span className="mp-m-dot"/>
          <span>FIREBASE</span><span className="mp-m-dot"/>
          <span>CI/CD</span><span className="mp-m-dot"/>
        </div>
      </div>
      <div className="mp-hero-e-body">
        <div className="mp-hero-eyebrow">
          <span className="mp-dot-accent"/>
          <span>{t.hero.eyebrow} · Warsaw · available</span>
        </div>
        <h1 className="mp-hero-e-title">
          <span>I&apos;m </span>
          <span className="mp-serif mp-italic mp-hl">Paweł Łukasz<span style={{color:'var(--accent)'}}>.</span></span>
          <br/>
          <span>I design &amp; </span>
          <span className="mp-hero-e-under">ship mobile apps</span>
          <br/>
          <span>that don&apos;t </span>
          <span className="mp-serif mp-italic">get uninstalled</span>
          <span> after a week.</span>
        </h1>
        <div className="mp-hero-e-foot">
          <div className="mp-hero-e-ctas">
            <a href="#apps" className="mp-btn mp-btn-primary">{t.hero.cta1} <span>↓</span></a>
            <a href="#contact" className="mp-btn mp-btn-ghost">{t.hero.cta2}</a>
          </div>
          <div className="mp-hero-e-meta">
            <div><span className="mp-hero-e-key">Based</span> Warsaw, PL</div>
            <div><span className="mp-hero-e-key">Role</span> Principal Mobile · remote worldwide</div>
            <div><span className="mp-hero-e-key">Last role</span> Tinder · Trust &amp; Safety</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// Hero F — Portrait lead: photo on left, name huge on right
// ──────────────────────────────────────────────────────────────
function HeroF({ t }) {
  return (
    <section className="mp-hero mp-hero-f" id="top">
      <div className="mp-hero-f-grid">
        <div className="mp-hero-f-photo-col">
          <div className="mp-hero-f-photo-frame">
            <img src="mobilepablo/assets/pablo-photo.jpeg" alt="Paweł Łukasz"/>
            <div className="mp-hero-f-badge">
              <span className="mp-status-dot"/> Available
            </div>
          </div>
          <div className="mp-hero-f-photo-meta">
            <div><span className="mp-hero-e-key">01</span> Principal Mobile Engineer</div>
            <div><span className="mp-hero-e-key">02</span> Warsaw, Poland · remote</div>
            <div><span className="mp-hero-e-key">03</span> Flutter · Kotlin · Compose</div>
          </div>
        </div>
        <div className="mp-hero-f-text-col">
          <div className="mp-hero-f-kicker">
            <span className="mp-dot-accent"/>
            <span>{t.hero.eyebrow}</span>
          </div>
          <h1 className="mp-hero-f-title">
            <span className="mp-serif">Paweł</span>
            <br/>
            <span className="mp-serif mp-italic" style={{color:'var(--accent)'}}>Łukasz.</span>
          </h1>
          <p className="mp-hero-f-lead">
            5 years designing &amp; shipping mobile apps — Android in <b>Kotlin</b> &amp; <b>Flutter</b>. Last 1.5y inside <b>Tinder&apos;s</b> Trust &amp; Safety. On the side I build &amp; ship my own apps solo.
          </p>
          <div className="mp-hero-ctas" style={{marginTop:40}}>
            <a href="#apps" className="mp-btn mp-btn-primary">{t.hero.cta1} <span>↓</span></a>
            <a href="#contact" className="mp-btn mp-btn-ghost">{t.hero.cta2}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// Apps section — big 3D phone + description
// ──────────────────────────────────────────────────────────────
function PhoneMock({ children, tilt = 'left' }) {
  const transform = tilt === 'left'
    ? 'perspective(1600px) rotateY(-14deg) rotateX(6deg) rotateZ(-1.5deg)'
    : 'perspective(1600px) rotateY(14deg) rotateX(6deg) rotateZ(1.5deg)';
  return (
    <div className="mp-phone-wrap" style={{transform}}>
      <div className="mp-phone">
        <div className="mp-phone-screen">{children}</div>
        <div className="mp-phone-reflect"/>
      </div>
    </div>
  );
}

function HomeV3Screen() {
  const { HomeV3, makeTheme } = window;
  if (!HomeV3) return <div style={{width:'100%',height:'100%',background:'#000'}}/>;
  const th = makeTheme ? makeTheme('dark') : undefined;
  const SCREEN_W = 430, SCREEN_H = 930;
  const wrap = React.useRef(null);
  const [scale, setScale] = React.useState(0.7);
  React.useEffect(() => {
    const fit = () => {
      const el = wrap.current; if (!el) return;
      const w = el.clientWidth;
      setScale(w / SCREEN_W);
    };
    fit();
    const ro = new ResizeObserver(fit);
    if (wrap.current) ro.observe(wrap.current);
    return () => ro.disconnect();
  }, []);
  return (
    <div ref={wrap} style={{position:'absolute',inset:0,background:'#000',overflow:'hidden'}}>
      <div style={{width:SCREEN_W,height:SCREEN_H,transform:`scale(${scale})`,transformOrigin:'top left',position:'absolute',top:0,left:0}}>
        <HomeV3 theme={th}/>
      </div>
    </div>
  );
}

function AppCardPhotoClean({ t }) {
  return (
    <div className="mp-app mp-app-pc">
      <div className="mp-app-mock">
        <PhoneMock tilt="left">
          <HomeV3Screen/>
        </PhoneMock>
      </div>
      <div className="mp-app-info">
        <div className="mp-app-number">01</div>
        <div className="mp-app-head">
          <img src="mobilepablo/assets/photoclean-icon.png" alt="" className="mp-app-icon"/>
          <div>
            <h3 className="mp-app-name mp-serif">{t.apps.photoclean.name}</h3>
            <div className="mp-app-tag">{t.apps.photoclean.tag}</div>
            <div className="mp-app-dl"><strong>{t.apps.photoclean.downloads}</strong> {t.apps.downloads}</div>
          </div>
        </div>
        <p className="mp-app-desc">{t.apps.photoclean.desc}</p>
        <ul className="mp-app-features">
          {t.apps.photoclean.features.map((f,i)=>(
            <li key={i}><span className="mp-feat-num">·</span>{f}</li>
          ))}
        </ul>
        <div className="mp-app-badges">
          <a href="https://apps.apple.com/us/app/swipr-photo-cleaner/id6756620076" target="_blank" rel="noopener" className="mp-badge mp-badge-apple">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.88-3.08.42-1.09-.47-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.42C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.53 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
            <div><div className="mp-badge-sm">Download on</div><div className="mp-badge-lg">{t.apps.appStore}</div></div>
          </a>
          <a href="https://play.google.com/store/apps/details?id=com.mobile.pablo.swipr" target="_blank" rel="noopener" className="mp-badge mp-badge-google">
            <svg width="20" height="20" viewBox="0 0 24 24"><path fill="#EA4335" d="M12 10.5L2.5 1 13 11.5z"/><path fill="#4285F4" d="M2.5 1v22l10.5-11.5z"/><path fill="#34A853" d="M13 11.5L2.5 23 22 12z"/><path fill="#FBBC04" d="M22 12L13 11.5l-.5.5.5.5L22 12z"/></svg>
            <div><div className="mp-badge-sm">Get it on</div><div className="mp-badge-lg">{t.apps.googlePlay}</div></div>
          </a>
        </div>
        <a href="/photoclean" className="mp-app-link" target="_blank" rel="noopener">{t.apps.viewApp} →</a>
      </div>
    </div>
  );
}

function AppCardProDoc({ t }) {
  return (
    <div className="mp-app mp-app-pd mp-app-reverse">
      <div className="mp-app-mock">
        <PhoneMock tilt="right">
          <img src="mobilepablo/assets/prodoc-ui-screen.png" alt="ProDoc+ UI" style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}}/>
        </PhoneMock>
      </div>
      <div className="mp-app-info">
        <div className="mp-app-number">02</div>
        <div className="mp-app-head">
          <img src="mobilepablo/assets/prodoc-icon.png" alt="" className="mp-app-icon"/>
          <div>
            <h3 className="mp-app-name mp-serif">{t.apps.prodoc.name}</h3>
            <div className="mp-app-tag">{t.apps.prodoc.tag}</div>
            <div className="mp-app-dl"><strong>{t.apps.prodoc.downloads}</strong> {t.apps.downloads}</div>
          </div>
        </div>
        <p className="mp-app-desc">{t.apps.prodoc.desc}</p>
        <ul className="mp-app-features">
          {t.apps.prodoc.features.map((f,i)=>(
            <li key={i}><span className="mp-feat-num">·</span>{f}</li>
          ))}
        </ul>
        <div className="mp-app-badges">
          <a href="https://apps.apple.com/us/app/pdf-reader-prodoc/id6754163428" target="_blank" rel="noopener" className="mp-badge mp-badge-apple">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.88-3.08.42-1.09-.47-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.42C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.53 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
            <div><div className="mp-badge-sm">Download on</div><div className="mp-badge-lg">{t.apps.appStore}</div></div>
          </a>
          <a href="https://play.google.com/store/apps/details?id=com.mobile.pablo.proscan" target="_blank" rel="noopener" className="mp-badge mp-badge-google">
            <svg width="20" height="20" viewBox="0 0 24 24"><path fill="#EA4335" d="M12 10.5L2.5 1 13 11.5z"/><path fill="#4285F4" d="M2.5 1v22l10.5-11.5z"/><path fill="#34A853" d="M13 11.5L2.5 23 22 12z"/><path fill="#FBBC04" d="M22 12L13 11.5l-.5.5.5.5L22 12z"/></svg>
            <div><div className="mp-badge-sm">Get it on</div><div className="mp-badge-lg">{t.apps.googlePlay}</div></div>
          </a>
        </div>
        <div className="mp-app-screens">
          {[1,2,3,4,5,6].map(i => (
            <div key={i} className="mp-app-screen">
              <img src={`mobilepablo/assets/prodoc-screen-${i}.png`} alt=""/>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function AppsSection({ t }) {
  return (
    <section className="mp-section" id="apps">
      <div className="mp-section-head">
        <div className="mp-section-num">§ 01</div>
        <h2 className="mp-section-title mp-serif">{t.apps.section}</h2>
        <p className="mp-section-sub">{t.apps.sectionSub}</p>
        <div className="mp-section-tag"><span className="mp-dot-accent"/> {t.apps.live}</div>
      </div>
      <div id="app-photoclean"><AppCardPhotoClean t={t}/></div>
      <div id="app-prodoc"><AppCardProDoc t={t}/></div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// Skills
// ──────────────────────────────────────────────────────────────
function SkillsSection({ t }) {
  const tech = ['Flutter', 'Kotlin', 'Jetpack Compose', 'Java (Android)', 'Firebase', 'Dart', 'SwiftUI', 'Gradle', 'CI/CD', 'GitHub Actions', 'Fastlane'];
  const languages = [
    { name: 'Polski', level: 'native', pct: 100, code: 'PL' },
    { name: 'English', level: 'C1', pct: 85, code: 'EN' },
    { name: 'Español', level: 'C1', pct: 85, code: 'ES' },
  ];
  const certs = [
    {
      issuer: 'Meta',
      name: 'Android Developer Specialization',
      year: 'Aug 2025',
      url: 'https://www.coursera.org/account/accomplishments/specialization/certificate/APRLZ33LJ2HG',
    },
    {
      issuer: 'Google',
      name: 'Project Management Specialization',
      year: 'Aug 2025',
      url: 'https://www.coursera.org/account/accomplishments/specialization/M3CT0FGX526Q',
    },
    {
      issuer: 'IBM',
      name: 'Flutter and Dart: iOS, Android, Mobile Apps',
      year: 'Aug 2025',
      url: 'https://www.coursera.org/account/accomplishments/verify/4Y6PRDORZ2ID',
    },
  ];
  return (
    <section className="mp-section" id="skills">
      <div className="mp-section-head">
        <div className="mp-section-num">§ 02</div>
        <h2 className="mp-section-title mp-serif">{t.skills.section}</h2>
        <p className="mp-section-sub">{t.skills.sectionSub}</p>
      </div>
      <div className="mp-skills-grid">
        <div className="mp-skills-block mp-skills-tech">
          <div className="mp-skills-head">
            <span className="mp-skills-kicker">{t.skills.tech}</span>
            <span className="mp-skills-count">{tech.length}</span>
          </div>
          <div className="mp-tech-chips">
            {tech.map(s => <span key={s} className="mp-chip">{s}</span>)}
          </div>
        </div>
        <div className="mp-skills-block mp-skills-lang">
          <div className="mp-skills-head">
            <span className="mp-skills-kicker">{t.skills.languages}</span>
            <span className="mp-skills-count">{languages.length}</span>
          </div>
          <div className="mp-lang-list">
            {languages.map(l => {
              const filled = Math.round(l.pct / 20); // out of 5
              return (
                <div key={l.code} className="mp-lang-row">
                  <div className="mp-lang-info">
                    <span className="mp-lang-code">{l.code}</span>
                    <span className="mp-lang-name">{l.name}</span>
                  </div>
                  <div className="mp-lang-dots" aria-label={l.level}>
                    {[0,1,2,3,4].map(i => (
                      <span key={i} className={'mp-lang-dot' + (i < filled ? ' on' : '')}/>
                    ))}
                  </div>
                  <span className="mp-lang-level">{l.level === 'native' ? t.skills.native : l.level}</span>
                </div>
              );
            })}
          </div>
        </div>
        <div className="mp-skills-block mp-skills-certs">
          <div className="mp-skills-head">
            <span className="mp-skills-kicker">{t.skills.certs}</span>
            <span className="mp-skills-count">{certs.length}</span>
          </div>
          <div className="mp-certs-list">
            {certs.map((c,i) => (
              <a key={i} href={c.url} target="_blank" rel="noopener" className="mp-cert-row mp-cert-link">
                <div className="mp-cert-issuer">{c.issuer}</div>
                <div className="mp-cert-name">{c.name}</div>
                <div className="mp-cert-meta">
                  <span className="mp-cert-year">{c.year}</span>
                  <span className="mp-cert-arrow">↗</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// About
// ──────────────────────────────────────────────────────────────
function AboutSection({ t }) {
  return (
    <section className="mp-section" id="about">
      <div className="mp-about-grid">
        <div className="mp-about-left">
          <div className="mp-section-num">§ 03</div>
          <h2 className="mp-section-title mp-serif">{t.about.section}</h2>
          <div className="mp-about-photo-wrap">
            <img src="mobilepablo/assets/pablo-photo.jpeg" alt="Paweł Łukasz" className="mp-about-photo"/>
            <div className="mp-about-photo-caption">
              <div className="mp-about-photo-name">Paweł Łukasz</div>
              <div className="mp-about-photo-role">Principal Mobile Engineer</div>
            </div>
          </div>
        </div>
        <div className="mp-about-right">
          <p className="mp-about-p mp-about-lead">{t.about.p1}</p>
          <p className="mp-about-p">{t.about.p2}</p>
          <p className="mp-about-p">{t.about.p3}</p>
          <div className="mp-about-quote mp-serif mp-italic">
            <span className="mp-quote-mark">"</span>
            {t.about.quote}
          </div>
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// Contact
// ──────────────────────────────────────────────────────────────
function ContactSection({ t }) {
  return (
    <section className="mp-section mp-section-contact" id="contact">
      <div className="mp-section-head">
        <div className="mp-section-num">§ 04</div>
        <h2 className="mp-section-title mp-serif">{t.contact.section}</h2>
        <p className="mp-section-sub">{t.contact.sectionSub}</p>
      </div>
      <div className="mp-contact-card">
        <div className="mp-contact-status">
          <span className="mp-status-dot"/> {t.contact.available}
        </div>
        <div className="mp-contact-huge mp-serif">
          sales<span style={{color:ACCENT}}>@</span><br/>mobilepablo<span style={{color:ACCENT}}>.</span>org
        </div>
        <div className="mp-contact-grid">
          <div className="mp-contact-item">
            <div className="mp-contact-label">{t.contact.emailLabel}</div>
            <a href="mailto:sales@mobilepablo.org" className="mp-contact-val">sales@mobilepablo.org</a>
          </div>
          <div className="mp-contact-item">
            <div className="mp-contact-label">{t.contact.phoneLabel}</div>
            <a href="tel:+48663903677" className="mp-contact-val">+48 663 903 677</a>
          </div>
        </div>
        <a href="mailto:sales@mobilepablo.org" className="mp-btn mp-btn-primary mp-contact-cta">{t.contact.cta} →</a>
      </div>
      <footer className="mp-footer">
        <div>© 2026 Paweł Łukasz · Mobilepablo</div>
        <div className="mp-footer-right">
          <span>Warsaw, PL</span>
          <span className="mp-footer-dot"/>
          <span>Designed &amp; built solo</span>
        </div>
      </footer>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// Hero variant switcher
// ──────────────────────────────────────────────────────────────
function HeroSwitcher({ variant, setVariant }) {
  return (
    <div className="mp-hero-switch">
      <span className="mp-hero-switch-label">Hero</span>
      {['A','B','C','D','E','F'].map(v => (
        <button key={v} className={variant===v?'active':''} onClick={()=>setVariant(v)}>{v}</button>
      ))}
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// Tweaks panel
// ──────────────────────────────────────────────────────────────
function TweaksPanel({ tweaks, setTweaks, visible }) {
  if (!visible) return null;
  return (
    <div className="mp-tweaks">
      <div className="mp-tweaks-title">Tweaks</div>
      <div className="mp-tweaks-row">
        <span>Language</span>
        <div className="mp-tweaks-seg">
          {['pl','en','es'].map(l => (
            <button key={l} className={tweaks.lang===l?'active':''} onClick={()=>setTweaks({lang:l})}>{l.toUpperCase()}</button>
          ))}
        </div>
      </div>
      <div className="mp-tweaks-row">
        <span>Theme</span>
        <div className="mp-tweaks-seg">
          {['light','dark'].map(t => (
            <button key={t} className={tweaks.theme===t?'active':''} onClick={()=>setTweaks({theme:t})}>{t}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// Hero variants for layout switcher
// ──────────────────────────────────────────────────────────────
function HeroB_Bold({ t }) {
  return (
    <section className="mp-hero mp-hero-bold" id="top">
      <div className="mp-hero-bold-frame">
        <div className="mp-hero-bold-meta">
          <div><span className="mp-dot-accent"/> {t.hero.eyebrow}</div>
          <div>Warsaw · available worldwide</div>
        </div>
        <h1 className="mp-hero-bold-title mp-serif mp-italic">
          Paweł<br/>Łukasz<span style={{color:ACCENT}}>.</span>
        </h1>
        <div className="mp-hero-bold-meta mp-hero-bold-meta-bottom">
          <div>Principal Mobile Engineer</div>
          <div>Flutter · Kotlin · Compose</div>
        </div>
      </div>
      <div className="mp-hero-bold-strip">
        <span>★ 5 YRS SHIPPING</span>
        <span>★ 2 APPS LIVE</span>
        <span>★ TINDER TRUST &amp; SAFETY</span>
        <span>★ FLUTTER · KOTLIN</span>
        <span>★ SOLO &amp; AT SCALE</span>
        <span>★ 5 YRS SHIPPING</span>
        <span>★ 2 APPS LIVE</span>
        <span>★ TINDER TRUST &amp; SAFETY</span>
      </div>
      <div className="mp-hero-bold-lead">
        <p>{t.hero.tagline1} {t.hero.tagline2}</p>
        <div className="mp-hero-ctas">
          <a href="#apps" className="mp-btn mp-btn-primary">{t.hero.cta1} <span>↓</span></a>
          <a href="#contact" className="mp-btn mp-btn-ghost">{t.hero.cta2}</a>
        </div>
      </div>
    </section>
  );
}

function HeroC_Custom({ t }) {
  return (
    <section className="mp-hero mp-hero-custom" id="top">
      <div className="mp-hero-custom-tag">
        <span className="mp-dot-accent"/>
        <span>Case-study portfolio · {t.hero.eyebrow}</span>
      </div>
      <div className="mp-hero-custom-grid">
        <div className="mp-hero-custom-left">
          <div className="mp-hero-custom-label">A — Hello, I&apos;m</div>
          <h1 className="mp-hero-custom-name">
            Paweł <span className="mp-serif mp-italic">Łukasz</span>
          </h1>
          <div className="mp-hero-custom-label">B — I ship mobile apps</div>
          <p className="mp-hero-custom-lead">
            {t.hero.tagline1} {t.hero.tagline2}
          </p>
          <div className="mp-hero-custom-label">C — Let&apos;s talk</div>
          <div className="mp-hero-ctas">
            <a href="#apps" className="mp-btn mp-btn-primary">{t.hero.cta1} <span>↓</span></a>
            <a href="#contact" className="mp-btn mp-btn-ghost">{t.hero.cta2}</a>
          </div>
        </div>
        <div className="mp-hero-custom-right">
          <div className="mp-hero-custom-card">
            <div className="mp-hero-custom-card-num">01</div>
            <img src="mobilepablo/assets/photoclean-icon.png" alt=""/>
            <div className="mp-hero-custom-card-name mp-serif">PhotoClean</div>
            <div className="mp-hero-custom-card-tag">Photo cleaner · swipe</div>
          </div>
          <div className="mp-hero-custom-card">
            <div className="mp-hero-custom-card-num">02</div>
            <img src="mobilepablo/assets/prodoc-icon.png" alt=""/>
            <div className="mp-hero-custom-card-name mp-serif">ProDoc+</div>
            <div className="mp-hero-custom-card-tag">PDF Reader</div>
          </div>
          <div className="mp-hero-custom-card mp-hero-custom-card-ghost">
            <div className="mp-hero-custom-card-num">03</div>
            <div className="mp-hero-custom-card-name mp-serif mp-italic" style={{opacity:0.5}}>in progress…</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// App
// ──────────────────────────────────────────────────────────────
function App() {
  const [tweaks, setTweaks] = useTweaks();
  const [active, setActive] = useState('top');
  const [editMode, setEditMode] = useState(false);

  const lang = tweaks.lang;
  const theme = tweaks.theme;
  const t = TRANSLATIONS[lang] || TRANSLATIONS.en;

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    document.documentElement.setAttribute('lang', lang);
  }, [theme, lang]);

  useEffect(() => {
    const handler = (e) => {
      if (!e?.data?.type) return;
      if (e.data.type === '__activate_edit_mode') setEditMode(true);
      if (e.data.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', handler);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch (e) {}
    return () => window.removeEventListener('message', handler);
  }, []);

  useEffect(() => {
    const onScroll = () => {
      const ids = ['apps','skills','about','contact'];
      let cur = 'top';
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top < 200) cur = id;
      }
      setActive(cur);
    };
    window.addEventListener('scroll', onScroll, {passive:true});
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const onNav = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({top: id==='top' ? 0 : el.offsetTop - 60, behavior: 'smooth'});
  };

  const heroVariant = tweaks.heroV2 || 'v1';
  const heroEntry = (window.HEROES_V2 || []).find(h => h.id === heroVariant) || (window.HEROES_V2 || [])[0];
  const Hero = heroEntry ? heroEntry.cmp : HeroB;

  return (
    <div className="mp-root" data-screen-label="Mobilepablo Portfolio">
      <Nav lang={lang} setLang={(l)=>setTweaks({lang:l})} theme={theme} setTheme={(th)=>setTweaks({theme:th})} t={t} onNav={onNav} active={active}/>
      {window.HeroV2Switcher && (
        <window.HeroV2Switcher variant={heroVariant} setVariant={(v)=>setTweaks({heroV2:v})}/>
      )}
      <main>
        <Hero t={t} lang={lang}/>
        <AppsSection t={t}/>
        <SkillsSection t={t}/>
        <AboutSection t={t}/>
        <ContactSection t={t}/>
      </main>
      <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} visible={editMode}/>
    </div>
  );
}

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