/* FiveM section — text-led, no images */

const PILLARS = [
  { n: "i", h: "Clear information", d: "Every script documented end-to-end. No mystery toggles, no marketing fluff." },
  { n: "ii", h: "Built to be read", d: "Code you can open without flinching. Comments where they help." },
  { n: "iii", h: "Quiet support", d: "Direct contact with whoever wrote it. No support-ticket purgatory." },
  { n: "iv", h: "Update for free", d: "If you bought it once, you own it. Every patch ships to you automatically." },
];

const CATALOGUE = [
  {
    id: "faction",
    n: "01",
    label: "Faction",
    blurb: "Group structures, ranks and shared tooling for crews and organizations.",
    scripts: [
      {
        code: "AH-F1",
        cat: "Faction",
        name: "Hierarchy",
        nameEm: "Hierarchy",
        desc: "Ranks, permissions, payroll. A clean spine for any faction your server runs.",
        price: "$34",
        soon: false,
      },
      {
        code: "AH-F2",
        cat: "Faction",
        name: "Turf",
        nameEm: "Turf",
        desc: "Claimable zones with influence decay, contested states, and weekly resets.",
        price: "$28",
        soon: false,
      },
      {
        code: "AH-F3",
        cat: "Faction",
        name: "Stash",
        nameEm: "Stash",
        desc: "Shared inventories with role-gated access and a quiet audit log.",
        price: "$22",
        soon: false,
      },
    ],
  },
  {
    id: "sidejobs",
    n: "02",
    label: "Sidejobs",
    blurb: "Small, repeatable work for downtime — honest pay for honest hours.",
    scripts: [
      {
        code: "AH-S1",
        cat: "Sidejobs",
        name: "Trucking",
        nameEm: "Trucking",
        desc: "Routed deliveries with weight, fuel and weather modifiers. No filler.",
        price: "$24",
        soon: false,
      },
      {
        code: "AH-S2",
        cat: "Sidejobs",
        name: "Taxi",
        nameEm: "Taxi",
        desc: "Fare meter, dispatch queue, tip flow. Plays well with any economy.",
        price: "$18",
        soon: false,
      },
      {
        code: "AH-S3",
        cat: "Sidejobs",
        name: "Recycling",
        nameEm: "Recycling",
        desc: "Scrap loops with diminishing returns. Designed to be a starter, not a grind.",
        price: "$16",
        soon: false,
      },
      {
        code: "AH-S4",
        cat: "Sidejobs",
        name: "Fishing",
        nameEm: "Fishing",
        desc: "Time-of-day species, rare catches, dockside selling. In testing.",
        price: "—",
        soon: true,
      },
    ],
  },
  {
    id: "robbery",
    n: "03",
    label: "Robbery",
    blurb: "Heist and stickup systems with real friction and clear escape windows.",
    scripts: [
      {
        code: "AH-R1",
        cat: "Robbery",
        name: "Stores",
        nameEm: "Stores",
        desc: "Register robberies with cooldowns, witness ping, and adjustable risk.",
        price: "$22",
        soon: false,
      },
      {
        code: "AH-R2",
        cat: "Robbery",
        name: "ATMs",
        nameEm: "ATMs",
        desc: "Multi-stage hack with realistic timing, alarms, and quiet payouts.",
        price: "$20",
        soon: false,
      },
      {
        code: "AH-R3",
        cat: "Robbery",
        name: "Houses",
        nameEm: "Houses",
        desc: "Lockpicking, room-by-room loot, evidence trails. Pairs with Housing.",
        price: "$28",
        soon: false,
      },
      {
        code: "AH-R4",
        cat: "Robbery",
        name: "Bank",
        nameEm: "Bank",
        desc: "Full vault heist with crew roles, hostage flow and police timing. Soon.",
        price: "—",
        soon: true,
      },
    ],
  },
  {
    id: "core",
    n: "04",
    label: "Core",
    blurb: "Foundations the rest of the suite leans on. Boring on purpose.",
    scripts: [
      {
        code: "AH-C1",
        cat: "Core",
        name: "Garage",
        nameEm: "Garage",
        desc: "Persistent vehicle storage with shared access, impound flow, and clean UI states.",
        price: "$24",
        soon: false,
      },
      {
        code: "AH-C2",
        cat: "Core",
        name: "Identity",
        nameEm: "Identity",
        desc: "Character creation, ID cards, fingerprints. One source of truth across your server.",
        price: "$32",
        soon: false,
      },
      {
        code: "AH-C3",
        cat: "Core",
        name: "Banking",
        nameEm: "Banking",
        desc: "Accounts, transfers, ATMs and audit logs. Designed for servers that take money seriously.",
        price: "$28",
        soon: false,
      },
      {
        code: "AH-C4",
        cat: "Core",
        name: "Inventory",
        nameEm: "Inventory",
        desc: "Slot-based, drag-and-drop, persistent. Plays well with the rest of the suite.",
        price: "$22",
        soon: false,
      },
    ],
  },
  {
    id: "jobs",
    n: "05",
    label: "Jobs",
    blurb: "Whitelisted work — the structured side of the server.",
    scripts: [
      {
        code: "AH-J1",
        cat: "Jobs",
        name: "Dispatch",
        nameEm: "Dispatch",
        desc: "Police and EMS call routing with map pings, priority queues, and quiet defaults.",
        price: "$36",
        soon: false,
      },
      {
        code: "AH-J2",
        cat: "Jobs",
        name: "Mechanic",
        nameEm: "Mechanic",
        desc: "Repair flows, parts, towing. Built to coexist with Garage and Inventory.",
        price: "$26",
        soon: false,
      },
      {
        code: "AH-J3",
        cat: "Jobs",
        name: "Housing",
        nameEm: "Housing",
        desc: "Owned and rented properties. Interior shells, keys, furniture. In testing.",
        price: "—",
        soon: true,
      },
    ],
  },
];

const SCRIPTS = CATALOGUE.flatMap((s) => s.scripts);

/* Section selector + grid for the catalogue */
const CatalogueBrowser = ({ sections }) => {
  const [activeId, setActiveId] = React.useState(sections[0].id);
  const [phase, setPhase] = React.useState("in"); // "in" | "out"
  const pendingRef = React.useRef(null);

  const active = sections.find((s) => s.id === activeId) || sections[0];

  const select = (id) => {
    if (id === activeId) return;
    pendingRef.current = id;
    setPhase("out");
  };

  const onAnimEnd = () => {
    if (phase === "out" && pendingRef.current) {
      setActiveId(pendingRef.current);
      pendingRef.current = null;
      setPhase("in");
    }
  };

  const activeIndex = sections.findIndex((s) => s.id === activeId);

  return (
    <div className="cat-browser">
      <div
        className="cat-tabs"
        role="tablist"
        aria-label="Catalogue sections"
        style={{ "--active-index": activeIndex, "--tab-count": sections.length }}
      >
        <span className="cat-tabs-indicator" aria-hidden="true"></span>
        {sections.map((s, i) => {
          const isActive = s.id === activeId;
          return (
            <button
              key={s.id}
              role="tab"
              type="button"
              aria-selected={isActive}
              className={`cat-tab ${isActive ? "active" : ""}`}
              onClick={() => select(s.id)}
            >
              <span className="cat-tab-n">{s.n}</span>
              <span className="cat-tab-label">{s.label}</span>
              <span className="cat-tab-count">{s.scripts.length.toString().padStart(2, "0")}</span>
            </button>
          );
        })}
      </div>

      <div
        key={active.id}
        className={`cat-stage ${phase === "out" ? "is-out" : "is-in"}`}
        onAnimationEnd={onAnimEnd}
      >
        <div className="cat-section-head" id={`cat-${active.id}`}>
          <div className="cat-section-meta">
            <span className="cat-section-n">{active.n}</span>
            <h4 className="cat-section-label"><em>{active.label}.</em></h4>
          </div>
          <p className="cat-section-blurb">{active.blurb}</p>
          <span className="cat-section-count">{active.scripts.length.toString().padStart(2, "0")} scripts</span>
        </div>
        <div className="scripts-grid">
          {active.scripts.map((s) => (
            <a
              key={s.code}
              className={`script-card ${s.soon ? "soon" : ""}`}
              href="#"
              onClick={(e) => e.preventDefault()}
            >
              <div className="sc-top">
                <span>{s.code}</span>
                <span>{s.cat}</span>
              </div>
              <div className="sc-name">
                {s.nameEm ? <em>{s.nameEm}</em> : s.name}
              </div>
              <div className="sc-desc">{s.desc}</div>
              <div className="sc-bottom">
                {s.soon ? (
                  <span className="sc-soon">Coming soon</span>
                ) : (
                  <span className="sc-price">{s.price}<small>one-time</small></span>
                )}
                <span className="sc-arrow">{s.soon ? "·" : "↗"}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
};

const Fivem = () => {
  return (
    <section className="fivem fivem-page" id="fivem">
      <div className="container">
        <Reveal className="fivem-back" threshold={0}>
          <a href="index.html" className="back-link">
            <span className="arrow">←</span> Back to studio
          </a>
        </Reveal>
        <Reveal className="fivem-head" stagger>
          <div>
            <div className="fivem-label">Project 01 · Currently live</div>
            <h2 className="fivem-title">
              FiveM, <em>without the noise.</em>
            </h2>
          </div>
          <div className="fivem-intro">
            <p className="accent">Most script shops sell you a list. We sell you a thing that works.</p>
            <p>
              After-Hours scripts are written for server owners who'd rather read documentation
              than guess. Every script is its own complete thought — clear setup, honest scope,
              the same quiet care across the board.
            </p>
            <p>
              No images here on purpose. The code is the product; the page is the brochure.
            </p>
          </div>
        </Reveal>

        <Reveal className="fivem-pillars" stagger threshold={0.1}>
          {PILLARS.map((p) => (
            <div className="pillar" key={p.n}>
              <span className="pn">{p.n} —</span>
              <h4 className="ph">{p.h}</h4>
              <p className="pd">{p.d}</p>
            </div>
          ))}
        </Reveal>

        <Reveal className="scripts-head" threshold={0.3}>
          <h3>The catalogue.</h3>
          <span className="count">{SCRIPTS.length.toString().padStart(2, "0")} scripts · {CATALOGUE.length} sections</span>
        </Reveal>

        <CatalogueBrowser sections={CATALOGUE} />

        <Reveal className="fivem-cta" threshold={0.2}>
          <div>
            <h4>Need something <em>specific?</em></h4>
            <p>If we haven't built it yet, write to us. Custom work happens after-hours, the same way the rest of it does.</p>
          </div>
          <a href="#contact" className="hero-cta">Get in touch <span className="arrow">→</span></a>
        </Reveal>
      </div>
    </section>
  );
};

/* FOOTER */
const Footer = () => {
  return (
    <footer className="footer" id="contact">
      <div className="container">
        <Reveal className="footer-mega" threshold={0.1}>
          after-<em>hours.</em>
        </Reveal>

        <div className="footer-grid">
          <div className="footer-col">
            <p className="footer-blurb">
              A quiet studio for <em>unusual software.</em> One project at a time. Made after-hours, released for everyone.
            </p>
          </div>
          <div className="footer-col">
            <h5>Studio</h5>
            <ul>
              <li><a href="#manifesto">Manifesto</a></li>
              <li><a href="#projects">Projects</a></li>
              <li><a href="#">Notes</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Projects</h5>
            <ul>
              <li><a href="fivem.html">FiveM scripts</a></li>
              <li><a href="#">Coming soon</a></li>
              <li><a href="#">Coming soon</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Contact</h5>
            <ul>
              <li><a href="https://discord.gg/afterhoursofficial" target="_blank" rel="noopener noreferrer">Discord</a></li>
              <li><a href="#">Email</a></li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <span>© MMXXVI · After-Hours</span>
          <span>after-hours.fun</span>
          <span>Open · {new Date().toISOString().slice(0, 10)}</span>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Fivem, Footer, PILLARS, SCRIPTS, CATALOGUE });