// js/work.jsx — interactive Selected Work + lock modal + footer
const { useState: uS, useEffect: uE, useRef: uR } = React;
const DD = window.SHAMA;
const HUE = {
  gold:   ["var(--hue-gold)", "var(--hue-gold-2)", "rgba(201,168,76,0.45)"],
  green:  ["var(--hue-green)", "var(--hue-green-2)", "rgba(0,230,118,0.42)"],
  cyan:   ["var(--hue-cyan)", "var(--hue-cyan-2)", "rgba(0,210,255,0.42)"],
  blue:   ["var(--hue-blue)", "var(--hue-blue-2)", "rgba(66,153,225,0.42)"],
  violet: ["var(--hue-violet)", "var(--hue-violet-2)", "rgba(139,92,246,0.42)"],
};

/* ───────────────── Selected Work (image-reveal list) ───────────────── */
function Work({ onOpenLock }) {
  const [active, setActive] = uS(null);

  const open = (p) => {
    if (p.caseUrl) { window.location.href = p.caseUrl; return; }
    if (p.locked) onOpenLock(p);
    else window.open(p.link, "_blank", "noopener");
  };

  return (
    <section id="work" style={{ padding: "124px 0" }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 16, marginBottom: 50 }}>
          <h2 className="reveal" style={{ fontSize: "clamp(34px,4.6vw,68px)" }}>Selected <span className="grad">work</span></h2>
          <a href={DD.socials.behance} target="_blank" rel="noopener" data-cursor className="reveal mono" style={{ fontSize: 13, color: "var(--text-2)", display: "inline-flex", alignItems: "center", gap: 8, borderBottom: "1px solid var(--stroke-2)", paddingBottom: 3 }}>More on Behance <Icon.arrowUR /></a>
        </div>

        <div onMouseLeave={() => setActive(null)}>
          {DD.projects.map((p, i) => {
            const on = active === i; const h = HUE[p.hue];
            return (
              <div key={p.id} className="reveal work-row rg-work" data-cursor={p.locked ? "UNLOCK" : "OPEN"}
                onMouseEnter={() => setActive(i)} onClick={() => open(p)}
                style={{ position: "relative", borderTop: "1px solid var(--stroke)", padding: "34px 8px", paddingLeft: on ? 30 : 8, cursor: "pointer", display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 28, alignItems: "center", transition: "padding .4s var(--ease), background .4s", background: on ? "var(--glass)" : "transparent" }}>
                <span className="mono" style={{ fontSize: 13, color: on ? h[0] : "var(--text-3)", transition: "color .3s", paddingTop: 6, alignSelf: "start" }}>{p.n}</span>
                <div>
                  <div style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
                    <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "clamp(26px,3.4vw,50px)", letterSpacing: "-.02em", lineHeight: 1, color: on ? h[0] : "var(--text)", transition: "color .3s", textShadow: on ? `0 0 30px ${h[2]}` : "none" }}>{p.title}</span>
                    {p.locked
                      ? <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: ".06em", padding: "5px 11px", borderRadius: 100, border: "1px solid var(--stroke-2)", color: "var(--text-2)" }}><Icon.lock /> PROTECTED</span>
                      : <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: ".06em", padding: "5px 11px", borderRadius: 100, border: `1px solid ${on ? h[0] : "var(--stroke-2)"}`, color: on ? h[1] : "var(--text-2)", transition: "all .3s" }}><Icon.scan /> CASE STUDY</span>}
                  </div>
                  <div style={{ marginTop: 12, color: "var(--text-2)", maxWidth: 580, fontSize: 15.5 }}>{p.blurb}</div>
                  <div style={{ marginTop: 15, display: "flex", gap: 8, flexWrap: "wrap" }}>
                    {p.tags.map((t) => (<span key={t} className="mono" style={{ fontSize: 11, letterSpacing: ".03em", color: "var(--text-2)", padding: "4px 11px", borderRadius: 100, background: "var(--glass-2)", border: "1px solid var(--stroke)" }}>{t}</span>))}
                  </div>
                </div>
                <div className="work-meta" style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 7, textAlign: "right", alignSelf: "start", paddingTop: 6, lineHeight: 1.35 }}>
                  <div style={{ fontWeight: 600, fontSize: 14, whiteSpace: "nowrap" }}>{p.client}</div>
                  <div className="mono" style={{ fontSize: 12, color: "var(--text-2)", whiteSpace: "nowrap" }}>{p.role} · {p.year}</div>
                  <div className="mono" style={{ fontSize: 10.5, color: on ? h[1] : "var(--text-3)", letterSpacing: ".08em", transition: "color .3s", display: "flex", alignItems: "center", gap: 6, whiteSpace: "nowrap" }}><Icon.scan /> {p.frame}</div>
                  <span style={{ marginTop: 6, display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, fontWeight: 600, color: on ? h[0] : "var(--text-2)", border: `1px solid ${on ? h[0] : "var(--stroke-2)"}`, borderRadius: 100, padding: "6px 14px", transition: "all .3s var(--ease)", background: on ? h[2] : "transparent", whiteSpace: "nowrap" }}>
                    {p.locked ? <><Icon.lock /> Unlock</> : <>View case study <Icon.arrowUR /></>}
                  </span>
                </div>
                <span style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 2.5, background: `linear-gradient(${h[0]},${h[1]})`, transform: on ? "scaleY(1)" : "scaleY(0)", transformOrigin: "top", transition: "transform .4s var(--ease)" }}></span>
              </div>
            );
          })}
          <div style={{ borderTop: "1px solid var(--stroke)" }}></div>
        </div>
      </div>

      {/* floating preview removed per request */}
    </section>
  );
}

/* ───────────────── Lock modal ───────────────── */
function LockModal({ project, onClose }) {
  const [val, setVal] = uS("");
  const [state, setState] = uS("idle");
  const inp = uR(null);
  uE(() => { setTimeout(() => inp.current?.focus(), 60); }, []);
  uE(() => { const k = (e) => { if (e.key === "Escape") onClose(); }; addEventListener("keydown", k); return () => removeEventListener("keydown", k); }, []);
  const submit = (e) => {
    e.preventDefault();
    if (val.trim().toUpperCase() === project.password.toUpperCase()) {
      setState("ok");
      if (project.caseUrl) setTimeout(() => window.open(project.caseUrl, "_blank", "noopener"), 350);
    } else { setState("error"); setTimeout(() => setState("idle"), 600); }
  };
  const h = HUE[project.hue];
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 500, display: "grid", placeItems: "center", padding: 24, background: "rgba(3,6,12,0.7)", backdropFilter: "blur(10px)", WebkitBackdropFilter: "blur(10px)", animation: "fadeIn .3s" }}>
      <div onClick={(e) => e.stopPropagation()} className="glass" style={{ width: "min(460px,100%)", padding: 34, borderRadius: 24, borderTopColor: h[0], boxShadow: `0 0 60px ${h[2]}, 0 40px 90px -30px rgba(0,0,0,.7)`, animation: "pop .4s var(--ease)", overflow: "hidden" }}>
        <div style={{ position: "absolute", top: -50, right: -30, width: 180, height: 180, borderRadius: "50%", background: `radial-gradient(circle, ${h[2]}, transparent 70%)`, opacity: .5, filter: "blur(10px)", pointerEvents: "none" }}></div>
        {state === "ok" ? (
          <div style={{ textAlign: "center", padding: "12px 0", position: "relative" }}>
            <div style={{ width: 60, height: 60, borderRadius: "50%", margin: "0 auto 18px", display: "grid", placeItems: "center", background: `linear-gradient(135deg, ${h[0]}, ${h[1]})`, color: "#06121f", boxShadow: `0 0 30px ${h[2]}` }}>
              <svg width="26" height="26" viewBox="0 0 24 24" fill="none"><path d="M5 12l4.5 4.5L19 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </div>
            <h3 style={{ fontSize: 28, marginBottom: 8 }}>Access granted</h3>
            {project.caseUrl ? (
              <p style={{ color: "var(--text-2)", marginTop: 0 }}>Opening the full <strong style={{ color: "var(--text)" }}>{project.title}</strong> case study in a new tab… If it didn’t open, use the button below.</p>
            ) : (
              <p style={{ color: "var(--text-2)", marginTop: 0 }}>The full <strong style={{ color: "var(--text)" }}>{project.title}</strong> case study is unlocked. On the live site this opens the protected <span className="mono" style={{ color: h[1] }}>{project.frame}</span> deck.</p>
            )}
            <a href={project.caseUrl || DD.socials.behance} target="_blank" rel="noopener" data-cursor className="btn accent" style={{ marginTop: 12 }}>Open case study <Icon.arrowUR /></a>
            <div><button onClick={onClose} style={{ marginTop: 16, background: "none", border: 0, color: "var(--text-2)", cursor: "pointer", font: "inherit", textDecoration: "underline" }}>Close</button></div>
          </div>
        ) : (
          <div style={{ position: "relative" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <div className="mono" style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 11, letterSpacing: ".09em", color: h[1] }}><Icon.lock /> PROTECTED CASE STUDY</div>
              <button onClick={onClose} data-cursor style={{ background: "none", border: 0, cursor: "pointer", color: "var(--text-2)", fontSize: 22, lineHeight: 1 }}>×</button>
            </div>
            <h3 style={{ fontSize: 30, margin: "16px 0 6px" }}>{project.title}</h3>
            <p style={{ color: "var(--text-2)", marginTop: 0, fontSize: 15 }}>{project.client} · {project.blurb}</p>
            <form onSubmit={submit} style={{ marginTop: 22 }}>
              <label className="mono" style={{ fontSize: 11, letterSpacing: ".08em", color: "var(--text-2)", textTransform: "uppercase" }}>Enter password</label>
              <input ref={inp} value={val} onChange={(e) => setVal(e.target.value)} placeholder="••••••••••••"
                className="mono" style={{ width: "100%", marginTop: 8, padding: "14px 16px", borderRadius: 12, border: `1.5px solid ${state === "error" ? "#f23a43" : "var(--stroke-2)"}`, background: "rgba(0,0,0,0.3)", color: "var(--text)", font: "inherit", letterSpacing: ".1em", outline: "none", animation: state === "error" ? "shake .5s" : "none" }} />
              {state === "error" && <div style={{ color: "#ff6b72", fontSize: 13, marginTop: 8 }}>Incorrect password — try again.</div>}
              <button type="submit" data-cursor className="btn accent" style={{ width: "100%", justifyContent: "center", marginTop: 18 }}>Unlock case study <Icon.arrow /></button>
            </form>
            <p style={{ marginTop: 16, fontSize: 12.5, color: "var(--text-3)", textAlign: "center" }}>Need access? Email <a href={`mailto:${DD.email}`} style={{ color: "var(--text-2)", textDecoration: "underline" }}>{DD.email}</a></p>
          </div>
        )}
      </div>
      <style>{`@keyframes fadeIn{from{opacity:0}to{opacity:1}}
        @keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
        @keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}`}</style>
    </div>
  );
}

/* ───────────────── Footer / Contact ───────────────── */
function Footer() {
  const [copied, setCopied] = uS(false);
  const copy = () => { navigator.clipboard?.writeText(DD.email); setCopied(true); setTimeout(() => setCopied(false), 1600); };
  const socials = [["LinkedIn", DD.socials.linkedin], ["Behance", DD.socials.behance], ["NIFT Portfolio", DD.socials.nift]];
  return (
    <footer id="contact" style={{ paddingTop: 116, paddingBottom: 40, marginTop: 20, borderTop: "1px solid var(--stroke)", position: "relative" }}>
      <div className="wrap">
        <div className="reveal eyebrow" style={{ marginBottom: 26 }}><Bloom />Get in touch</div>

        <div className="rg-contact" style={{ display: "grid", gridTemplateColumns: "1.35fr .65fr", gap: 56, alignItems: "center", marginTop: 8 }}>
          {/* ── left: CTA + contact methods + socials ── */}
          <div>
            <h2 className="reveal reveal-d1" style={{ fontSize: "clamp(44px,7vw,116px)", lineHeight: .94, letterSpacing: "-.02em" }}>
              Let's build<br />something <span className="grad">good.</span>
            </h2>
            <p className="reveal reveal-d2" style={{ color: "var(--text-2)", fontSize: 18, maxWidth: 460, marginTop: 26 }}>
              Open to UI/UX roles and freelance — based between Dubai and India. Drop a line or call; I reply fast.
            </p>

            {/* contact details — plain editorial text + résumé button */}
            <div className="reveal reveal-d2" style={{ display: "flex", gap: 22, flexWrap: "wrap", marginTop: 30, alignItems: "center" }}>
              <a href={`mailto:${DD.email}`} data-cursor className="mono contact-link" style={{ fontSize: 14, color: "var(--text-2)", textDecoration: "underline", textUnderlineOffset: 4 }}>{DD.email}</a>
              <a href={DD.resume} download rel="noopener" data-cursor className="btn ghost" style={{ fontSize: 16, padding: "18px 28px" }}>Download résumé <Icon.arrowUR /></a>
            </div>

            {/* phone numbers — plain grey mono text */}
            <div className="reveal reveal-d3 mono" style={{ display: "flex", gap: 22, flexWrap: "wrap", marginTop: 18, fontSize: 13, color: "var(--text-2)" }}>
              {DD.phones.map((p) => (
                <a key={p.tel} href={`tel:${p.tel}`} data-cursor className="contact-link" style={{ whiteSpace: "nowrap" }}>{p.region} · {p.number}</a>
              ))}
            </div>

            {/* socials */}
            <div className="reveal" style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 30 }}>
              {socials.map(([l, h]) => (
                <a key={l} href={h} target="_blank" rel="noopener" data-cursor className="soc" style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "12px 20px", borderRadius: 100, border: "1px solid var(--stroke-2)", fontWeight: 600, fontSize: 15, background: "var(--glass)" }}>{l} <Icon.arrowUR /></a>
              ))}
            </div>
          </div>
        </div>

        <hr className="hairline" style={{ margin: "70px 0 26px" }} />
        <div className="mono" style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 20, alignItems: "center", color: "var(--text-2)", fontSize: 12.5 }}>
          <span>© {new Date().getFullYear()} Shama Parveen · UI/UX Designer</span>
          <span>Dubai · India</span>
          <a href="#top" data-cursor style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>Back to top ↑</a>
        </div>
      </div>
      <style>{`.soc{transition:background .3s,color .3s,border-color .3s,box-shadow .3s}
        .soc:hover{border-color:var(--accent);color:var(--text);box-shadow:0 0 22px -4px var(--accent-glow);background:var(--glass-3)}
        .contact-link{transition:color .3s}.contact-link:hover{color:var(--text)}
        @media(max-width:860px){.rg-contact{grid-template-columns:1fr !important;gap:36px !important}}`}</style>
    </footer>
  );
}

window.SHAMA_SECTIONS_B = { Work, LockModal, Footer };