/* ==========================================================================
   MOBILE SHOWROOM — elegant lightweight 2D fallback (no CSS-3D, no crash)
   Keeps the luxury black / champagne-gold identity. Pure scroll page.
   Exposes window.MobileApp
   ========================================================================== */
const { useState:useMS, useEffect:useME } = React;

function MBlink(props){ return <a {...props} target="_blank" rel="noreferrer" />; }

/* --- lightweight project detail sheet (slides up) --- */
function MProjectSheet({ p, onClose }){
  useME(()=>{
    const onKey=(e)=>{ if(e.key==="Escape") onClose(); };
    window.addEventListener("keydown",onKey);
    document.documentElement.classList.add("sheet-open");
    return ()=>{ window.removeEventListener("keydown",onKey); document.documentElement.classList.remove("sheet-open"); };
  },[]);
  return (
    <div className="m-sheet-wrap" onClick={onClose}>
      <div className="m-sheet" onClick={(e)=>e.stopPropagation()}>
        <button className="m-sheet-close" onClick={onClose} aria-label="Close">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M5 5l14 14M19 5L5 19"/></svg>
        </button>
        <div className={"m-sheet-shot"+(p.shot?" has":"")}>
          {p.shot
            ? <img src={p.shot} alt={p.name} loading="lazy" decoding="async" />
            : <span className="m-sheet-mark">{p.name[0]}</span>}
        </div>
        <div className="m-sheet-body">
          <div className="m-kicker">{p.kind}{p.year?" · "+p.year:""}{p.related?" · "+p.related:""}</div>
          <h3 className="m-sheet-name">{p.name}</h3>
          <p className="m-sheet-desc">{p.desc}</p>
          {p.url && <MBlink className="m-link" href={p.url}>↗ {p.url.replace(/^https?:\/\/(www\.)?/,"")}</MBlink>}
          {p.features && (
            <div className="m-block">
              <div className="m-blabel">Features</div>
              <ul className="m-featlist">{p.features.map((f,j)=>(<li key={j}>{f}</li>))}</ul>
            </div>
          )}
          <div className="m-block">
            <div className="m-blabel">Technologies</div>
            <div className="m-chips">{p.tags.map((tg,j)=>(<span key={j} className="m-chip accent">{tg}</span>))}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function MobileApp(){
  const D = window.MBDATA;
  const id = D.identity;
  const [proj, setProj] = useMS(null);

  // remove the pre-React loader (App's loader effect doesn't run in 2D mode)
  useME(()=>{
    const l=document.getElementById("loader");
    if(l){ l.classList.add("hide"); setTimeout(()=>l&&l.remove(),700); }
    const d=document.getElementById("scroll-driver"); if(d) d.style.height="0";
    document.documentElement.classList.remove("locked");
  },[]);

  const dl = (src)=>()=>{ if(window.MBcv) window.MBcv.download(src); };

  return (
    <div className="m-root">
      {/* ambient gold glow header backdrop */}
      <div className="m-aura" aria-hidden="true" />

      {/* ===== HERO ===== */}
      <header className="m-hero">
        <div className="m-mode">● Mobile optimized showroom mode</div>
        <div className="m-portrait">
          <img src="assets/portrait.webp" alt="Meriem Bembli" decoding="async" />
          <div className="m-portrait-glow" aria-hidden="true" />
        </div>
        <div className="m-seal">MB</div>
        <h1 className="m-name">MERIEM<br/>BEMBLI</h1>
        <div className="m-roles">{id.taglineParts.map((s,i)=>(<span key={i}>{s}</span>))}</div>
        <div className="m-actions">
          <button className="m-btn" onClick={dl("cv_download_hero")}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v12M8 11l4 4 4-4M5 21h14"/></svg>
            Download CV
          </button>
          <MBlink className="m-act" href={"mailto:"+id.email}>✉ Email</MBlink>
          <MBlink className="m-act" href={id.linkedin}>in · LinkedIn</MBlink>
          <MBlink className="m-act" href={id.github}>⌥ GitHub</MBlink>
        </div>
      </header>

      {/* ===== SECTION NAV ===== */}
      <nav className="m-nav">
        <a href="#m-journey"><span className="d" style={{"--rh":84}} />Journey</a>
        <a href="#m-work"><span className="d" style={{"--rh":232}} />Projects</a>
        <a href="#m-skills"><span className="d" style={{"--rh":168}} />Skills</a>
        <a href="#m-impact"><span className="d" style={{"--rh":38}} />Growth</a>
        <a href="#m-vision"><span className="d" style={{"--rh":42}} />Vision</a>
      </nav>

      {/* ===== JOURNEY ===== */}
      <section className="m-sec" id="m-journey" style={{"--rh":84}}>
        <div className="m-sec-head"><span className="m-glyph">◴</span><div><div className="m-eyebrow">Experience Gallery</div><h2 className="m-title">The Journey</h2></div></div>
        <div className="m-timeline">
          {D.journey.map((it,i)=>(
            <div key={i} className={"m-tl"+(it.now?" now":"")}>
              <div className="m-tl-dot" />
              <div className="m-tl-period">{it.period}</div>
              <div className="m-tl-role">{it.role}</div>
              <div className="m-tl-org">{it.org}</div>
              <p className="m-tl-desc">{it.desc}</p>
              <ul className="m-tl-bullets">{it.bullets.map((b,j)=>(<li key={j}>{b}</li>))}</ul>
              {it.clients && <div className="m-tl-clients">Clients · {it.clients.join(" · ")}</div>}
              <div className="m-chips">{it.tech.map((tg,j)=>(<span key={j} className="m-chip accent">{tg}</span>))}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ===== PROJECTS ===== */}
      <section className="m-sec" id="m-work" style={{"--rh":232}}>
        <div className="m-sec-head"><span className="m-glyph">◫</span><div><div className="m-eyebrow">Project Showroom</div><h2 className="m-title">The Workshop</h2></div></div>
        <div className="m-projgrid">
          {D.projects.map((p,i)=>(
            <button key={i} className={"m-proj"+(p.flagship?" flagship":"")} onClick={()=>setProj(p)}>
              <div className={"m-proj-shot"+(p.shot?" has":"")}>
                {p.shot
                  ? <img src={p.shot} alt={p.name} loading="lazy" decoding="async" />
                  : <span className="m-proj-mark">{p.name[0]}</span>}
              </div>
              <div className="m-proj-body">
                <div className="m-proj-top">
                  <span className="m-proj-name">{p.name}</span>
                  <span className="m-proj-kind">{p.kind}</span>
                </div>
                <p className="m-proj-desc">{p.desc}</p>
                <div className="m-chips">{p.tags.slice(0,4).map((tg,j)=>(<span key={j} className="m-chip">{tg}</span>))}</div>
                <span className="m-proj-open">View exhibit →</span>
              </div>
            </button>
          ))}
        </div>
      </section>

      {/* ===== SKILLS ===== */}
      <section className="m-sec" id="m-skills" style={{"--rh":168}}>
        <div className="m-sec-head"><span className="m-glyph">◈</span><div><div className="m-eyebrow">Skills Lab</div><h2 className="m-title">The Arsenal</h2></div></div>
        <div className="m-arsenal">
          {D.arsenal.map((g,i)=>(
            <div key={i} className="m-ars">
              <div className="m-ars-title">{g.group}</div>
              <div className="m-chips">{g.items.map((it,j)=>(<span key={j} className="m-chip">{it}</span>))}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ===== IMPACT / GROWTH ===== */}
      <section className="m-sec" id="m-impact" style={{"--rh":38}}>
        <div className="m-sec-head"><span className="m-glyph">◉</span><div><div className="m-eyebrow">Growth Center</div><h2 className="m-title">The Impact</h2></div></div>
        <div className="m-impactgrid">
          {D.impact.map((s,i)=>(
            <div key={i} className="m-stat">
              <div className="m-stat-metric">{s.metric}</div>
              <div className="m-stat-label">{s.label}</div>
            </div>
          ))}
        </div>
        <p className="m-impactnote">{D.impactNote}</p>
      </section>

      {/* ===== VISION ===== */}
      <section className="m-sec" id="m-vision" style={{"--rh":42}}>
        <div className="m-sec-head"><span className="m-glyph">✦</span><div><div className="m-eyebrow">Future Room</div><h2 className="m-title">The Vision</h2></div></div>
        <p className="m-vintro"><em>{D.vision.intro}</em> My goal is to build products that combine software engineering, mobile innovation, artificial intelligence and business growth.</p>
        <div className="m-block">
          <div className="m-blabel">Built on</div>
          <div className="m-chips">{D.vision.pillars.map((p,i)=>(<span key={i} className="m-chip accent">{p}</span>))}</div>
        </div>
        <div className="m-block">
          <div className="m-blabel">Future focus</div>
          <div className="m-focusgrid">{D.vision.focus.map((f,i)=>(<div key={i} className="m-focus"><span className="fn">{String(i+1).padStart(2,"0")}</span>{f}</div>))}</div>
        </div>
        <div className="m-finale">
          <q className="m-quote">{D.vision.message}</q>
          <span className="m-sign">{D.vision.sign}</span>
        </div>
      </section>

      {/* ===== CONTACT / CV ===== */}
      <section className="m-contact">
        <div className="m-cta-line">Interested in my profile?</div>
        <div className="m-cta-sub">Download my CV and let’s build something impactful together.</div>
        <div className="m-actions center">
          <button className="m-btn" onClick={dl("cv_download_contact")}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v12M8 11l4 4 4-4M5 21h14"/></svg>
            Download CV
          </button>
          <MBlink className="m-act" href={"mailto:"+id.email}>✉ Email</MBlink>
          <MBlink className="m-act" href={id.linkedin}>in · LinkedIn</MBlink>
          <MBlink className="m-act" href={id.github}>⌥ GitHub</MBlink>
        </div>
        <div className="m-loc">◎ {id.location}</div>
        <div className="m-foot">Meriem Bembli — Headquarters · Mobile showroom mode</div>
      </section>

      {proj && <MProjectSheet p={proj} onClose={()=>setProj(null)} />}
    </div>
  );
}

window.MobileApp = MobileApp;