/* Enfito — Icons & Shared Components */

const Icon = {
  Search: (props) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
    </svg>
  ),
  ArrowRight: (props) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>
    </svg>
  ),
  ArrowUpRight: (props) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M7 17 17 7"/><path d="M7 7h10v10"/>
    </svg>
  ),
  ChevronDown: (props) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="m6 9 6 6 6-6"/>
    </svg>
  ),
  ChevronLeft: (props) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="m15 18-6-6 6-6"/>
    </svg>
  ),
  Heart: ({filled, ...p}) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill={filled?"currentColor":"none"} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>
    </svg>
  ),
  Bag: (props) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/>
      <path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/>
    </svg>
  ),
  User: (props) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
    </svg>
  ),
  Plus: (props) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M12 5v14"/><path d="M5 12h14"/>
    </svg>
  ),
  Minus: (props) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M5 12h14"/>
    </svg>
  ),
  X: (props) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
    </svg>
  ),
  Check: (props) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M20 6 9 17l-5-5"/>
    </svg>
  ),
  Truck: (props) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/>
      <path d="M15 18H9"/><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"/>
      <circle cx="17" cy="18" r="2"/><circle cx="7" cy="18" r="2"/>
    </svg>
  ),
  Shield: (props) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>
    </svg>
  ),
  Return: (props) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-15-6.7L3 13"/>
    </svg>
  ),
  Sparkle: (props) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M12 3v3m0 12v3M3 12h3m12 0h3M5.5 5.5l2 2m9 9 2 2m0-13-2 2m-9 9-2 2"/>
    </svg>
  ),
  Card: (props) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <rect width="20" height="14" x="2" y="5" rx="2"/><path d="M2 10h20"/>
    </svg>
  ),
  Star: (props) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" {...props}>
      <path d="M12 2 14.85 8.63 22 9.27l-5.42 4.7L18.18 22 12 18.27 5.82 22l1.6-8.03L2 9.27l7.15-.64L12 2Z"/>
    </svg>
  ),
  Menu: (props) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...props}>
      <line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="14" y2="18"/>
    </svg>
  ),
  Globe: (props) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>
    </svg>
  ),
  Filter: (props) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M3 6h18"/><path d="M7 12h10"/><path d="M10 18h4"/>
    </svg>
  ),
  Dumbbell: (props) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M14.4 14.4 9.6 9.6"/><path d="M18.657 21.485a2 2 0 1 1-2.829-2.828l-1.767 1.768a2 2 0 1 1-2.829-2.829l6.364-6.364a2 2 0 1 1 2.829 2.829l-1.768 1.767a2 2 0 1 1 2.828 2.829z"/><path d="m21.5 21.5-1.4-1.4"/><path d="M3.9 3.9 2.5 2.5"/><path d="M6.404 12.768a2 2 0 1 1-2.829-2.829l1.768-1.767a2 2 0 1 1-2.828-2.829l2.828-2.828a2 2 0 1 1 2.829 2.828l1.767-1.768a2 2 0 1 1 2.829 2.829z"/>
    </svg>
  ),
  Yoga: (props) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <circle cx="12" cy="5" r="2"/><path d="M5 10h14l-3 8-2-5h-4l-2 5z"/>
    </svg>
  ),
  Heartbeat: (props) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
    </svg>
  ),
  Award: (props) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <circle cx="12" cy="8" r="6"/><path d="m9 14-1.5 8L12 19l4.5 3L15 14"/>
    </svg>
  ),
  Tag: (props) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="m12.586 2.586 9 9a2 2 0 0 1 0 2.828l-7.172 7.172a2 2 0 0 1-2.828 0l-9-9V4a2 2 0 0 1 2-2z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/>
    </svg>
  ),
  Sun: (props) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32 1.41 1.41M2 12h2m16 0h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
    </svg>
  ),
  Recover: (props) => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M12 22s8-4 8-12V5l-8-3-8 3v5c0 8 8 12 8 12z"/><path d="m9 12 2 2 4-4"/>
    </svg>
  ),
};

window.Icon = Icon;

/* ============ HEADER ============ */
const Header = ({ cartCount, onNav, currentRoute }) => {
  const [searchOpen, setSearchOpen] = React.useState(false);
  return (
    <React.Fragment>
      <div className="announce">
        <span>უფასო მიწოდება ₾200+ შეკვეთაზე</span>
        <span className="accent-dot" />
        <span>30 დღიანი დაბრუნება</span>
        <span className="accent-dot" />
        <span>ოფიციალური წარმომადგენელი</span>
      </div>
      <header className="header">
        <div className="container header-row">
          <div className="brand" onClick={() => onNav({ page: 'home' })}>
            <img src="assets/logo.png" alt="Enfito" />
          </div>
          <div className="search-wrap">
            <Icon.Search />
            <input placeholder="ეძებთ ჰანტელებს, იოგას მატს, Theragun-ს..." />
            <div className="search-cat">ყველა კატეგორია <Icon.ChevronDown style={{marginLeft: 6}} /></div>
            <button className="search-go"><Icon.ArrowRight /></button>
          </div>
          <div className="header-actions">
            <button className="icon-btn" title="ენა"><Icon.Globe /></button>
            <button className="icon-btn" title="ჩემი ანგარიში"><Icon.User /></button>
            <button className="icon-btn" title="ფავორიტები"><Icon.Heart /></button>
            <button className="icon-btn" title="კალათა" onClick={() => onNav({ page: 'cart' })}>
              <Icon.Bag />
              {cartCount > 0 && <span className="badge">{cartCount}</span>}
            </button>
          </div>
        </div>
      </header>
      <nav className="mega-nav">
        <div className="container mega-nav-row">
          <a className={"nav-link" + (currentRoute.page === 'home' ? ' active' : '')} onClick={() => onNav({ page: 'home' })}>
            <Icon.Menu /> ყველა კატეგორია
          </a>
          {window.ENFITO_CATEGORIES.slice(0, 5).map(c => (
            <a key={c.id} className="nav-link" onClick={() => onNav({ page: 'listing', cat: c.id })}>
              {c.label}
            </a>
          ))}
          <a className="nav-link sale" onClick={() => onNav({ page: 'listing', cat: 'distsount' })}>
            <Icon.Tag /> ფასდაკლება
          </a>
          <span style={{flex: 1}} />
          <a className="nav-link">ბრენდები</a>
          <a className="nav-link">ჟურნალი</a>
          <a className="nav-link">დახმარება</a>
        </div>
      </nav>
    </React.Fragment>
  );
};

/* ============ PRODUCT CARD ============ */
const ProductCard = ({ p, onNav, onAdd, onFav, faved }) => {
  return (
    <div className="pcard fade-up" onClick={() => onNav({ page: 'pdp', id: p.id })}>
      <div className="pcard-media" style={{ background: p.bg, color: p.fg }}>
        {p.img && <img src={p.img} alt={p.name} className="pcard-img" loading="lazy" />}
        {p.tag && <span className={"pcard-tag" + (p.tag === 'ფასდაკლება' || p.tag === 'ჰიტი' ? ' accent' : '')}>{p.tag}</span>}
        <button className={"pcard-fav" + (faved ? ' active' : '')} onClick={(e) => { e.stopPropagation(); onFav(p.id); }} title="ფავორიტებში">
          <Icon.Heart filled={faved} />
        </button>
        {!p.img && <span className="ghost">{p.name}</span>}
        {!p.img && <span className="placeholder-tag">{p.brand}</span>}
      </div>
      <div className="pcard-body">
        <div className="pcard-brand">{p.brand}</div>
        <div className="pcard-name">{p.name}</div>
        <div className="pcard-price-row">
          <div className="pcard-prices">
            <span className="pcard-price">{window.ENFITO_FMT_PRICE(p.price)}</span>
            {p.old && <span className="pcard-price-old">{window.ENFITO_FMT_PRICE(p.old)}</span>}
          </div>
          <button className="pcard-add" onClick={(e) => { e.stopPropagation(); onAdd(p.id); }} title="დამატება კალათაში">
            <Icon.Plus />
          </button>
        </div>
      </div>
    </div>
  );
};

/* ============ FOOTER ============ */
const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div className="footer-brand">
          <img src="assets/logo.png" alt="Enfito" />
          <p>პრემიუმ ფიტნეს მოწყობილობები, აღდგენის სისტემები და სპორტული აქსესუარები — საქართველოში ოფიციალურად.</p>
          <div className="newsletter">
            <input placeholder="თქვენი ელფოსტა" />
            <button>გამოწერა</button>
          </div>
        </div>
        <div>
          <h4>კატეგორიები</h4>
          <ul>
            <li><a>ფიტნესი</a></li>
            <li><a>იოგა & პილატესი</a></li>
            <li><a>TRX სისტემები</a></li>
            <li><a>Therabody</a></li>
            <li><a>აქსესუარები</a></li>
          </ul>
        </div>
        <div>
          <h4>დახმარება</h4>
          <ul>
            <li><a>მიწოდება</a></li>
            <li><a>დაბრუნება</a></li>
            <li><a>გადახდის მეთოდები</a></li>
            <li><a>FAQ</a></li>
            <li><a>კონტაქტი</a></li>
          </ul>
        </div>
        <div>
          <h4>კომპანია</h4>
          <ul>
            <li><a>ჩვენ შესახებ</a></li>
            <li><a>ბრენდები</a></li>
            <li><a>ჟურნალი</a></li>
            <li><a>კარიერა</a></li>
            <li><a>B2B</a></li>
          </ul>
        </div>
        <div>
          <h4>კონტაქტი</h4>
          <ul>
            <li>თბილისი, ჭავჭავაძის გამზ. 64</li>
            <li>+995 32 2 11 11 11</li>
            <li>hello@enfito.ge</li>
            <li style={{marginTop: 10}}>ორშ-პარ 10:00-19:00</li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2026 Enfito Georgia — ყველა უფლება დაცულია.</div>
        <div style={{display: 'flex', gap: 20}}>
          <a>კონფიდენციალურობა</a>
          <a>პირობები</a>
          <a>Cookies</a>
        </div>
      </div>
    </div>
  </footer>
);

/* ============ TOAST ============ */
const Toast = ({ msg, show }) => (
  <div className={"toast" + (show ? ' show' : '')}>
    <span className="check"><Icon.Check /></span>
    {msg}
  </div>
);

Object.assign(window, { Header, ProductCard, Footer, Toast });
