/* global React */
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

// ═══════════════════════════════════════════════════════════════
// SITE HEADER
// ═══════════════════════════════════════════════════════════════
function SiteHeader({ theme, onThemeToggle }) {
  return (
    <header className="site-header">
      <div className="container site-header-inner">
        <a href="#" className="brand">
          <span className="brand-mark">Y</span>
          <span>Yuka<span style={{ color: "var(--muted)", fontWeight: 400 }}>·ajans</span></span>
        </a>
        <nav className="nav">
          <a href="#ozellikler">Özellikler</a>
          <a href="#fiyat">Fiyat</a>
          <a href="#yorumlar">Yorumlar</a>
          <a href="#sss">SSS</a>
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <a href="/en/" className="lang-switch" style={{
            fontSize: 11, fontFamily: "var(--font-mono)",
            padding: "6px 10px", borderRadius: 999,
            border: "1px solid var(--border)",
            color: "var(--ink-2)", textDecoration: "none",
            letterSpacing: "0.05em",
          }}>TR · EN</a>
          <button
            onClick={onThemeToggle}
            aria-label="Temayı değiştir"
            style={{
              width: 36, height: 36, borderRadius: 999,
              border: "1px solid var(--border)",
              background: "transparent",
              color: "var(--ink-2)",
              cursor: "pointer",
              display: "grid", placeItems: "center",
              fontSize: 14,
            }}
          >
            {theme === "dark" ? "☀" : "☾"}
          </button>
          <a className="btn btn-ghost btn-sm" href="https://crm.yukagency.com/login">Giriş</a>
          <a className="btn btn-primary btn-sm" href="https://crm.yukagency.com/register">Ücretsiz başla</a>
        </div>
      </div>
    </header>
  );
}

// ═══════════════════════════════════════════════════════════════
// HERO PREVIEW — yuka crm mini-app simülasyonu
// ═══════════════════════════════════════════════════════════════
function HeroPreview({ speed = 1 }) {
  // Animated kanban board with one card flying between columns
  const stages = ["new", "contact", "offer", "won"];
  const [stageIdx, setStageIdx] = useStateH(0);
  useEffectH(() => {
    const id = setInterval(() => {
      setStageIdx((s) => (s + 1) % stages.length);
    }, 2200 / speed);
    return () => clearInterval(id);
  }, [speed]);

  const current = stages[stageIdx];

  const baseLeads = {
    new: [{ id: "h1", name: "Café Roma", biz: "Beyoğlu", v: "₺48K", ch: "ig" }],
    contact: [{ id: "h2", name: "Demir Mücevher", biz: "Bağdat C.", v: "₺92K", ch: "wa" }],
    offer: [{ id: "h3", name: "Atlas Group", biz: "Konut", v: "₺340K", ch: "wa" }],
    won: [{ id: "h4", name: "Polonya Ltd.", biz: "B2B", v: "€12K", ch: "tg" }],
  };
  const flyer = { id: "fly", name: "Selin Y.", biz: "Yenilik Tıp", v: "₺128K", ch: "wa" };

  const cols = [
    { key: "new", label: "Yeni", color: "var(--sky)" },
    { key: "contact", label: "İletişim", color: "var(--violet)" },
    { key: "offer", label: "Teklif", color: "var(--amber)" },
    { key: "won", label: "Kazanıldı", color: "var(--accent)" },
  ];

  return (
    <div className="hero-preview">
      <div className="titlebar">
        <div className="traffic"><span></span><span></span><span></span></div>
        <div className="url">crm.yukagency.com / kanban</div>
        <div style={{ width: 80, fontSize: 10, fontFamily: "var(--font-mono)", color: "var(--muted)", textAlign: "right" }}>
          v2.4
        </div>
      </div>
      <div className="hero-preview-body">
        <div className="hero-sidebar">
          <div className="org">
            <div className="org-mark">D</div>
            <div>
              <div className="org-name">Demir Mücevher</div>
              <div className="org-meta">5 üye · pro</div>
            </div>
          </div>
          <div className="nav-item active"><span className="ic"></span>Müşteriler</div>
          <div className="nav-item"><span className="ic"></span>Sohbet</div>
          <div className="nav-item"><span className="ic"></span>Müşteri Bul</div>
          <div className="nav-item"><span className="ic"></span>Toplu Mesaj</div>
          <div className="nav-item"><span className="ic"></span>Sosyal</div>
          <div className="nav-item"><span className="ic"></span>Personel</div>
          <div className="credit-chip">
            <div className="label">Arama Kredisi</div>
            <div className="value">128 / 200</div>
            <div className="bar"><div></div></div>
          </div>
        </div>
        <div className="hero-main">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <h4>Satış Hattı</h4>
            <div className="tabs">
              <span className="tab active">bu hafta</span>
              <span className="tab">ay</span>
              <span className="tab">çeyrek</span>
            </div>
          </div>
          <div className="kanban-mini">
            {cols.map((col) => {
              const isActive = col.key === current;
              const leads = baseLeads[col.key] || [];
              return (
                <div className="kanban-col" key={col.key}>
                  <div className="kanban-col-head">
                    <span><span className="pip" style={{ background: col.color }}></span>{col.label}</span>
                    <span className="count">{leads.length + (isActive ? 1 : 0)}</span>
                  </div>
                  {isActive && (
                    <div className="kanban-card dragging" key="fly-mini">
                      <div className="name">{flyer.name}</div>
                      <div className="meta"><Ch kind={flyer.ch} size={12} /><span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontWeight: 600, color: "var(--accent-ink)" }}>{flyer.v}</span></div>
                    </div>
                  )}
                  {leads.map((l) => (
                    <div className="kanban-card" key={l.id}>
                      <div className="name">{l.name}</div>
                      <div className="meta">
                        <Ch kind={l.ch} size={12} />
                        <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontWeight: 600, color: "var(--accent-ink)" }}>{l.v}</span>
                      </div>
                    </div>
                  ))}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// HERO SECTION
// ═══════════════════════════════════════════════════════════════
function Hero({ heroTitle, heroLead, ctaText, speed }) {
  // heroTitle is in two halves: bold + serif
  // we'll let user override via tweaks
  return (
    <section className="hero">
      <div className="hero-bg"><div className="grain" /></div>
      <div className="container">
        <div className="hero-grid">
          <div className="hero-copy">
            <span className="eyebrow">
              <span className="dot"></span>
              YAPAY ZEKA DESTEKLİ B2B SATIŞ AJANSI
            </span>
            <h1 className="h-display" style={{ marginTop: 22 }}>
              {heroTitle.before}{" "}
              <span className="serif">{heroTitle.italic}</span>{" "}
              {heroTitle.after}
            </h1>
            <p className="lead">{heroLead}</p>
            <div className="hero-cta">
              <a href="https://crm.yukagency.com/register" className="btn btn-primary">
                {ctaText}
                <span style={{ transition: "transform 0.2s" }}>→</span>
              </a>
              <a href="#ozellikler" className="btn btn-ghost">Demo'yu izle</a>
            </div>
            <div className="hero-meta">
              <span>● 14 gün ücretsiz</span>
              <span className="dot-sep"></span>
              <span>Kart gerekmez</span>
              <span className="dot-sep"></span>
              <span>3 dk kurulum</span>
            </div>
          </div>

          <div style={{ position: "relative" }}>
            <HeroPreview speed={speed} />
            {/* floating decorations */}
            <div style={{
              position: "absolute",
              top: -20, right: -16,
              padding: "8px 12px",
              background: "var(--surface)",
              border: "1px solid var(--border)",
              borderRadius: 12,
              boxShadow: "var(--shadow-md)",
              fontSize: 12,
              display: "flex", alignItems: "center", gap: 8,
              fontFamily: "var(--font-mono)",
              transform: "rotate(3deg)",
            }}>
              <span style={{ width: 8, height: 8, borderRadius: 50, background: "var(--accent)", boxShadow: "0 0 0 4px oklch(0.62 0.16 150 / 0.2)" }}></span>
              +1 kazanılan deal · ₺128K
            </div>
            <div style={{
              position: "absolute",
              bottom: -10, left: -20,
              padding: "10px 14px",
              background: "var(--surface)",
              border: "1px solid var(--border)",
              borderRadius: 12,
              boxShadow: "var(--shadow-md)",
              fontSize: 12,
              display: "flex", alignItems: "center", gap: 8,
              transform: "rotate(-2deg)",
            }}>
              <span style={{ width: 22, height: 22, borderRadius: 6, background: "var(--whatsapp)", display: "grid", placeItems: "center", color: "white", fontWeight: 700, fontSize: 11 }}>W</span>
              <div>
                <div style={{ fontWeight: 500, color: "var(--ink)" }}>Yeni mesaj</div>
                <div style={{ fontSize: 10, color: "var(--muted)", fontFamily: "var(--font-mono)" }}>Ayşe Demir · şimdi</div>
              </div>
            </div>
          </div>
        </div>

        {/* logo strip / marquee */}
        <div style={{ marginTop: 80, paddingTop: 36, borderTop: "1px solid var(--border)" }}>
          <div style={{ fontSize: 12, fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--muted)", textAlign: "center", marginBottom: 20 }}>
            WhatsApp kapanmama garantili · çoklu kanal · toplu mesaj
          </div>
          <div className="marquee">
            <div className="marquee-track">
              {[
                "Demir Mücevher", "Atlas Group", "Studio Marc", "Yenilik Tıp",
                "Café Roma", "Polonya B2B", "Levent Pırlanta", "Bağdat Cad.",
                "Şişli Altın", "Beyoğlu Sigorta", "Ankara Emlak", "İzmir Lojistik",
                "Demir Mücevher", "Atlas Group", "Studio Marc", "Yenilik Tıp",
                "Café Roma", "Polonya B2B", "Levent Pırlanta", "Bağdat Cad.",
                "Şişli Altın", "Beyoğlu Sigorta", "Ankara Emlak", "İzmir Lojistik",
              ].map((name, i) => (
                <span className="marquee-item" key={i}>
                  <span className="ic"></span>
                  {name}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, SiteHeader });