// ─────────────────────────────────────────────────────────────
// Templates Gallery — 200+ skins, 3 named examples with tab switcher
// Confidence-building: shows the same features across very different aesthetics
// ─────────────────────────────────────────────────────────────

const TG_TEMPLATES = [
  {
    id: "editorial",
    name: "Editorial",
    tagline: "Magazine-grade. Serif headlines, warm cream, decisive orange.",
    descriptors: ["WARM", "SERIF", "EDITORIAL"],
    swatch: ["#F4EFE2", "#D4501A", "#1A1612"],
    desktop: "assets/templates/editorial-desktop-buy.png",
    desktop2: "assets/templates/editorial-desktop-dashboard.png",
    mobile1:  "assets/templates/editorial-mobile-dashboard.png",
    mobile2:  "assets/templates/editorial-mobile-more.png",
    chromeBg: "#F4EFE2",
  },
  {
    id: "volt",
    name: "Volt",
    tagline: "Brutalist terminal. Lime over black, monospace everywhere.",
    descriptors: ["BRUTALIST", "MONO", "NEON"],
    swatch: ["#C8FF1A", "#0F0F0F", "#FFFFFF"],
    desktop: "assets/templates/volt-desktop-buy.png",
    desktop2: "assets/templates/volt-desktop-dashboard.png",
    mobile1:  "assets/templates/volt-mobile-dashboard.png",
    mobile2:  "assets/templates/volt-mobile-plans.png",
    chromeBg: "#FAFAFA",
  },
  {
    id: "pulse",
    name: "Pulse",
    tagline: "Calm modern. Generous spacing, clean sans, ships with light + dark.",
    descriptors: ["MODERN", "SANS", "L/D"],
    swatch: ["#22C55E", "#F8FAFB", "#0A0E14"],
    desktop: "assets/templates/modern-desktop-dashboard.png",
    desktop2: "assets/templates/modern-desktop-buy.png",
    mobile1:  "assets/templates/modern-mobile-dashboard.png",
    mobile2:  "assets/templates/modern-mobile-plans.png",
    chromeBg: "#0A0E14",
  },
];

const TG_FEATURES = [
  "Dashboard",
  "Buy Challenge",
  "Payouts",
  "Certificates & Badges",
  "KYC",
  "Referrals",
  "AI Coach",
  "Multi-currency",
  "iOS + Android",
  "Light & Dark",
  "20+ languages",
  "Full white-label",
];

// 197 little colour swatches for the bottom marquee — generated, not hand-typed.
// Mixed warm/cool/neon so it reads as a real catalogue, not a palette tool.
const TG_SWATCHES = (() => {
  const hues = [12, 28, 38, 48, 86, 142, 168, 192, 218, 256, 280, 312, 340];
  const out = [];
  for (let i = 0; i < 197; i++) {
    const h = hues[i % hues.length] + ((i * 7) % 18) - 9;
    const s = 55 + ((i * 11) % 35);
    const l = 38 + ((i * 13) % 28);
    out.push(`hsl(${h} ${s}% ${l}%)`);
  }
  return out;
})();

function TemplatesGallery() {
  const [sel, setSel] = React.useState(0);
  const t = TG_TEMPLATES[sel];

  return (
    <section id="skins" className="section-pad">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Client area & mobile apps</span>
          <h2>200+ skins. <span className="gradient-text">One engine.</span></h2>
          <p>
            Every brand picks a skin during the 60-second flow — the same payouts, the same
            challenge engine, the same AI coach underneath. Here are three of them. Built by us,
            ready to ship under your domain.
          </p>
        </div>

        {/* Theme picker */}
        <div className="tg-tabs">
          {TG_TEMPLATES.map((tpl, i) => (
            <button
              key={tpl.id}
              className={`tg-tab ${i === sel ? "sel" : ""}`}
              onClick={() => setSel(i)}
            >
              <span className="tg-tab-swatches">
                {tpl.swatch.map((c, j) => (
                  <span key={j} className="tg-tab-swatch" style={{ background: c }}/>
                ))}
              </span>
              <span className="tg-tab-name">{tpl.name}</span>
              <span className="tg-tab-num mono">0{i + 1}</span>
            </button>
          ))}
        </div>

        {/* Stage */}
        <div className="tg-stage card" key={t.id}>
          {/* Stage header — theme name + descriptors */}
          <div className="tg-stage-head">
            <div className="tg-stage-head-l">
              <div className="tg-stage-name">{t.name}</div>
              <div className="tg-stage-tag">{t.tagline}</div>
            </div>
            <div className="tg-stage-head-r">
              {t.descriptors.map((d) => (
                <span key={d} className="tg-stage-desc mono">{d}</span>
              ))}
            </div>
          </div>

          {/* Devices */}
          <div className="tg-devices">
            <div className="tg-desktop">
              <div className="tg-chrome">
                <span className="tg-chrome-dot" style={{ background: "#FF5F57" }}/>
                <span className="tg-chrome-dot" style={{ background: "#FEBC2E" }}/>
                <span className="tg-chrome-dot" style={{ background: "#28C840" }}/>
                <span className="tg-chrome-url mono">{`${t.id}.yourfirm.com / client-area`}</span>
              </div>
              <div className="tg-desktop-img-wrap" style={{ background: t.chromeBg }}>
                <img src={t.desktop} alt={`${t.name} desktop client area`} className="tg-desktop-img"/>
              </div>
            </div>

            <div className="tg-mobiles">
              <div className="tg-mobile tg-mobile-back">
                <div className="tg-mobile-notch"/>
                <img src={t.mobile2} alt={`${t.name} mobile app — secondary`} className="tg-mobile-img"/>
              </div>
              <div className="tg-mobile tg-mobile-front">
                <div className="tg-mobile-notch"/>
                <img src={t.mobile1} alt={`${t.name} mobile app — dashboard`} className="tg-mobile-img"/>
              </div>
            </div>
          </div>

          {/* Features strip — same across all themes (the engine) */}
          <div className="tg-features">
            <div className="tg-features-h mono">EVERY SKIN SHIPS WITH</div>
            <div className="tg-features-list">
              {TG_FEATURES.map((f) => (
                <span key={f} className="tg-feature">
                  <span className="tg-feature-tick">
                    <svg width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M1.5 4l1.6 1.6L6.5 2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </span>
                  {f}
                </span>
              ))}
            </div>
          </div>
        </div>

        {/* 197 more — colour-swatch marquee */}
        <div className="tg-marquee-wrap">
          <div className="tg-marquee-l">
            <span className="mono tg-marquee-num">+ 197</span>
            <span className="tg-marquee-cap">more skins in the catalogue · keep scrolling →</span>
          </div>
          <div className="tg-marquee">
            <div className="tg-marquee-track">
              {[0, 1].map((dup) => (
                <div key={dup} className="tg-marquee-row">
                  {TG_SWATCHES.map((c, i) => (
                    <span key={i} className="tg-marquee-chip" style={{ background: c }}/>
                  ))}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        /* Tabs */
        .tg-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
        .tg-tab {
          display: flex; align-items: center; gap: 14px;
          padding: 16px 20px;
          background: var(--surface-2);
          border: 1px solid var(--line);
          border-radius: 14px;
          cursor: pointer;
          color: var(--text-dim);
          transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
          text-align: left;
        }
        .tg-tab:hover { border-color: var(--line-2); background: var(--surface-hover); transform: translateY(-1px); }
        .tg-tab.sel {
          background: var(--surface);
          border-color: var(--purple-2);
          color: var(--text);
          box-shadow: 0 0 0 1px var(--purple-2) inset, 0 14px 32px -18px var(--purple-glow);
        }
        .tg-tab-swatches { display: inline-flex; }
        .tg-tab-swatch {
          width: 14px; height: 22px; border-radius: 4px;
          margin-right: -6px;
          border: 1px solid var(--line-2);
        }
        .tg-tab-swatch:last-child { margin-right: 0; }
        .tg-tab-name { flex: 1; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
        .tg-tab-num { font-size: 10.5px; letter-spacing: 0.16em; color: var(--text-mute); font-weight: 600; }
        .tg-tab.sel .tg-tab-num { color: var(--purple-2); }

        /* Stage */
        .tg-stage { padding: 0; overflow: hidden; animation: tg-fade .35s ease; }
        @keyframes tg-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
        .tg-stage-head {
          display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
          padding: 22px 28px;
          border-bottom: 1px solid var(--line);
          background: var(--surface-2);
          flex-wrap: wrap;
        }
        .tg-stage-head-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 560px; }
        .tg-stage-name { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.025em; color: var(--text); }
        .tg-stage-tag { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
        .tg-stage-head-r { display: flex; gap: 6px; flex-wrap: wrap; }
        .tg-stage-desc {
          font-size: 10.5px; letter-spacing: 0.18em; font-weight: 700;
          padding: 6px 10px; border-radius: 999px;
          background: var(--ink); color: var(--text-dim);
          border: 1px solid var(--line);
        }

        /* Devices */
        .tg-devices {
          padding: 36px 36px 24px;
          display: grid;
          grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
          gap: 28px;
          align-items: end;
          position: relative;
          background:
            radial-gradient(80% 60% at 50% 0%, rgba(122,82,255,0.08), transparent 65%),
            radial-gradient(60% 50% at 100% 100%, rgba(255,90,31,0.08), transparent 65%);
        }
        .tg-desktop {
          border-radius: 16px;
          overflow: hidden;
          background: var(--ink);
          border: 1px solid var(--line-2);
          box-shadow: 0 30px 80px -30px rgba(0,0,0,0.55), 0 8px 20px -10px rgba(0,0,0,0.3);
          position: relative;
        }
        .tg-chrome {
          display: flex; align-items: center; gap: 8px;
          padding: 10px 14px;
          background: var(--surface-2);
          border-bottom: 1px solid var(--line);
        }
        .tg-chrome-dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
        .tg-chrome-url {
          flex: 1; padding: 4px 10px;
          background: var(--ink); border: 1px solid var(--line); border-radius: 999px;
          font-size: 10.5px; color: var(--text-dim);
          text-align: center;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
          letter-spacing: 0.02em;
        }
        .tg-desktop-img-wrap {
          padding: 0;
          line-height: 0;
        }
        .tg-desktop-img {
          width: 100%; height: auto; display: block;
          /* Tiny corner crop so the image meets the browser-chrome flush */
        }

        /* Mobile pair */
        .tg-mobiles { position: relative; min-height: 480px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; }
        .tg-mobile {
          position: relative;
          width: 200px;
          border-radius: 28px;
          overflow: hidden;
          background: var(--ink);
          border: 1px solid var(--line-2);
          box-shadow: 0 28px 60px -24px rgba(0,0,0,0.55), 0 6px 18px -8px rgba(0,0,0,0.3);
        }
        .tg-mobile-back  { position: absolute; right: 50%; transform: translateX(96%) rotate(4deg); top: 18px; opacity: 0.95; z-index: 1; }
        .tg-mobile-front { position: relative; transform: translateX(-12%) rotate(-3deg); z-index: 2; }
        .tg-mobile-notch {
          position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
          width: 60px; height: 14px;
          background: var(--ink); border-radius: 999px;
          z-index: 3;
          opacity: 0.85;
        }
        .tg-mobile-img { width: 100%; height: auto; display: block; }

        /* Features */
        .tg-features {
          padding: 22px 28px 28px;
          border-top: 1px solid var(--line);
          background: var(--surface-2);
        }
        .tg-features-h { font-size: 10.5px; letter-spacing: 0.18em; color: var(--text-mute); font-weight: 700; margin-bottom: 12px; }
        .tg-features-list { display: flex; flex-wrap: wrap; gap: 8px; }
        .tg-feature {
          display: inline-flex; align-items: center; gap: 6px;
          padding: 6px 12px 6px 8px;
          border-radius: 999px;
          background: var(--ink);
          border: 1px solid var(--line);
          font-size: 12px; color: var(--text);
          font-weight: 500;
        }
        .tg-feature-tick {
          width: 14px; height: 14px; border-radius: 999px;
          background: color-mix(in oklab, var(--green) 18%, transparent);
          color: var(--green);
          display: grid; place-items: center;
        }

        /* Marquee bottom strip */
        .tg-marquee-wrap {
          display: grid; grid-template-columns: 240px 1fr;
          align-items: center;
          gap: 24px;
          margin-top: 18px;
          padding: 16px 22px;
          border: 1px solid var(--line);
          border-radius: 14px;
          background: var(--surface-2);
          overflow: hidden;
        }
        .tg-marquee-l { display: flex; flex-direction: column; gap: 4px; }
        .tg-marquee-num {
          font-size: 22px;
          font-weight: 700; letter-spacing: -0.02em;
          color: var(--text);
        }
        .tg-marquee-cap { font-size: 11.5px; color: var(--text-dim); }
        .tg-marquee {
          overflow: hidden;
          position: relative;
          mask: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          -webkit-mask: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
        }
        .tg-marquee-track { display: flex; gap: 0; animation: tg-marquee 60s linear infinite; width: max-content; }
        .tg-marquee-row { display: flex; gap: 5px; padding-right: 5px; }
        .tg-marquee-chip {
          width: 12px; height: 28px; border-radius: 3px;
          flex: 0 0 12px;
          opacity: 0.85;
        }
        @keyframes tg-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

        /* Responsive */
        @media (max-width: 1080px) {
          .tg-devices { grid-template-columns: 1fr; padding: 28px; }
          .tg-mobiles { min-height: auto; padding: 12px 0 0; }
          .tg-mobile { width: 180px; }
          .tg-mobile-back  { transform: translateX(60%) rotate(4deg); top: 0; }
          .tg-mobile-front { transform: translateX(-30%) rotate(-3deg); }
        }
        @media (max-width: 700px) {
          .tg-tabs { grid-template-columns: 1fr; }
          .tg-stage-head { padding: 18px; }
          .tg-stage-name { font-size: 22px; }
          .tg-devices { padding: 18px; gap: 18px; }
          .tg-mobile { width: 150px; }
          .tg-mobiles { gap: 0; }
          .tg-mobile-back  { transform: translateX(50%) rotate(4deg); }
          .tg-mobile-front { transform: translateX(-40%) rotate(-3deg); }
          .tg-features { padding: 18px; }
          .tg-marquee-wrap { grid-template-columns: 1fr; }
          .tg-marquee-l { text-align: left; }
        }
      `}</style>
    </section>
  );
}

window.TemplatesGallery = TemplatesGallery;