// ui.jsx — shared components: icons, Reveal, Nav, Footer, Newsletter, Toast, ProductCard

const { useState, useEffect, useRef, useCallback } = React;

/* ---------------- Icons (inline, stroke-based) ---------------- */
const I = {
  search: (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>,
  user:   (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg>,
  bag:    (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M6 8h12l-1 12H7L6 8z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg>,
  heart:  (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M12 20s-7-4.5-9.2-8.5C1.2 8.3 3 5 6.2 5 8 5 9.2 6 12 8.5 14.8 6 16 5 17.8 5 21 5 22.8 8.3 21.2 11.5 19 15.5 12 20 12 20z"/></svg>,
  eye:    (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg>,
  play:   (p) => <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M8 5v14l11-7z"/></svg>,
  arrow:  (p) => <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  close:  (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M6 6l12 12M18 6L6 18"/></svg>,
  menu:   (p) => <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M3 7h18M3 12h18M3 17h18"/></svg>,
  star:   (p) => <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M12 2l2.9 6.3 6.8.7-5 4.6 1.4 6.7L12 17.8 5.9 20.9l1.4-6.7-5-4.6 6.8-.7z"/></svg>,
  check:  (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" {...p}><path d="M4 12l5 5L20 6"/></svg>,
  truck:  (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M2 6h11v9H2zM13 9h4l3 3v3h-7zM7 18a2 2 0 100-4 2 2 0 000 4zM18 18a2 2 0 100-4 2 2 0 000 4z"/></svg>,
  refresh:(p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M3 12a9 9 0 0115-6.7L21 8M21 3v5h-5M21 12a9 9 0 01-15 6.7L3 16M3 21v-5h5"/></svg>,
  shield: (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/><path d="M9 12l2 2 4-4"/></svg>,
  spark:  (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5L18 18M18 6l-2.5 2.5M8.5 15.5L6 18"/></svg>,
  phone:  (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M5 4h4l2 5-3 2a12 12 0 005 5l2-3 5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z"/></svg>,
  mail:   (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M3 6h18v12H3zM3 7l9 6 9-6"/></svg>,
  pin:    (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M12 21s7-5.5 7-11a7 7 0 10-14 0c0 5.5 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>,
  social: (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1.2" fill="currentColor" stroke="none"/></svg>,
};

/* ---------------- Aura model image slot ---------------- */
// A persistent drop target for the user's AI model imagery.
function AuraSlot({ model, shape = "rect", radius, placeholder, src, ...rest }) {
  return (
    <image-slot
      id={`slot-${model}-${rest.k || "main"}`}
      shape={shape}
      {...(src ? { src } : {})}
      {...(radius != null ? { radius: String(radius) } : {})}
      placeholder={placeholder || model.toUpperCase()}
    ></image-slot>
  );
}

/* ---------------- Scroll reveal ---------------- */
function Reveal({ children, delay = 0, tag = "div", className = "", style = {} }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { el.classList.add("in"); io.unobserve(el); }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = tag;
  return <Tag ref={ref} className={`reveal ${className}`} style={{ transitionDelay: `${delay}ms`, ...style }}>{children}</Tag>;
}

/* ---------------- Stars ---------------- */
function Stars({ n = 5 }) {
  return <div className="stars">{Array.from({ length: 5 }).map((_, i) => <I.star key={i} style={{ opacity: i < Math.round(n) ? 1 : 0.25 }} />)}</div>;
}

const fmt = (n) => new Intl.NumberFormat("tr-TR").format(n) + " ₺";

/* ---------------- Nav ---------------- */
function Nav({ route, go, cartCount, onSearch }) {
  const [open, setOpen] = useState(false);
  const links = [
    ["home", "Ana Sayfa"],
    ["collection", "Koleksiyon"],
    ["vton", "Sanal Deneme"],
    ["story", "Hikâye"],
  ];
  return (
    <header className="nav">
      <div className="nav-inner">
        <button className="nav-burger" onClick={() => setOpen(true)} aria-label="Menü"><I.menu /></button>
        <nav className="nav-links">
          {links.map(([r, t]) => (
            <button key={r} className={`nav-link ${route === r ? "active" : ""}`} onClick={() => go(r)}>{t}</button>
          ))}
        </nav>
        <button className="brand" onClick={() => go("home")}>BILGEAURA<small>VIRTUAL ATELIER</small></button>
        <div className="nav-links right">
          <div className="nav-icons">
            <button className="icon-btn" aria-label="Ara" onClick={onSearch}><I.search /></button>
            <button className="icon-btn" aria-label="Hesap"><I.user /></button>
            <button className="icon-btn" aria-label="Sepet" onClick={() => go("collection")}>
              <I.bag />{cartCount > 0 && <span className="cart-count">{cartCount}</span>}
            </button>
          </div>
        </div>
        <div className="nav-icons" style={{ display: "none" }}></div>
      </div>
      {open && (
        <>
          <div className="drawer-scrim" onClick={() => setOpen(false)}></div>
          <div className="drawer">
            <div className="drawer-top">
              <span className="brand" style={{ fontSize: 22 }}>BILGEAURA</span>
              <button className="icon-btn" onClick={() => setOpen(false)}><I.close /></button>
            </div>
            {links.map(([r, t]) => (
              <button key={r} className="dlink" onClick={() => { go(r); setOpen(false); }}>{t}</button>
            ))}
          </div>
        </>
      )}
    </header>
  );
}

/* ---------------- Product card ---------------- */
function ProductCard({ p, go, onQuick, onFav, onAdd }) {
  return (
    <div className="card translate-up" onClick={() => go("product", p.id)}>
      <div className="card-media">
        {p.badge && <span className={`card-badge ${p.badge === "İndirim" ? "" : p.badge === "Atölye" ? "gold" : "olive"}`}>{p.badge}</span>}
        <button className="card-fav" onClick={(e) => { e.stopPropagation(); onFav(p); }} aria-label="Favori"><I.heart /></button>
        <AuraSlot model={p.model} k={p.id} src={`images/${p.id}-main.jpg`} placeholder={`${p.model.toUpperCase()} · ${p.name}`} />
        <button className="card-quick" onClick={(e) => { e.stopPropagation(); onQuick(p); }}><I.eye /> Hızlı Bakış</button>
      </div>
      <div className="card-info">
        <div>
          <div className="card-name">{p.name}</div>
          <div className="card-cat">{p.cat}</div>
        </div>
        <div className="card-price">
          {p.old && <span style={{ color: "var(--muted)", textDecoration: "line-through", fontWeight: 400, marginRight: 6, fontSize: 14 }}>{fmt(p.old)}</span>}
          {fmt(p.price)}
        </div>
      </div>
    </div>
  );
}

/* ---------------- Newsletter ---------------- */
function Newsletter({ onToast }) {
  const [val, setVal] = useState("");
  return (
    <section className="news">
      <div className="wrap news-inner">
        <Reveal>
          <p className="eyebrow" style={{ color: "rgba(255,255,255,.8)" }}>Bülten</p>
          <h2>Atölyeden ilk haberi siz alın.</h2>
          <p>Yeni koleksiyonlar, premium atölye ürünleri ve özel kampanyalar — gelen kutunuza, ayda en fazla iki kez.</p>
        </Reveal>
        <Reveal delay={100}>
          <form className="news-form" onSubmit={(e) => { e.preventDefault(); if (val) { onToast("Bültene abone oldunuz ✦"); setVal(""); } }}>
            <input type="email" placeholder="E-posta adresiniz" value={val} onChange={(e) => setVal(e.target.value)} required aria-label="E-posta" />
            <button type="submit">Abone Ol</button>
          </form>
          <p className="news-note">Abone olarak KVKK aydınlatma metnini kabul etmiş olursunuz. Dilediğiniz zaman çıkabilirsiniz.</p>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-contact-col">
            <div className="brand">BILGEAURA</div>
            <p style={{ marginTop: 18, maxWidth: 320, fontSize: 15, lineHeight: 1.6 }}>
              Tüm Türkiye genelinde kusursuz online atölye kalitesi ve sanal deneme deneyimi sunan BilgeAura; doğal kumaşlar, titiz atölye işçiliği ve zamansız siluetlerle premium kadın giyimini yeniden tanımlıyor.
            </p>
            <ul className="footer-contact" style={{ marginTop: 22 }}>
              <li><I.phone /> <a href="tel:+902120000000">+90 212 000 00 00</a></li>
              <li><I.phone /> <a href="https://wa.me/905000000000">WhatsApp Destek</a></li>
              <li><I.mail /> <a href="mailto:bilgeaura@gmail.com">bilgeaura@gmail.com</a></li>
              <li><I.pin /> Tüm Türkiye Genelinde Hızlı Kargo</li>
            </ul>
            <div className="footer-social">
              <a href="#" aria-label="Instagram"><I.social /></a>
              <a href="#" aria-label="TikTok"><I.social /></a>
              <a href="#" aria-label="Pinterest"><I.social /></a>
            </div>
          </div>
          <div>
            <h4>Alışveriş</h4>
            <ul>
              <li><a onClick={() => go("collection")}>Tüm Koleksiyon</a></li>
              <li><a onClick={() => go("collection")}>Yeni Gelenler</a></li>
              <li><a onClick={() => go("collection")}>Abiye</a></li>
            </ul>
          </div>
          <div>
            <h4>Kurumsal</h4>
            <ul>
              <li><a onClick={() => go("story")}>Hakkımızda</a></li>
              <li><a href="#">KVKK & Gizlilik</a></li>
              <li><a href="#">İade & Değişim</a></li>
              <li><a href="#">Yardım / SSS</a></li>
            </ul>
          </div>
          <div>
            <h4>Hizmet</h4>
            <ul>
              <li><a href="#">Kargo & Teslimat</a></li>
              <li><a href="#">Beden Rehberi</a></li>
              <li><a href="#">Sipariş Takibi</a></li>
              <li><a href="#">İletişim</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 BilgeAura. Tüm hakları saklıdır.</span>
          <div className="pay">
            <span>Güvenli ödeme</span>
            <b>Visa / MC</b><b>PayTR</b><b>Taksit</b>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ---------------- Toast host ---------------- */
function useToasts() {
  const [toasts, setToasts] = useState([]);
  const push = useCallback((msg) => {
    const id = Math.random().toString(36).slice(2);
    setToasts((t) => [...t, { id, msg }]);
    setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 2600);
  }, []);
  const node = (
    <div className="toast-wrap">
      {toasts.map((t) => <div key={t.id} className="toast"><I.check style={{ color: "var(--gold)" }} />{t.msg}</div>)}
    </div>
  );
  return [push, node];
}

Object.assign(window, { I, AuraSlot, Reveal, Stars, fmt, Nav, ProductCard, Newsletter, Footer, useToasts });
