/* WipHome.jsx — the "under construction" home page shown on the deployed
   build (SHOW_WIP). A faithful translation of the Pencil "Home (WIP)" comp:
   intro → caution tape → found footage → the rooms wall (Work in detail,
   the rest as WIP wireframe) → the UNDER CONSTRUCTION finale. */

const WIP_SOCIALS = [
  { name: "Instagram", handle: "@mullafrl", url: "https://instagram.com/mullafrl" },
  { name: "X", handle: "@AAbdallahDev", url: "https://x.com/AAbdallahDev" },
  { name: "GitHub", handle: "@mulla759", url: "https://github.com/Mulla759" },
  { name: "LinkedIn", handle: "in/abdull-abdi5", url: "https://www.linkedin.com/in/abdull-abdi5/" },
];

function WipCue({ label, text, dot = "var(--vermilion)" }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 9, fontFamily: "var(--font-body)", fontSize: 14 }}>
      <span style={{ width: 7, height: 7, borderRadius: "50%", background: dot, flex: "0 0 auto" }} />
      <span style={{ fontWeight: 600, color: "var(--ink)" }}>{label}</span>
      <span style={{ color: "var(--ink-2)" }}>{text}</span>
    </div>
  );
}

function WipIntro({ onNav }) {
  return (
    <section id="hello" className="section">
      <div className="wip-intro-grid">
        <div>
          <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
            <WipCue label="Status" text="rebuilding the site, room by room" />
            <WipCue label="Currently" text="software intern at Westinghouse Nuclear" dot="var(--ink-3)" />
          </div>

          <h1 style={{ marginTop: "clamp(24px,3vw,42px)", fontFamily: "var(--font-serif)", fontWeight: 300,
            fontSize: "clamp(2.5rem,6.6vw,4.4rem)", lineHeight: 1.0, letterSpacing: "-0.02em", color: "var(--ink)" }}>
            Hey, it's <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, color: "var(--vermilion)" }}>Mulla</span>.
            <br />Welcome to my personal website.
          </h1>

          <p style={{ marginTop: 22, fontFamily: "var(--font-serif)", fontSize: "clamp(1.05rem,1.5vw,1.35rem)",
            lineHeight: 1.5, color: "var(--ink-2)", maxWidth: "52ch" }}>
            You caught it mid-renovation. I'm rebuilding every room by hand — the work, the archive, the notes —
            so everything past the tape is a construction site for now. Have a look around, or skip straight to saying hi.
          </p>

          <div style={{ marginTop: 28, display: "flex", flexWrap: "wrap", gap: 28, alignItems: "center" }}>
            <button className="wip-link" style={{ fontWeight: 600 }} onClick={() => onNav("work")}>
              See what's being built<Icon kind="arrow-up-right" size={14} color="var(--vermilion)" />
            </button>
            <button className="wip-link" style={{ color: "var(--ink-3)" }} onClick={() => onNav("contact")}>
              or just say hi
            </button>
          </div>
        </div>

        <div style={{ position: "relative" }}>
          <div style={{ position: "relative", aspectRatio: "4/5", overflow: "hidden", borderRadius: 2,
            background: "linear-gradient(150deg, #a9683a, #5e3413)" }}>
            <img src="assets/headshot.png" alt="Abdullahi Abdi" loading="lazy"
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            <div style={{ position: "absolute", top: 14, right: 10, fontFamily: "var(--font-hand)", fontSize: 32,
              color: "var(--vermilion)", transform: "rotate(6deg)", textShadow: "0 1px 0 rgba(251,250,246,0.7)" }}>
              this is me →
            </div>
          </div>
          <div style={{ marginTop: 10, display: "flex", justifyContent: "space-between", gap: 12,
            fontFamily: "var(--font-body)", fontSize: 12, color: "var(--ink-3)" }}>
            <span>Fig. 1 — me, Minneapolis, 2025</span>
            <span style={{ fontFamily: "var(--font-micro)", fontSize: 11 }}>44.97°N 93.26°W</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function WipTape() {
  return (
    <div className="wip-tape-wrap" aria-hidden="true">
      <div className="wip-tape">
        <span style={{ background: "var(--ink)", color: "var(--paper-on-ink)", fontFamily: "var(--font-micro)",
          fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", padding: "7px 16px", whiteSpace: "nowrap" }}>
          Caution — work in progress beyond this point
        </span>
      </div>
    </div>
  );
}

function WipFoundFootage() {
  return (
    <section id="media" className="section" style={{ paddingTop: 0 }}>
      <div style={{ display: "flex", flexWrap: "wrap", gap: "clamp(22px,3vw,44px)", alignItems: "center" }}>
        <div style={{ width: "min(288px, 82vw)" }}>
          <div style={{ position: "relative", aspectRatio: "4/3", background: "var(--paper-ink)", borderRadius: 2,
            overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <span className="grain-field" style={{ opacity: 0.3 }} />
            <div style={{ textAlign: "center", color: "var(--paper-on-ink)" }}>
              <div style={{ fontFamily: "var(--font-micro)", fontSize: 11, letterSpacing: "0.2em" }}>PLEASE STAND BY</div>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 10, color: "var(--paper-on-ink-2)", marginTop: 4 }}>
                we are experiencing renovations
              </div>
            </div>
            <span style={{ position: "absolute", top: -8, left: -6, width: 70, height: 20,
              background: "#EDE7D899", transform: "rotate(-6deg)" }} />
          </div>
        </div>
        <div>
          <Micro size={9} color="var(--ink-4)">media · tape 03 · still rewinding</Micro>
          <div style={{ fontFamily: "var(--font-hand)", fontSize: 24, color: "var(--ink-3)", marginTop: 8, transform: "rotate(-2deg)" }}>
            found this in the archive
          </div>
        </div>
      </div>
    </section>
  );
}

function WipSpeakEz() {
  const specs = [
    ["My part", "Most of the build, 47 of 67 commits"],
    ["Built with", "Expo, FastAPI, Postgres + PostGIS, Redis, Parakeet ASR"],
    ["Team", "Wakehaven — Ilyas, Ismail, Yahye, Hamza + me"],
  ];
  return (
    <div className="wip-speakez" style={{ background: "var(--paper-bright)", border: "1px solid var(--rule-strong)",
      padding: "clamp(14px,1.6vw,20px)", position: "relative" }}>
      <div style={{ position: "relative", background: "var(--paper-ink)", borderRadius: 2, overflow: "hidden",
        minHeight: 220, display: "flex", alignItems: "center", justifyContent: "center" }}>
        <span className="grain-field" style={{ opacity: 0.22 }} />
        <span style={{ position: "absolute", top: 12, left: 12, background: "color-mix(in srgb, var(--paper-bright) 92%, transparent)",
          color: "var(--ink)", fontFamily: "var(--font-micro)", fontSize: 9, letterSpacing: "0.08em", padding: "4px 8px" }}>
          01 / 08 · demo day
        </span>
        <div style={{ textAlign: "center", color: "var(--paper-on-ink)", padding: "0 clamp(42px,4.5vw,56px)" }}>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(1.15rem,1.6vw,1.6rem)", letterSpacing: "-0.03em" }}>
            SpeakEz
          </div>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 10, color: "var(--paper-on-ink-2)", marginTop: 4 }}>
            hear what campus doesn't say out loud
          </div>
        </div>
        {["left", "right"].map(side => (
          <span key={side} style={{ position: "absolute", [side]: 12, top: "50%", transform: "translateY(-50%)",
            width: 30, height: 30, border: "1px solid var(--rule-on-ink)", display: "flex", alignItems: "center",
            justifyContent: "center", color: "var(--paper-on-ink)", fontFamily: "var(--font-body)" }}>
            {side === "left" ? "‹" : "›"}
          </span>
        ))}
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        <Micro size={9} color="var(--ink-3)">— Hackathon, first place · Sep 2026</Micro>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(1.5rem,2.2vw,2rem)",
          letterSpacing: "-0.03em", color: "var(--ink)" }}>SpeakEz</div>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--ink-2)" }}>Hear what campus doesn't say out loud.</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 7, marginTop: 4 }}>
          {specs.map(([k, v]) => (
            <div key={k} style={{ display: "flex", gap: 10, alignItems: "baseline" }}>
              <Micro size={9} color="var(--ink-3)" style={{ flex: "0 0 62px" }}>{k}</Micro>
              <span style={{ fontFamily: "var(--font-body)", fontSize: 11.5, lineHeight: 1.35, color: "var(--ink-2)" }}>{v}</span>
            </div>
          ))}
        </div>
        <a href="https://github.com/Mulla759" target="_blank" rel="noopener noreferrer"
          style={{ fontFamily: "var(--font-body)", fontSize: 12, fontWeight: 600, color: "var(--vermilion)",
            textDecoration: "none", marginTop: 6, display: "inline-flex", alignItems: "center", gap: 7 }}>
          View on GitHub<Icon kind="arrow-up-right" size={13} color="var(--vermilion)" />
        </a>
      </div>
    </div>
  );
}

function WipArchiveScreen() {
  return (
    <div style={{ position: "relative", background: "var(--paper-ink)", borderRadius: 2, overflow: "hidden", aspectRatio: "4/3" }}>
      <span className="grain-field" style={{ opacity: 0.3 }} />
      <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
        <Pictograph kind="film" size={62} color="var(--paper-on-ink)" />
      </div>
      <span style={{ position: "absolute", top: -6, left: 12, width: 74, height: 18, background: "#EDE7D899", transform: "rotate(-5deg)" }} />
    </div>
  );
}

function WipNotesScreen() {
  return (
    <div style={{ position: "relative", background: "var(--paper-bright)", border: "1px solid var(--rule)",
      aspectRatio: "4/3", overflow: "hidden", padding: 18 }}>
      <div style={{ position: "absolute", inset: 0, backgroundImage: "repeating-linear-gradient(transparent 0 23px, var(--rule) 23px 24px)" }} />
      <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 16 }}>
        {[78, 54, 84, 40].map((w, i) => (
          <span key={i} style={{ height: 9, width: w + "%", background: "var(--ink-5)", display: "block" }} />
        ))}
        <span style={{ position: "absolute", top: 30, left: "8%", width: "56%", borderTop: "2px solid var(--vermilion)", transform: "rotate(-2.5deg)" }} />
      </div>
    </div>
  );
}

function WipAboutScreen() {
  return (
    <div style={{ position: "relative", background: "var(--paper-bright)", border: "1px solid var(--rule)",
      aspectRatio: "4/3", display: "flex", alignItems: "center", justifyContent: "center" }}>
      <Pictograph kind="exhibit" size={46} color="var(--ink-3)" />
      <span style={{ position: "absolute", bottom: 10, left: 10, fontFamily: "var(--font-micro)", fontSize: 8.5,
        letterSpacing: "0.02em", color: "var(--ink-4)" }}>about_v2_FINAL(1).png — delete?</span>
    </div>
  );
}

function WipResumeScreen() {
  return (
    <div style={{ position: "relative", background: "var(--paper-bright)", border: "1px solid var(--rule-strong)",
      aspectRatio: "3/4", padding: 16, display: "flex", flexDirection: "column", gap: 8, overflow: "hidden" }}>
      <span className="grain-field" style={{ opacity: 0.18 }} />
      <div style={{ height: 10, width: "55%", background: "var(--ink)", position: "relative" }} />
      <div style={{ display: "flex", flexDirection: "column", gap: 7, position: "relative" }}>
        {[92, 84, 96, 70, 88, 60, 90, 76].map((w, i) => (
          <span key={i} style={{ height: 5, width: w + "%", background: "var(--ink-5)", display: "block" }} />
        ))}
      </div>
    </div>
  );
}

function WipContactScreen() {
  return (
    <div style={{ background: "var(--paper-bright)", border: "1px solid var(--rule-strong)", padding: "clamp(20px,2.4vw,32px)",
      position: "relative" }}>
      <span className="grain-field" style={{ opacity: 0.18 }} />
      <div style={{ position: "relative", display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 16, flexWrap: "wrap" }}>
        <div>
          <Micro size={9} color="var(--vermilion)">Open during construction</Micro>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(1.4rem,2.2vw,2rem)",
            letterSpacing: "-0.03em", color: "var(--ink)", marginTop: 8 }}>Abdullahi “Mulla” Abdi</div>
          <Micro size={9} color="var(--ink-3)" style={{ marginTop: 4 }}>CS &amp; Economics · Minneapolis</Micro>
        </div>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-micro)",
          fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink)" }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--vermilion)" }} />Open
        </span>
      </div>

      <a href="mailto:Abdullahi.aabdii@gmail.com" style={{ position: "relative", display: "inline-flex", alignItems: "center",
        gap: 9, marginTop: 22, fontFamily: "var(--font-body)", fontSize: "clamp(1rem,1.4vw,1.2rem)", fontWeight: 600,
        color: "var(--ink)", textDecoration: "none", borderBottom: "1px solid var(--rule-strong)", paddingBottom: 5 }}>
        <Icon kind="arrow-up-right" size={16} color="var(--vermilion)" />abdullahi.aabdii@gmail.com
      </a>

      <div style={{ position: "relative", marginTop: 24, borderTop: "1px solid var(--rule)", paddingTop: 18,
        display: "grid", gridTemplateColumns: "repeat(2, minmax(0,1fr))", gap: "14px 24px" }}>
        {WIP_SOCIALS.map(s => (
          <a key={s.name} href={s.url} target="_blank" rel="noopener noreferrer"
            style={{ textDecoration: "none", display: "flex", alignItems: "center", gap: 10, color: "var(--ink)" }}>
            <span style={{ width: 30, height: 30, flex: "0 0 auto", background: "var(--ink)", color: "var(--paper-on-ink)",
              display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-micro)", fontSize: 10 }}>
              {s.name[0]}
            </span>
            <span style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
              <span style={{ fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 600 }}>{s.name}</span>
              <span style={{ fontFamily: "var(--font-micro)", fontSize: 10, color: "var(--ink-3)" }}>{s.handle}</span>
            </span>
            <Icon kind="arrow-up-right" size={13} color="var(--vermilion)" style={{ marginLeft: "auto" }} />
          </a>
        ))}
      </div>
    </div>
  );
}

function WipRoom({ id, label, status, note, remark, children }) {
  return (
    <div id={id} style={{ scrollMarginTop: 80 }}>
      {children}
      <div style={{ marginTop: 12 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
          <span style={{ fontFamily: "var(--font-body)", fontSize: 16, fontWeight: 600, color: "var(--ink)" }}>{label}</span>
          <Micro size={9} color="var(--ink-4)">{status}</Micro>
        </div>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 12.5, lineHeight: 1.45, color: "var(--ink-3)", marginTop: 4 }}>{note}</div>
      </div>
      {remark && (
        <div style={{ fontFamily: "var(--font-hand)", fontSize: 20, color: "var(--ink-3)", marginTop: 8, transform: "rotate(-2deg)" }}>
          {remark}
        </div>
      )}
    </div>
  );
}

function WipRooms() {
  return (
    <section id="work" className="section">
      <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "flex-end", gap: 24 }}>
        <div style={{ maxWidth: "62ch" }}>
          <Kicker color="var(--vermilion)">— past the tape</Kicker>
          <h2 style={{ marginTop: 18, fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: "clamp(2.8rem,7vw,5.2rem)", lineHeight: 0.94, letterSpacing: "-0.03em", color: "var(--ink)" }}>
            Pardon the dust.
          </h2>
          <div style={{ marginTop: 20, display: "flex", flexWrap: "wrap", alignItems: "baseline", gap: 8,
            fontFamily: "var(--font-serif)", fontSize: 19, color: "var(--ink-2)" }}>
            <span>Seven rooms,</span>
            <span style={{ position: "relative", textDecoration: "line-through", textDecorationThickness: "2px" }}>zero</span>
            <span style={{ fontFamily: "var(--font-hand)", fontSize: 27, color: "var(--vermilion)" }}>one</span>
            <span>finished.</span>
          </div>
          <p style={{ marginTop: 16, fontFamily: "var(--font-serif)", fontSize: 19, lineHeight: 1.5, color: "var(--ink-2)", maxWidth: "56ch" }}>
            Each one is being rebuilt by hand. Some of it moves, some of it is held up with tape,
            and most of it will probably change again.
          </p>
        </div>
      </div>

      <div className="wip-wall" style={{ marginTop: "clamp(44px,6vw,92px)" }}>
        <div className="wip-rowA">
          <WipRoom id="work-room" label="Work" status="SpeakEz · 01 / 09"
            note="First place, Sep 2026 — the one detail that's actually built." remark="moved this yesterday">
            <WipSpeakEz />
          </WipRoom>
          <WipRoom id="archive" label="Archive" status="re-spooling 412 films"
            note="Reviews, ratings and the now-playing rail are on the bench." remark="alphabetical this time, i swear">
            <WipArchiveScreen />
          </WipRoom>
        </div>

        <div className="wip-rowB">
          <WipRoom id="notes" label="Notes" status="in edit" note="Essays, fragments and references — mostly crossing things out.">
            <WipNotesScreen />
          </WipRoom>
          <WipRoom id="about" label="About" status="v2 · draft" note="The bio is being re-set by hand.">
            <WipAboutScreen />
          </WipRoom>
          <WipRoom id="resume" label="Résumé" status="p. 1 / 1 · 99%" note="The one-pager, nearly dry.">
            <WipResumeScreen />
          </WipRoom>
        </div>

        <div className="wip-rowC">
          <WipRoom id="contact" label="Contact" status="open" note="The one room that's actually finished. Come on in.">
            <WipContactScreen />
          </WipRoom>
        </div>
      </div>
    </section>
  );
}

function WipFinale() {
  const under = "██    ██ ███    ██ ██████  ███████ ██████\n██    ██ ████   ██ ██   ██ ██      ██   ██\n██    ██ ██ ██  ██ ██   ██ █████   ██████\n██    ██ ██  ██ ██ ██   ██ ██      ██   ██\n ██████  ██   ████ ██████  ███████ ██   ██";
  const construction = " ██████  ██████  ███    ██ ███████ ████████ ██████  ██    ██  ██████ ████████ ██  ██████  ███    ██\n██      ██    ██ ████   ██ ██         ██    ██   ██ ██    ██ ██         ██    ██ ██    ██ ████   ██\n██      ██    ██ ██ ██  ██ ███████    ██    ██████  ██    ██ ██         ██    ██ ██    ██ ██ ██  ██\n██      ██    ██ ██  ██ ██      ██    ██    ██   ██ ██    ██ ██         ██    ██ ██    ██ ██  ██ ██\n ██████  ██████  ██   ████ ███████    ██    ██   ██  ██████   ██████    ██    ██  ██████  ██   ████";
  const cone = "     /\\\n    /  \\\n   /====\\\n  /      \\\n /========\\\n[__________]";
  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <Kicker color="var(--vermilion)">— still figuring this room out</Kicker>

      <div style={{ marginTop: "clamp(30px,5vw,64px)", display: "flex", flexDirection: "column", gap: "clamp(10px,1.4vw,16px)" }}>
        <pre className="wip-ascii" style={{ color: "var(--ink)", fontSize: "clamp(9px,1.5vw,18px)",
          textShadow: "3px 3px 0 var(--vermilion)" }}>{under}</pre>
        <pre className="wip-ascii" style={{ color: "var(--ink)", fontSize: "clamp(8px,1.15vw,18px)",
          textShadow: "3px 3px 0 var(--vermilion)" }}>{construction}</pre>
      </div>

      <div style={{ marginTop: "clamp(36px,5vw,72px)", display: "flex", alignItems: "flex-end", gap: 22, flexWrap: "wrap" }}>
        <pre className="wip-ascii" style={{ color: "var(--vermilion)", fontSize: "clamp(9px,1.2vw,14px)" }}>{cone}</pre>
        <span style={{ fontFamily: "var(--font-hand)", fontSize: 22, color: "var(--ink-3)", transform: "rotate(-2deg)" }}>
          the others went home
        </span>
      </div>

      <div style={{ marginTop: "clamp(40px,6vw,84px)", borderTop: "1px solid var(--rule)", paddingTop: "clamp(28px,4vw,48px)" }}>
        <div style={{ fontFamily: "var(--font-serif)", fontWeight: 300, fontSize: "clamp(1.3rem,2.4vw,1.7rem)",
          letterSpacing: "-0.01em", color: "var(--ink-2)" }}>Back soon. Thanks for stopping by.</div>
        <div style={{ fontFamily: "var(--font-hand)", fontSize: 30, color: "var(--vermilion)", marginTop: 10, transform: "rotate(-2deg)" }}>
          — Mulla
        </div>
      </div>

      <div style={{ marginTop: "clamp(40px,6vw,80px)", borderTop: "1px solid var(--rule)", paddingTop: 20,
        display: "flex", flexWrap: "wrap", gap: 18, justifyContent: "space-between", alignItems: "flex-end" }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 20, letterSpacing: "-0.04em", color: "var(--ink)" }}>Mulla</span>
          <span style={{ fontFamily: "'Noto Sans Shavian', serif", fontSize: 13, color: "var(--vermilion)" }}>·𐑥𐑫𐑤𐑩</span>
        </div>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--ink-4)" }}>
          made with love (and a hard hat) in Minneapolis
        </div>
        <div style={{ fontFamily: "var(--font-micro)", fontSize: 11, color: "var(--ink-4)" }}>
          last brick laid oct 3, 2026 · 44.9778°N 93.2650°W
        </div>
      </div>
    </section>
  );
}

function WipHome({ onNav }) {
  return (
    <React.Fragment>
      <WipIntro onNav={onNav} />
      <WipTape />
      <WipFoundFootage />
      <WipRooms />
      <WipFinale />
    </React.Fragment>
  );
}

Object.assign(window, { WipHome });