const { useState, useEffect, useRef } = React;

const APP_URL = "http://app.veloraone.com.tr";

/* ── ICONS ── */
const Icon = ({ name, size = 20, color = "currentColor" }) => {
  const icons = {
    menu: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>,
    x: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>,
    arrow: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>,
    pos: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/><path d="M7 7h2v2H7zM11 7h2v2h-2zM15 7h2v2h-2zM7 11h2v2H7zM11 11h2v2h-2zM15 11h2"/></svg>,
    admin: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>,
    report: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round"><path d="M18 20V10M12 20V4M6 20v-6"/></svg>,
    check: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>,
    zap: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>,
    box: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>,
    tag: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>,
    cash: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round"><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="3"/><path d="M6 12h.01M18 12h.01"/></svg>,
    return: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 14l-4-4 4-4"/><path d="M5 10h11a4 4 0 0 1 0 8h-1"/></svg>,
    balance: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round"><line x1="12" y1="3" x2="12" y2="21"/><path d="M5 7l7-4 7 4"/><path d="M5 17l7 4 7-4"/><line x1="3" y1="12" x2="21" y2="12"/></svg>,
    users: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>,
    cloud: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/></svg>,
    partial: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/><path d="M6 15h4M14 15h4"/></svg>,
    store: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round"><path d="M3 9l1.5-6h15L21 9"/><path d="M3 9a2 2 0 0 0 4 0 2 2 0 0 0 4 0 2 2 0 0 0 4 0 2 2 0 0 0 4 0"/><path d="M5 9v12h14V9"/><path d="M9 21v-6h6v6"/></svg>,
    shield: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>,
    wifi: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round"><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><circle cx="12" cy="20" r="1" fill={color}/></svg>,
    login: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>,
    sparkle: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round"><path d="M12 3l1.5 5.5L19 10l-5.5 1.5L12 17l-1.5-5.5L5 10l5.5-1.5z"/></svg>,
  };
  return icons[name] || null;
};

/* ── LOGO ── */
const Logo = ({ size = "md" }) => {
  const sizes = { sm: 24, md: 32, lg: 42 };
  return (
    <img
      src="Logo/veloraone-logo-light.svg"
      alt="VeloraOne"
      style={{
        height: sizes[size],
        width: "auto",
        display: "block",
        objectFit: "contain"
      }}
    />
  );
};

/* ── NAV ── */
const navLinks = [
  { label: "Özellikler", href: "#features" },
  { label: "Ürünler", href: "#products" },
  { label: "Ekranlar", href: "#screenshots" },
  { label: "Yakında", href: "#coming-soon" },
  { label: "Fiyatlandırma", href: "#pricing" },
  { label: "İletişim", href: "#contact" },
];

/* ── TRIAL MODAL ── */
const TrialModal = ({ onClose }) => {
  const [form, setForm] = useState({ name: "", email: "", phone: "", business: "" });
  const [submitted, setSubmitted] = useState(false);
  const handle = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const submit = (e) => { e.preventDefault(); setSubmitted(true); };
  const inputStyle = {
    width: "100%", padding: "11px 14px", border: "1.5px solid #e2e8f0",
    borderRadius: 10, fontSize: 14, fontFamily: "inherit", color: "#1e293b",
    background: "#f8fafc", outline: "none", transition: "border-color 0.15s",
  };
  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 1000,
      background: "rgba(14,17,40,0.55)", backdropFilter: "blur(6px)",
      display: "flex", alignItems: "center", justifyContent: "center", padding: 24,
    }} onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div style={{
        background: "white", borderRadius: 20, width: "100%", maxWidth: 460,
        boxShadow: "0 24px 80px rgba(14,17,40,0.22)", overflow: "hidden",
        animation: "modalIn 0.2s ease",
      }}>
        {/* Header */}
        <div style={{
          background: "linear-gradient(135deg, oklch(52% 0.20 252), oklch(55% 0.16 285))",
          padding: "28px 32px 24px", position: "relative",
        }}>
          <button onClick={onClose} style={{
            position: "absolute", top: 16, right: 16, background: "rgba(255,255,255,0.15)",
            border: "none", borderRadius: 8, padding: "6px", cursor: "pointer", color: "white", display: "flex",
          }}><Icon name="x" size={16} /></button>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 12 }}>
            <div style={{ width: 44, height: 44, borderRadius: 12, background: "rgba(255,255,255,0.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="zap" size={22} color="white" />
            </div>
            <div>
              <div style={{ color: "white", fontWeight: 800, fontSize: 18 }}>7 Gün Ücretsiz Dene</div>
              <div style={{ color: "rgba(255,255,255,0.75)", fontSize: 13 }}>Kredi kartı gerekmez</div>
            </div>
          </div>
          <div style={{ display: "flex", gap: 12 }}>
            {["Tüm özellikler açık", "Kurulum yok", "7 gün sonra karar ver"].map((t, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 5, fontSize: 12, color: "rgba(255,255,255,0.85)", fontWeight: 500 }}>
                <Icon name="check" size={13} color="white" />{t}
              </div>
            ))}
          </div>
        </div>
        {/* Body */}
        <div style={{ padding: "28px 32px" }}>
          {submitted ? (
            <div style={{ textAlign: "center", padding: "16px 0 8px" }}>
              <div style={{ width: 64, height: 64, borderRadius: "50%", background: "#dcfce7", margin: "0 auto 16px", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <Icon name="check" size={28} color="#16a34a" />
              </div>
              <div style={{ fontWeight: 800, color: "#14172a", fontSize: 20, marginBottom: 8 }}>Başvurunuz alındı!</div>
              <p style={{ color: "#64748b", fontSize: 14, lineHeight: 1.6 }}>
                En kısa sürede hesabınızı aktifleştirip size e-posta ile bilgi göndereceğiz.<br/>7 günlük deneme süreniz başlayacak.
              </p>
              <button onClick={onClose} style={{
                marginTop: 24, padding: "12px 32px", borderRadius: 999, border: "none",
                background: "linear-gradient(135deg, oklch(52% 0.20 252), oklch(55% 0.16 285))",
                color: "white", fontWeight: 700, fontSize: 14, cursor: "pointer", fontFamily: "inherit",
              }}>Tamam</button>
            </div>
          ) : (
            <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              {[
                { key: "name", label: "Ad Soyad", type: "text", placeholder: "Adınız Soyadınız" },
                { key: "email", label: "E-posta", type: "email", placeholder: "ornek@mail.com" },
                { key: "phone", label: "Telefon", type: "tel", placeholder: "0 5XX XXX XX XX" },
                { key: "business", label: "İşletme / Mağaza Adı", type: "text", placeholder: "Mağazanızın adı" },
              ].map(f => (
                <div key={f.key}>
                  <label style={{ display: "block", fontSize: 12, fontWeight: 700, color: "#475569", marginBottom: 6 }}>{f.label}</label>
                  <input type={f.type} placeholder={f.placeholder} value={form[f.key]}
                    onChange={e => handle(f.key, e.target.value)} required
                    style={inputStyle}
                    onFocus={e => e.target.style.borderColor = "oklch(52% 0.20 252)"}
                    onBlur={e => e.target.style.borderColor = "#e2e8f0"}
                  />
                </div>
              ))}
              <button type="submit" style={{
                width: "100%", padding: "14px", marginTop: 4,
                background: "linear-gradient(135deg, oklch(52% 0.20 252), oklch(55% 0.16 285))",
                color: "white", border: "none", borderRadius: 12,
                fontSize: 15, fontWeight: 800, cursor: "pointer", fontFamily: "inherit",
                boxShadow: "0 4px 16px oklch(52% 0.20 252 / 0.35)",
              }}>
                7 Günlük Denemeyi Başlat
              </button>
              <p style={{ fontSize: 11, color: "#94a3b8", textAlign: "center", lineHeight: 1.5 }}>
                Kayıt olarak <a href="#" style={{ color: "oklch(52% 0.20 252)" }}>kullanım koşullarını</a> kabul etmiş olursunuz. Deneme süresi dolduğunda otomatik ücretlendirme yapılmaz.
              </p>
            </form>
          )}
        </div>
      </div>
      <style>{`@keyframes modalIn { from { opacity:0; transform:scale(0.95) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }`}</style>
    </div>
  );
};

const Navbar = () => {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const scrollTo = (e, href) => {
    e.preventDefault();
    setOpen(false);
    const el = document.querySelector(href);
    if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 72; window.scrollTo({ top: y, behavior: "smooth" }); }
  };

  return (
    <>
      <nav style={{
        position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
        background: scrolled ? "rgba(255,255,255,0.92)" : "rgba(255,255,255,0.0)",
        backdropFilter: scrolled ? "blur(16px)" : "none",
        borderBottom: scrolled ? "1px solid oklch(90% 0.02 252)" : "1px solid transparent",
        transition: "all 0.3s ease",
      }}>
        <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 72 }}>
          <a href="#hero" onClick={e => scrollTo(e, "#hero")} style={{ textDecoration: "none" }}><Logo /></a>

          {/* Desktop links */}
          <div style={{ display: "flex", gap: 24, alignItems: "center" }} className="nav-desktop">
            {navLinks.map(l => (
              <a key={l.label} href={l.href} onClick={e => scrollTo(e, l.href)} style={{
                color: "oklch(38% 0.06 258)", fontSize: 14, fontWeight: 500, textDecoration: "none",
                transition: "color 0.15s", whiteSpace: "nowrap",
              }}
              onMouseEnter={e => e.target.style.color = "oklch(52% 0.20 252)"}
              onMouseLeave={e => e.target.style.color = "oklch(38% 0.06 258)"}
              >{l.label}</a>
            ))}
          </div>

          <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
            <button onClick={e => scrollTo(e, "#contact")} style={{
              display: "flex", alignItems: "center", gap: 7,
              background: "white", color: "oklch(52% 0.20 252)",
              border: "1.5px solid oklch(52% 0.20 252)",
              padding: "8px 16px", borderRadius: "999px",
              fontSize: 13, fontWeight: 700, whiteSpace: "nowrap",
              cursor: "pointer", fontFamily: "inherit",
              transition: "transform 0.15s, box-shadow 0.15s",
            }}
            onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-1px)"; e.currentTarget.style.boxShadow = "0 4px 16px oklch(52% 0.20 252 / 0.2)"; }}
            onMouseLeave={e => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; }}
            >
              <Icon name="sparkle" size={15} color="oklch(52% 0.20 252)" />
              Demo Talep Et
            </button>
            <a href={APP_URL} target="_blank" rel="noopener noreferrer" style={{
              display: "flex", alignItems: "center", gap: 7,
              background: "linear-gradient(135deg, oklch(52% 0.20 252), oklch(55% 0.16 285))",
              color: "white", padding: "8px 16px", borderRadius: "999px",
              fontSize: 13, fontWeight: 700, textDecoration: "none", whiteSpace: "nowrap",
              boxShadow: "0 2px 12px oklch(52% 0.20 252 / 0.35)",
              transition: "transform 0.15s, box-shadow 0.15s",
            }}
            onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-1px)"; e.currentTarget.style.boxShadow = "0 4px 20px oklch(52% 0.20 252 / 0.45)"; }}
            onMouseLeave={e => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = "0 2px 12px oklch(52% 0.20 252 / 0.35)"; }}
            >
              <Icon name="login" size={15} />
              Uygulamaya Giriş
            </a>
            <button onClick={() => setOpen(!open)} className="nav-burger" style={{
              background: "none", border: "1px solid var(--border)", borderRadius: 8, padding: "8px", cursor: "pointer", color: "var(--navy)", display: "none"
            }}>
              <Icon name={open ? "x" : "menu"} size={20} />
            </button>
          </div>
        </div>
      </nav>

      {/* Mobile menu */}
      {open && (
        <div style={{
          position: "fixed", top: 72, left: 0, right: 0, zIndex: 99,
          background: "white", borderBottom: "1px solid var(--border)",
          padding: "20px 24px 28px",
          display: "flex", flexDirection: "column", gap: 4,
        }}>
          {navLinks.map(l => (
            <a key={l.label} href={l.href} onClick={e => scrollTo(e, l.href)} style={{
              color: "var(--text)", fontSize: 16, fontWeight: 500, textDecoration: "none",
              padding: "12px 0", borderBottom: "1px solid var(--border)",
            }}>{l.label}</a>
          ))}
          <a href={APP_URL} target="_blank" rel="noopener noreferrer" style={{
            marginTop: 16, display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
            background: "linear-gradient(135deg, oklch(52% 0.20 252), oklch(55% 0.16 285))",
            color: "white", padding: "14px", borderRadius: 12, fontSize: 15, fontWeight: 700, textDecoration: "none",
          }}>
            <Icon name="login" size={16} />
            Uygulamaya Giriş
          </a>
        </div>
      )}

      <style>{`
        @media (max-width: 960px) {
          .nav-desktop { display: none !important; }
          .nav-burger { display: flex !important; }
        }
      `}</style>
    </>
  );
};

/* ── HERO ── */
const Hero = () => {
  const scrollTo = (href) => {
    const el = document.querySelector(href);
    if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 80; window.scrollTo({ top: y, behavior: "smooth" }); }
  };

  return (
    <section id="hero" style={{
      paddingTop: 160, paddingBottom: 100, position: "relative", overflow: "hidden",
      background: "linear-gradient(170deg, oklch(97% 0.015 260) 0%, oklch(98.5% 0.008 252) 60%, oklch(97% 0.012 285) 100%)",
    }}>
      {/* Background decoration */}
      <div style={{
        position: "absolute", top: -120, right: -120, width: 600, height: 600, borderRadius: "50%",
        background: "radial-gradient(circle, oklch(52% 0.20 252 / 0.08) 0%, transparent 70%)", pointerEvents: "none"
      }} />
      <div style={{
        position: "absolute", bottom: -80, left: -80, width: 400, height: 400, borderRadius: "50%",
        background: "radial-gradient(circle, oklch(55% 0.16 285 / 0.07) 0%, transparent 70%)", pointerEvents: "none"
      }} />

      <div className="container" style={{ position: "relative", textAlign: "center" }}>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          background: "white", border: "1px solid var(--border)", borderRadius: 999,
          padding: "6px 16px 6px 10px", marginBottom: 32,
          boxShadow: "var(--shadow-sm)",
        }}>
          <span style={{
            background: "linear-gradient(135deg, oklch(52% 0.20 252), oklch(55% 0.16 285))",
            color: "white", fontSize: 11, fontWeight: 700, padding: "2px 10px", borderRadius: 999,
          }}>YENİ</span>
          <span style={{ fontSize: 13, color: "var(--navy-mid)", fontWeight: 500 }}>Modern perakende yazılımı artık Türkiye'de</span>
        </div>

        <h1 style={{
          fontSize: "clamp(36px, 6vw, 72px)", fontWeight: 800, color: "var(--navy)",
          lineHeight: 1.1, letterSpacing: "-0.03em", marginBottom: 24,
          maxWidth: 820, margin: "0 auto 24px",
        }}>
          Satış, stok ve kasa kontrolü<br />
          <span style={{
            background: "linear-gradient(135deg, oklch(52% 0.20 252), oklch(55% 0.16 285))",
            WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text",
          }}>tek ekranda.</span>
        </h1>

        <p style={{
          fontSize: "clamp(16px, 2vw, 19px)", color: "var(--muted)", maxWidth: 620, margin: "0 auto 40px",
          lineHeight: 1.7, fontWeight: 400,
        }}>
          VeloraOne; mağazanızdaki tüm operasyonu tek sistemde toplar. Satış yapın, stok yönetin, gün sonu mutabakatını anında görün. Bulut tabanlı yapısıyla mağazanıza her yerden güvenli erişim sağlar.
        </p>

        <div style={{ display: "flex", gap: 16, justifyContent: "center", flexWrap: "wrap" }}>
          <button onClick={() => scrollTo("#contact")} style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            background: "linear-gradient(135deg, oklch(52% 0.20 252), oklch(55% 0.16 285))",
            color: "white", padding: "16px 32px", borderRadius: 999,
            fontSize: 16, fontWeight: 700, border: "none", cursor: "pointer", fontFamily: "inherit",
            boxShadow: "0 4px 20px oklch(52% 0.20 252 / 0.40)",
            transition: "transform 0.15s, box-shadow 0.15s",
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "0 8px 30px oklch(52% 0.20 252 / 0.5)"; }}
          onMouseLeave={e => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = "0 4px 20px oklch(52% 0.20 252 / 0.40)"; }}
          >
            <Icon name="sparkle" size={18} />
            Demo Talep Et
          </button>
          <a href={APP_URL} target="_blank" rel="noopener noreferrer" style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            background: "white", color: "var(--navy)", padding: "16px 32px", borderRadius: 999,
            fontSize: 16, fontWeight: 600, textDecoration: "none", border: "1.5px solid var(--border)",
            cursor: "pointer", boxShadow: "var(--shadow-sm)",
            transition: "transform 0.15s, box-shadow 0.15s",
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "var(--shadow-md)"; }}
          onMouseLeave={e => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = "var(--shadow-sm)"; }}
          >
            <Icon name="login" size={16} />
            Uygulamaya Giriş
          </a>
        </div>

        {/* Stats bar */}
        <div style={{
          marginTop: 72, display: "flex", gap: 0, justifyContent: "center",
          background: "white", border: "1px solid var(--border)", borderRadius: 20,
          boxShadow: "var(--shadow-md)", overflow: "hidden", flexWrap: "wrap",
          maxWidth: 720, marginLeft: "auto", marginRight: "auto",
        }}>
          {[
            { num: "3", label: "Entegre Ürün Modülü" },
            { num: "Tek", label: "Panel, Tüm İşlemler" },
            { num: "7/24", label: "Güvenli Erişim" },
            { num: "Çoklu", label: "Mağaza Desteği" },
          ].map((s, i) => (
            <div key={i} style={{
              flex: 1, minWidth: 140, padding: "24px 20px", textAlign: "center",
              borderRight: i < 3 ? "1px solid var(--border)" : "none",
            }}>
              <div style={{ fontSize: 26, fontWeight: 800, color: "var(--blue)", letterSpacing: "-0.03em" }}>{s.num}</div>
              <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 4, fontWeight: 500 }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ── PRODUCTS ── */
const products = [
  {
    icon: "pos", color: "oklch(52% 0.20 252)", bg: "var(--blue-light)",
    name: "Velora POS",
    desc: "Hızlı satış ekranı ile saniyeler içinde işlem yapın. Barkod okutun, ürünü ekleyin, ödemeyi alın.",
    features: ["Hızlı satış ekranı", "Barkod ile ürün ekleme", "Nakit & kart ödeme", "Kısmi ödeme desteği"],
  },
  {
    icon: "admin", color: "oklch(55% 0.16 285)", bg: "var(--purple-light)",
    name: "Velora Admin",
    desc: "Ürün, kategori ve stok yönetimini tek panelden kontrol edin.",
    features: ["Ürün & kategori yönetimi", "Stok takibi", "Marka yönetimi", "Çok mağaza desteği"],
  },
  {
    icon: "report", color: "oklch(52% 0.18 210)", bg: "oklch(94% 0.05 210)",
    name: "Velora Reports",
    desc: "Gün sonu kasa ve POS mutabakatını net şekilde görün.",
    features: ["Nakit & kart ayrımı", "Gün sonu raporu", "Satış analizi", "İade takibi"],
  },
];

const Products = () => (
  <section id="products" className="section" style={{ background: "white" }}>
    <div className="container">
      <div style={{ textAlign: "center", marginBottom: 56 }}>
        <div className="tag"><Icon name="sparkle" size={13} />Ürünler</div>
        <h2 className="section-title" style={{ margin: "0 auto 16px" }}>Mağazanız için ihtiyacınız olan her şey tek sistemde</h2>
        <p className="section-sub" style={{ margin: "0 auto" }}>
          Kasiyer satış yaparken, yönetici stok ve raporları takip eder.
          Tüm veriler tek yerde toplanır, dağınıklık ortadan kalkar.
        </p>
      </div>

      <div className="grid-3">
        {products.map((p, i) => (
          <div key={i} style={{
            background: "var(--bg)", border: "1px solid var(--border)", borderRadius: "var(--radius)",
            padding: "32px 28px", transition: "transform 0.2s, box-shadow 0.2s",
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "var(--shadow-lg)"; }}
          onMouseLeave={e => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; }}
          >
            <div style={{
              width: 56, height: 56, borderRadius: 14, background: p.bg,
              display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 20,
            }}>
              <Icon name={p.icon} size={26} color={p.color} />
            </div>
            <h3 style={{ fontSize: 20, fontWeight: 800, color: "var(--navy)", marginBottom: 10 }}>{p.name}</h3>
            <p style={{ color: "var(--muted)", fontSize: 15, lineHeight: 1.65, marginBottom: 24 }}>{p.desc}</p>
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
              {p.features.map((f, j) => (
                <li key={j} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 14, color: "var(--text)", fontWeight: 500 }}>
                  <span style={{
                    width: 20, height: 20, borderRadius: "50%", background: p.bg,
                    display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
                  }}>
                    <Icon name="check" size={11} color={p.color} />
                  </span>
                  {f}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ── FEATURES ── */
const featuresList = [
  { icon: "zap", title: "Hızlı POS Satış Ekranı", desc: "Barkod ile anında ürün arama, sepete ekleme ve ödeme alma." },
  { icon: "box", title: "Stok ve Varyant Takibi", desc: "Renk, beden ve diğer varyantlarla ürün stoklarınızı yönetin." },
  { icon: "tag", title: "Kategori ve Marka Yönetimi", desc: "Ürün hiyerarşinizi düzenli tutun, filtreleme ve raporlama kolaylaşsın." },
  { icon: "partial", title: "Kısmi Ödeme Desteği", desc: "Nakit ve kart ile karma ödeme alın; borç kaydı tutun." },
  { icon: "return", title: "Ürün Bazlı İade Yönetimi", desc: "Sepet içinden tek tek ürün iadesi, stok otomatik güncellenir." },
  { icon: "balance", title: "Gün Sonu Mutabakatı", desc: "Nakit ve kart tahsilatlarını karşılaştırın, gün sonu raporunuzu alın." },
  { icon: "users", title: "Rol Bazlı Kullanıcı Yetkileri", desc: "Kasiyer yalnızca POS görür; yönetici tüm panele erişir." },
  { icon: "store", title: "Çok Mağazalı Mimari", desc: "Her mağaza kendi tenant'ında çalışır; veriler birbirinden yalıtılır." },
  { icon: "cloud", title: "Bulut Tabanlı Erişim", desc: "Mağaza verilerinize internet bağlantısı olan her yerden güvenli şekilde erişin." },
];

const Features = () => (
  <section id="features" className="section">
    <div className="container">
      <div style={{ textAlign: "center", marginBottom: 56 }}>
        <div className="tag purple"><Icon name="sparkle" size={13} />Özellikler</div>
        <h2 className="section-title" style={{ margin: "0 auto 16px" }}>Mağaza operasyonuna odaklı</h2>
        <p className="section-sub" style={{ margin: "0 auto" }}>
          Muhasebe programı değil. Satış, stok ve günlük operasyonu yönetmek için tasarlandı.
        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }} className="features-grid">
        {featuresList.map((f, i) => (
          <div key={i} style={{
            background: "white", border: "1px solid var(--border)", borderRadius: "var(--radius)",
            padding: "28px 24px", transition: "transform 0.2s, box-shadow 0.2s, border-color 0.2s",
          }}
          onMouseEnter={e => {
            e.currentTarget.style.transform = "translateY(-3px)";
            e.currentTarget.style.boxShadow = "var(--shadow-md)";
            e.currentTarget.style.borderColor = "oklch(82% 0.10 252)";
          }}
          onMouseLeave={e => {
            e.currentTarget.style.transform = "";
            e.currentTarget.style.boxShadow = "";
            e.currentTarget.style.borderColor = "var(--border)";
          }}
          >
            <div style={{
              width: 44, height: 44, borderRadius: 11, marginBottom: 16,
              background: "linear-gradient(135deg, oklch(52% 0.20 252 / 0.12), oklch(55% 0.16 285 / 0.12))",
              display: "flex", alignItems: "center", justifyContent: "center",
            }}>
              <Icon name={f.icon} size={22} color="oklch(50% 0.18 268)" />
            </div>
            <h4 style={{ fontSize: 15, fontWeight: 700, color: "var(--navy)", marginBottom: 8 }}>{f.title}</h4>
            <p style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.65 }}>{f.desc}</p>
          </div>
        ))}
      </div>
    </div>
    <style>{`
      @media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2,1fr) !important; } }
      @media (max-width: 600px) { .features-grid { grid-template-columns: 1fr !important; } }
    `}</style>
  </section>
);

/* ── FOR WHO ── */
const audiences = [
  { emoji: "💍", label: "Takı & Aksesuar Mağazaları", desc: "Ürün çeşitliliği ve stok takibini kolaylaştırın." },
  { emoji: "👗", label: "Butikler", desc: "Beden, renk bazlı varyant yönetimi ve hızlı satış." },
  { emoji: "🏪", label: "Perakende Mağazalar", desc: "Kasadan rapora kadar tek sistem." },
  { emoji: "🔗", label: "Zincir Mağazalar", desc: "Çok mağazalı yapı ile merkezden yönetim." },
  { emoji: "📊", label: "Dijitalleşmek İsteyen İşletmeler", desc: "Kağıt defterden modern yazılıma geçin." },
];

const ForWho = () => (
  <section id="for-who" className="section" style={{ background: "white" }}>
    <div className="container">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }} className="forwho-grid">
        <div>
          <div className="tag"><Icon name="users" size={13} />Kimler İçin</div>
          <h2 className="section-title">Her ölçekte perakende mağaza için</h2>
          <p className="section-sub" style={{ marginBottom: 0 }}>
            Tek mağazadan küçük zincire; ister büyük ister küçük olsun, VeloraOne mağaza operasyonunuzu düzene sokar.
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {audiences.map((a, i) => (
            <div key={i} style={{
              display: "flex", gap: 16, alignItems: "flex-start",
              background: "var(--bg)", border: "1px solid var(--border)", borderRadius: "var(--radius-sm)",
              padding: "18px 20px", transition: "transform 0.15s, box-shadow 0.15s",
            }}
            onMouseEnter={e => { e.currentTarget.style.transform = "translateX(4px)"; e.currentTarget.style.boxShadow = "var(--shadow-sm)"; }}
            onMouseLeave={e => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; }}
            >
              <div style={{ fontSize: 24, flexShrink: 0, lineHeight: 1 }}>{a.emoji}</div>
              <div>
                <div style={{ fontWeight: 700, color: "var(--navy)", fontSize: 15, marginBottom: 4 }}>{a.label}</div>
                <div style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.5 }}>{a.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
    <style>{`@media (max-width: 800px) { .forwho-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }`}</style>
  </section>
);

/* ── WHY ── */
const whyItems = [
  { icon: "zap", title: "Operasyona odaklı", desc: "Karmaşık muhasebe programı değil. Satış, stok ve kasa takibini net yapar." },
  { icon: "admin", title: "Her şey tek yerde", desc: "Satış, stok ve raporlama aynı sistemde. Veri dağınıklığı yok." },
  { icon: "users", title: "Rol ayrımı", desc: "Kasiyer yalnızca POS'u görür. Yönetici tüm operasyona hâkim olur." },
  { icon: "balance", title: "Net gün sonu", desc: "Nakit ve kart tahsilatlarınızı her gün net biçimde mutabıkata alın." },
  { icon: "cloud", title: "Modern SaaS yapısı", desc: "Bulut tabanlı, her yerden erişilebilir, büyümeye uygun mimari." },
];

const WhyVelora = () => (
  <section className="section" style={{
    background: "linear-gradient(170deg, oklch(22% 0.08 258) 0%, oklch(28% 0.12 268) 100%)",
  }}>
    <div className="container">
      <div style={{ textAlign: "center", marginBottom: 56 }}>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 6,
          background: "oklch(52% 0.20 252 / 0.2)", color: "oklch(75% 0.15 252)",
          fontSize: 13, fontWeight: 600, padding: "4px 14px", borderRadius: 999,
          letterSpacing: "0.02em", textTransform: "uppercase", marginBottom: 20,
        }}>
          <Icon name="shield" size={13} />Neden VeloraOne
        </div>
        <h2 style={{ fontSize: "clamp(28px, 4vw, 40px)", fontWeight: 800, color: "white", lineHeight: 1.2, marginBottom: 16 }}>
          Mağaza odaklı, sade ve güvenilir
        </h2>
        <p style={{ fontSize: 17, color: "oklch(80% 0.04 258)", maxWidth: 520, margin: "0 auto", lineHeight: 1.7 }}>
          Gereksiz karmaşıklık olmadan; sadece mağaza operasyonunu verimli kılmak için tasarlandı.
        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }} className="why-grid">
        {whyItems.slice(0, 3).map((w, i) => (
          <WhyCard key={i} w={w} />
        ))}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 20, marginTop: 20, maxWidth: 680, margin: "20px auto 0" }} className="why-grid2">
        {whyItems.slice(3).map((w, i) => (
          <WhyCard key={i} w={w} />
        ))}
      </div>
    </div>
    <style>{`
      @media (max-width: 900px) { .why-grid { grid-template-columns: 1fr !important; } .why-grid2 { grid-template-columns: 1fr !important; } }
    `}</style>
  </section>
);

const WhyCard = ({ w }) => (
  <div style={{
    background: "oklch(100% 0 0 / 0.05)", border: "1px solid oklch(100% 0 0 / 0.10)",
    borderRadius: "var(--radius)", padding: "28px 24px",
    transition: "background 0.2s, border-color 0.2s",
  }}
  onMouseEnter={e => { e.currentTarget.style.background = "oklch(100% 0 0 / 0.08)"; e.currentTarget.style.borderColor = "oklch(100% 0 0 / 0.18)"; }}
  onMouseLeave={e => { e.currentTarget.style.background = "oklch(100% 0 0 / 0.05)"; e.currentTarget.style.borderColor = "oklch(100% 0 0 / 0.10)"; }}
  >
    <div style={{
      width: 44, height: 44, borderRadius: 11, marginBottom: 16,
      background: "oklch(52% 0.20 252 / 0.2)",
      display: "flex", alignItems: "center", justifyContent: "center",
    }}>
      <Icon name={w.icon} size={22} color="oklch(72% 0.16 252)" />
    </div>
    <h4 style={{ fontSize: 16, fontWeight: 700, color: "white", marginBottom: 8 }}>{w.title}</h4>
    <p style={{ fontSize: 14, color: "oklch(75% 0.04 258)", lineHeight: 1.65 }}>{w.desc}</p>
  </div>
);

/* ── PRICING ── */
const plans = [
  {
    name: "Başlangıç",
    desc: "Tek mağaza için temel satış, stok ve gün sonu takibi.",
    price: "₺999",
    period: "/ ay",
    features: ["POS satış ekranı", "Ürün ve stok yönetimi", "Gün sonu özeti", "Admin + Kasiyer kullanıcı yapısı", "Standart destek"],
    highlight: false,
  },
  {
    name: "Profesyonel",
    desc: "Büyüyen mağazalar için gelişmiş operasyon ve raporlama.",
    price: "₺1.799",
    period: "/ ay",
    features: ["POS + Admin panel", "Gelişmiş satış ve stok raporları", "Rol bazlı kullanıcı yönetimi", "Kısmi ödeme ve iade takibi", "Öncelikli destek"],
    highlight: true,
    badge: "Önerilen Plan",
  },
  {
    name: "Premium",
    desc: "Daha fazla kontrol, gelişmiş raporlama ve öncelikli destek isteyen işletmeler için.",
    price: "₺2.999",
    period: "/ ay",
    features: ["Tüm POS ve Admin özellikleri", "Gelişmiş raporlama", "Gelişmiş yetkilendirme", "Öncelikli kurulum desteği", "Premium destek"],
    highlight: false,
  },
];

const Pricing = () => (
  <section id="pricing" className="section" style={{ background: "var(--bg)" }}>
    <div className="container">
      <div style={{ textAlign: "center", marginBottom: 56 }}>
        <div className="tag"><Icon name="sparkle" size={13} />Fiyatlandırma</div>
        <h2 className="section-title" style={{ margin: "0 auto 16px" }}>İhtiyacınıza uygun plan</h2>
        <p className="section-sub" style={{ margin: "0 auto" }}>
          VeloraOne paketleri işletmenizin büyüklüğüne ve ihtiyaç duyduğu modüllere göre planlanır. Size en uygun paketi birlikte belirlemek için demo talep edebilirsiniz.
        </p>
      </div>

      <div style={{ textAlign: "center", marginBottom: 40, padding: "20px 24px", background: "white", border: "1px solid var(--border)", borderRadius: 16, maxWidth: 640, margin: "0 auto 48px" }}>
          <p style={{ fontSize: 16, fontWeight: 600, color: "var(--navy)", marginBottom: 16 }}>Size uygun paketi birlikte belirleyelim.</p>
          <div style={{ display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap" }}>
            <a href={APP_URL} target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 7, background: "linear-gradient(135deg, oklch(52% 0.20 252), oklch(55% 0.16 285))", color: "white", padding: "11px 24px", borderRadius: 999, fontSize: 14, fontWeight: 700, textDecoration: "none", boxShadow: "0 4px 14px oklch(52% 0.20 252 / 0.35)" }}><Icon name="login" size={15} />Uygulamaya Giriş</a>
            <a href="#contact" onClick={e => { e.preventDefault(); const el = document.querySelector("#contact"); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" }); }} style={{ display: "inline-flex", alignItems: "center", gap: 7, background: "white", color: "var(--navy)", padding: "11px 24px", borderRadius: 999, fontSize: 14, fontWeight: 700, textDecoration: "none", border: "1.5px solid var(--border)", boxShadow: "var(--shadow-sm)" }}><Icon name="users" size={15} />İletişime Geç</a>
          </div>
        </div>
      <div className="grid-3">
        {plans.map((p, i) => (
          <div key={i} style={{
            background: p.highlight ? "linear-gradient(160deg, oklch(52% 0.20 252), oklch(50% 0.18 268))" : "white",
            border: p.highlight ? "none" : "1.5px solid var(--border)",
            borderRadius: "var(--radius)", padding: "36px 28px",
            boxShadow: p.highlight ? "0 8px 40px oklch(52% 0.20 252 / 0.35)" : "var(--shadow-sm)",
            position: "relative", transition: "transform 0.2s",
          }}
          onMouseEnter={e => e.currentTarget.style.transform = "translateY(-4px)"}
          onMouseLeave={e => e.currentTarget.style.transform = ""}
          >
            {p.badge && (
              <div style={{
                position: "absolute", top: -14, left: "50%", transform: "translateX(-50%)",
                background: "oklch(65% 0.18 60)", color: "white",
                fontSize: 12, fontWeight: 700, padding: "4px 16px", borderRadius: 999,
                whiteSpace: "nowrap",
              }}>{p.badge}</div>
            )}
            <h3 style={{ fontSize: 22, fontWeight: 800, color: p.highlight ? "white" : "var(--navy)", marginBottom: 8 }}>{p.name}</h3>
            <p style={{ fontSize: 14, color: p.highlight ? "oklch(92% 0.05 252)" : "var(--muted)", lineHeight: 1.6, marginBottom: 20 }}>{p.desc}</p>
            <div style={{
              background: p.highlight ? "oklch(100% 0 0 / 0.15)" : "var(--bg)",
              borderRadius: 12, padding: "18px", marginBottom: 24,
              color: p.highlight ? "oklch(95% 0.05 252)" : "var(--navy-mid)",
              textAlign: "center",
            }}>
              <div style={{ fontSize: 34, fontWeight: 900, lineHeight: 1, color: p.highlight ? "white" : "var(--navy)" }}>{p.price}</div>
              <div style={{ fontSize: 14, fontWeight: 700, marginTop: 8, color: p.highlight ? "oklch(92% 0.05 252)" : "var(--muted)" }}>{p.period}</div>
            </div>
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 12, marginBottom: 32 }}>
              {p.features.map((f, j) => (
                <li key={j} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 14, color: p.highlight ? "white" : "var(--text)", fontWeight: 500 }}>
                  <span style={{
                    width: 20, height: 20, borderRadius: "50%",
                    background: p.highlight ? "oklch(100% 0 0 / 0.2)" : "var(--blue-light)",
                    display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
                  }}>
                    <Icon name="check" size={11} color={p.highlight ? "white" : "var(--blue)"} />
                  </span>
                  {f}
                </li>
              ))}
            </ul>
            <a href="#contact" onClick={e => { e.preventDefault(); const el = document.querySelector("#contact"); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" }); }} style={{
              display: "block", textAlign: "center", padding: "14px",
              borderRadius: 12, fontSize: 15, fontWeight: 700, textDecoration: "none", cursor: "pointer",
              background: p.highlight ? "white" : "linear-gradient(135deg, oklch(52% 0.20 252), oklch(55% 0.16 285))",
              color: p.highlight ? "oklch(52% 0.20 252)" : "white",
              transition: "opacity 0.15s",
            }}
            onMouseEnter={e => e.currentTarget.style.opacity = "0.85"}
            onMouseLeave={e => e.currentTarget.style.opacity = "1"}
            >
              Demo Talep Et
            </a>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ── LOGIN CTA ── */
const LoginCTA = () => (
  <section className="section-sm" style={{
    background: "white", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)",
  }}>
    <div className="container">
      <div style={{
        background: "linear-gradient(135deg, oklch(97% 0.015 260), oklch(97% 0.012 285))",
        border: "1px solid var(--border)", borderRadius: 24,
        padding: "56px 48px", textAlign: "center",
        position: "relative", overflow: "hidden",
      }}>
        <div style={{
          position: "absolute", top: -60, right: -60, width: 300, height: 300,
          borderRadius: "50%", background: "radial-gradient(circle, oklch(52% 0.20 252 / 0.08) 0%, transparent 70%)",
          pointerEvents: "none",
        }} />
        <div style={{
          width: 64, height: 64, borderRadius: 16, margin: "0 auto 24px",
          background: "linear-gradient(135deg, oklch(52% 0.20 252), oklch(55% 0.16 285))",
          display: "flex", alignItems: "center", justifyContent: "center",
          boxShadow: "0 4px 20px oklch(52% 0.20 252 / 0.35)",
        }}>
          <Icon name="login" size={28} color="white" />
        </div>
        <h2 style={{ fontSize: "clamp(22px, 3vw, 32px)", fontWeight: 800, color: "var(--navy)", marginBottom: 12 }}>
          Zaten VeloraOne kullanıcısı mısınız?
        </h2>
        <p style={{ fontSize: 16, color: "var(--muted)", maxWidth: 480, margin: "0 auto 32px", lineHeight: 1.7 }}>
          Mağaza panelinize güvenli şekilde giriş yaparak satış, stok ve raporlarınızı yönetebilirsiniz.
        </p>
        <a href={APP_URL} target="_blank" rel="noopener noreferrer" style={{
          display: "inline-flex", alignItems: "center", gap: 10,
          background: "linear-gradient(135deg, oklch(52% 0.20 252), oklch(55% 0.16 285))",
          color: "white", padding: "16px 36px", borderRadius: 999,
          fontSize: 16, fontWeight: 700, textDecoration: "none",
          boxShadow: "0 4px 20px oklch(52% 0.20 252 / 0.40)",
          transition: "transform 0.15s, box-shadow 0.15s",
        }}
        onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "0 8px 30px oklch(52% 0.20 252 / 0.5)"; }}
        onMouseLeave={e => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = "0 4px 20px oklch(52% 0.20 252 / 0.40)"; }}
        >
          <Icon name="login" size={18} />
          Uygulamaya Giriş
        </a>
      </div>
    </div>
  </section>
);

/* ── CONTACT ── */
const Contact = () => {
  const [form, setForm] = useState({ name: "", business: "", phone: "", message: "" });
  const [submitted, setSubmitted] = useState(false);

  const handle = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const submit = (e) => { e.preventDefault(); setSubmitted(true); };

  const inputStyle = {
    width: "100%", padding: "12px 16px", border: "1.5px solid var(--border)",
    borderRadius: 10, fontSize: 15, fontFamily: "inherit", color: "var(--text)",
    background: "var(--bg)", outline: "none", transition: "border-color 0.15s",
  };

  return (
    <section id="contact" className="section" style={{ background: "var(--bg)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "flex-start" }} className="contact-grid">
          <div>
            <div className="tag purple"><Icon name="sparkle" size={13} />İletişim</div>
            <h2 className="section-title">Canlı demo ve detaylı bilgi için bize ulaşın</h2>
            <p className="section-sub">
              Ekibimiz size sistemi canlı gösterir ve işletmenize uygun kurulumu planlar.
            </p>
            <div style={{ marginTop: 40, display: "flex", flexDirection: "column", gap: 20 }}>
              {[
                { icon: "zap", label: "Hızlı yanıt", desc: "İş günlerinde en geç 24 saat içinde dönüş yapıyoruz." },
                { icon: "shield", label: "Güvenli sistem", desc: "Verileriniz güvende; HTTPS ve tenant yalıtımı ile korunur." },
                { icon: "store", label: "Çevrimiçi demo", desc: "Sistemi canlı görmek için demo talep edebilirsiniz." },
              ].map((item, i) => (
                <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: 10, flexShrink: 0,
                    background: "var(--blue-light)", display: "flex", alignItems: "center", justifyContent: "center",
                  }}>
                    <Icon name={item.icon} size={18} color="var(--blue)" />
                  </div>
                  <div>
                    <div style={{ fontWeight: 700, color: "var(--navy)", fontSize: 15 }}>{item.label}</div>
                    <div style={{ fontSize: 14, color: "var(--muted)", marginTop: 3 }}>{item.desc}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ background: "white", border: "1px solid var(--border)", borderRadius: "var(--radius)", padding: "36px 32px", boxShadow: "var(--shadow-md)" }}>
            {submitted ? (
              <div style={{ textAlign: "center", padding: "24px 0" }}>
                <div style={{
                  width: 64, height: 64, borderRadius: "50%", margin: "0 auto 20px",
                  background: "var(--blue-light)", display: "flex", alignItems: "center", justifyContent: "center",
                }}>
                  <Icon name="check" size={28} color="var(--blue)" />
                </div>
                <h3 style={{ fontSize: 20, fontWeight: 700, color: "var(--navy)", marginBottom: 10 }}>Mesajınız alındı!</h3>
                <p style={{ color: "var(--muted)", fontSize: 15, lineHeight: 1.6 }}>
                  En kısa sürede sizinle iletişime geçeceğiz.
                </p>
              </div>
            ) : (
              <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <h3 style={{ fontSize: 18, fontWeight: 700, color: "var(--navy)", marginBottom: 4 }}>Bilgi isteği</h3>
                {[
                  { key: "name", label: "Ad Soyad", type: "text", placeholder: "Adınız Soyadınız" },
                  { key: "business", label: "İşletme Adı", type: "text", placeholder: "Mağaza / Şirket adı" },
                  { key: "phone", label: "Telefon", type: "tel", placeholder: "0 5XX XXX XX XX" },
                ].map(f => (
                  <div key={f.key}>
                    <label style={{ display: "block", fontSize: 13, fontWeight: 600, color: "var(--navy-mid)", marginBottom: 6 }}>{f.label}</label>
                    <input type={f.type} placeholder={f.placeholder} value={form[f.key]}
                      onChange={e => handle(f.key, e.target.value)}
                      required style={inputStyle}
                      onFocus={e => e.target.style.borderColor = "var(--blue)"}
                      onBlur={e => e.target.style.borderColor = "var(--border)"}
                    />
                  </div>
                ))}
                <div>
                  <label style={{ display: "block", fontSize: 13, fontWeight: 600, color: "var(--navy-mid)", marginBottom: 6 }}>Mesajınız (isteğe bağlı)</label>
                  <textarea rows={3} placeholder="İhtiyaçlarınızı kısaca belirtin..." value={form.message}
                    onChange={e => handle("message", e.target.value)}
                    style={{ ...inputStyle, resize: "vertical", lineHeight: 1.6 }}
                    onFocus={e => e.target.style.borderColor = "var(--blue)"}
                    onBlur={e => e.target.style.borderColor = "var(--border)"}
                  />
                </div>
                <button type="submit" style={{
                  width: "100%", padding: "14px",
                  background: "linear-gradient(135deg, oklch(52% 0.20 252), oklch(55% 0.16 285))",
                  color: "white", border: "none", borderRadius: 12,
                  fontSize: 15, fontWeight: 700, cursor: "pointer",
                  fontFamily: "inherit", transition: "opacity 0.15s",
                }}
                onMouseEnter={e => e.currentTarget.style.opacity = "0.88"}
                onMouseLeave={e => e.currentTarget.style.opacity = "1"}
                >
                  Gönder
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }`}</style>
    </section>
  );
};

/* ── TRUST BAR ── */
const TrustBar = () => (
  <section style={{
    background: "linear-gradient(135deg, oklch(22% 0.08 258), oklch(28% 0.12 268))",
    padding: "48px 0",
  }}>
    <div className="container" style={{ textAlign: "center" }}>
      <p style={{ fontSize: 19, fontWeight: 700, color: "white", marginBottom: 8, lineHeight: 1.5 }}>
        VeloraOne, gerçek mağaza operasyonları için geliştirilmiştir.
      </p>
      <p style={{ fontSize: 15, color: "oklch(75% 0.04 258)", marginBottom: 32 }}>
        Satış, stok ve kasa süreçlerinizi tek sistemde güvenle yönetin.
      </p>
      <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
        <a href="http://app.veloraone.com.tr" target="_blank" rel="noopener noreferrer" style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          background: "linear-gradient(135deg, oklch(52% 0.20 252), oklch(55% 0.16 285))",
          color: "white", padding: "13px 30px", borderRadius: 999,
          fontSize: 15, fontWeight: 700, textDecoration: "none",
          boxShadow: "0 4px 16px oklch(52% 0.20 252 / 0.4)",
        }}>
          <Icon name="login" size={16} />Uygulamaya Giriş
        </a>
        <a href="#contact" onClick={e => { e.preventDefault(); const el = document.querySelector("#contact"); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" }); }} style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          background: "oklch(100% 0 0 / 0.08)", border: "1px solid oklch(100% 0 0 / 0.18)",
          color: "white", padding: "13px 30px", borderRadius: 999,
          fontSize: 15, fontWeight: 700, textDecoration: "none",
        }}>
          <Icon name="sparkle" size={16} />Demo Talep Et
        </a>
      </div>
    </div>
  </section>
);

/* ── FOOTER ── */
const Footer = () => {
  const scrollTo = (href) => {
    const el = document.querySelector(href);
    if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 80; window.scrollTo({ top: y, behavior: "smooth" }); }
  };

  return (
    <footer style={{ background: "var(--navy)", color: "white", paddingTop: 64, paddingBottom: 32 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 48, marginBottom: 48 }} className="footer-grid">
          <div>
            <Logo size="md" />
            <p style={{ marginTop: 16, fontSize: 14, color: "oklch(72% 0.04 258)", lineHeight: 1.7, maxWidth: 280 }}>
              Perakende mağazalar için tasarlanmış modern yazılım. Satış, stok ve yönetim tek panelde.
            </p>
          </div>
          <div>
            <h4 style={{ fontSize: 13, fontWeight: 700, color: "oklch(85% 0.06 258)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 16 }}>Ürünler</h4>
            {["Velora POS", "Velora Admin", "Velora Reports"].map(l => (
              <div key={l} style={{ marginBottom: 10 }}>
                <a href="#products" onClick={e => { e.preventDefault(); scrollTo("#products"); }} style={{ color: "oklch(72% 0.04 258)", fontSize: 14, textDecoration: "none", transition: "color 0.15s" }}
                  onMouseEnter={e => e.target.style.color = "white"} onMouseLeave={e => e.target.style.color = "oklch(72% 0.04 258)"}
                >{l}</a>
              </div>
            ))}
          </div>
          <div>
            <h4 style={{ fontSize: 13, fontWeight: 700, color: "oklch(85% 0.06 258)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 16 }}>Bağlantılar</h4>
            {[
              { label: "Özellikler", href: "#features" },
              { label: "Fiyatlandırma", href: "#pricing" },
              { label: "İletişim", href: "#contact" },
            ].map(l => (
              <div key={l.label} style={{ marginBottom: 10 }}>
                <a href={l.href} onClick={e => { e.preventDefault(); scrollTo(l.href); }} style={{ color: "oklch(72% 0.04 258)", fontSize: 14, textDecoration: "none", transition: "color 0.15s" }}
                  onMouseEnter={e => e.target.style.color = "white"} onMouseLeave={e => e.target.style.color = "oklch(72% 0.04 258)"}
                >{l.label}</a>
              </div>
            ))}
          </div>
          <div>
            <h4 style={{ fontSize: 13, fontWeight: 700, color: "oklch(85% 0.06 258)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 16 }}>Uygulama</h4>
            <a href={APP_URL} target="_blank" rel="noopener noreferrer" style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              background: "linear-gradient(135deg, oklch(52% 0.20 252), oklch(55% 0.16 285))",
              color: "white", padding: "12px 20px", borderRadius: 10,
              fontSize: 14, fontWeight: 700, textDecoration: "none",
            }}>
              <Icon name="login" size={15} />
              Uygulamaya Giriş
            </a>
          </div>
        </div>

        <div style={{ borderTop: "1px solid oklch(100% 0 0 / 0.08)", paddingTop: 28, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
          <p style={{ fontSize: 13, color: "oklch(55% 0.04 258)" }}>© 2026 VeloraOne. Tüm hakları saklıdır.</p>
          <p style={{ fontSize: 13, color: "oklch(55% 0.04 258)" }}>Modern Perakende Yazılımı</p>
        </div>
      </div>
      <style>{`@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
    </footer>
  );
};

/* ── APP SCREENSHOTS ── */

/* Shared sidebar nav */
const AppSidebar = ({ active }) => {
  const navItems = [
    { id: "dashboard", label: "Dashboard", icon: <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg> },
    { id: "pos", label: "POS", icon: <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg> },
    { id: "urunler", label: "Ürünler", icon: <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg> },
    { id: "kategoriler", label: "Kategoriler", icon: <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg> },
    { id: "markalar", label: "Markalar", icon: <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg> },
    { id: "satislar", label: "Satışlar", icon: <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg> },
    { id: "raporlar", label: "Raporlar", icon: <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M18 20V10M12 20V4M6 20v-6"/></svg> },
    { id: "ayarlar", label: "Ayarlar", icon: <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg> },
    { id: "magazalar", label: "Mağazalar", icon: <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M3 9l1.5-6h15L21 9"/><path d="M3 9a2 2 0 0 0 4 0 2 2 0 0 0 4 0 2 2 0 0 0 4 0 2 2 0 0 0 4 0"/><path d="M5 9v12h14V9"/></svg> },
  ];
  return (
    <div style={{ width: 192, background: "#14172a", display: "flex", flexDirection: "column", flexShrink: 0, height: "100%" }}>
      {/* Logo */}
      <div style={{ padding: "18px 16px 14px", display: "flex", alignItems: "center", gap: 9 }}>
        <div style={{ width: 30, height: 30, borderRadius: 8, background: "linear-gradient(135deg, #5b6af0, #8b5cf6)", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <svg width="16" height="16" viewBox="0 0 18 18" fill="none"><path d="M9 2L14.5 5.5V12.5L9 16L3.5 12.5V5.5L9 2Z" fill="white" fillOpacity="0.9"/><path d="M6 9l2 2 4-4" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </div>
        <span style={{ color: "white", fontWeight: 800, fontSize: 16, letterSpacing: "-0.02em" }}>velora</span>
        <svg style={{ marginLeft: "auto", opacity: 0.4 }} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
      </div>
      {/* Nav */}
      <nav style={{ flex: 1, padding: "4px 10px", display: "flex", flexDirection: "column", gap: 2 }}>
        {navItems.map(item => {
          const isActive = item.id === active;
          return (
            <div key={item.id} style={{
              display: "flex", alignItems: "center", gap: 9, padding: "8px 10px", borderRadius: 8,
              background: isActive ? "rgba(91,106,240,0.18)" : "transparent",
              color: isActive ? "#818cf8" : "rgba(255,255,255,0.48)",
              fontSize: 13, fontWeight: isActive ? 700 : 500, cursor: "pointer",
            }}>
              <span style={{ color: isActive ? "#818cf8" : "rgba(255,255,255,0.38)" }}>{item.icon}</span>
              {item.label}
              {isActive && <div style={{ marginLeft: "auto", width: 6, height: 6, borderRadius: "50%", background: "#818cf8" }} />}
            </div>
          );
        })}
      </nav>
      {/* User */}
      <div style={{ padding: "12px 10px", borderTop: "1px solid rgba(255,255,255,0.06)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 9, padding: "8px 10px", borderRadius: 8 }}>
          <div style={{ width: 28, height: 28, borderRadius: "50%", background: "linear-gradient(135deg, #5b6af0, #8b5cf6)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
            <span style={{ color: "white", fontSize: 11, fontWeight: 700 }}>T</span>
          </div>
          <div>
            <div style={{ color: "white", fontSize: 12, fontWeight: 600, lineHeight: 1.2 }}>TestTenant</div>
            <div style={{ color: "rgba(255,255,255,0.38)", fontSize: 10 }}>Mağaza Onemi/Admin</div>
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 9, padding: "7px 10px", cursor: "pointer" }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.35)" strokeWidth="2" strokeLinecap="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
          <span style={{ color: "rgba(255,255,255,0.35)", fontSize: 12 }}>Çıkış</span>
        </div>
      </div>
    </div>
  );
};

/* Header bar */
const AppHeader = ({ title, subtitle, date = "25.04.2026", extra = null }) => (
  <div style={{ padding: "16px 24px", background: "white", borderBottom: "1px solid #f0f2f8", display: "flex", alignItems: "center", justifyContent: "space-between", flexShrink: 0 }}>
    <div>
      <div style={{ fontSize: 18, fontWeight: 800, color: "#14172a" }}>{title}</div>
      {subtitle && <div style={{ fontSize: 12, color: "#94a3b8", marginTop: 1 }}>{subtitle}</div>}
    </div>
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      {extra}
      <div style={{ background: "#f8fafc", border: "1px solid #e9ecf5", borderRadius: 8, padding: "6px 12px", fontSize: 12, color: "#64748b", fontWeight: 500 }}>{date}</div>
      <div style={{ width: 32, height: 32, borderRadius: "50%", background: "linear-gradient(135deg, #5b6af0, #8b5cf6)", display: "flex", alignItems: "center", justifyContent: "center" }}>
        <span style={{ color: "white", fontSize: 12, fontWeight: 700 }}>T</span>
      </div>
    </div>
  </div>
);

/* Badge */
const Badge = ({ label, color }) => {
  const colors = {
    green: { bg: "#dcfce7", text: "#16a34a" },
    blue: { bg: "#dbeafe", text: "#2563eb" },
    teal: { bg: "#ccfbf1", text: "#0d9488" },
    red: { bg: "#fee2e2", text: "#dc2626" },
    orange: { bg: "#ffedd5", text: "#ea580c" },
    purple: { bg: "#ede9fe", text: "#7c3aed" },
    gray: { bg: "#f1f5f9", text: "#64748b" },
  };
  const c = colors[color] || colors.gray;
  return <span style={{ background: c.bg, color: c.text, fontSize: 11, fontWeight: 700, padding: "2px 10px", borderRadius: 999, whiteSpace: "nowrap" }}>{label}</span>;
};

/* ── DASHBOARD SCREEN ── */
const DashboardScreen = () => (
  <div style={{ display: "flex", height: "100%", fontFamily: "'Plus Jakarta Sans',sans-serif", fontSize: 13, overflow: "hidden" }}>
    <AppSidebar active="dashboard" />
    <div style={{ flex: 1, display: "flex", flexDirection: "column", background: "#f8fafc", overflow: "hidden" }}>
      <AppHeader title="Dashboard" subtitle="Mağazanızın bugünkü performansı" extra={
        <span style={{ background: "#f8fafc", border: "1px solid #e9ecf5", borderRadius: 8, padding: "5px 12px", fontSize: 11, color: "#5b6af0", fontWeight: 700, cursor: "pointer" }}>Detayları Gör</span>
      } />
      <div style={{ flex: 1, padding: "18px 24px", overflow: "hidden", display: "flex", flexDirection: "column", gap: 16 }}>
        {/* Stat cards */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12 }}>
          {[
            { label: "Bugünkü Satış", val: "₺10.000,00", sub: "Bugün tamamlanan satış", icon: "₺", iconBg: "#dbeafe", iconColor: "#2563eb", badge: null, badgeColor: null },
            { label: "İşlem Sayısı", val: "8", sub: "Bugün tamamlanan satış", icon: "#", iconBg: "#e0f2fe", iconColor: "#0284c7", badge: null, badgeColor: null },
            { label: "Düşük Stok", val: "5", sub: "Yenilenmesi gereken", icon: "!", iconBg: "#ffedd5", iconColor: "#ea580c", badge: "Dikkat", badgeColor: "orange" },
            { label: "Stokta Yok", val: "9", sub: "Yönetim gerekiyor", icon: "×", iconBg: "#fee2e2", iconColor: "#dc2626", badge: "Acil", badgeColor: "red" },
          ].map((s, i) => (
            <div key={i} style={{ background: "white", border: "1px solid #e9ecf5", borderRadius: 12, padding: "16px" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 10 }}>
                <div style={{ width: 34, height: 34, borderRadius: 9, background: s.iconBg, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 14, fontWeight: 800, color: s.iconColor }}>{s.icon}</div>
                {s.badge && <Badge label={s.badge} color={s.badgeColor} />}
              </div>
              <div style={{ fontSize: 11, color: "#94a3b8", fontWeight: 500, marginBottom: 4 }}>{s.label}</div>
              <div style={{ fontSize: 20, fontWeight: 800, color: "#14172a", lineHeight: 1.1 }}>{s.val}</div>
              <div style={{ fontSize: 10, color: "#cbd5e1", marginTop: 4 }}>{s.sub}</div>
            </div>
          ))}
        </div>
        {/* Bottom row */}
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 12, flex: 1, minHeight: 0 }}>
          {/* Sales chart */}
          <div style={{ background: "white", border: "1px solid #e9ecf5", borderRadius: 12, padding: "16px", display: "flex", flexDirection: "column" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
              <div>
                <div style={{ fontWeight: 700, color: "#14172a", fontSize: 13 }}>Günlük Satış Grafiği</div>
                <div style={{ fontSize: 11, color: "#94a3b8" }}>Bugünkü satış akışını göster</div>
              </div>
              <span style={{ background: "#dcfce7", color: "#16a34a", fontSize: 11, fontWeight: 700, padding: "3px 10px", borderRadius: 999 }}>Bugün</span>
            </div>
            <div style={{ fontSize: 22, fontWeight: 800, color: "#14172a", marginBottom: 2 }}>₺10.000,00</div>
            <div style={{ fontSize: 11, color: "#94a3b8", marginBottom: 14 }}>Bugün şimdiye kadar tamamlanan toplam satış</div>
            <div style={{ flex: 1, display: "flex", alignItems: "flex-end", gap: 5, minHeight: 60 }}>
              {[20, 45, 30, 80, 55, 70, 40, 90, 60, 75, 50, 100].map((h, i) => (
                <div key={i} style={{ flex: 1, borderRadius: "3px 3px 0 0", background: i === 11 ? "#5b6af0" : "#e0e7ff", height: `${h}%`, minWidth: 0 }} />
              ))}
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6 }}>
              {["08:00", "10:00", "12:00", "14:00", "16:00", "18:00"].map(t => (
                <div key={t} style={{ fontSize: 9, color: "#cbd5e1" }}>{t}</div>
              ))}
            </div>
          </div>
          {/* Son satışlar */}
          <div style={{ background: "white", border: "1px solid #e9ecf5", borderRadius: 12, padding: "16px", display: "flex", flexDirection: "column" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
              <div style={{ fontWeight: 700, color: "#14172a", fontSize: 13 }}>Son Satışlar</div>
              <span style={{ background: "#dcfce7", color: "#16a34a", fontSize: 11, fontWeight: 700, padding: "2px 9px", borderRadius: 999 }}>Bugün</span>
            </div>
            {[
              { name: "MermerOcean", type: "Satış", price: "₺6.900,00" },
              { name: "Taşlı Kolye", type: "Satış", price: "₺6.400,00" },
              { name: "Yüzük-2", type: "Satış", price: "₺6.800,00" },
            ].map((s, i) => (
              <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "9px 0", borderBottom: i < 2 ? "1px solid #f1f5f9" : "none" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
                  <div style={{ width: 8, height: 8, borderRadius: "50%", background: "#5b6af0" }} />
                  <span style={{ fontSize: 12, color: "#334155", fontWeight: 500 }}>{s.name}</span>
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <Badge label="Nakit" color="teal" />
                  <span style={{ fontWeight: 700, color: "#14172a", fontSize: 12 }}>{s.price}</span>
                </div>
              </div>
            ))}
          </div>
          {/* En çok satan */}
          <div style={{ background: "white", border: "1px solid #e9ecf5", borderRadius: 12, padding: "16px", display: "flex", flexDirection: "column" }}>
            <div style={{ fontWeight: 700, color: "#14172a", fontSize: 13, marginBottom: 14 }}>En Çok Satan</div>
            <div style={{ background: "#f8fafc", borderRadius: 10, padding: "12px", marginBottom: 10 }}>
              <div style={{ display: "flex", gap: 6, marginBottom: 10 }}>
                <span style={{ background: "#fef3c7", color: "#d97706", fontSize: 10, fontWeight: 700, padding: "2px 8px", borderRadius: 999 }}>TOP SATIŞ</span>
                <span style={{ background: "#dbeafe", color: "#2563eb", fontSize: 10, fontWeight: 700, padding: "2px 8px", borderRadius: 999 }}>HT SATIŞ</span>
              </div>
              <div style={{ fontWeight: 800, color: "#14172a", fontSize: 14, marginBottom: 4 }}>Ajda Bileklik 1</div>
              <div style={{ fontSize: 11, color: "#94a3b8", marginBottom: 12 }}>Bugünkü en çok satan ürün</div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
                <div style={{ background: "white", borderRadius: 8, padding: "8px 10px" }}>
                  <div style={{ fontSize: 10, color: "#94a3b8" }}>Satış</div>
                  <div style={{ fontWeight: 700, color: "#14172a" }}>4 adet</div>
                </div>
                <div style={{ background: "white", borderRadius: 8, padding: "8px 10px" }}>
                  <div style={{ fontSize: 10, color: "#94a3b8" }}>Gelir</div>
                  <div style={{ fontWeight: 700, color: "#5b6af0" }}>₺2.000,00</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

/* ── POS SCREEN (animated demo) ── */
const DEMO_PRODUCTS = [
  { name: "Ajda Bileklik 1", brand: "Stainless Steel", price: 500, priceStr: "₺500,00", stock: 5, icon: "🔗", iconColor: "#e0e7ff" },
  { name: "Gold Halka Küpe", brand: "Stainless Steel", price: 600, priceStr: "₺600,00", stock: 97, icon: "⭐", iconColor: "#fef3c7" },
  { name: "MermerOcean Kolye", brand: "Stainless Steel", price: 400, priceStr: "₺400,00", stock: 18, icon: "🔗", iconColor: "#e0e7ff" },
  { name: "İnci Küpe", brand: "Daynayıya", price: 300, priceStr: "₺300,00", stock: 31, icon: "♀", iconColor: "#fce7f3" },
  { name: "Silver Bileklik", brand: "Rating", price: 900, priceStr: "₺900,00", stock: 41, icon: "🔗", iconColor: "#dbeafe" },
  { name: "Charm Bileklik", brand: "Stainless Steel", price: 400, priceStr: "₺400,00", stock: 34, icon: "🔗", iconColor: "#e0e7ff" },
  { name: "Petek Kolye", brand: "Rating", price: 600, priceStr: "₺600,00", stock: 34, icon: "🔗", iconColor: "#ede9fe" },
  { name: "Günlük Küpe", brand: "Daynayıya", price: 200, priceStr: "₺200,00", stock: 1, icon: "⭐", iconColor: "#fef3c7" },
];

const DEMO_CATS = ["Tümü","Kolye","Bileklik","Küpe","Yüzük","Aksesuar","Şal"];
const PAY_METHODS = [
  { key: "nakit", label: "Nakit", color: "#10b981", bg: "#dcfce7" },
  { key: "kart", label: "Kart", color: "#3b82f6", bg: "#dbeafe" },
  { key: "kismi", label: "Kısmi", color: "#f59e0b", bg: "#fef3c7" },
];

// Demo timeline steps (ms from start)
const TIMELINE = [
  { at: 800,  action: "hover", idx: 0 },
  { at: 1600, action: "add",   idx: 0 },
  { at: 2600, action: "hover", idx: 1 },
  { at: 3400, action: "add",   idx: 1 },
  { at: 4400, action: "hover", idx: 3 },
  { at: 5200, action: "add",   idx: 3 },
  { at: 6400, action: "pay",   method: "nakit" },
  { at: 7400, action: "processing" },
  { at: 8600, action: "success" },
  { at: 10800, action: "reset" },
  // loop 2 — kart
  { at: 11600, action: "hover", idx: 2 },
  { at: 12400, action: "add",   idx: 2 },
  { at: 13400, action: "hover", idx: 4 },
  { at: 14200, action: "add",   idx: 4 },
  { at: 15200, action: "hover", idx: 0 },
  { at: 16000, action: "add",   idx: 0 },
  { at: 17200, action: "pay",   method: "kart" },
  { at: 18200, action: "processing" },
  { at: 19400, action: "success" },
  { at: 21600, action: "reset" },
  // loop 3 — kısmi (modal)
  { at: 22400, action: "hover", idx: 5 },
  { at: 23200, action: "add",   idx: 5 },
  { at: 24200, action: "hover", idx: 2 },
  { at: 25000, action: "add",   idx: 2 },
  { at: 26000, action: "hover", idx: 7 },
  { at: 26800, action: "add",   idx: 7 },
  { at: 28000, action: "pay",   method: "kismi" },
  { at: 28400, action: "kismiModal" },           // open modal
  { at: 29400, action: "kismiTypeCash", val: 600 },  // type cash amount
  { at: 30400, action: "kismiTypeCard" },         // auto-fill card
  { at: 31600, action: "kismiConfirm" },          // confirm
  { at: 32000, action: "processing" },
  { at: 33200, action: "success" },
  { at: 35400, action: "restart" },
];

const POSScreen = () => {
  const [hoveredIdx, setHoveredIdx] = useState(null);
  const [cart, setCart] = useState([]);
  const [activePayment, setActivePayment] = useState(null);
  const [phase, setPhase] = useState("browsing"); // browsing | processing | success
  const [newItemIdx, setNewItemIdx] = useState(null);
  const [kismiModal, setKismiModal] = useState(false);
  const [kismiCash, setKismiCash] = useState(0);
  const [kismiCard, setKismiCard] = useState(0);
  const [kismiConfirming, setKismiConfirming] = useState(false);

  const fmt = (n) => "₺" + Number(n).toLocaleString("tr-TR", { minimumFractionDigits: 2 });
  const total = cart.reduce((s, i) => s + i.price * i.qty, 0);

  useEffect(() => {
    let timers = [];
    const run = () => {
      timers.forEach(clearTimeout);
      timers = [];
      TIMELINE.forEach(step => {
        const t = setTimeout(() => {
          if (step.action === "hover") setHoveredIdx(step.idx);
          if (step.action === "add") {
            setNewItemIdx(step.idx);
            setCart(prev => {
              const existing = prev.find(x => x.idx === step.idx);
              if (existing) return prev.map(x => x.idx === step.idx ? { ...x, qty: x.qty + 1 } : x);
              return [...prev, { ...DEMO_PRODUCTS[step.idx], idx: step.idx, qty: 1 }];
            });
            setTimeout(() => setNewItemIdx(null), 500);
            setHoveredIdx(null);
          }
          if (step.action === "pay") setActivePayment(step.method);
          if (step.action === "kismiModal") setKismiModal(true);
          if (step.action === "kismiTypeCash") { setKismiCash(step.val); setKismiCard(0); }
          if (step.action === "kismiTypeCard") {
            setCart(prev => {
              const t = prev.reduce((s, i) => s + i.price * i.qty, 0);
              setKismiCard(t - 600);
              return prev;
            });
          }
          if (step.action === "kismiConfirm") { setKismiConfirming(true); }
          if (step.action === "processing") { setKismiModal(false); setKismiConfirming(false); setPhase("processing"); }
          if (step.action === "success") setPhase("success");
          if (step.action === "reset") {
            setCart([]); setActivePayment(null); setPhase("browsing"); setHoveredIdx(null);
            setKismiModal(false); setKismiCash(0); setKismiCard(0); setKismiConfirming(false);
          }
          if (step.action === "restart") {
            setCart([]); setActivePayment(null); setPhase("browsing"); setHoveredIdx(null);
            setKismiModal(false); setKismiCash(0); setKismiCard(0); setKismiConfirming(false);
            setTimeout(run, 200);
          }
        }, step.at);
        timers.push(t);
      });
    };
    run();
    return () => timers.forEach(clearTimeout);
  }, []);

  return (
    <div style={{ display: "flex", height: "100%", fontFamily: "'Plus Jakarta Sans',sans-serif", fontSize: 12, overflow: "hidden", background: "#f8fafc", position: "relative" }}>
      <style>{`
        @keyframes slideInCart { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }
        @keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.06); } }
        @keyframes successPop { 0% { opacity:0; transform:scale(0.8); } 60% { transform:scale(1.05); } 100% { opacity:1; transform:scale(1); } }
        @keyframes spin { to { transform:rotate(360deg); } }
        @keyframes addBounce { 0%,100% { transform:scale(1); } 40% { transform:scale(0.88); } 70% { transform:scale(1.08); } }
      `}</style>

      <AppSidebar active="pos" />

      <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
        {/* Topbar */}
        <div style={{ background: "white", borderBottom: "1px solid #f0f2f8", padding: "10px 20px", display: "flex", alignItems: "center", gap: 12, flexShrink: 0 }}>
          <div style={{ flex: 1, background: "#f8fafc", border: "1px solid #e9ecf5", borderRadius: 8, padding: "7px 12px", color: "#94a3b8", fontSize: 12, display: "flex", alignItems: "center", gap: 8 }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" strokeWidth="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
            Ürün adı veya barkod oku...
          </div>
          <div style={{ background: "#10b981", color: "white", padding: "7px 16px", borderRadius: 8, fontWeight: 700, fontSize: 12 }}>Hızlı Satış</div>
          <div style={{ color: "#64748b", fontSize: 11 }}>18:02</div>
          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
            <div style={{ width: 26, height: 26, borderRadius: "50%", background: "linear-gradient(135deg,#5b6af0,#8b5cf6)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <span style={{ color: "white", fontSize: 10, fontWeight: 700 }}>T</span>
            </div>
            <span style={{ fontSize: 11, fontWeight: 600, color: "#334155" }}>TestTenant</span>
          </div>
        </div>
        {/* Category tabs */}
        <div style={{ background: "white", borderBottom: "1px solid #f0f2f8", padding: "7px 16px", display: "flex", gap: 6, flexShrink: 0, overflowX: "auto" }}>
          {DEMO_CATS.map((c, i) => (
            <div key={c} style={{ padding: "4px 12px", borderRadius: 999, background: i === 0 ? "#10b981" : "#f1f5f9", color: i === 0 ? "white" : "#64748b", fontWeight: 600, fontSize: 11, whiteSpace: "nowrap" }}>{c}</div>
          ))}
        </div>
        {/* Product grid */}
        <div style={{ flex: 1, padding: "12px 14px", overflowY: "auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 10 }}>
            {DEMO_PRODUCTS.map((p, i) => {
              const isHovered = hoveredIdx === i;
              const isNew = newItemIdx === i;
              return (
                <div key={i} style={{
                  background: "white",
                  border: isHovered ? "2px solid #5b6af0" : "1px solid #e9ecf5",
                  borderRadius: 10, padding: "11px 10px", cursor: "pointer",
                  boxShadow: isHovered ? "0 4px 20px rgba(91,106,240,0.18)" : "none",
                  transform: isHovered ? "translateY(-2px)" : "none",
                  animation: isNew ? "addBounce 0.4s ease" : "none",
                  transition: "border 0.2s, box-shadow 0.2s, transform 0.2s",
                  position: "relative",
                }}>
                  {isHovered && (
                    <div style={{
                      position: "absolute", top: 8, right: 8, width: 20, height: 20,
                      background: "#5b6af0", borderRadius: "50%",
                      display: "flex", alignItems: "center", justifyContent: "center",
                      animation: "pulse 0.6s ease infinite",
                    }}>
                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3"><path d="M12 5v14M5 12h14"/></svg>
                    </div>
                  )}
                  <div style={{ width: "100%", aspectRatio: "1", borderRadius: 8, background: p.iconColor, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22, marginBottom: 8 }}>{p.icon}</div>
                  <div style={{ fontWeight: 700, color: "#1e293b", fontSize: 11, marginBottom: 2, lineHeight: 1.3 }}>{p.name}</div>
                  <div style={{ fontSize: 10, color: "#94a3b8", marginBottom: 5 }}>{p.brand}</div>
                  <div style={{ fontWeight: 800, color: "#5b6af0", fontSize: 12 }}>{p.priceStr}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Cart panel */}
      <div style={{ width: 232, background: "white", borderLeft: "1px solid #f0f2f8", display: "flex", flexDirection: "column", flexShrink: 0, position: "relative" }}>
        {/* Success overlay */}
        {phase === "success" && (
          <div style={{
            position: "absolute", inset: 0, background: "white", zIndex: 10,
            display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 12,
            animation: "successPop 0.4s ease",
          }}>
            <div style={{ width: 64, height: 64, borderRadius: "50%", background: "#dcfce7", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#16a34a" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
            <div style={{ fontWeight: 800, color: "#14172a", fontSize: 16 }}>Satış Tamamlandı!</div>
            <div style={{ background: (() => { const m = PAY_METHODS.find(p => p.key === activePayment); return m ? m.bg : "#f1f5f9"; })(), color: (() => { const m = PAY_METHODS.find(p => p.key === activePayment); return m ? m.color : "#64748b"; })(), fontWeight: 700, fontSize: 13, padding: "6px 18px", borderRadius: 999 }}>
              {fmt(total)} · {PAY_METHODS.find(p => p.key === activePayment)?.label}
            </div>
            <div style={{ fontSize: 11, color: "#94a3b8" }}>Fiş yazdırılıyor...</div>
          </div>
        )}

        {/* Processing overlay */}
        {phase === "processing" && (
          <div style={{
            position: "absolute", inset: 0, background: "rgba(255,255,255,0.95)", zIndex: 10,
            display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 14,
          }}>
            <div style={{ width: 40, height: 40, border: "3px solid #e9ecf5", borderTopColor: "#5b6af0", borderRadius: "50%", animation: "spin 0.8s linear infinite" }} />
            <div style={{ fontWeight: 700, color: "#14172a", fontSize: 14 }}>İşleniyor...</div>
          </div>
        )}

        <div style={{ padding: "12px 14px", borderBottom: "1px solid #f0f2f8", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ fontWeight: 800, color: "#14172a", fontSize: 14 }}>Sepet</div>
          {cart.length > 0 && <span style={{ background: "#5b6af0", color: "white", fontSize: 11, fontWeight: 700, padding: "2px 9px", borderRadius: 999 }}>{cart.length} ürün</span>}
        </div>

        <div style={{ flex: 1, overflowY: "auto", padding: "8px 10px", display: "flex", flexDirection: "column", gap: 6 }}>
          {cart.length === 0 ? (
            <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 8, padding: 20 }}>
              <div style={{ fontSize: 32 }}>🛒</div>
              <div style={{ fontWeight: 700, color: "#94a3b8", fontSize: 12, textAlign: "center" }}>Sepet boş</div>
              <div style={{ fontSize: 10, color: "#cbd5e1", textAlign: "center" }}>Ürüne tıklayarak ekleyin</div>
            </div>
          ) : cart.map((item, i) => (
            <div key={item.idx} style={{
              background: "#f8fafc", borderRadius: 8, padding: "8px 10px",
              display: "flex", alignItems: "center", gap: 8,
              animation: "slideInCart 0.3s ease",
              border: "1px solid #f0f2f8",
            }}>
              <div style={{ width: 30, height: 30, borderRadius: 6, background: item.iconColor, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 14, flexShrink: 0 }}>{item.icon}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 700, color: "#1e293b", fontSize: 10, lineHeight: 1.3, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{item.name}</div>
                <div style={{ fontSize: 10, color: "#94a3b8" }}>x{item.qty}</div>
              </div>
              <div style={{ fontWeight: 800, color: "#5b6af0", fontSize: 11, flexShrink: 0 }}>{fmt(item.price * item.qty)}</div>
            </div>
          ))}
        </div>

        <div style={{ padding: "10px 14px", borderTop: "1px solid #f0f2f8", display: "flex", flexDirection: "column", gap: 8 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <span style={{ color: "#94a3b8", fontSize: 11 }}>Toplam</span>
            <span style={{ fontWeight: 800, color: "#14172a", fontSize: 16 }}>{fmt(total)}</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 6 }}>
            {PAY_METHODS.map(m => (
              <div key={m.key} style={{
                padding: "9px 0", borderRadius: 8, textAlign: "center",
                fontWeight: 700, fontSize: 11, cursor: "pointer",
                background: activePayment === m.key ? m.color : "#f8fafc",
                color: activePayment === m.key ? "white" : "#64748b",
                border: activePayment === m.key ? "none" : "1px solid #e9ecf5",
                transition: "all 0.3s ease",
                transform: activePayment === m.key ? "scale(1.04)" : "scale(1)",
                boxShadow: activePayment === m.key ? `0 4px 14px ${m.color}55` : "none",
              }}>{m.label}</div>
            ))}
          </div>
        </div>
      </div>
      {/* Kısmi Ödeme Modal */}
      {kismiModal && (
        <div style={{
          position: "absolute", inset: 0, zIndex: 20,
          background: "rgba(14,17,40,0.45)", backdropFilter: "blur(4px)",
          display: "flex", alignItems: "center", justifyContent: "center",
          animation: "modalIn 0.2s ease",
        }}>
          <div style={{
            background: "white", borderRadius: 16, width: 320,
            boxShadow: "0 20px 60px rgba(14,17,40,0.25)", overflow: "hidden",
          }}>
            {/* Modal header */}
            <div style={{ padding: "18px 20px 14px", borderBottom: "1px solid #f0f2f8" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
                <div style={{ width: 34, height: 34, borderRadius: 9, background: "#fef3c7", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" strokeWidth="2" strokeLinecap="round"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
                </div>
                <div>
                  <div style={{ fontWeight: 800, color: "#14172a", fontSize: 15 }}>Kısmi Ödeme</div>
                  <div style={{ fontSize: 11, color: "#94a3b8" }}>Nakit ve kart tutarlarını girin</div>
                </div>
              </div>
            </div>
            {/* Toplam */}
            <div style={{ padding: "14px 20px 0" }}>
              <div style={{ background: "#f8fafc", borderRadius: 10, padding: "10px 14px", display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
                <span style={{ fontSize: 12, color: "#64748b", fontWeight: 500 }}>Sepet Toplamı</span>
                <span style={{ fontSize: 16, fontWeight: 800, color: "#14172a" }}>{fmt(total)}</span>
              </div>
              {/* Nakit */}
              <div style={{ marginBottom: 12 }}>
                <label style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12, fontWeight: 700, color: "#10b981", marginBottom: 6 }}>
                  <div style={{ width: 8, height: 8, borderRadius: "50%", background: "#10b981" }} />
                  Nakit
                </label>
                <div style={{
                  display: "flex", alignItems: "center",
                  background: kismiCash > 0 ? "#f0fdf4" : "#f8fafc",
                  border: `2px solid ${kismiCash > 0 ? "#10b981" : "#e2e8f0"}`,
                  borderRadius: 10, padding: "10px 14px",
                  transition: "all 0.3s ease",
                }}>
                  <span style={{ color: "#94a3b8", fontSize: 14, marginRight: 6 }}>₺</span>
                  <span style={{ fontWeight: 800, fontSize: 16, color: kismiCash > 0 ? "#10b981" : "#94a3b8" }}>
                    {kismiCash > 0 ? kismiCash.toLocaleString("tr-TR", { minimumFractionDigits: 2 }) : "0,00"}
                  </span>
                  {kismiCash > 0 && (
                    <div style={{ marginLeft: "auto", width: 20, height: 20, borderRadius: "50%", background: "#dcfce7", display: "flex", alignItems: "center", justifyContent: "center" }}>
                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#16a34a" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    </div>
                  )}
                </div>
              </div>
              {/* Kart */}
              <div style={{ marginBottom: 16 }}>
                <label style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12, fontWeight: 700, color: "#3b82f6", marginBottom: 6 }}>
                  <div style={{ width: 8, height: 8, borderRadius: "50%", background: "#3b82f6" }} />
                  Kart
                </label>
                <div style={{
                  display: "flex", alignItems: "center",
                  background: kismiCard > 0 ? "#eff6ff" : "#f8fafc",
                  border: `2px solid ${kismiCard > 0 ? "#3b82f6" : "#e2e8f0"}`,
                  borderRadius: 10, padding: "10px 14px",
                  transition: "all 0.3s ease",
                }}>
                  <span style={{ color: "#94a3b8", fontSize: 14, marginRight: 6 }}>₺</span>
                  <span style={{ fontWeight: 800, fontSize: 16, color: kismiCard > 0 ? "#3b82f6" : "#94a3b8" }}>
                    {kismiCard > 0 ? kismiCard.toLocaleString("tr-TR", { minimumFractionDigits: 2 }) : "0,00"}
                  </span>
                  {kismiCard > 0 && (
                    <div style={{ marginLeft: "auto", width: 20, height: 20, borderRadius: "50%", background: "#dbeafe", display: "flex", alignItems: "center", justifyContent: "center" }}>
                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#2563eb" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    </div>
                  )}
                </div>
              </div>
              {/* Kalan */}
              {(kismiCash > 0 || kismiCard > 0) && (
                <div style={{
                  background: kismiCash + kismiCard >= total ? "#f0fdf4" : "#fff7ed",
                  border: `1px solid ${kismiCash + kismiCard >= total ? "#bbf7d0" : "#fed7aa"}`,
                  borderRadius: 8, padding: "8px 12px", marginBottom: 14,
                  display: "flex", justifyContent: "space-between", alignItems: "center",
                  transition: "all 0.3s ease",
                }}>
                  <span style={{ fontSize: 11, fontWeight: 600, color: kismiCash + kismiCard >= total ? "#16a34a" : "#ea580c" }}>
                    {kismiCash + kismiCard >= total ? "✓ Tutar tamamlandı" : `Kalan: ${fmt(total - kismiCash - kismiCard)}`}
                  </span>
                  <span style={{ fontSize: 12, fontWeight: 800, color: kismiCash + kismiCard >= total ? "#16a34a" : "#ea580c" }}>
                    {fmt(kismiCash + kismiCard)} / {fmt(total)}
                  </span>
                </div>
              )}
            </div>
            {/* Confirm button */}
            <div style={{ padding: "0 20px 20px", display: "flex", gap: 8 }}>
              <div style={{
                flex: 1, padding: "11px", borderRadius: 10, textAlign: "center",
                background: "#f1f5f9", color: "#64748b", fontWeight: 700, fontSize: 13, cursor: "pointer",
              }}>İptal</div>
              <div style={{
                flex: 2, padding: "11px", borderRadius: 10, textAlign: "center",
                background: kismiConfirming ? "#10b981" : "linear-gradient(135deg,#f59e0b,#ef4444)",
                color: "white", fontWeight: 800, fontSize: 13, cursor: "pointer",
                transform: kismiConfirming ? "scale(0.97)" : "scale(1)",
                transition: "all 0.2s ease",
                boxShadow: kismiConfirming ? "0 4px 14px rgba(16,185,129,0.4)" : "0 4px 14px rgba(245,158,11,0.35)",
              }}>
                {kismiConfirming ? "Onaylanıyor..." : "Ödemeyi Tamamla"}
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};
const UrunlerScreen = () => {
  const rows = [
    { name: "Ajda Bilezik 1", sub: "Açıklama yok", badges: ["Ajda Bilezik"], brand: "Stainless Steel", price: "₺500,00", stock: 5, stockBar: 0.05, active: true },
    { name: "Ajda Bilezik", sub: "Açıklama yok", badges: ["Bilezik"], brand: "Stainless Steel", price: "₺300,00", stock: 0, stockBar: 0, active: true },
    { name: "Charm Bileklik", sub: "Açıklama yok", badges: ["Bileklik"], brand: "Stainless Steel", price: "₺400,00", stock: 34, stockBar: 0.34, active: true },
    { name: "Çocuk Taki", sub: "Açıklama yok", badges: ["Yaka"], brand: "Zaynayıya", price: "₺350,00", stock: 0, stockBar: 0, active: false, hot: true },
    { name: "Çocuk Yüzük", sub: "Açıklama yok", badges: ["Yüzük"], brand: "Stainless Steel", price: "₺400,00", stock: 0, stockBar: 0, active: false, hot: true },
    { name: "Erkek Kolye", sub: "Açıklama yok", badges: ["Kolye"], brand: "Stainless Steel", price: "₺600,00", stock: 0, stockBar: 0, active: false, hot: true },
    { name: "Gold Halka Küpe", sub: "Açıklama yok", badges: ["Küpe"], brand: "Stainless Steel", price: "₺600,00", stock: 97, stockBar: 0.97, active: true },
    { name: "Silver Bileklik", sub: "Açıklama yok", badges: ["Bileklik"], brand: "Rating", price: "₺900,00", stock: 41, stockBar: 0.41, active: true },
  ];
  return (
    <div style={{ display: "flex", height: "100%", fontFamily: "'Plus Jakarta Sans',sans-serif", fontSize: 12, overflow: "hidden", background: "#f8fafc" }}>
      <AppSidebar active="urunler" />
      <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
        <AppHeader title="Ürünler" subtitle="Mağazanızdaki ürünleri buradan yönetin" extra={
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <div style={{ background: "#f8fafc", border: "1px solid #e9ecf5", borderRadius: 8, padding: "5px 12px", fontSize: 11, color: "#64748b", fontWeight: 600 }}>32 TOPLAM</div>
            <div style={{ background: "#f8fafc", border: "1px solid #e9ecf5", borderRadius: 8, padding: "5px 12px", fontSize: 11, color: "#64748b", fontWeight: 600 }}>32 AKTİF</div>
            <div style={{ background: "#5b6af0", color: "white", padding: "7px 14px", borderRadius: 8, fontWeight: 700, fontSize: 12, cursor: "pointer" }}>+ Yeni Ürün</div>
          </div>
        } />
        {/* Filter chips */}
        <div style={{ background: "white", borderBottom: "1px solid #f0f2f8", padding: "10px 24px", display: "flex", gap: 6, flexWrap: "wrap" }}>
          {["Tümü 30","Ajda Bilezik 4","Bileklik 4","Çanta 5","Kolye 4","Küpe 4","Şal 1","Yaka 1","Yüzük 4","Düşük Stok 1","Stokta Yok 9","Hızlı Satış 4"].map((c, i) => (
            <div key={c} style={{ padding: "4px 12px", borderRadius: 999, background: i === 0 ? "#5b6af0" : "#f1f5f9", color: i === 0 ? "white" : "#64748b", fontWeight: 600, fontSize: 11, cursor: "pointer" }}>{c}</div>
          ))}
          <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
            <div style={{ background: "#f8fafc", border: "1px solid #e9ecf5", borderRadius: 8, padding: "5px 12px", fontSize: 11, color: "#64748b" }}>Ara...</div>
            <div style={{ background: "#f8fafc", border: "1px solid #e9ecf5", borderRadius: 8, padding: "5px 12px", fontSize: 11, color: "#64748b" }}>Listeyi Yenile</div>
          </div>
        </div>
        {/* Table */}
        <div style={{ flex: 1, overflow: "hidden", padding: "0 24px 16px" }}>
          <div style={{ background: "white", border: "1px solid #e9ecf5", borderRadius: 12, overflow: "hidden", marginTop: 16 }}>
            <div style={{ display: "grid", gridTemplateColumns: "2.5fr 1.2fr 1fr 0.8fr 1.2fr 100px", padding: "10px 16px", borderBottom: "1px solid #f1f5f9", background: "#f8fafc" }}>
              {["ÜRÜN","KATEGORİ","MARKA","FİYAT","STOK","İŞLEM"].map(h => (
                <div key={h} style={{ fontSize: 10, fontWeight: 700, color: "#94a3b8", letterSpacing: "0.05em" }}>{h}</div>
              ))}
            </div>
            {rows.map((r, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "2.5fr 1.2fr 1fr 0.8fr 1.2fr 100px", padding: "11px 16px", borderBottom: "1px solid #f8fafc", alignItems: "center" }}>
                <div>
                  <div style={{ display: "flex", gap: 6, alignItems: "center", flexWrap: "wrap" }}>
                    <span style={{ fontWeight: 600, color: "#1e293b", fontSize: 12 }}>{r.name}</span>
                    {r.hot && <span style={{ background: "#fef3c7", color: "#d97706", fontSize: 9, fontWeight: 700, padding: "1px 7px", borderRadius: 999 }}>HOT SATIŞ</span>}
                  </div>
                  <div style={{ fontSize: 10, color: "#94a3b8" }}>{r.sub}</div>
                </div>
                <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
                  {r.badges.map(b => <span key={b} style={{ background: "#ede9fe", color: "#7c3aed", fontSize: 10, fontWeight: 600, padding: "2px 8px", borderRadius: 999 }}>{b}</span>)}
                </div>
                <div style={{ fontSize: 11, color: "#475569" }}>{r.brand}</div>
                <div style={{ fontWeight: 700, color: "#1e293b", fontSize: 12 }}>{r.price}</div>
                <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                  <div style={{ flex: 1, height: 4, background: "#f1f5f9", borderRadius: 999, overflow: "hidden" }}>
                    <div style={{ height: "100%", width: `${Math.min(r.stockBar * 100, 100)}%`, background: r.stock === 0 ? "#ef4444" : r.stock < 10 ? "#f59e0b" : "#10b981", borderRadius: 999 }} />
                  </div>
                  <span style={{ fontSize: 10, color: r.stock === 0 ? "#ef4444" : "#64748b", fontWeight: 600, minWidth: 16 }}>{r.stock}</span>
                </div>
                <div style={{ display: "flex", gap: 6 }}>
                  <span style={{ background: "#dbeafe", color: "#2563eb", fontSize: 10, fontWeight: 700, padding: "3px 9px", borderRadius: 6, cursor: "pointer" }}>Düzenle</span>
                  <span style={{ background: "#f1f5f9", color: "#64748b", fontSize: 10, fontWeight: 700, padding: "3px 9px", borderRadius: 6, cursor: "pointer" }}>Pasife Al</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

/* ── KATEGORİLER SCREEN ── */
const KategorilerScreen = () => {
  const cats = [
    { id: 46, name: "Ajda Bilezik", icon: "🔗", iconColor: "#e0e7ff", count: "2 ürün", active: true },
    { id: 47, name: "Aksesuar", icon: "🎁", iconColor: "#fce7f3", count: "0 ürün", active: true },
    { id: 50, name: "Bileklik", icon: "💎", iconColor: "#dbeafe", count: "5 ürün", active: true },
    { id: 37, name: "Çanta", icon: "👜", iconColor: "#fef3c7", count: "5 ürün", active: true },
    { id: 38, name: "Go-Kart", icon: "🏎", iconColor: "#dcfce7", count: "2 ürün", active: false },
    { id: 20, name: "Kolye", icon: "📿", iconColor: "#ede9fe", count: "8 ürün", active: true },
  ];
  return (
    <div style={{ display: "flex", height: "100%", fontFamily: "'Plus Jakarta Sans',sans-serif", fontSize: 12, overflow: "hidden", background: "#f8fafc" }}>
      <AppSidebar active="kategoriler" />
      <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
        <AppHeader title="Kategoriler" subtitle="Ürün kategori listesi yönet ve yönledir." extra={
          <div style={{ display: "flex", gap: 8 }}>
            {[["12","TOPLAM"],["11","AKTİF"],["1","PASİF"],["9","ÜRÜNLÜ"]].map(([n, l]) => (
              <div key={l} style={{ background: "#f8fafc", border: "1px solid #e9ecf5", borderRadius: 8, padding: "5px 10px", textAlign: "center" }}>
                <div style={{ fontWeight: 800, color: "#14172a", fontSize: 14 }}>{n}</div>
                <div style={{ fontSize: 9, color: "#94a3b8", fontWeight: 600 }}>{l}</div>
              </div>
            ))}
            <div style={{ background: "#5b6af0", color: "white", padding: "7px 14px", borderRadius: 8, fontWeight: 700, fontSize: 12, cursor: "pointer", display: "flex", alignItems: "center" }}>+ Yeni Kategori</div>
          </div>
        } />
        {/* Warning */}
        <div style={{ background: "#fffbeb", border: "1px solid #fde68a", margin: "16px 24px 0", borderRadius: 10, padding: "10px 14px", display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ fontSize: 14 }}>⚠️</span>
          <span style={{ fontSize: 11, color: "#92400e" }}>Kategoriler silenmiyor – geçmiş satış raporlarının tutarlılığının korunması için AktifPasif sistemi kullanılmaktadır. Pasif kategoriler yeni ürün atanmasına kapatılır.</span>
        </div>
        {/* Table */}
        <div style={{ flex: 1, overflow: "hidden", padding: "16px 24px" }}>
          <div style={{ fontWeight: 700, color: "#334155", fontSize: 13, marginBottom: 12 }}>Kategori Listesi <span style={{ color: "#94a3b8", fontWeight: 500 }}>12 kayıt</span></div>
          <div style={{ background: "white", border: "1px solid #e9ecf5", borderRadius: 12, overflow: "hidden" }}>
            <div style={{ display: "grid", gridTemplateColumns: "60px 2fr 1fr 100px 120px", padding: "10px 16px", borderBottom: "1px solid #f1f5f9", background: "#f8fafc" }}>
              {["ID","KATEGORİ","ÜRÜN SAYISI","DURUM","İŞLEM"].map(h => (
                <div key={h} style={{ fontSize: 10, fontWeight: 700, color: "#94a3b8", letterSpacing: "0.05em" }}>{h}</div>
              ))}
            </div>
            {cats.map((c, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "60px 2fr 1fr 100px 120px", padding: "12px 16px", borderBottom: "1px solid #f8fafc", alignItems: "center" }}>
                <div style={{ fontWeight: 700, color: "#94a3b8", fontSize: 12 }}>#{c.id}</div>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <div style={{ width: 32, height: 32, borderRadius: 8, background: c.iconColor, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16 }}>{c.icon}</div>
                  <div>
                    <div style={{ fontWeight: 700, color: "#1e293b", fontSize: 12 }}>{c.name}</div>
                    <div style={{ fontSize: 10, color: "#94a3b8" }}>{c.name}</div>
                  </div>
                </div>
                <div><span style={{ background: "#e0f2fe", color: "#0284c7", fontSize: 11, fontWeight: 700, padding: "3px 12px", borderRadius: 999 }}>{c.count}</span></div>
                <div><Badge label={c.active ? "Aktif" : "Pasif"} color={c.active ? "green" : "gray"} /></div>
                <div style={{ display: "flex", gap: 6 }}>
                  <span style={{ background: "#dbeafe", color: "#2563eb", fontSize: 10, fontWeight: 700, padding: "3px 9px", borderRadius: 6, cursor: "pointer" }}>Düzenle</span>
                  <span style={{ background: c.active ? "#fee2e2" : "#f1f5f9", color: c.active ? "#dc2626" : "#94a3b8", fontSize: 10, fontWeight: 700, padding: "3px 9px", borderRadius: 6, cursor: "pointer" }}>{c.active ? "Pasife Al" : "Aktifleştir"}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

/* ── MARKALAR SCREEN ── */
const MarkalarScreen = () => {
  const brands = [
    { name: "Fashion Jewelery", slug: "fashion-jewelery", count: "0 ürün", active: true, color: "#fee2e2", tc: "#dc2626", letter: "F" },
    { name: "Stainless Steel", slug: "stainless-steel", count: "13 ürün", active: true, color: "#dbeafe", tc: "#2563eb", letter: "S" },
    { name: "Xuping", slug: "xuping", count: "0 ürün", active: true, color: "#dcfce7", tc: "#16a34a", letter: "X" },
    { name: "Zaynayıya", slug: "zaynayıya", count: "18 ürün", active: true, color: "#ffedd5", tc: "#ea580c", letter: "Z" },
  ];
  return (
    <div style={{ display: "flex", height: "100%", fontFamily: "'Plus Jakarta Sans',sans-serif", fontSize: 12, overflow: "hidden", background: "#f8fafc" }}>
      <AppSidebar active="markalar" />
      <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
        <AppHeader title="Markalar" subtitle="Sidinikta kayıtlı markaları yönetin." extra={
          <div style={{ display: "flex", gap: 8 }}>
            {[["4","TOPLAM"],["4","AKTİF"],["0","PASİF"],["3","ÜRÜNLÜ"]].map(([n, l]) => (
              <div key={l} style={{ background: "#f8fafc", border: "1px solid #e9ecf5", borderRadius: 8, padding: "5px 10px", textAlign: "center" }}>
                <div style={{ fontWeight: 800, color: "#14172a", fontSize: 14 }}>{n}</div>
                <div style={{ fontSize: 9, color: "#94a3b8", fontWeight: 600 }}>{l}</div>
              </div>
            ))}
            <div style={{ background: "#5b6af0", color: "white", padding: "7px 14px", borderRadius: 8, fontWeight: 700, fontSize: 12, cursor: "pointer", display: "flex", alignItems: "center" }}>+ Yeni Marka</div>
          </div>
        } />
        <div style={{ flex: 1, overflow: "hidden", padding: "16px 24px" }}>
          <div style={{ fontWeight: 700, color: "#334155", fontSize: 13, marginBottom: 12 }}>Marka Listesi <span style={{ color: "#94a3b8", fontWeight: 500 }}>4 marka</span></div>
          <div style={{ background: "white", border: "1px solid #e9ecf5", borderRadius: 12, overflow: "hidden" }}>
            <div style={{ display: "grid", gridTemplateColumns: "2.5fr 1fr 1fr 140px", padding: "10px 16px", borderBottom: "1px solid #f1f5f9", background: "#f8fafc" }}>
              {["MARKA","ÜRÜN SAYISI","DURUM","İŞLEM"].map(h => (
                <div key={h} style={{ fontSize: 10, fontWeight: 700, color: "#94a3b8", letterSpacing: "0.05em" }}>{h}</div>
              ))}
            </div>
            {brands.map((b, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "2.5fr 1fr 1fr 140px", padding: "14px 16px", borderBottom: "1px solid #f8fafc", alignItems: "center" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <div style={{ width: 36, height: 36, borderRadius: 10, background: b.color, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 16, color: b.tc }}>{b.letter}</div>
                  <div>
                    <div style={{ fontWeight: 700, color: "#1e293b", fontSize: 13 }}>{b.name}</div>
                    <div style={{ fontSize: 10, color: "#94a3b8" }}>{b.slug}</div>
                  </div>
                </div>
                <div><span style={{ background: "#e0f2fe", color: "#0284c7", fontSize: 11, fontWeight: 700, padding: "3px 12px", borderRadius: 999 }}>{b.count}</span></div>
                <div><Badge label={b.active ? "Aktif" : "Pasif"} color={b.active ? "green" : "gray"} /></div>
                <div style={{ display: "flex", gap: 6 }}>
                  <span style={{ background: "#dbeafe", color: "#2563eb", fontSize: 10, fontWeight: 700, padding: "3px 9px", borderRadius: 6, cursor: "pointer" }}>Düzenle</span>
                  <span style={{ background: "#f1f5f9", color: "#64748b", fontSize: 10, fontWeight: 700, padding: "3px 9px", borderRadius: 6, cursor: "pointer" }}>Pasife Al</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

/* ── SATIŞLAR SCREEN ── */
const SatislarScreen = () => {
  const rows = [
    { no: "SAT-0414", date: "25.04.2026", sub: "11:58", count: "2 ürün", price: "₺900,00", pay: "Nakit", status: "Tamamlandı" },
    { no: "SAT-0413", date: "25.04.2026", sub: "11:57", count: "2 ürün", price: "₺800,00", pay: "Nakit", status: "Tamamlandı" },
    { no: "SAT-0412", date: "25.04.2026", sub: "11:57", count: "3 ürün", price: "₺800,00", pay: "Nakit", status: "Tamamlandı" },
    { no: "SAT-0411", date: "25.04.2026", sub: "10:01", count: "3 ürün", price: "₺1.000,00", pay: "Nakit", status: "Tamamlandı" },
    { no: "SAT-0410", date: "25.04.2026", sub: "10:01", count: "4 ürün", price: "₺1.000,00", pay: "Nakit", status: "Tamamlandı" },
    { no: "SAT-0409", date: "25.04.2026", sub: "10:00", count: "5 ürün", price: "₺5.500,00", pay: "Nakit", status: "Tamamlandı" },
    { no: "SAT-0408", date: "25.04.2026", sub: "9:58", count: "2 ürün", price: "₺1.000,00", pay: "Kart", status: "Tamamlandı" },
    { no: "SAT-0407", date: "25.04.2026", sub: "9:57", count: "3 ürün", price: "₺1.000,00", pay: "Nakit", status: "Tamamlandı" },
    { no: "SAT-0406", date: "24.04.2026", sub: "21:00", count: "3 ürün", price: "₺850,00", pay: "Nakit", status: "Tamamlandı" },
  ];
  return (
    <div style={{ display: "flex", height: "100%", fontFamily: "'Plus Jakarta Sans',sans-serif", fontSize: 12, overflow: "hidden", background: "#f8fafc" }}>
      <AppSidebar active="satislar" />
      <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
        <AppHeader title="Satışlar" subtitle="Tüm satış kayıtları burunda listeleniz." />
        {/* Status tabs */}
        <div style={{ background: "white", borderBottom: "1px solid #f0f2f8", padding: "10px 24px", display: "flex", gap: 6, alignItems: "center" }}>
          {[["Tümü",true],["Tamamlandı",false],["Kısmi İade",false],["İade",false],["Nakit",false],["Kart",false],["Kısmi Ödeme",false]].map(([l, a]) => (
            <div key={l} style={{ padding: "5px 14px", borderRadius: 999, background: a ? "#f1f5f9" : "transparent", color: a ? "#1e293b" : "#94a3b8", fontWeight: a ? 700 : 500, fontSize: 12, cursor: "pointer", display: "flex", alignItems: "center", gap: 5 }}>
              {!a && <span style={{ width: 6, height: 6, borderRadius: "50%", background: l === "Tamamlandı" ? "#10b981" : l === "İade" ? "#ef4444" : l === "Nakit" ? "#10b981" : l === "Kart" ? "#3b82f6" : "#f59e0b", display: "inline-block" }} />}
              {l}
            </div>
          ))}
        </div>
        {/* Filters */}
        <div style={{ background: "white", borderBottom: "1px solid #f0f2f8", padding: "10px 24px", display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1.2fr 1fr 1fr 80px", gap: 8, alignItems: "end" }}>
          {[
            { label: "ARAMA", ph: "Geniş ara..." },
            { label: "BAŞLANGIÇ TARİHİ", ph: "gg.aa.yyyy" },
            { label: "BİTİŞ TARİHİ", ph: "gg.aa.yyyy" },
            { label: "KATEGORİ", ph: "Tümü" },
            { label: "ÜRÜN", ph: "Tümü" },
            { label: "ÖDEME TİPİ", ph: "Tümü" },
          ].map(f => (
            <div key={f.label}>
              <div style={{ fontSize: 9, fontWeight: 700, color: "#94a3b8", letterSpacing: "0.05em", marginBottom: 4 }}>{f.label}</div>
              <div style={{ background: "#f8fafc", border: "1px solid #e9ecf5", borderRadius: 8, padding: "6px 10px", color: "#94a3b8", fontSize: 11 }}>{f.ph}</div>
            </div>
          ))}
          <div style={{ background: "#5b6af0", color: "white", padding: "8px 14px", borderRadius: 8, fontWeight: 700, fontSize: 12, textAlign: "center", cursor: "pointer", marginTop: 14 }}>Filtrele</div>
        </div>
        {/* Summary */}
        <div style={{ background: "white", borderBottom: "1px solid #f0f2f8", padding: "10px 24px", display: "flex", gap: 20 }}>
          {[["₺233.700,00","Toplam"],["- ₺48.000,00","İade"],["₺2.169.600,00","Net"],["164","Sayı"]].map(([v,l]) => (
            <div key={l} style={{ display: "flex", gap: 6, alignItems: "center" }}>
              <span style={{ fontWeight: 800, color: v.startsWith("-") ? "#ef4444" : "#14172a", fontSize: 14 }}>{v}</span>
              <span style={{ fontSize: 11, color: "#94a3b8" }}>{l}</span>
            </div>
          ))}
        </div>
        {/* Table */}
        <div style={{ flex: 1, overflow: "hidden", padding: "0 24px 16px" }}>
          <div style={{ fontWeight: 700, color: "#334155", fontSize: 13, margin: "14px 0 10px" }}>Satış Listesi <span style={{ color: "#94a3b8", fontWeight: 500 }}>164 kayıt</span></div>
          <div style={{ background: "white", border: "1px solid #e9ecf5", borderRadius: 12, overflow: "hidden" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr 1fr 0.8fr 0.8fr 1fr 80px", padding: "10px 16px", background: "#f8fafc", borderBottom: "1px solid #f1f5f9" }}>
              {["SATIŞ NO","TARİH","ÜRÜNLER","FİYAT","ÖDEME","DURUM","İŞLEM"].map(h => (
                <div key={h} style={{ fontSize: 10, fontWeight: 700, color: "#94a3b8", letterSpacing: "0.05em" }}>{h}</div>
              ))}
            </div>
            {rows.map((r, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr 1fr 0.8fr 0.8fr 1fr 80px", padding: "10px 16px", borderBottom: "1px solid #f8fafc", alignItems: "center" }}>
                <div style={{ fontWeight: 700, color: "#5b6af0", fontSize: 12 }}>{r.no}</div>
                <div>
                  <div style={{ fontWeight: 600, color: "#1e293b", fontSize: 11 }}>{r.date}</div>
                  <div style={{ fontSize: 10, color: "#94a3b8" }}>{r.sub}</div>
                </div>
                <div style={{ fontSize: 11, color: "#475569" }}>{r.count}</div>
                <div style={{ fontWeight: 700, color: "#1e293b", fontSize: 12 }}>{r.price}</div>
                <div><Badge label={r.pay} color={r.pay === "Nakit" ? "teal" : "blue"} /></div>
                <div><Badge label={r.status} color="green" /></div>
                <div><span style={{ background: "#dbeafe", color: "#2563eb", fontSize: 10, fontWeight: 700, padding: "3px 9px", borderRadius: 6, cursor: "pointer" }}>Detay</span></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

/* ── RAPORLAR SCREEN ── */
const RaporlarScreen = () => {
  const barHeights = [20, 55, 40, 80, 65, 100, 70];
  const days = ["Paz","Pzt","Sal","Çar","Per","Cum","Pzr"];
  return (
    <div style={{ display: "flex", height: "100%", fontFamily: "'Plus Jakarta Sans',sans-serif", fontSize: 12, overflow: "hidden", background: "#f8fafc" }}>
      <AppSidebar active="raporlar" />
      <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
        <AppHeader title="Raporlar" subtitle="25.04.2026 döneminin satış ve ödeme analizleri" extra={
          <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
            {[["Bugün",true],["Bu Hafta",false],["Bu Ay",false]].map(([l,a]) => (
              <div key={l} style={{ padding: "6px 14px", borderRadius: 8, background: a ? "#5b6af0" : "#f1f5f9", color: a ? "white" : "#64748b", fontWeight: 600, fontSize: 12, cursor: "pointer" }}>{l}</div>
            ))}
            <div style={{ background: "#f8fafc", border: "1px solid #e9ecf5", borderRadius: 8, padding: "6px 10px", fontSize: 11, color: "#64748b" }}>25.04.2026</div>
            <div style={{ background: "#f8fafc", border: "1px solid #e9ecf5", borderRadius: 8, padding: "6px 10px", fontSize: 11, color: "#64748b" }}>25.04.2026</div>
            <div style={{ background: "#5b6af0", color: "white", padding: "6px 14px", borderRadius: 8, fontWeight: 700, fontSize: 12, cursor: "pointer" }}>Getir</div>
          </div>
        } />
        {/* KPI cards */}
        <div style={{ padding: "16px 24px 0", display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 12, flexShrink: 0 }}>
          {[
            { label: "BRÜt SATIŞ", val: "₺10.000,00", sub: "Net satış hedef - dönem toplam", color: "#5b6af0", bg: "#eef2ff" },
            { label: "İŞLEM SAYISI", val: "8", sub: "Tamamlanan satış", color: "#0ea5e9", bg: "#e0f2fe" },
            { label: "İADE ORANI", val: "0%", sub: "İstit satış oranın yüz", color: "#ef4444", bg: "#fee2e2" },
            { label: "ORTALAMA SEPET", val: "₺1.250,00", sub: "İşlem başı ortalama", color: "#f59e0b", bg: "#fef3c7" },
          ].map((k, i) => (
            <div key={i} style={{ background: "white", border: "1px solid #e9ecf5", borderRadius: 12, padding: "14px 16px" }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
                <div style={{ fontSize: 10, fontWeight: 700, color: "#94a3b8", letterSpacing: "0.05em" }}>{k.label}</div>
                <div style={{ width: 28, height: 28, borderRadius: 8, background: k.bg, display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={k.color} strokeWidth="2"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/></svg>
                </div>
              </div>
              <div style={{ fontSize: 20, fontWeight: 800, color: "#14172a" }}>{k.val}</div>
              <div style={{ fontSize: 10, color: "#94a3b8", marginTop: 4 }}>{k.sub}</div>
            </div>
          ))}
        </div>
        {/* Tab bar */}
        <div style={{ padding: "14px 24px 0", display: "flex", gap: 4, flexShrink: 0 }}>
          {["Satış Özeti","Ödeme Mutabakatı","Ürün Performansı","Saatlik Dağılım"].map((t, i) => (
            <div key={t} style={{ padding: "7px 16px", borderRadius: "8px 8px 0 0", background: i === 0 ? "white" : "transparent", color: i === 0 ? "#5b6af0" : "#94a3b8", fontWeight: i === 0 ? 700 : 500, fontSize: 12, cursor: "pointer", border: i === 0 ? "1px solid #e9ecf5" : "none", borderBottom: i === 0 ? "1px solid white" : "none" }}>{t}</div>
          ))}
        </div>
        {/* Charts */}
        <div style={{ flex: 1, overflow: "hidden", padding: "0 24px 16px", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 12, marginTop: 0 }}>
          {/* Bar chart */}
          <div style={{ background: "white", border: "1px solid #e9ecf5", borderRadius: "0 12px 12px 12px", padding: "16px", display: "flex", flexDirection: "column" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 8 }}>
              <div>
                <div style={{ fontWeight: 700, color: "#14172a", fontSize: 13 }}>Satış Trendi</div>
                <div style={{ fontSize: 11, color: "#94a3b8" }}>Son 7 günle karşılaştırma</div>
              </div>
              <div style={{ textAlign: "right" }}>
                <div style={{ fontWeight: 800, color: "#14172a", fontSize: 16 }}>₺72.100,00</div>
                <div style={{ display: "flex", alignItems: "center", gap: 4, justifyContent: "flex-end" }}>
                  <span style={{ fontSize: 10, color: "#94a3b8" }}>TOPLAM</span>
                  <span style={{ background: "#dcfce7", color: "#16a34a", fontSize: 10, fontWeight: 700, padding: "1px 7px", borderRadius: 999 }}>+100%</span>
                </div>
              </div>
            </div>
            <div style={{ flex: 1, display: "flex", alignItems: "flex-end", gap: 10, minHeight: 80 }}>
              {barHeights.map((h, i) => (
                <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
                  <div style={{ width: "100%", borderRadius: "4px 4px 0 0", background: i === 5 ? "#10b981" : "#d1fae5", height: `${h}%`, minHeight: 4 }} />
                  <div style={{ fontSize: 10, color: "#94a3b8" }}>{days[i]}</div>
                </div>
              ))}
            </div>
          </div>
          {/* Dönem özeti */}
          <div style={{ background: "white", border: "1px solid #e9ecf5", borderRadius: 12, padding: "16px", display: "flex", flexDirection: "column", gap: 0 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
              <div style={{ fontWeight: 700, color: "#14172a", fontSize: 13 }}>Dönem Özeti</div>
              <div style={{ fontSize: 11, color: "#94a3b8" }}>25.04.2026</div>
            </div>
            {[
              { label: "Brüt Satış", val: "₺10.000,00", color: "#1e293b" },
              { label: "Toplam İade", val: "-₺0,00", color: "#ef4444" },
              { label: "● Net Satış", val: "₺10.000,00", color: "#10b981", bold: true },
              { label: "İşlem Sayısı", val: "8 adet", color: "#1e293b" },
              { label: "Ortalama Sepet", val: "₺1.250,00", color: "#1e293b" },
            ].map((row, i) => (
              <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "9px 0", borderBottom: i < 4 ? "1px solid #f8fafc" : "none" }}>
                <span style={{ fontSize: 12, color: "#64748b", fontWeight: row.bold ? 700 : 500 }}>{row.label}</span>
                <span style={{ fontSize: 13, fontWeight: 700, color: row.color }}>{row.val}</span>
              </div>
            ))}
            <div style={{ marginTop: 14 }}>
              <div style={{ fontSize: 11, fontWeight: 700, color: "#94a3b8", marginBottom: 6 }}>Ciro · Adet · Pay</div>
              <div style={{ background: "#f8fafc", borderRadius: 8, padding: "10px 12px", display: "flex", gap: 16 }}>
                <div style={{ textAlign: "center" }}>
                  <div style={{ fontSize: 10, color: "#94a3b8" }}>Nakit</div>
                  <div style={{ fontWeight: 700, color: "#10b981" }}>₺10.000</div>
                  <div style={{ fontSize: 10, color: "#94a3b8" }}>8 adet</div>
                </div>
                <div style={{ textAlign: "center" }}>
                  <div style={{ fontSize: 10, color: "#94a3b8" }}>Kart</div>
                  <div style={{ fontWeight: 700, color: "#3b82f6" }}>₺0</div>
                  <div style={{ fontSize: 10, color: "#94a3b8" }}>0 adet</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const screensData = [
  { id: "dashboard", label: "Dashboard", subtitle: "Günlük performans özeti", component: DashboardScreen },
  { id: "pos", label: "POS", subtitle: "Hızlı satış ve kasa ekranı", component: POSScreen },
  { id: "urunler", label: "Ürünler", subtitle: "Ürün ve stok yönetim paneli", component: UrunlerScreen },
  { id: "kategoriler", label: "Kategoriler", subtitle: "Kategori yönetimi", component: KategorilerScreen },
  { id: "markalar", label: "Markalar", subtitle: "Marka listesi", component: MarkalarScreen },
  { id: "satislar", label: "Satışlar", subtitle: "Tüm satış kayıtları", component: SatislarScreen },
  { id: "raporlar", label: "Raporlar", subtitle: "Satış ve kasa analizi", component: RaporlarScreen },
];

const Screenshots = () => {
  const [active, setActive] = useState("pos");
  const current = screensData.find(s => s.id === active);
  const ScreenComp = current.component;

  return (
    <section id="screenshots" className="section" style={{ background: "white", overflow: "hidden" }}>
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <div className="tag"><Icon name="admin" size={13} />Uygulama Ekranları</div>
          <h2 className="section-title" style={{ margin: "0 auto 16px" }}>Gerçek kullanım, sade arayüz</h2>
          <p className="section-sub" style={{ margin: "0 auto" }}>
            Kasiyerden yöneticilere kadar herkes için hızlı ve anlaşılır ekranlar. Eğitim gerektirmeden kullanılabilir.
          </p>
        </div>

        {/* Tab switcher */}
        <div style={{ display: "flex", gap: 8, justifyContent: "center", marginBottom: 40, flexWrap: "wrap" }}>
          {screensData.map(s => (
            <button key={s.id} onClick={() => setActive(s.id)} style={{
              padding: "10px 24px", borderRadius: 999, border: "1.5px solid",
              borderColor: active === s.id ? "var(--blue)" : "var(--border)",
              background: active === s.id ? "var(--blue-light)" : "white",
              color: active === s.id ? "var(--blue)" : "var(--muted)",
              fontFamily: "inherit", fontSize: 14, fontWeight: 700, cursor: "pointer",
              transition: "all 0.15s",
            }}>
              {s.label}
            </button>
          ))}
        </div>

        {/* MacOS window */}
        <div style={{
          borderRadius: 16, overflow: "hidden",
          boxShadow: "0 32px 80px oklch(22% 0.08 258 / 0.18), 0 8px 24px oklch(22% 0.08 258 / 0.10)",
          border: "1px solid oklch(88% 0.02 252)",
          maxWidth: 960, margin: "0 auto",
        }}>
          {/* Title bar */}
          <div style={{
            background: "linear-gradient(180deg, oklch(94% 0.01 258) 0%, oklch(91% 0.01 258) 100%)",
            borderBottom: "1px solid oklch(85% 0.02 252)",
            padding: "12px 16px",
            display: "flex", alignItems: "center", gap: 16,
          }}>
            <div style={{ display: "flex", gap: 8 }}>
              {["#ff736a","#febc2e","#19c332"].map(c => (
                <div key={c} style={{ width: 13, height: 13, borderRadius: "50%", background: c, border: "0.5px solid rgba(0,0,0,0.15)" }} />
              ))}
            </div>
            <div style={{ flex: 1, textAlign: "center" }}>
              <div style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                background: "white", border: "1px solid oklch(85% 0.02 252)",
                borderRadius: 8, padding: "4px 16px",
                fontSize: 12, color: "oklch(50% 0.04 258)", fontFamily: "system-ui",
              }}>
                <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><circle cx="5" cy="5" r="4" stroke="oklch(70% 0.04 165)" strokeWidth="1.5" fill="none"/><path d="M5 3v2l1.5 1" stroke="oklch(70% 0.04 165)" strokeWidth="1.2" strokeLinecap="round"/></svg>
                app.veloraone.com.tr
              </div>
            </div>
            <div style={{ width: 54 }} />
          </div>
          {/* Screen content */}
          <div style={{ height: 480, position: "relative" }}>
            <ScreenComp />
          </div>
        </div>

        {/* Caption */}
        <p style={{ textAlign: "center", marginTop: 20, fontSize: 13, color: "var(--muted)" }}>
          {current.subtitle} — <span style={{ fontStyle: "italic" }}>Gerçek uygulama arayüzü. Geliştirmeler devam ediyor.</span>
        </p>
        {/* Screen CTA */}
        <div style={{ textAlign: "center", marginTop: 32 }}>
          <p style={{ fontSize: 16, fontWeight: 600, color: "var(--navy)", marginBottom: 16 }}>Sistemin nasıl çalıştığını canlı görmek ister misiniz?</p>
          <a href="#contact" onClick={e => { e.preventDefault(); const el = document.querySelector("#contact"); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" }); }} style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "linear-gradient(135deg, oklch(52% 0.20 252), oklch(55% 0.16 285))", color: "white", padding: "13px 28px", borderRadius: 999, fontSize: 15, fontWeight: 700, textDecoration: "none", boxShadow: "0 4px 16px oklch(52% 0.20 252 / 0.35)" }}><Icon name="sparkle" size={16} />Demo Talep Et</a>
        </div>
      </div>
    </section>
  );
};

/* ── COMING SOON ── */
const comingSoon = [
  {
    icon: "restaurant", color: "oklch(58% 0.18 40)", bg: "oklch(96% 0.06 40)",
    name: "Velora Restaurant",
    desc: "Masa yönetimi, sipariş alma, mutfak ekranı ve restoran operasyonuna özel POS sistemi.",
    chips: ["Masa düzeni", "Garson uygulaması", "Mutfak ekranı", "Adisyon yönetimi"],
  },
  {
    icon: "entertainment", color: "oklch(55% 0.20 320)", bg: "oklch(96% 0.05 320)",
    name: "Velora Eğlence",
    desc: "Bilet satışı, etkinlik yönetimi, kapasite takibi ve gişe operasyonu için entegre platform.",
    chips: ["Etkinlik & bilet", "Kapasite kontrolü", "Gişe yönetimi", "Giriş takibi"],
  },
  {
    icon: "appointment", color: "oklch(52% 0.18 165)", bg: "oklch(95% 0.05 165)",
    name: "Velora Randevu",
    desc: "Online randevu alma, personel takvimi, SMS hatırlatma ve müşteri yönetimi tek sistemde.",
    chips: ["Online rezervasyon", "Personel takvimi", "SMS hatırlatma", "Müşteri geçmişi"],
  },
];

const comingSoonIconPaths = {
  restaurant: <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"/><path d="M7 2v20"/><path d="M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3zm0 0v7"/></svg>,
  entertainment: <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>,
  appointment: <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><path d="M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01"/></svg>,
};

const ComingSoon = () => (
  <section id="coming-soon" className="section" style={{
    background: "linear-gradient(170deg, oklch(98.5% 0.008 252) 0%, oklch(97% 0.010 290) 100%)",
    borderTop: "1px solid var(--border)",
  }}>
    <div className="container">
      <div style={{ textAlign: "center", marginBottom: 56 }}>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          background: "oklch(65% 0.18 60 / 0.12)", color: "oklch(52% 0.18 50)",
          fontSize: 13, fontWeight: 700, padding: "4px 16px", borderRadius: 999,
          letterSpacing: "0.04em", textTransform: "uppercase", marginBottom: 20,
          border: "1px solid oklch(65% 0.18 60 / 0.20)",
        }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
          Yakında Geliyor
        </div>
        <h2 className="section-title" style={{ margin: "0 auto 16px" }}>Büyüyen ürün ailesi</h2>
        <p className="section-sub" style={{ margin: "0 auto" }}>
          VeloraOne, perakendenin ötesine geçiyor. Restoran, eğlence ve randevu sektörlerine özel modüller yolda.
        </p>
      </div>

      <div className="grid-3">
        {comingSoon.map((p, i) => (
          <div key={i} style={{
            background: "white", border: "1.5px dashed var(--border)", borderRadius: "var(--radius)",
            padding: "32px 28px", position: "relative", overflow: "hidden",
            transition: "transform 0.2s, box-shadow 0.2s, border-color 0.2s",
          }}
          onMouseEnter={e => {
            e.currentTarget.style.transform = "translateY(-4px)";
            e.currentTarget.style.boxShadow = "var(--shadow-lg)";
            e.currentTarget.style.borderColor = p.color;
            e.currentTarget.style.borderStyle = "solid";
          }}
          onMouseLeave={e => {
            e.currentTarget.style.transform = "";
            e.currentTarget.style.boxShadow = "";
            e.currentTarget.style.borderColor = "var(--border)";
            e.currentTarget.style.borderStyle = "dashed";
          }}
          >
            {/* Coming soon ribbon */}
            <div style={{
              position: "absolute", top: 18, right: -28, transform: "rotate(45deg)",
              background: "oklch(65% 0.18 60)", color: "white",
              fontSize: 10, fontWeight: 800, padding: "3px 36px",
              letterSpacing: "0.06em", textTransform: "uppercase",
            }}>Yakında</div>

            <div style={{
              width: 56, height: 56, borderRadius: 14, background: p.bg,
              display: "flex", alignItems: "center", justifyContent: "center",
              marginBottom: 20, color: p.color,
            }}>
              {comingSoonIconPaths[p.icon]}
            </div>

            <h3 style={{ fontSize: 20, fontWeight: 800, color: "var(--navy)", marginBottom: 10 }}>{p.name}</h3>
            <p style={{ color: "var(--muted)", fontSize: 15, lineHeight: 1.65, marginBottom: 24 }}>{p.desc}</p>

            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {p.chips.map((c, j) => (
                <span key={j} style={{
                  background: p.bg, color: p.color, fontSize: 12, fontWeight: 600,
                  padding: "4px 12px", borderRadius: 999,
                }}>{c}</span>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* Bottom note */}
      <div style={{
        marginTop: 48, textAlign: "center", padding: "20px 32px",
        background: "white", border: "1px solid var(--border)", borderRadius: 14,
        display: "inline-flex", alignItems: "center", gap: 12,
        left: "50%", position: "relative", transform: "translateX(-50%)",
      }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="oklch(52% 0.20 252)" strokeWidth="2" strokeLinecap="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
        <span style={{ fontSize: 14, color: "var(--muted)", fontWeight: 500 }}>
          Yeni modüllere erken erişim için{" "}
          <a href="#contact" onClick={e => {
            e.preventDefault();
            const el = document.querySelector("#contact");
            if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 80; window.scrollTo({ top: y, behavior: "smooth" }); }
          }} style={{ color: "var(--blue)", fontWeight: 700, textDecoration: "none" }}>
            bize ulaşın
          </a>
          .
        </span>
      </div>
    </div>
  </section>
);

/* ── APP ── */
const App = () => {
  const [showTrial, setShowTrial] = useState(false);

  useEffect(() => {
    window.__openTrial = () => setShowTrial(true);
    return () => { delete window.__openTrial; };
  }, []);

  return (
    <>
      {showTrial && <TrialModal onClose={() => setShowTrial(false)} />}
      <Navbar />
      <Hero />
    <Products />
    <Screenshots />
    <ComingSoon />
    <Features />
    <ForWho />
    <WhyVelora />
    <Pricing />
    <LoginCTA />
    <Contact />
    <TrustBar />
    <Footer />
  </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);