// Free / open-source listing + slim detail page

const FreeCard = ({ product, onOpen }) => {
  const cover = product.gallery && product.gallery[0]
    ? (product.gallery[0].poster || product.gallery[0].src)
    : null;
  return (
    <div
      className="free-card"
      onClick={onOpen}
      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onOpen(); } }}
      role="button"
      tabIndex={0}
    >
      <div className="free-card-corner" title="Open source on GitHub">
        <Icon.Github size={14} />
      </div>
      {cover ? (
        <div className="free-card-media">
          <img src={cover} alt={product.name} />
        </div>
      ) : null}
      <div className="free-card-head">
        <span className="free-tag">FREE &amp; OPEN SOURCE</span>
      </div>
      <h3 className="free-card-title">{product.name}</h3>
      <div className="free-card-resource">{product.resourceName}</div>
      <p className="free-card-desc">{product.tagline}</p>
      <div className="free-card-foot">
        <span className="mono">{product.frameworks.join(" · ")}</span>
        <span className="free-card-cta">
          View <Icon.Arrow size={13} />
        </span>
      </div>
    </div>
  );
};

const FreePage = ({ navigate }) => (
  <div className="route-enter">
    <section className="section" style={{ paddingTop: 40 }}>
      <div className="container">
        <div className="pd-breadcrumbs">/ free</div>

        <div className="free-banner">
          <div className="free-banner-inner">
            <h1>Free &amp; open source.</h1>
            <p>
              Small, focused FiveM resources I've built and released free on GitHub.
              Support provided in Discord.
            </p>
          </div>
          <div className="free-banner-mark" aria-hidden="true">
            <Icon.Github size={120} />
          </div>
        </div>

        <div className="free-grid">
          {FREE_PRODUCTS.map((p) => (
            <FreeCard key={p.id} product={p} onOpen={() => navigate("free-product", p.slug)} />
          ))}
        </div>
      </div>
    </section>
  </div>
);

const FreeProductPage = ({ slug, navigate }) => {
  const product = FREE_PRODUCTS.find((p) => p.slug === slug) || FREE_PRODUCTS[0];
  const [copied, setCopied] = React.useState(false);
  const [activeImg, setActiveImg] = React.useState(0);
  const cloneUrl = product.githubUrl.endsWith(".git") ? product.githubUrl : `${product.githubUrl}.git`;
  const copyClone = async () => {
    try {
      await navigator.clipboard.writeText(`git clone ${cloneUrl}`);
      setCopied(true);
      setTimeout(() => setCopied(false), 1600);
    } catch {}
  };

  const gallery = product.gallery || [];
  const active = gallery[activeImg] || gallery[0];

  return (
    <div className="route-enter">
      <div className="container">
        <div className="pd-layout">
          {/* MAIN COLUMN — gallery + content */}
          <div>
            <div className="pd-breadcrumbs">
              <a href="/" onClick={(e) => { e.preventDefault(); navigate("home"); }} style={{ cursor: "pointer" }}>Home</a>
              {" / "}
              <a href="/free" onClick={(e) => { e.preventDefault(); navigate("free"); }} style={{ cursor: "pointer" }}>Free</a>
              {" / "}
              <span>{product.name}</span>
            </div>
            <h1 className="pd-title">
              {product.name}
              {product.resourceName ? <span className="pd-resource">{product.resourceName}</span> : null}
            </h1>
            <p className="pd-sub">{product.tagline}</p>
            <div style={{ display: "flex", gap: 6, marginBottom: 22, flexWrap: "wrap" }}>
              <span className="free-tag">FREE &amp; OPEN SOURCE</span>
              {product.frameworks.map((f) => (
                <Tag key={f} variant="muted">{f}</Tag>
              ))}
            </div>

            {gallery.length > 0 ? (
              <div className="pd-gallery">
                <div className="pd-main">
                  {active.kind === "video" ? (
                    <video
                      key={active.src}
                      src={active.src}
                      poster={active.poster}
                      autoPlay
                      muted
                      loop
                      playsInline
                      preload="metadata"
                      style={{
                        position: "absolute",
                        inset: 0,
                        width: "100%",
                        height: "100%",
                        objectFit: "contain",
                        background: "#0a0a0b",
                        display: "block",
                      }}
                    />
                  ) : (
                    <img src={active.src} alt={active.caption || active.label} className="pd-main-img" />
                  )}
                  {gallery.length > 1 ? (
                    <>
                      <button
                        className="pd-nav pd-nav-prev"
                        onClick={() => setActiveImg((i) => (i - 1 + gallery.length) % gallery.length)}
                        title="Previous"
                        aria-label="Previous"
                      >
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
                      </button>
                      <button
                        className="pd-nav pd-nav-next"
                        onClick={() => setActiveImg((i) => (i + 1) % gallery.length)}
                        title="Next"
                        aria-label="Next"
                      >
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
                      </button>
                      <div className="pd-count">{activeImg + 1} / {gallery.length}</div>
                    </>
                  ) : null}
                  {active.caption ? <div className="pd-caption">{active.caption}</div> : null}
                </div>
                {gallery.length > 1 ? (
                  <div className="pd-thumbs">
                    {gallery.map((g, i) => (
                      <div
                        key={i}
                        className={`pd-thumb ${i === activeImg ? "active" : ""}`}
                        onClick={() => setActiveImg(i)}
                      >
                        {g.kind === "video" ? (
                          <div
                            className="pd-thumb-video"
                            style={{
                              backgroundImage: `linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(${g.poster || g.src})`,
                              backgroundSize: "cover",
                              backgroundPosition: "center",
                            }}
                          >
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                            <span>video</span>
                          </div>
                        ) : (
                          <img src={g.src} alt={g.label} />
                        )}
                      </div>
                    ))}
                  </div>
                ) : null}
              </div>
            ) : null}

            <div className="pd-section">
              <h3>// overview</h3>
              <p style={{ color: "var(--fg-1)", fontSize: 14.5, lineHeight: 1.7, margin: 0, maxWidth: 720 }}>
                {product.longDesc}
              </p>
            </div>

            <div className="pd-section">
              <h3>// how it works</h3>
              <ul className="free-list">
                {product.howItWorks.map((line, i) => (
                  <li key={i}>{line}</li>
                ))}
              </ul>
            </div>

            <div className="pd-section">
              <h3>// support</h3>
              <p style={{ color: "var(--fg-1)", fontSize: 14.5, lineHeight: 1.7, margin: "0 0 14px", maxWidth: 720 }}>
                {product.support}
              </p>
              <a href="https://discord.gg/ey2sMahZ6t" target="_blank" rel="noreferrer noopener" className="btn">
                <Icon.Discord size={15} /> Open Discord
              </a>
            </div>
          </div>

          {/* SIDEBAR — GitHub actions + spec */}
          <aside className="pd-sidebar">
            <div className="surface pd-buybox">
              <div className="free-buybox-eyebrow">// free · open source</div>
              <div className="pd-actions">
                <a
                  href={product.githubUrl}
                  target="_blank"
                  rel="noreferrer noopener"
                  className="btn btn-primary btn-lg btn-block"
                >
                  <Icon.Github size={16} /> View on GitHub
                </a>
                <button className="btn btn-lg btn-block" onClick={copyClone}>
                  <Icon.Copy size={15} />
                  {copied ? "Copied!" : "Copy git clone URL"}
                </button>
              </div>
            </div>

            <div className="surface" style={{ padding: 16 }}>
              <div className="spec-list">
                <div className="sr"><span className="k">price</span><span className="v" style={{ color: "var(--free-accent)" }}>free</span></div>
                <div className="sr"><span className="k">framework</span><span className="v">{product.frameworks.join(" · ").toLowerCase()}</span></div>
                <div className="sr"><span className="k">license</span><span className="v">open source</span></div>
                <div className="sr"><span className="k">source</span><span className="v">github</span></div>
                <div className="sr"><span className="k">support</span><span className="v">discord</span></div>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { FreePage, FreeProductPage });