/* 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="/en/" className="brand">
          <span className="brand-mark">Y</span>
          <span>Yuka<span style={{ color: "var(--muted)", fontWeight: 400 }}>·agency</span></span>
        </a>
        <nav className="nav">
          <a href="#features">Features</a>
          <a href="#pricing">Pricing</a>
          <a href="#reviews">Reviews</a>
          <a href="#faq">FAQ</a>
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <a href="/" 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="Toggle theme"
            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/en/login">Sign in</a>
          <a className="btn btn-primary btn-sm" href="https://crm.yukagency.com/en/register">Start free</a>
        </div>
      </div>
    </header>
  );
}

// ═══════════════════════════════════════════════════════════════
// HERO PREVIEW
// ═══════════════════════════════════════════════════════════════
function HeroPreview({ speed = 1 }) {
  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: "$1.5K", ch: "ig" }],
    contact: [{ id: "h2", name: "Demir Jewelry", biz: "Bağdat St.", v: "$2.9K", ch: "wa" }],
    offer: [{ id: "h3", name: "Atlas Group", biz: "Real estate", v: "$10.6K", ch: "wa" }],
    won: [{ id: "h4", name: "Poland Ltd.", biz: "B2B", v: "€12K", ch: "tg" }],
  };
  const flyer = { id: "fly", name: "Selin Y.", biz: "Med Innovations", v: "$4K", ch: "wa" };

  const cols = [
    { key: "new", label: "New", color: "var(--sky)" },
    { key: "contact", label: "Contacted", color: "var(--violet)" },
    { key: "offer", label: "Offer", color: "var(--amber)" },
    { key: "won", label: "Won", 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 / pipeline</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 Jewelry</div>
              <div className="org-meta">5 members · pro</div>
            </div>
          </div>
          <div className="nav-item active"><span className="ic"></span>Customers</div>
          <div className="nav-item"><span className="ic"></span>Chat</div>
          <div className="nav-item"><span className="ic"></span>Find Leads</div>
          <div className="nav-item"><span className="ic"></span>Bulk Message</div>
          <div className="nav-item"><span className="ic"></span>Social</div>
          <div className="nav-item"><span className="ic"></span>Team</div>
          <div className="credit-chip">
            <div className="label">Search Credits</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>Sales Pipeline</h4>
            <div className="tabs">
              <span className="tab active">this week</span>
              <span className="tab">month</span>
              <span className="tab">quarter</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 }) {
  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>
              AI-POWERED B2B SALES AGENCY
            </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/en/register" className="btn btn-primary">
                {ctaText}
                <span style={{ transition: "transform 0.2s" }}>→</span>
              </a>
              <a href="#features" className="btn btn-ghost">Watch the demo</a>
            </div>
            <div className="hero-meta">
              <span>● 14-day free trial</span>
              <span className="dot-sep"></span>
              <span>No credit card</span>
              <span className="dot-sep"></span>
              <span>3-min setup</span>
            </div>
          </div>

          <div style={{ position: "relative" }}>
            <HeroPreview speed={speed} />
            <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 deal won · $4K
            </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)" }}>New message</div>
                <div style={{ fontSize: 10, color: "var(--muted)", fontFamily: "var(--font-mono)" }}>Ayşe Demir · just now</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-ban-proof · multi-channel · bulk messaging
          </div>
          <div className="marquee">
            <div className="marquee-track">
              {[
                "Demir Jewelry", "Atlas Group", "Studio Marc", "Med Innovations",
                "Café Roma", "Poland B2B", "Levent Diamonds", "Berlin GmbH",
                "Şişli Gold", "Beyoğlu Insurance", "Ankara Realty", "İzmir Logistics",
                "Demir Jewelry", "Atlas Group", "Studio Marc", "Med Innovations",
                "Café Roma", "Poland B2B", "Levent Diamonds", "Berlin GmbH",
                "Şişli Gold", "Beyoğlu Insurance", "Ankara Realty", "İzmir Logistics",
              ].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 });