// Screen components for each section

const { useState: uS, useEffect: uE, useRef: uR } = React;

// ===== HOME =====
function HomeScreen({ onNav }) {
  const role = useRotatingText(ROLES, 2200);
  const clock = useClock();
  const lat = "25.2048°N";
  const lon = "55.2708°E";
  return (
    <div className="home-hero">
      <div className="kicker">SESSION · 0x01 · INITIALIZED</div>
      <h1>
        <span className="outlined">MOTAWEA</span>
        <br/>
        <span className="glitch" data-text="builds worlds.">builds worlds<span className="red">.</span></span>
      </h1>
      <div className="roles">
        <span className="label">// currently</span>
        <span className="val">{role}</span>
      </div>

      <div className="home-hud">
        <div className="hud-stat">
          <div className="hs-label">Years Shipping</div>
          <div className="hs-value">12<span className="unit">+ yr</span></div>
        </div>
        <div className="hud-stat">
          <div className="hs-label">Projects</div>
          <div className="hs-value">50<span className="unit">+</span></div>
        </div>
        <div className="hud-stat">
          <div className="hs-label">Coords</div>
          <div className="hs-value" style={{fontSize:14, fontFamily:"var(--mono)"}}>{lat}<br/>{lon}</div>
        </div>
        <div className="hud-stat">
          <div className="hs-label">Status</div>
          <div className="hs-value" style={{color:"oklch(0.75 0.12 155)", fontSize:16}}>● OPEN TO OPPS</div>
        </div>
      </div>

      <div className="home-prompt">
        press <kbd>1</kbd><kbd>2</kbd><kbd>3</kbd><kbd>4</kbd><kbd>5</kbd> to navigate
      </div>
    </div>
  );
}

// ===== ABOUT =====
function AboutScreen() {
  return (
    <>
      <div className="screen-header">
        <div className="sh-left">
          <span className="sh-id">// 02</span>
          <h2 className="glitch" data-text="About">About</h2>
        </div>
        <div className="sh-meta">Unity Expert · Game Developer · Technical Leader</div>
      </div>

      <div className="about-grid">
        <div className="card">
          <h3>Bio</h3>
          <p className="lead">Lead Unity Engineer @ Visionaries. Unity Certified Professional Programmer with over 12 years shipping games, simulations, and XR products across Mobile, PC, and VR/AR.</p>
          <p>Hands-on engineer who architects systems, writes production C#, and solves hard performance problems. Specialized in scalable game architecture, performance optimization, and leading technical teams to multiply impact.</p>
        </div>

        <div className="card">
          <h3>Identity</h3>
          <ul className="info-list">
            <li><span className="k">Name</span><span className="v">Mohammed Motawea</span></li>
            <li><span className="k">Experience</span><span className="v">12+ Years</span></li>
            <li><span className="k">Based</span><span className="v">Dubai, UAE</span></li>
            <li><span className="k">Cert</span><span className="v">Unity Pro Programmer</span></li>
            <li><span className="k">Email</span><span className="v"><a href="mailto:motawea@visionaries.me">motawea@visionaries.me</a></span></li>
            <li><span className="k">Phone</span><span className="v">+971 50 128 50 93</span></li>
            <li><span className="k">Status</span><span className="v avail">Open to Opportunities</span></li>
          </ul>
        </div>

        <div className="card">
          <h3>Signals</h3>
          <p style={{fontSize:13}}>Cross-platform shipper. Performance surgeon. Team multiplier.</p>
          <div className="social-row" style={{marginTop: 16}}>
            {SOCIALS.map(s => (
              <a key={s.k} href={s.url} title={s.title} target="_blank" rel="noreferrer">{s.k}</a>
            ))}
          </div>
          <div style={{marginTop: 20, fontFamily:"var(--mono)", fontSize:10, color:"var(--ink-ghost)", letterSpacing:"0.15em", textTransform:"uppercase"}}>
            <div>▸ Unity · C# · XR</div>
            <div>▸ Azure · Photon · Addressables</div>
            <div>▸ Odin · Editor Tools · VFX</div>
          </div>
        </div>
      </div>

      <div className="services">
        {SERVICES.map((s, i) => (
          <div className="service" key={s.title}>
            <div className="s-num">{pad(i+1)} / 04</div>
            <div className="s-glyph">{s.glyph}</div>
            <h4>{s.title}</h4>
            <p>{s.desc}</p>
          </div>
        ))}
      </div>
    </>
  );
}

// ===== RESUME =====
function ResumeScreen() {
  return (
    <>
      <div className="screen-header">
        <div className="sh-left">
          <span className="sh-id">// 03</span>
          <h2 className="glitch" data-text="Resume">Resume</h2>
        </div>
        <div className="sh-meta">12+ YRS · Unity Certified Professional</div>
      </div>

      <div className="resume-grid">
        <div className="resume-col">
          <h3>Education & Certification</h3>
          {EDUCATION.map(ev => (
            <div className="timeline-ev" key={ev.title}>
              <div className="date">{ev.date}</div>
              <h4>{ev.title}</h4>
              <span className="org">{ev.org}</span>
              <p>{ev.desc}</p>
            </div>
          ))}
          <div className="cert-badges">
            <a className="cert-badge" href="https://www.credly.com/badges/a4163443-85de-4e5c-af95-d3fa8238079b" target="_blank" rel="noreferrer">
              <div className="ring"/>
              UNITY<br/>PRO
            </a>
            <a className="cert-badge" href="https://www.credly.com/badges/50d706f5-8fa7-4850-8a12-1eebbbd1cec2" target="_blank" rel="noreferrer">
              <div className="ring"/>
              UNITY<br/>EXPERT
            </a>
          </div>
        </div>

        <div className="resume-col">
          <h3>Experience</h3>
          {EXPERIENCE.map(ev => (
            <div className="timeline-ev" key={ev.title + ev.date}>
              <div className="date">{ev.date}</div>
              <h4>{ev.title}</h4>
              <span className="org">{ev.org}</span>
              <p>{ev.desc}</p>
            </div>
          ))}
        </div>

        <div className="resume-col">
          <h3>Skills Matrix</h3>
          {SKILLS.map(s => (
            <div className="skill-bar" key={s.name}>
              <div className="sb-head">
                <span className="name">{s.name}</span>
                <span className="val">{s.v}%</span>
              </div>
              <div className="sb-track">
                <div className="sb-fill" style={{width: `${s.v}%`}}/>
              </div>
            </div>
          ))}
          <div className="cv-cta">
            <a className="btn btn-primary" href="resume/Senior Unity Developer_Mohammed Motawea.pdf" target="_blank" rel="noreferrer">
              <span>↓ Download CV</span>
            </a>
          </div>
        </div>
      </div>
    </>
  );
}

// ===== PORTFOLIO =====
function ProjectCard({ p, onOpen }) {
  const artStyle = p.thumb ? {
    backgroundImage: `linear-gradient(180deg, rgba(5,6,10,0.15) 0%, rgba(5,6,10,0.75) 100%), url("${p.thumb}")`,
    backgroundSize: "cover",
    backgroundPosition: "center",
  } : undefined;
  return (
    <div className="project" onClick={() => onOpen(p)}>
      <div className={`p-art${p.thumb ? " has-thumb" : ""}`} style={artStyle}>
        <div className="p-corners"><span/><span/><span/><span/></div>
        <div className="p-id">{p.id}</div>
        <div className="p-tag">{p.tag}</div>
        {!p.thumb && <div className="p-mono">{p.mono}</div>}
      </div>
      <div className="p-meta">
        <h4>{p.name}</h4>
        <p className="p-desc">{p.oneliner}</p>
        <div className="p-cta">Load dossier</div>
      </div>
    </div>
  );
}

function ProjectModal({ p, onClose }) {
  const videos = p?.videos || [];
  const gallery = p?.gallery || [];
  const [heroIdx, setHeroIdx] = uS(0);

  uE(() => { setHeroIdx(0); }, [p && p.id]);

  if (!p) return null;

  const mediaList = [
    ...videos.map(id => ({ type: "video", id })),
    ...gallery.map(src => ({ type: "image", src })),
  ];
  const hero = mediaList[heroIdx];

  return (
    <div className={`proj-modal ${p ? "active" : ""}`}>
      <div className="pm-head">
        <div>
          <div className="pm-id">DOSSIER · {p.id}</div>
          <h2 className="glitch" data-text={p.name}>{p.name}</h2>
          <div className="pm-sub">{p.role} — {p.org} — {p.period}</div>
        </div>
        <button className="pm-close" onClick={onClose}>[ ESC ] Close</button>
      </div>
      <div className="pm-body">
        <div className="pm-left">
          <div className={`pm-hero-art${hero ? " has-media" : ""}`}>
            {hero && hero.type === "video" && (
              <iframe
                key={hero.id}
                className="pm-video"
                src={`https://www.youtube.com/embed/${hero.id}`}
                title={`${p.name} — preview`}
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
                frameBorder="0"
              />
            )}
            {hero && hero.type === "image" && (
              <img className="pm-img" src={hero.src} alt={p.name}/>
            )}
            {!hero && <div className="pm-watermark">{p.mono}</div>}
            <div className="pm-overlay pm-overlay-top">▸ BUILD: {p.id}</div>
            <div className="pm-overlay pm-overlay-bottom">
              <span>◉ REC · {hero && hero.type === "video" ? "preview reel" : hero ? "preview asset" : "no media"}</span>
              <span>live build →</span>
            </div>
          </div>
          {mediaList.length > 1 && (
            <div className="pm-gallery">
              {mediaList.map((m, i) => (
                <button
                  key={i}
                  className={`pm-gallery-item${i === heroIdx ? " active" : ""}${m.type === "video" ? " is-video" : ""}`}
                  onClick={() => setHeroIdx(i)}
                  title={m.type === "video" ? "Play preview" : "View image"}
                >
                  {m.type === "image" && <img src={m.src} alt=""/>}
                  {m.type === "video" && (
                    <>
                      <img src={`https://img.youtube.com/vi/${m.id}/mqdefault.jpg`} alt=""/>
                      <span className="pm-play">▶</span>
                    </>
                  )}
                </button>
              ))}
            </div>
          )}
        </div>
        <div>
          <div className="stat-row">
            {p.stats.map(s => (
              <div className="stat" key={s.sk}>
                <div className="sv">{s.sv}</div>
                <div className="sk">{s.sk}</div>
              </div>
            ))}
          </div>
          <div className="tag-row">
            {p.tags.map((t, i) => (
              <span className={`tag ${i === 0 ? "hot" : ""}`} key={t}>{t}</span>
            ))}
          </div>
          <p style={{color:"var(--ink-dim)", fontSize:13, lineHeight:1.6, margin:"6px 0 16px"}}>{p.oneliner}</p>
          <ul className="bullet-list">
            {p.bullets.map((b, i) => (
              <li key={i} dangerouslySetInnerHTML={{__html: b}}/>
            ))}
          </ul>
          {p.link && (
            <div style={{marginTop: 20}}>
              <a className="btn" href={p.link} target="_blank" rel="noreferrer">
                <span>Visit project ↗</span>
              </a>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function PortfolioScreen() {
  const [filter, setFilter] = uS("all");
  const [open, setOpen] = uS(null);
  const filtered = PROJECTS.filter(p => filter === "all" || p.filter === filter);
  uE(() => {
    const onKey = e => { if (e.key === "Escape") setOpen(null); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);
  return (
    <>
      <div className="screen-header">
        <div className="sh-left">
          <span className="sh-id">// 04</span>
          <h2 className="glitch" data-text="Portfolio">Portfolio</h2>
        </div>
        <div className="sh-meta">Select a dossier · {filtered.length} available</div>
      </div>

      <div className="filters">
        {["all", "games", "xr", "tools"].map(f => (
          <button
            key={f}
            className={filter === f ? "active" : ""}
            onClick={() => setFilter(f)}
          >
            {f === "all" ? "All" : f === "xr" ? "XR/VR" : f[0].toUpperCase() + f.slice(1)}
          </button>
        ))}
      </div>

      <div className="projects">
        {filtered.map(p => <ProjectCard key={p.id} p={p} onOpen={setOpen}/>)}
      </div>

      {open && <ProjectModal p={open} onClose={() => setOpen(null)}/>}
    </>
  );
}

// ===== CONTACT =====
const FORMSPREE_ENDPOINT = "https://formspree.io/f/maqnrnjj";

function ContactScreen() {
  const [form, setForm] = uS({ name: "", email: "", message: "" });
  const [status, setStatus] = uS("idle"); // idle | sending | sent | error
  const [errMsg, setErrMsg] = uS("");
  const clock = useClock();

  async function submit(e) {
    e.preventDefault();
    if (status === "sending") return;
    setStatus("sending");
    setErrMsg("");
    try {
      const res = await fetch(FORMSPREE_ENDPOINT, {
        method: "POST",
        headers: { "Accept": "application/json", "Content-Type": "application/json" },
        body: JSON.stringify({
          name: form.name,
          email: form.email,
          message: form.message,
          _subject: `New message from ${form.name || "portfolio contact form"}`,
        }),
      });
      if (res.ok) {
        setStatus("sent");
        setForm({ name: "", email: "", message: "" });
      } else {
        const data = await res.json().catch(() => ({}));
        const msg = Array.isArray(data.errors) && data.errors.length
          ? data.errors.map(x => x.message).join(" · ")
          : data.error || `Transmission failed (HTTP ${res.status}) — try again.`;
        setErrMsg(msg);
        setStatus("error");
      }
    } catch (err) {
      setErrMsg("Network error — check connection and retry.");
      setStatus("error");
    }
  }

  const btnLabel =
    status === "sending" ? "▸ Transmitting..." :
    status === "sent"    ? "✓ Transmitted — Reply incoming" :
    status === "error"   ? "✗ Retry transmission" :
                           "▸ Transmit message";

  return (
    <>
      <div className="screen-header">
        <div className="sh-left">
          <span className="sh-id">// 05</span>
          <h2 className="glitch" data-text="Contact">Contact</h2>
        </div>
        <div className="sh-meta">Open to opportunities · Response &lt; 24h</div>
      </div>

      <div className="contact-grid">
        <div className="contact-info">
          <div className="ci-row">
            <div className="ci-glyph">◉</div>
            <div className="ci-txt">
              <div className="k">Location</div>
              <div className="v">Dubai, UAE</div>
            </div>
          </div>
          <div className="ci-row">
            <div className="ci-glyph">✉</div>
            <div className="ci-txt">
              <div className="k">Email</div>
              <div className="v"><a style={{color:"inherit", textDecoration:"none"}} href="mailto:motawea@visionaries.me">motawea@visionaries.me</a></div>
            </div>
          </div>
          <div className="ci-row">
            <div className="ci-glyph">☎</div>
            <div className="ci-txt">
              <div className="k">Phone</div>
              <div className="v">+971 50 128 50 93</div>
            </div>
          </div>
          <div className="ci-row">
            <div className="ci-glyph">●</div>
            <div className="ci-txt">
              <div className="k">Availability</div>
              <div className="v" style={{color:"oklch(0.75 0.12 155)"}}>Open to Opportunities</div>
            </div>
          </div>

          <div className="social-row" style={{marginTop: 24}}>
            {SOCIALS.map(s => (
              <a key={s.k} href={s.url} title={s.title} target="_blank" rel="noreferrer">{s.k}</a>
            ))}
          </div>
        </div>

        <form className="contact-form" onSubmit={submit} noValidate>
          <div className="cf-head">
            <span>▸ transmit://motawea</span>
            <span className="blink">● LIVE</span>
          </div>
          <div className="form-field">
            <label>Handle</label>
            <input
              required
              name="name"
              value={form.name}
              onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
              placeholder="your_name"
              disabled={status === "sending"}
            />
          </div>
          <div className="form-field">
            <label>Return channel</label>
            <input
              required
              name="email"
              type="email"
              value={form.email}
              onChange={e => setForm(f => ({ ...f, email: e.target.value }))}
              placeholder="you@domain.com"
              disabled={status === "sending"}
            />
          </div>
          <div className="form-field">
            <label>Payload</label>
            <textarea
              required
              name="message"
              value={form.message}
              onChange={e => setForm(f => ({ ...f, message: e.target.value }))}
              placeholder="Project, timeline, collaboration..."
              disabled={status === "sending"}
            />
          </div>
          <button
            className="btn btn-primary"
            type="submit"
            style={{width:"100%"}}
            disabled={status === "sending" || status === "sent"}
          >
            <span>{btnLabel}</span>
          </button>
          {status === "error" && (
            <div style={{marginTop: 10, fontFamily:"var(--mono)", fontSize:10, color:"var(--accent)", letterSpacing:"0.1em"}}>
              ▸ ERR · {errMsg}
            </div>
          )}
          <div style={{marginTop: 14, fontFamily:"var(--mono)", fontSize:10, color:"var(--ink-ghost)", letterSpacing:"0.15em"}}>
            TS · {clock.toISOString().split("T")[0]} · {pad(clock.getUTCHours())}:{pad(clock.getUTCMinutes())}:{pad(clock.getUTCSeconds())} UTC
          </div>
        </form>
      </div>
    </>
  );
}

Object.assign(window, {
  HomeScreen, AboutScreen, ResumeScreen, PortfolioScreen, ContactScreen,
});