// Shared icons and small components for Partixauto

const Icon = {
  Search: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="11" cy="11" r="7" />
      <line x1="21" y1="21" x2="16.65" y2="16.65" />
    </svg>
  ),
  Phone: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
    </svg>
  ),
  Whatsapp: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z"/>
    </svg>
  ),
  Mail: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
      <polyline points="22,6 12,13 2,6" />
    </svg>
  ),
  MapPin: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
      <circle cx="12" cy="10" r="3" />
    </svg>
  ),
  Clock: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10" />
      <polyline points="12,6 12,12 16,14" />
    </svg>
  ),
  ChevronRight: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="9,18 15,12 9,6" />
    </svg>
  ),
  ArrowRight: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="5" y1="12" x2="19" y2="12" />
      <polyline points="12,5 19,12 12,19" />
    </svg>
  ),
  Cog: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="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 0 2.83 2 2 0 0 1-2.83 0l-.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-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.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 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.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>
  ),
  Gauge: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 14l4-4M3 12a9 9 0 0 1 18 0" />
    </svg>
  ),
  Fuel: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="3" y1="22" x2="15" y2="22" />
      <line x1="4" y1="9" x2="14" y2="9" />
      <path d="M14 22V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v18" />
      <path d="M14 13h2a2 2 0 0 1 2 2v2a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2V9.83a2 2 0 0 0-.59-1.42L18 5" />
    </svg>
  ),
  Calendar: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" 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" />
    </svg>
  ),
  Play: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <polygon points="5,3 19,12 5,21" />
    </svg>
  ),
  TikTok: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.08z"/>
    </svg>
  ),
  Wrench: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
    </svg>
  ),
  Car: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 16H9m10 0h3v-3.15a1 1 0 0 0-.84-.99L16 11l-2.7-3.6a1 1 0 0 0-.8-.4H5.24a2 2 0 0 0-1.8 1.1l-.8 1.63A6 6 0 0 0 2 12.42V16h2"/>
      <circle cx="6.5" cy="16.5" r="2.5"/>
      <circle cx="16.5" cy="16.5" r="2.5"/>
    </svg>
  ),
  Filter: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
    </svg>
  ),
};

// ─── Header ─────────────────────────────────────────────────────────────
function Header({ page, onNav, onOpenSearch, company }) {
  return (
    <>
      <div className="utility-bar">
        <div className="utility-inner">
          <div className="utility-left">
            <span className="utility-item">
              <span className="dot" /> Curte deschisa - <strong>Luni-Vineri 09:00-18:00</strong>
            </span>
            <span className="utility-item">
              <Icon.MapPin size={13} /> {company.city}
            </span>
          </div>
          <div className="utility-right">
            <span className="utility-item">
              Livrare in toata tara prin curier
            </span>
            <span className="utility-item">
              <Icon.TikTok size={12} /> {company.tiktok}
            </span>
          </div>
        </div>
      </div>
      <header className="site-header">
        <div className="header-inner">
          <div className="brand" onClick={() => onNav("home")}>
            <div className="brand-mark">P</div>
            <div className="brand-name">PARTIX<span>AUTO</span></div>
          </div>
          <nav className="nav">
            <button className={page === "home" ? "active" : ""} onClick={() => onNav("home")}>Acasa</button>
            <button className={page === "catalog" || page === "car" ? "active" : ""} onClick={() => onNav("catalog")}>Catalog masini</button>
            <button className={page === "contact" ? "active" : ""} onClick={() => onNav("contact")}>Contact</button>
          </nav>
          <div className="header-search">
            <button className="header-search-btn" onClick={onOpenSearch}>
              <Icon.Search size={15} />
              <span>Cauta piesa sau masina...</span>
              <kbd>⌘K</kbd>
            </button>
          </div>
          <div className="header-actions">
            <a className="btn-call" href={`tel:${company.phone}`}>
              <Icon.Phone size={14} />
              <span className="label">{company.phoneDisplay}</span>
            </a>
            <a className="btn-wa" href={`https://wa.me/${company.whatsapp}`} target="_blank" rel="noopener">
              <Icon.Whatsapp size={14} />
              WhatsApp
            </a>
          </div>
        </div>
      </header>
    </>
  );
}

// ─── Footer ─────────────────────────────────────────────────────────────
function Footer({ company, onNav }) {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="brand">
              <div className="brand-mark">P</div>
              <div className="brand-name">PARTIX<span>AUTO</span></div>
            </div>
            <p>{company.tagline}</p>
          </div>
          <div className="footer-col">
            <h4>Catalog</h4>
            <ul>
              <li><a onClick={() => onNav("catalog")}>Toate masinile</a></li>
              <li><a onClick={() => onNav("catalog")}>Dacia / Renault</a></li>
              <li><a onClick={() => onNav("catalog")}>Volkswagen</a></li>
              <li><a onClick={() => onNav("catalog")}>BMW</a></li>
              <li><a onClick={() => onNav("catalog")}>Adaugate recent</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Info</h4>
            <ul>
              <li><a>Cum cumperi</a></li>
              <li><a>Livrare & retur</a></li>
              <li><a>Termeni si conditii</a></li>
              <li><a>Politica cookies</a></li>
              <li><a>Date firma</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Contact</h4>
            <ul>
              <li><a href={`tel:${company.phone}`} style={{fontFamily: 'var(--font-mono)'}}>{company.phoneDisplay}</a></li>
              <li><a href={`mailto:${company.email}`}>{company.email}</a></li>
              <li>{company.address}</li>
              <li><a href={`https://wa.me/${company.whatsapp}`} target="_blank">WhatsApp direct</a></li>
              <li><a>TikTok {company.tiktok}</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© {company.founded} Partixauto SRL · {company.cif} · {company.reg}</span>
          <span>Demo site v1</span>
        </div>
      </div>
    </footer>
  );
}

// ─── Car cover (placeholder image) ─────────────────────────────────────
function CarCover({ car, watermark = true }) {
  return (
    <div className="car-cover">
      <div className={`car-cover-tint tint-${car.cover}`} />
      <div className="car-cover-stripes" />
      {watermark && (
        <div className="car-cover-watermark">
          {car.brand.toUpperCase()}
        </div>
      )}
      <div className="car-cover-label">[ poza · {car.brand} {car.model} ]</div>
      <div className={`status-pill ${car.status}`}>
        <span className="dot" />
        {car.status === "in-dezmembrare" ? "In dezmembrare" : "Aproape gata"}
      </div>
    </div>
  );
}

// ─── Car card ───────────────────────────────────────────────────────────
function CarCard({ car, onClick, tier }) {
  const partsBy = window.PARTIX_DATA.PARTS_BY_CAR[car.id] || [];
  const avail = partsBy.filter(p => p.status === "disponibil").length;
  return (
    <div className="car-card" onClick={onClick}>
      <CarCover car={car} watermark={tier !== "basic"} />
      <div className="car-body">
        <div className="car-title">
          {car.brand} {car.model} <span className="year">· {car.year}</span>
        </div>
        <div className="car-meta">
          <span><Icon.Fuel /> <strong>{car.fuel}</strong></span>
          <span><Icon.Gauge /> {car.engine}</span>
          <span><Icon.Calendar /> {(car.km/1000).toFixed(0)}k km</span>
        </div>
        <div className="car-footer">
          <span className="car-parts-count"><strong>{avail}</strong> piese disponibile</span>
          <span className="car-card-cta">Vezi piese <Icon.ChevronRight /></span>
        </div>
      </div>
    </div>
  );
}

// ─── Part card ─────────────────────────────────────────────────────────
function PartCard({ part, car, company }) {
  const isAvail = part.status === "disponibil";
  const waText = encodeURIComponent(
    `Buna ziua, sunt interesat de piesa "${part.name}" (cod ${part.code}) pentru ${car.brand} ${car.model} ${car.year}. Mai este disponibila?`
  );
  return (
    <div className={`part-card ${part.status}`}>
      <div className="part-photo">
        <div className="part-photo-stripes" />
        <span className={`part-status ${part.status}`}>
          <span className="dot" />
          {part.status === "disponibil" ? "Disponibil" : part.status === "rezervat" ? "Rezervat" : "Vandut"}
        </span>
        <span className="part-photo-count">{part.photos} foto</span>
        <span className="part-photo-label">[ poza piesa ]</span>
      </div>
      <div className="part-body">
        <div className="part-cat">{part.category} · {part.code}</div>
        <div className="part-name">{part.name}</div>
        <div className="part-footer">
          <div className="part-price">{part.price}<span className="currency"> RON</span></div>
          {isAvail ? (
            <a className="btn-wa-mini" href={`https://wa.me/${company.whatsapp}?text=${waText}`} target="_blank" rel="noopener" onClick={(e) => e.stopPropagation()}>
              <Icon.Whatsapp size={11} /> Cumpar
            </a>
          ) : (
            <button className="btn-wa-mini" disabled>
              {part.status === "rezervat" ? "Rezervat" : "Vandut"}
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  Icon, Header, Footer, CarCover, CarCard, PartCard,
});
