/* ==========================================================================
   WINGS — each room is backed by its reference image (the room you saw
   through the door). Content is laid over a cinematic scrim.
   Exposes window.Wing
   ========================================================================== */
const { useRef:useWR, useEffect:useWE } = React;

function Tag({children, accent}){ return <span className={"w-tag"+(accent?" accent":"")}>{children}</span>; }

/* ---- CV DOWNLOAD : reusable recruiter CTA + quick actions ---- */
const CV_DL_ICON = (<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>);
function CVButton({ source, label }){
  return (
    <button className="cv-btn" onClick={()=>window.MBcv && window.MBcv.download(source)}>
      <span className="dl">{CV_DL_ICON}</span> {label||"Download CV"}
    </button>
  );
}
function CVActions({ source }){
  const id = window.MBDATA.identity;
  return (
    <div className="cv-actions">
      <CVButton source={source} />
      <a className="cv-act" href={"mailto:"+id.email} onClick={()=>window.MBcv&&window.MBcv.track("contact_email")}>✉ Email Me</a>
      <a className="cv-act" href={id.linkedin} target="_blank" rel="noreferrer" onClick={()=>window.MBcv&&window.MBcv.track("contact_linkedin")}>in · LinkedIn</a>
      <a className="cv-act" href={id.github} target="_blank" rel="noreferrer" onClick={()=>window.MBcv&&window.MBcv.track("contact_github")}>⌥ GitHub</a>
    </div>
  );
}
function CVCta({ source }){
  return (
    <div className="cv-cta">
      <div className="cv-line">Interested in my profile?</div>
      <div className="cv-sub">Download my CV and let’s build something impactful together.</div>
      <CVActions source={source} />
    </div>
  );
}
window.CVButton = CVButton; window.CVActions = CVActions; window.CVCta = CVCta;

/* ---- THE JOURNEY ---- */
function JourneyBody(){
  return (
    <div className="w-timeline">
      {window.MBDATA.journey.map((it,i)=>(
        <div key={i} className={"w-panel tl"+(it.now?" now":"")}>
          <div className="tl-dot" />
          <div className="tl-period">{it.period}</div>
          <div className="tl-role">{it.role}</div>
          <div className="tl-org">{it.org}</div>
          <p className="w-desc">{it.desc}</p>
          <ul className="w-bullets">{it.bullets.map((b,j)=>(<li key={j}>{b}</li>))}</ul>
          {it.clients && <div className="w-clients">Clients · {it.clients.join("  ·  ")}</div>}
          <div className="w-tags">{it.tech.map((tg,j)=>(<Tag key={j} accent>{tg}</Tag>))}</div>
        </div>
      ))}
      <div className="w-panel" style={{marginTop:"8px",paddingTop:"34px",paddingBottom:"34px"}}>
        <CVCta source="cv_download" />
      </div>
    </div>
  );
}

/* ---- THE WORKSHOP ---- */
function WorkshopBody(){
  const projects = window.MBDATA.projects;
  const [sel, setSel] = React.useState(null);   // selected project index
  const open = (i)=>{ if(window.MBAudio && window.MBAudio.isOn && window.MBAudio.isOn()) window.MBAudio.portal(); setSel(i); };
  return (
    <React.Fragment>
      <div className="w-projgrid">
        {projects.map((p,i)=>(
          <button key={i} className={"w-panel proj as-btn"+(p.flagship?" flagship":"")} onClick={()=>open(i)}>
            <div className="proj-top">
              <span className="proj-name">{p.name}</span>
              <span className="proj-kind">{p.kind}</span>
            </div>
            <p className="w-desc">{p.desc}</p>
            <div className="w-tags">{p.tags.slice(0,5).map((tg,j)=>(<Tag key={j}>{tg}</Tag>))}</div>
            <span className="proj-open">View exhibit →</span>
          </button>
        ))}
      </div>
      {sel!==null && (
        <ProjectExhibit
          projects={projects} index={sel}
          onClose={()=>setSel(null)}
          onNav={(d)=>setSel((sel+d+projects.length)%projects.length)}
        />
      )}
    </React.Fragment>
  );
}

function ProjectExhibit({ projects, index, onClose, onNav }){
  const p = projects[index];
  React.useEffect(()=>{
    const onKey=(e)=>{ if(e.key==="Escape") onClose(); if(e.key==="ArrowRight") onNav(1); if(e.key==="ArrowLeft") onNav(-1); };
    window.addEventListener("keydown",onKey,true); return ()=>window.removeEventListener("keydown",onKey,true);
  },[index]);
  return (
    <div className="proj-exhibit" onClick={onClose}>
      <div className="pe-stage" key={index} onClick={(e)=>e.stopPropagation()}>
        <button className="pe-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>
        <button className="pe-arrow prev" onClick={()=>onNav(-1)} aria-label="Previous">‹</button>
        <button className="pe-arrow next" onClick={()=>onNav(1)} aria-label="Next">›</button>

        <div className="pe-grid">
          <div className={"pe-screen"+(p.shot?" has-shot":"")}>
            <div className="pe-screenglow" />
            {p.shot ? (
              <React.Fragment>
                <img className="pe-img" src={p.shot} alt={p.name+" screenshot"} decoding="async" />
                {p.shot2 && <img className="pe-img pe-img2" src={p.shot2} alt={p.name+" mobile"} decoding="async" />}
              </React.Fragment>
            ) : (
              <div className="pe-screencontent">
                <span className="pe-mark">{p.name[0]}</span>
                <span className="pe-shot">// premium placeholder</span>
              </div>
            )}
            <div className="pe-screenbar"><span /><span /><span /></div>
          </div>

          <div className="pe-info">
            <div className="pe-kicker">{p.kind}{p.year?" · "+p.year:""}{p.related?"  ·  "+p.related:""}</div>
            <h3 className="pe-name">{p.name}</h3>
            <p className="pe-desc">{p.desc}</p>
            {p.url && (
              <a className="pe-link" href={p.url} target="_blank" rel="noreferrer">
                ↗ {p.url.replace(/^https?:\/\/(www\.)?/,"")}
              </a>
            )}
            {p.features && (
              <div className="pe-block">
                <div className="pe-blabel">Features</div>
                <div className="pe-features">{p.features.map((f,j)=>(<div key={j} className="pe-feat"><span className="fdot" />{f}</div>))}</div>
              </div>
            )}
            <div className="pe-block">
              <div className="pe-blabel">Technologies</div>
              <div className="pe-tech">{p.tags.map((tg,j)=>(<span key={j} className="pe-chip">{tg}</span>))}</div>
            </div>
          </div>
        </div>
        <div className="pe-counter">{String(index+1).padStart(2,"0")} / {String(projects.length).padStart(2,"0")} &nbsp;·&nbsp; PROJECT EXHIBIT</div>
      </div>
    </div>
  );
}

/* ---- THE ARSENAL ---- */
function ArsenalBody(){
  return (
    <div className="w-arsenal">
      {window.MBDATA.arsenal.map((g,i)=>(
        <div key={i} className="w-panel ars">
          <div className="ars-title">{g.group}</div>
          <div className="ars-items">{g.items.map((it,j)=>(<span key={j} className="ars-chip">{it}</span>))}</div>
        </div>
      ))}
    </div>
  );
}

/* ---- THE IMPACT ---- */
function ImpactBody(){
  const D=window.MBDATA;
  return (
    <div>
      <div className="w-impactgrid">
        {D.impact.map((s,i)=>(
          <div key={i} className="w-panel stat">
            <div className="stat-metric">{s.metric}</div>
            <div className="stat-label">{s.label}</div>
          </div>
        ))}
      </div>
      <p className="w-impactnote">{D.impactNote}</p>
    </div>
  );
}

/* ---- THE VISION ---- */
function VisionBody(){
  const v=window.MBDATA.vision, id=window.MBDATA.identity;
  return (
    <div className="w-vision">
      <p className="w-vintro"><em>{v.intro}</em> My goal is to build products that combine software engineering, mobile innovation, artificial intelligence and business growth.</p>
      <div className="w-block">
        <div className="w-sublabel">Built on</div>
        <div className="w-pillars">{v.pillars.map((p,i)=>(<span key={i} className="w-pillar">{p}</span>))}</div>
      </div>
      <div className="w-block">
        <div className="w-sublabel">Future focus</div>
        <div className="w-focusgrid">{v.focus.map((f,i)=>(<div key={i} className="w-focus"><span className="fn">{String(i+1).padStart(2,"0")}</span>{f}</div>))}</div>
      </div>
      <div className="w-finale">
        <q className="w-quote">{v.message}</q>
        <span className="w-sign">{v.sign}</span>
        <div className="cv-cta" style={{marginTop:"30px"}}>
          <div className="cv-line">Interested in my profile?</div>
          <div className="cv-sub">Download my CV and let’s build something impactful together.</div>
          <CVActions source="cv_download_contact" />
          <div style={{marginTop:"16px",fontFamily:"var(--font-mono)",fontSize:"12px",letterSpacing:".1em",color:"var(--ink-soft)"}}>◎ {id.location}</div>
        </div>
      </div>
    </div>
  );
}

const BODIES = { journey:JourneyBody, workshop:WorkshopBody, arsenal:ArsenalBody, impact:ImpactBody, vision:VisionBody };

function Wing({ room, index, onExit }){
  const Body = BODIES[room.id];
  const ref = useWR(null);
  useWE(()=>{ if(ref.current) ref.current.scrollTop=0; },[room.id]);
  useWE(()=>{
    const onKey=(e)=>{ if(e.key==="Escape") onExit(); };
    window.addEventListener("keydown",onKey); return ()=>window.removeEventListener("keydown",onKey);
  },[onExit]);

  return (
    <div className={"wing room-enter"+(room.img?"":" styled")} ref={ref} style={{ "--rh":room.hue }} data-screen-label={"Room: "+room.label}>
      {/* the room image you saw through the door, now the room itself */}
      {room.img
        ? <div className="wing-photo" style={{ backgroundImage:`url(${room.img})` }} />
        : <div className="wing-photo wing-photo-styled" />}
      <div className="wing-veil" />

      <button className="wing-return" onClick={onExit}>← Return to atrium</button>
      <button className="wing-close" onClick={onExit} aria-label="Close">
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M5 5l14 14M19 5L5 19"/></svg>
      </button>

      <div className="wing-scroll">
        <header className="wing-hero">
          <div className="wh-glyph">{room.glyph}</div>
          <div className="wh-eyebrow">{room.sub} · {String(index+1).padStart(2,"0")} / 05</div>
          <h2 className="wh-title">{room.label}</h2>
          <p className="wh-tag">{room.tag}</p>
          <div className="wh-scrollcue"><span>Scroll to explore</span><span className="cue-rail" /></div>
        </header>
        <div className="wing-content">
          <Body />
        </div>
        <footer className="wing-foot">
          <button onClick={onExit}>← Return to the atrium</button>
        </footer>
      </div>
    </div>
  );
}

window.Wing = Wing;