// Shared UI primitives for Unique Furniture.
// Exposes Header, Footer, ProductCard, Placeholder, Icon to window so other
// Babel scripts can pull them off the global scope (Babel scripts don't share
// module scope by default).

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

// ─────────────────────────────────────────────────────────────────────────
// Inline SVG icons. Kept minimal — no decorative iconography on cards.
// ─────────────────────────────────────────────────────────────────────────
function Icon({ name, size = 18, stroke = 1.4 }) {
  const s = { width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "search":
      return <svg viewBox="0 0 24 24" {...s}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>;
    case "user":
      return <svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"/></svg>;
    case "cart":
      return <svg viewBox="0 0 24 24" {...s}><path d="M4 5h2l2 12h11l2-9H7"/><circle cx="10" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/></svg>;
    case "heart":
      return <svg viewBox="0 0 24 24" {...s}><path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10z"/></svg>;
    case "arrow-right":
      return <svg viewBox="0 0 24 24" {...s}><path d="M5 12h14"/><path d="m13 5 7 7-7 7"/></svg>;
    case "arrow-left":
      return <svg viewBox="0 0 24 24" {...s}><path d="M19 12H5"/><path d="m11 5-7 7 7 7"/></svg>;
    case "menu":
      return <svg viewBox="0 0 24 24" {...s}><path d="M3 6h18M3 12h18M3 18h18"/></svg>;
    case "x":
      return <svg viewBox="0 0 24 24" {...s}><path d="M6 6l12 12M18 6 6 18"/></svg>;
    case "check":
      return <svg viewBox="0 0 24 24" {...s}><path d="m4 12 5 5L20 6"/></svg>;
    case "truck":
      return <svg viewBox="0 0 24 24" {...s}><path d="M3 7h11v9H3zM14 11h5l2 3v2h-7"/><circle cx="7" cy="18" r="1.6"/><circle cx="17" cy="18" r="1.6"/></svg>;
    case "shield":
      return <svg viewBox="0 0 24 24" {...s}><path d="M12 3 5 5v6c0 5 3.5 8.5 7 10 3.5-1.5 7-5 7-10V5z"/></svg>;
    case "return":
      return <svg viewBox="0 0 24 24" {...s}><path d="M3 9a9 9 0 0 1 16 0"/><path d="M3 4v5h5"/><path d="M21 15a9 9 0 0 1-16 0"/><path d="M21 20v-5h-5"/></svg>;
    case "instagram":
      return <svg viewBox="0 0 24 24" {...s}><rect x="3" y="3" width="18" height="18" rx="4"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".6" fill="currentColor"/></svg>;
    case "facebook":
      return <svg viewBox="0 0 24 24" {...s}><path d="M14 4h-2a3 3 0 0 0-3 3v3H7v3h2v8h3v-8h2.5l.5-3H12V7a1 1 0 0 1 1-1h1z"/></svg>;
    case "whatsapp":
      return <svg viewBox="0 0 24 24" {...s}><path d="M5 19l1.4-4A8 8 0 1 1 9 20z"/><path d="M9 11c0 3 2 5 5 5l1-2-2-1c-1 1-2 0-3-1s-2-2-1-3l-1-2-2 1c0 1 0 2 .5 3"/></svg>;
    case "plus":
      return <svg viewBox="0 0 24 24" {...s}><path d="M12 5v14M5 12h14"/></svg>;
    case "minus":
      return <svg viewBox="0 0 24 24" {...s}><path d="M5 12h14"/></svg>;
    case "stamp":
      return <svg viewBox="0 0 24 24" {...s}><path d="M5 21h14"/><path d="M7 18h10v-2a3 3 0 0 0-3-3h-1l1-3a2 2 0 1 0-4 0l1 3h-1a3 3 0 0 0-3 3z"/></svg>;
    default: return null;
  }
}

// ─────────────────────────────────────────────────────────────────────────
// Placeholder: warm gradient block with product name, used in lieu of photos.
// ─────────────────────────────────────────────────────────────────────────
function Placeholder({ name, tone = 1, corner, dark = false, className = "" }) {
  const toneClass = dark ? "ph-dark" : `ph-t${tone}`;
  return (
    <div className={`ph ${toneClass} ${className}`}>
      {corner && <div className="ph-corner">{corner}</div>}
      <div className="ph-name">{name}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Product card. Hover reveals quick-view bar. Click → PDP via nav callback.
// ─────────────────────────────────────────────────────────────────────────
function ProductCard({ p, onOpen, financingMode, t }) {
  return (
    <article className="pcard" onClick={() => onOpen(p.id)}>
      <div className="pcard-media">
        <Placeholder name={p.name} tone={p.tone} corner={p.own ? "Crafted by us" : p.partner} />
        {p.badge && <div className={`pcard-tag ${p.badge === "Bestseller" ? "pcard-tag-accent" : ""}`}>{p.badge}</div>}
        <div className="pcard-quick">{t.shop.quickView}</div>
      </div>
      <div>
        <div className="pcard-meta">{p.sub}</div>
        <h3 className="pcard-name">{p.name}</h3>
        <div className="pcard-price-row">
          <span className="pcard-price">${p.price.toLocaleString()}</span>
          {p.was && <span className="pcard-price-was">${p.was.toLocaleString()}</span>}
        </div>
        {p.finance > 0 && financingMode !== "off" && (
          <div className="pcard-finance">
            {financingMode === "loud"
              ? <strong>${p.finance}/mo</strong>
              : <>or ${p.finance}/mo · 12 mo 0% APR</>}
          </div>
        )}
      </div>
    </article>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Header.
// ─────────────────────────────────────────────────────────────────────────
function Header({ route, navigate, cartCount, lang, setLang, t }) {
  const navItems = [
    { key: "shop", label: t.nav.shop, to: "shop" },
    { key: "collections", label: t.nav.collections, to: "collections" },
    { key: "workshop", label: t.nav.workshop, to: "workshop" },
    { key: "about", label: t.nav.about, to: "about" },
    { key: "contact", label: t.nav.showroom, to: "contact" },
  ];
  return (
    <header className="header">
      <div className="header-inner">
        <nav className="header-nav">
          {navItems.map((n) => (
            <a key={n.key}
               href={`#${n.to}`}
               className={route === n.to ? "active" : ""}
               onClick={(e) => { e.preventDefault(); navigate(n.to); }}>
              {n.label}
            </a>
          ))}
        </nav>
        <a className="brand" href="#home" onClick={(e) => { e.preventDefault(); navigate("home"); }}>
          <div className="brand-mark">Unique</div>
          <div className="brand-sub">Wholesale · Miami · Since 1998</div>
        </a>
        <div className="header-actions">
          <div className="lang-switch">
            {["en","es","ht"].map((l, i) => (
              <React.Fragment key={l}>
                {i > 0 && <span>·</span>}
                <button className={lang === l ? "active" : ""} onClick={() => setLang(l)}>
                  {l === "ht" ? "HT" : l.toUpperCase()}
                </button>
              </React.Fragment>
            ))}
          </div>
          <button className="header-icon-btn" title="Search"><Icon name="search"/></button>
          <button className="header-icon-btn" title="Account"><Icon name="user"/></button>
          <button className="header-icon-btn" title="Cart" onClick={() => navigate("cart")}>
            <Icon name="cart"/>
            {cartCount > 0 && <span className="cart-badge">{cartCount}</span>}
          </button>
        </div>
      </div>
    </header>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Footer.
// ─────────────────────────────────────────────────────────────────────────
function Footer({ t, navigate }) {
  const f = t.footer;
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div>
          <div className="brand-mark" style={{ fontSize: 36 }}>Unique</div>
          <div className="brand-sub" style={{ marginTop: 6, color: "rgba(244,238,227,0.6)" }}>Wholesale · Miami · Since 1998</div>
          <p style={{ marginTop: 22, color: "rgba(244,238,227,0.7)", maxWidth: 28 + "ch", fontSize: 14, lineHeight: 1.55 }}>
            8421 NE 2nd Avenue<br/>Miami, FL 33138
          </p>
          <div className="row" style={{ marginTop: 22, gap: 14, color: "rgba(244,238,227,0.7)" }}>
            <a href="#" title="Instagram"><Icon name="instagram"/></a>
            <a href="#" title="Facebook"><Icon name="facebook"/></a>
            <a href="#" title="WhatsApp"><Icon name="whatsapp"/></a>
          </div>
        </div>
        <div>
          <h4>{f.shop}</h4>
          <ul>
            <li><a href="#" onClick={(e)=>{e.preventDefault();navigate("shop","Living Room");}}>{f.links.living}</a></li>
            <li><a href="#" onClick={(e)=>{e.preventDefault();navigate("shop","Bedroom");}}>{f.links.bedroom}</a></li>
            <li><a href="#" onClick={(e)=>{e.preventDefault();navigate("shop","Dining Room");}}>{f.links.dining}</a></li>
            <li><a href="#" onClick={(e)=>{e.preventDefault();navigate("shop","Coffee Tables");}}>{f.links.coffee}</a></li>
            <li><a href="#" onClick={(e)=>{e.preventDefault();navigate("shop","Accessories");}}>{f.links.accessories}</a></li>
            <li><a href="#" onClick={(e)=>{e.preventDefault();navigate("shop");}}>{f.links.clearance}</a></li>
          </ul>
        </div>
        <div>
          <h4>{f.company}</h4>
          <ul>
            <li><a href="#" onClick={(e)=>{e.preventDefault();navigate("about");}}>{f.links.about}</a></li>
            <li><a href="#" onClick={(e)=>{e.preventDefault();navigate("workshop");}}>{f.links.workshop}</a></li>
            <li><a href="#">{f.links.trade}</a></li>
            <li><a href="#">{f.links.press}</a></li>
          </ul>
        </div>
        <div>
          <h4>{f.help}</h4>
          <ul>
            <li><a href="#">{f.links.delivery}</a></li>
            <li><a href="#">{f.links.returns}</a></li>
            <li><a href="#">{f.links.financing}</a></li>
            <li><a href="#">{f.links.warranty}</a></li>
            <li><a href="#">{f.links.faq}</a></li>
            <li><a href="#" onClick={(e)=>{e.preventDefault();navigate("contact");}}>{f.links.contact}</a></li>
          </ul>
        </div>
        <div>
          <h4>{f.visit}</h4>
          <p style={{ color: "rgba(244,238,227,0.7)", fontSize: 14, lineHeight: 1.55, marginTop: -4 }}>
            {f.news}
          </p>
          <div className="footer-news" style={{ marginTop: 14 }}>
            <input placeholder={f.newsPh}/>
            <button>→</button>
          </div>
        </div>
      </div>
      <div className="footer-baseline">
        <span>{f.rights}</span>
        <span>Crafted with care · Site by Unique</span>
      </div>
    </footer>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Section header — eyebrow + display headline + optional sub + optional CTA.
// ─────────────────────────────────────────────────────────────────────────
function SectionHead({ eyebrow, headline, sub, cta, onCta }) {
  return (
    <div className="s-head">
      <div>
        {eyebrow && <div className="eyebrow">{eyebrow}</div>}
        {headline}
      </div>
      {(sub || cta) && (
        <div className="stack-sm" style={{ alignItems: "flex-end", textAlign: "right" }}>
          {sub && <p className="s-head-sub">{sub}</p>}
          {cta && <a className="link-arrow" href="#" onClick={(e) => { e.preventDefault(); onCta && onCta(); }}>{cta} <Icon name="arrow-right" size={14}/></a>}
        </div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Marquee strip used between sections.
// ─────────────────────────────────────────────────────────────────────────
function Marquee({ items }) {
  const doubled = [...items, ...items];
  return (
    <div className="marq">
      <div className="marq-track">
        {doubled.map((it, i) => <span className="marq-item" key={i}>{it}</span>)}
      </div>
    </div>
  );
}

Object.assign(window, { Icon, Placeholder, ProductCard, Header, Footer, SectionHead, Marquee });