/* global React */
const { useState, useRef, useEffect } = React;

/* ============================================================================
   Portfolio — past clients only, past-tense framing.

   Two-part composition:
   1. Two stacked infinite marquees of client names, opposing directions, with
      a chrome-red diagonal cut between them.
   2. A numbered "led development for" list. Hover lifts the name to oversized
      display scale and reveals a one-line credit beneath. Inline preview thumb
      slot uses a procedural gradient cell when no real client image is wired up.
   ============================================================================ */

const NAMES = [
  { name: "Streets of Boottown",    credit: "Launched Streets of Boottown from scratch. Built every system that runs it.",     role: "LAUNCHED // BUILD",       accent: "var(--color-accent)" },
  { name: "4DaRaw",                 credit: "Launched 4DaRaw end to end. Custom Lua, full systems, ongoing development.",     role: "LAUNCHED // ONGOING",     accent: "var(--color-accent-warm)" },
  { name: "Vibes RP",               credit: "Launched Vibes RP top to bottom.",                                                role: "LAUNCHED // TURNKEY",     accent: "var(--color-lead)" },
  { name: "Seven's Creative House", credit: "Launched Seven's Creative House as a creative-house partnership.",                role: "LAUNCHED // CREATIVE",    accent: "var(--color-maintain)" },
  { name: "tb2LA",                  credit: "Took over tb2LA. Optimized, customized, gave it its own identity.",               role: "TAKEOVER // OPTIMIZE",    accent: "var(--color-scripts)" },
  { name: "Strike City",            credit: "Took over Strike City and rebuilt the systems from the inside.",                  role: "TAKEOVER // REBUILD",     accent: "var(--color-server-builds)" },
  { name: "Back to Detroit",        credit: "Took over Back to Detroit. Tightened the economy, customized the jobs.",          role: "TAKEOVER // ECONOMY",     accent: "var(--color-assets)",
    testimonial: "Maxed out with 9 in the queue right now. Just wanted to say thanks. Really got my server working well in one day of work." },
  { name: "Bourbon Street",         credit: "Took over Bourbon Street and optimized the full stack.",                          role: "TAKEOVER // OPTIMIZE",    accent: "var(--color-build)" },
];

function Portfolio() {
  return (
    <section
      id="portfolio"
      data-screen-label="06 Portfolio"
      style={{
        position: "relative",
        minHeight: "100vh",
        padding: "10rem 0 8rem",
        background: "var(--color-base)",
        overflow: "hidden",
      }}
    >
      {/* Header */}
      <div style={{
        padding: "0 clamp(2rem, 6vw, 6rem)",
        display: "flex", justifyContent: "space-between", alignItems: "flex-end",
        gap: "2rem", flexWrap: "wrap", marginBottom: "5rem",
      }}>
        <div>
          <div className="reveal-up" style={{
            fontFamily: "var(--font-body)", fontSize: 10,
            letterSpacing: "0.4em", textTransform: "uppercase",
            color: "var(--color-accent)", marginBottom: "1rem",
            display: "flex", alignItems: "center", gap: 12,
          }}>
            <span style={{ width: 36, height: 1, background: "var(--color-accent)" }}></span>
            [06] // THE DEV TEAM BEHIND
          </div>
          <h2 className="reveal-up" style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: "clamp(2rem, 5.5vw, 5.5rem)",
            letterSpacing: "-0.04em", lineHeight: 0.92,
            textTransform: "uppercase", color: "var(--color-ink)",
            margin: 0, maxWidth: "16ch",
          }}>
            We've led
            <br />
            <span style={{ color: "var(--color-accent-warm)" }}>development</span> for.
          </h2>
        </div>
      </div>

      {/* MARQUEE STRIP -------------------------------------------------------- */}
      <div style={{
        position: "relative",
        margin: "0 0 4rem",
        padding: "1.5rem 0",
        borderTop: "1px solid rgba(255,255,255,0.08)",
        borderBottom: "1px solid rgba(255,255,255,0.08)",
        overflow: "hidden",
      }}>
        <Marquee dir="ltr" speed="48s" />
        <div style={{ height: 14 }}></div>
        <Marquee dir="rtl" speed="62s" warm />
      </div>

      {/* NUMBERED LIST ------------------------------------------------------- */}
      <div style={{ padding: "0 clamp(2rem, 6vw, 6rem)" }}>
        <div style={{
          display: "flex", justifyContent: "space-between",
          fontFamily: "var(--font-body)", fontSize: 10,
          letterSpacing: "0.4em", textTransform: "uppercase",
          color: "var(--color-ink-muted)", marginBottom: 18,
        }}>
          <span># / CLIENT</span>
          <span>ROLE / DELIVERY</span>
        </div>
        <ol style={{
          listStyle: "none", padding: 0, margin: 0,
          borderTop: "1px solid rgba(255,255,255,0.10)",
        }}>
          {NAMES.map((n, i) => <ClientRow key={n.name} client={n} index={i} />)}
        </ol>

        <p style={{
          fontFamily: "var(--font-body)", fontSize: 11, lineHeight: 1.7,
          letterSpacing: "0.2em", textTransform: "uppercase",
          color: "var(--color-ink-muted)", maxWidth: 600, marginTop: "3rem",
        }}>
          [ Past partnerships only. The owners run their servers. We led the dev. ]
        </p>
      </div>
    </section>
  );
}

/* ----- Marquee row -------------------------------------------------------- */
function Marquee({ dir = "ltr", speed = "60s", warm }) {
  const items = [...NAMES, ...NAMES]; // duplicate for seamless loop
  return (
    <div style={{
      whiteSpace: "nowrap",
      animation: `${dir === "rtl" ? "marquee-rev" : "marquee"} ${speed} linear infinite`,
      display: "inline-flex", alignItems: "center", gap: 0,
    }}>
      {items.map((n, i) => (
        <span key={i} style={{
          display: "inline-flex", alignItems: "center", gap: 28,
          paddingRight: 36,
        }}>
          <span style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: "clamp(2rem, 5vw, 4.5rem)",
            letterSpacing: "-0.04em",
            textTransform: "uppercase",
            color: warm ? "var(--color-accent-warm)" : "var(--color-ink)",
            opacity: warm ? 0.8 : 0.92,
          }}>{n.name}</span>
          <span style={{
            fontFamily: "var(--font-body)", fontSize: 11,
            letterSpacing: "0.4em", textTransform: "uppercase",
            color: "var(--color-ink-muted)",
          }}>// THE DEV TEAM BEHIND</span>
        </span>
      ))}
    </div>
  );
}

/* ----- ClientRow ---------------------------------------------------------- */
function ClientRow({ client, index }) {
  const [hover, setHover] = useState(false);
  const [mx, setMx] = useState({ x: 0, y: 0 });
  const ref = useRef(null);

  const onMove = (e) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    setMx({ x: e.clientX - r.left, y: e.clientY - r.top });
  };

  return (
    <li
      ref={ref}
      data-cursor=""
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onMouseMove={onMove}
      style={{
        position: "relative",
        borderBottom: "1px solid rgba(255,255,255,0.10)",
        padding: "1.6rem 0",
        transition: "padding 0.4s var(--ease-out), background 0.4s var(--ease-out)",
        cursor: "none",
      }}
    >
      {/* Hover wash background */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        background: `radial-gradient(180px 80px at ${mx.x}px ${mx.y}px, ${client.accent}33, transparent 70%)`,
        opacity: hover ? 1 : 0,
        transition: "opacity 0.3s ease",
        pointerEvents: "none",
      }}></div>

      <div style={{
        position: "relative", zIndex: 1,
        display: "grid",
        gridTemplateColumns: "80px 1fr auto",
        alignItems: "center",
        gap: "2rem",
      }}>
        {/* Index */}
        <div style={{
          fontFamily: "var(--font-body)", fontSize: 11,
          letterSpacing: "0.4em", textTransform: "uppercase",
          color: hover ? client.accent : "var(--color-ink-muted)",
          transition: "color 0.25s ease",
        }}>{String(index + 1).padStart(2, "0")}</div>

        {/* Name + credit */}
        <div>
          <h3 style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: hover ? "clamp(2.2rem, 5.8vw, 5.5rem)" : "clamp(1.6rem, 3.6vw, 3.4rem)",
            letterSpacing: "-0.04em", lineHeight: 0.95,
            textTransform: "uppercase",
            color: hover ? client.accent : "var(--color-ink)",
            margin: 0,
            transition: "font-size 0.4s var(--ease-out), color 0.25s ease, transform 0.4s var(--ease-out)",
            transform: hover ? "translateX(10px)" : "translateX(0)",
          }}>
            {client.name}
          </h3>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 12, lineHeight: 1.6,
            color: "var(--color-ink-muted)",
            margin: hover ? "12px 0 0" : "0",
            maxWidth: hover ? "60ch" : "0",
            maxHeight: hover ? 60 : 0,
            opacity: hover ? 1 : 0,
            overflow: "hidden",
            transition: "opacity 0.3s ease, max-height 0.4s var(--ease-out), max-width 0.4s var(--ease-out), margin 0.3s ease",
          }}>
            {client.credit}
          </p>
        </div>

        {/* Role badge */}
        <div style={{
          fontFamily: "var(--font-body)", fontSize: 10,
          letterSpacing: "0.4em", textTransform: "uppercase",
          color: hover ? client.accent : "var(--color-ink-muted)",
          padding: "8px 14px",
          border: `1px solid ${hover ? client.accent : "rgba(255,255,255,0.10)"}`,
          transition: "color 0.25s ease, border-color 0.25s ease, transform 0.3s var(--ease-out)",
          transform: hover ? "translateX(-6px)" : "translateX(0)",
          whiteSpace: "nowrap",
        }}>
          {client.role}
        </div>
      </div>

      {/* Featured testimonial — always visible for rows with a testimonial */}
      {client.testimonial && (
        <div style={{
          position: "relative", zIndex: 1,
          marginTop: "1.4rem",
          marginLeft: "112px",
          maxWidth: "68ch",
          paddingLeft: "1.4rem",
          borderLeft: `2px solid ${client.accent}`,
        }}>
          <div style={{
            fontFamily: "var(--font-body)", fontSize: 9,
            letterSpacing: "0.4em", textTransform: "uppercase",
            color: client.accent,
            marginBottom: 10,
          }}>
            [ FROM THE DMs ]
          </div>
          <blockquote style={{
            fontFamily: "var(--font-body)",
            fontSize: "clamp(0.95rem, 1.15vw, 1.1rem)",
            lineHeight: 1.6,
            color: "var(--color-ink)",
            margin: 0,
          }}>
            &ldquo;{client.testimonial}&rdquo;
          </blockquote>
        </div>
      )}

      {/* Right arrow indicator */}
      <div aria-hidden="true" style={{
        position: "absolute", right: 0, top: "50%", transform: "translateY(-50%)",
        fontFamily: "var(--font-body)", fontSize: 18,
        color: client.accent,
        opacity: hover ? 0.5 : 0,
        transition: "opacity 0.3s ease",
      }}>›</div>
    </li>
  );
}

Object.assign(window, { Portfolio });