/* global React */
// ============================================================
// frekanslol — shared components
// ============================================================

const { useState, useEffect, useRef } = React;

// ---------- Icons (inline SVG, hairline) ----------
const Icon = {
  Check: (p) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <polyline points="20 6 9 17 4 12" />
    </svg>
  ),
  X: (p) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}>
      <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
    </svg>
  ),
  Download: (p) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" />
    </svg>
  ),
  Sparkle: (p) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M12 3l1.9 4.7L19 9.6l-4.7 1.9L12 16l-1.9-4.7L5 9.6l5.1-1.9L12 3z" /><path d="M19 16l.9 2.3L22 19l-2.1.7L19 22l-.9-2.3L16 19l2.1-.7L19 16z" />
    </svg>
  ),
  Chevron: (p) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <polyline points="6 9 12 15 18 9" />
    </svg>
  ),
  Arrow: (p) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" />
    </svg>
  ),
  Shield: (p) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
    </svg>
  ),
  Brain: (p) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M9.5 2A2.5 2.5 0 0 0 7 4.5v0A2.5 2.5 0 0 0 4.5 7v0A2.5 2.5 0 0 0 4 12a2.5 2.5 0 0 0 .5 5v0A2.5 2.5 0 0 0 7 19.5v0A2.5 2.5 0 0 0 9.5 22 2.5 2.5 0 0 0 12 19.5V4.5A2.5 2.5 0 0 0 9.5 2z" />
      <path d="M14.5 2A2.5 2.5 0 0 1 17 4.5v0A2.5 2.5 0 0 1 19.5 7v0A2.5 2.5 0 0 1 20 12a2.5 2.5 0 0 1-.5 5v0A2.5 2.5 0 0 1 17 19.5v0A2.5 2.5 0 0 1 14.5 22 2.5 2.5 0 0 1 12 19.5V4.5A2.5 2.5 0 0 1 14.5 2z" />
    </svg>
  ),
  Palette: (p) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="13.5" cy="6.5" r="1.5" /><circle cx="17.5" cy="10.5" r="1.5" /><circle cx="8.5" cy="7.5" r="1.5" /><circle cx="6.5" cy="12.5" r="1.5" />
      <path d="M12 2a10 10 0 1 0 0 20 1.5 1.5 0 0 0 1-2.6 1.5 1.5 0 0 1 1-2.6h2a4.5 4.5 0 0 0 4.5-4.5C20.5 6.5 16.7 2 12 2z" />
    </svg>
  ),
  Trophy: (p) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M8 21h8" /><path d="M12 17v4" /><path d="M7 4h10v6a5 5 0 0 1-10 0V4z" /><path d="M17 6h2a2 2 0 0 1 0 4h-2" /><path d="M7 6H5a2 2 0 0 0 0 4h2" />
    </svg>
  ),
  Windows: (p) => (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M3 5.5l8-1.1v7.4H3V5.5zm0 13l8 1.1v-7.4H3v6.3zM12 4.3l9-1.3v8.8h-9V4.3zm0 15.4l9 1.3v-8.8h-9v7.5z" />
    </svg>
  ),
  External: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /><polyline points="15 3 21 3 21 9" /><line x1="10" y1="14" x2="21" y2="3" />
    </svg>
  ),
  Mail: (p) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" /><polyline points="22,6 12,13 2,6" />
    </svg>
  ),
  Refund: (p) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M3 12a9 9 0 1 0 3-6.7" /><polyline points="3 4 3 10 9 10" />
    </svg>
  ),
};

// ---------- Nav ----------
function Nav({ route, onNav, tweaks }) {
  const links = [
    { key: "home", label: "Ana Sayfa" },
    { key: "features", label: "Özellikler" },
    { key: "premium", label: "Premium" },
    { key: "download", label: "İndir" },
    { key: "blog", label: "Blog" },
    { key: "contact", label: "İletişim" },
  ];
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <div className="nav-left">
          <a className="brand" onClick={() => onNav("home")} style={{ cursor: "pointer" }}>
            <span className="brand-mark">f</span>
            <span>frekanslol</span>
          </a>
          <div className="nav-links">
            {links.map((l) => (
              <a
                key={l.key}
                className={"nav-link " + (route === l.key ? "active" : "")}
                onClick={() => onNav(l.key)}
              >
                {l.label}
              </a>
            ))}
          </div>
        </div>
        <div className="nav-right">
          <a className="btn btn-ghost btn-sm" onClick={() => onNav("download")}>
            <Icon.Download />İndir
          </a>
          <a className="btn btn-primary btn-sm" onClick={() => onNav("premium")}>
            <Icon.Sparkle />Premium
          </a>
        </div>
      </div>
    </nav>
  );
}

// ---------- Footer ----------
function Footer({ onNav }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col">
            <a className="brand" style={{ marginBottom: 14 }}>
              <span className="brand-mark">f</span>
              <span>frekanslol</span>
            </a>
            <p style={{ fontSize: "0.9rem", maxWidth: 320, marginTop: 6 }}>
              League of Legends Skin Changer and More. Topluluk skinleri, resmi galeri ve AI maç koçu — Windows için ücretsiz.
            </p>
          </div>
          <div className="footer-col">
            <h4>Ürün</h4>
            <div className="footer-links">
              <a onClick={() => onNav("home")}>Ana Sayfa</a>
              <a onClick={() => onNav("features")}>Özellikler</a>
              <a onClick={() => onNav("premium")}>Premium</a>
              <a onClick={() => onNav("download")}>İndir</a>
            </div>
          </div>
          <div className="footer-col">
            <h4>Kaynaklar</h4>
            <div className="footer-links">
              <a onClick={() => onNav("blog")}>Blog</a>
              <a onClick={() => onNav("contact")}>İletişim</a>
              <a onClick={() => onNav("privacy")}>Gizlilik Politikası</a>
              <a onClick={() => onNav("terms")}>Kullanım Koşulları</a>
            </div>
          </div>
          <div className="footer-col">
            <h4>İletişim</h4>
            <div className="footer-links">
              <a href="mailto:frekanslol@proton.me">frekanslol@proton.me</a>
              <a onClick={() => onNav("contact")}>İletişim formu</a>
            </div>
          </div>
        </div>

        <div className="disclaimer">
          <strong style={{ color: "var(--text-soft)" }}>Yasal Uyarı:</strong> frekanslol, Riot Games tarafından onaylı veya bağlantılı değildir. League of Legends, Riot Games'in tescilli markasıdır. frekanslol bağımsız bir üçüncü taraf yazılımıdır.
        </div>

        <div className="footer-bottom">
          <div>© 2026 frekanslol. Tüm hakları saklıdır.</div>
          <div className="mono">v1.7.1 · Made for the Rift</div>
        </div>
      </div>
    </footer>
  );
}

// ---------- FAQ ----------
function FAQ({ items }) {
  const [open, setOpen] = useState(0);
  return (
    <div className="faq">
      {items.map((it, i) => (
        <div key={i} className={"faq-item " + (open === i ? "open" : "")}>
          <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
            <span>{it.q}</span>
            <Icon.Chevron className="caret" />
          </button>
          <div className="faq-a">
            <div className="faq-a-inner">{it.a}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

// Expose globally
Object.assign(window, { Icon, Nav, Footer, FAQ });