/* shared.jsx — icons, data, primitives */

// ===========================================================
// Icons (small set, hand-tuned)
// ===========================================================
const Icon = {
  Crown: ({size = 24}) => (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.2">
      <path d="M4 22 L6 11 L11.5 16 L16 8 L20.5 16 L26 11 L28 22 Z" strokeLinejoin="round" />
      <path d="M5 25 L27 25" strokeLinecap="round" />
      <circle cx="6" cy="11" r="1" fill="currentColor" />
      <circle cx="16" cy="8" r="1" fill="currentColor" />
      <circle cx="26" cy="11" r="1" fill="currentColor" />
    </svg>
  ),
  Diamond: ({size = 16}) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1">
      <path d="M3 6 L8 2 L13 6 L8 14 Z" strokeLinejoin="round" />
      <path d="M3 6 L13 6 M8 2 L5.5 6 L8 14 M8 2 L10.5 6 L8 14" />
    </svg>
  ),
  Heart: ({size = 16, filled = false}) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill={filled ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1.2">
      <path d="M8 13.5 C 8 13.5 2 10 2 5.8 C 2 3.7 3.5 2.5 5 2.5 C 6.5 2.5 7.5 3.5 8 4.5 C 8.5 3.5 9.5 2.5 11 2.5 C 12.5 2.5 14 3.7 14 5.8 C 14 10 8 13.5 8 13.5 Z" strokeLinejoin="round" />
    </svg>
  ),
  Search: ({size = 18}) => (
    <svg width={size} height={size} viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.2">
      <circle cx="8" cy="8" r="5.5" />
      <line x1="12" y1="12" x2="16" y2="16" strokeLinecap="round" />
    </svg>
  ),
  Bag: ({size = 18}) => (
    <svg width={size} height={size} viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.2">
      <path d="M4 5.5 L4 16 L14 16 L14 5.5 Z" />
      <path d="M6.5 5.5 C 6.5 3.5 7.5 2 9 2 C 10.5 2 11.5 3.5 11.5 5.5" />
    </svg>
  ),
  User: ({size = 18}) => (
    <svg width={size} height={size} viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.2">
      <circle cx="9" cy="6.5" r="3" />
      <path d="M3 16 C 3 12.5 5.5 11 9 11 C 12.5 11 15 12.5 15 16" strokeLinecap="round" />
    </svg>
  ),
  WhatsApp: ({size = 28}) => (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="currentColor">
      <path d="M16 3 C 8.8 3 3 8.8 3 16 c 0 2.3 0.6 4.5 1.7 6.4 L 3 29 l 6.8 -1.8 c 1.9 1 4 1.6 6.2 1.6 c 7.2 0 13 -5.8 13 -13 S 23.2 3 16 3 Z M 23.3 21.5 c -0.3 0.9 -1.6 1.7 -2.7 1.9 c -0.7 0.1 -1.6 0.3 -4.7 -1 c -3.9 -1.6 -6.4 -5.6 -6.6 -5.9 c -0.2 -0.3 -1.6 -2.1 -1.6 -4 c 0 -1.9 1 -2.8 1.3 -3.2 c 0.4 -0.4 0.8 -0.5 1.1 -0.5 h 0.8 c 0.3 0 0.6 0.1 0.9 0.7 c 0.3 0.7 1 2.6 1.1 2.7 c 0.1 0.2 0.1 0.4 0 0.6 c -0.1 0.2 -0.2 0.4 -0.4 0.6 c -0.2 0.2 -0.4 0.4 -0.5 0.6 c -0.2 0.2 -0.4 0.4 -0.2 0.7 c 0.2 0.4 0.9 1.6 2 2.5 c 1.4 1.2 2.5 1.6 2.9 1.8 c 0.4 0.2 0.6 0.1 0.8 -0.1 c 0.2 -0.2 0.9 -1 1.1 -1.4 c 0.2 -0.4 0.5 -0.3 0.8 -0.2 c 0.3 0.1 2.1 1 2.5 1.2 c 0.4 0.2 0.6 0.3 0.7 0.5 c 0.1 0.2 0.1 1.1 -0.2 2.1 Z" />
    </svg>
  ),
  Arrow: ({size = 14, dir = "right"}) => {
    const rotate = {right: 0, left: 180, up: -90, down: 90}[dir];
    return (
      <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.2" style={{transform: `rotate(${rotate}deg)`}}>
        <line x1="2" y1="8" x2="14" y2="8" strokeLinecap="round" />
        <polyline points="9,3 14,8 9,13" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    );
  },
  Plus: ({size = 14}) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.2">
      <line x1="8" y1="2" x2="8" y2="14" strokeLinecap="round" />
      <line x1="2" y1="8" x2="14" y2="8" strokeLinecap="round" />
    </svg>
  ),
  Minus: ({size = 14}) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.2">
      <line x1="2" y1="8" x2="14" y2="8" strokeLinecap="round" />
    </svg>
  ),
  Close: ({size = 18}) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4">
      <line x1="3" y1="3" x2="13" y2="13" strokeLinecap="round" />
      <line x1="13" y1="3" x2="3" y2="13" strokeLinecap="round" />
    </svg>
  ),
  Check: ({size = 14}) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6">
      <polyline points="3,8 7,12 13,4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  Map: ({size = 16}) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.2">
      <path d="M8 1 C 5 1 2.5 3.4 2.5 6.5 C 2.5 10 8 15 8 15 S 13.5 10 13.5 6.5 C 13.5 3.4 11 1 8 1 Z" strokeLinejoin="round" />
      <circle cx="8" cy="6.5" r="2" />
    </svg>
  ),
  Phone: ({size = 14}) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.2">
      <path d="M3 4 C 3 3 3.5 2.5 4.5 2.5 H 5.5 L 7 5.5 L 5.5 6.5 C 6.5 8.5 7.5 9.5 9.5 10.5 L 10.5 9 L 13.5 10.5 V 11.5 C 13.5 12.5 13 13 12 13 C 8 13 3 8 3 4 Z" />
    </svg>
  ),
  Globe: ({size = 14}) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.1">
      <circle cx="8" cy="8" r="6" />
      <ellipse cx="8" cy="8" rx="2.5" ry="6" />
      <line x1="2" y1="8" x2="14" y2="8" />
    </svg>
  ),
};

// ===========================================================
// PalacesMark — wordmark, drawn as SVG-friendly composite
// ===========================================================
const PalacesMark = ({size = 22}) => (
  <a href="#" onClick={(e) => { e.preventDefault(); window.__nav && window.__nav('home'); window.scrollTo(0,0); }} style={{display: 'flex', alignItems: 'center', gap: 10}}>
    <span className="crown" style={{width: size + 4, height: size + 4}}>
      <Icon.Crown size={size + 4} />
    </span>
    <span style={{
      fontFamily: 'var(--font-display, "Cormorant Garamond", serif)',
      fontStyle: 'italic',
      fontSize: size,
      letterSpacing: '0.01em',
      color: 'var(--royal-night)',
      lineHeight: 1,
    }}>
      Palaces
      <span style={{
        fontStyle: 'normal',
        fontFamily: 'var(--font-body, Inter, sans-serif)',
        fontSize: 9,
        letterSpacing: '0.36em',
        marginLeft: 6,
        verticalAlign: 'middle',
        color: 'var(--ink-60)',
      }}>JEWELLERY</span>
    </span>
  </a>
);

// ===========================================================
// Product data
// ===========================================================
const PRODUCTS = [
  { id: 'aureveris', name: 'Aureveris', cat: 'Bridal', img: 'assets/p-aureveris.webp', price: 48399, metal: 'rose', tag: 'Signature', desc: 'Multi-sapphire lotus crown, set in 18k rose gold with pavé brilliants on a tapered shank.' },
  { id: 'velantrix', name: 'Velantrix', cat: 'Bridal', img: 'assets/p-velantrix.webp', price: 49299, metal: 'white', tag: 'Couture', desc: 'Emerald cabochon framed by a starburst of marquise and round-brilliant diamonds.' },
  { id: 'seraphelis', name: 'Seraphelis', cat: 'Bridal', img: 'assets/p-seraphelis.webp', price: 33199, metal: 'white', desc: 'Bridal cluster with a halo of pavé and side-pavé stones.' },
  { id: 'eagle-ring', name: 'Eagle of Noor — Ring', cat: 'Signature', img: 'assets/p-eagle-ring.webp', price: 23899, metal: 'yellow', tag: 'House Motif' },
  { id: 'eagle-pendant', name: 'Eagle of Noor — Pendant', cat: 'Signature', img: 'assets/p-eagle-pendant.webp', price: 14189, metal: 'yellow' },
  { id: 'imperial-eagle', name: 'Imperial Eagle of Noor', cat: 'Signature', img: 'assets/p-imperial-eagle.webp', price: 30499, metal: 'yellow', tag: 'Couture' },
  { id: 'celeste', name: 'Celeste Crown Eternity', cat: 'Bridal', img: 'assets/p-celeste-crown.webp', price: 33409, metal: 'white', priceFrom: 16769 },
  { id: 'twilight', name: 'Twilight Petal', cat: 'Gemstone', img: 'assets/p-twilight-petal.webp', price: 19600, metal: 'white' },
  { id: 'midnight', name: 'Midnight Tide', cat: 'Gemstone', img: 'assets/p-midnight-tide.webp', price: 19599, metal: 'white' },
  { id: 'prismara', name: 'Prismara Butterfly', cat: 'Gemstone', img: 'assets/p-prismara.webp', price: 12729, metal: 'white' },
  { id: 'magnolia', name: 'Magnolia Earring', cat: 'Couture', img: 'assets/p-magnolia.webp', price: 44899, metal: 'yellow' },
  { id: 'honeycrest', name: 'Honeycrest Earring', cat: 'Earring', img: 'assets/p-honeycrest.webp', price: 20699, metal: 'yellow' },
  { id: 'celestial-leaf', name: 'Celestial Leaf', cat: 'Earring', img: 'assets/p-celestial-leaf.webp', price: 20100, metal: 'white' },
  { id: 'skyhold', name: 'Skyhold Solitaire', cat: 'Bridal', img: 'assets/p-skyhold.webp', price: 9299, metal: 'rose', tag: 'Accessible' },
  { id: 'radiant-horizon', name: 'Radiant Horizon Pendant', cat: 'Pendant', img: 'assets/p-radiant-horizon.webp', price: 11399, metal: 'yellow' },
  { id: 'rosabella', name: 'Rosabella', cat: 'Gemstone', img: 'assets/p-rosabella.webp', price: 20099, metal: 'rose' },
  { id: 'sunlure', name: 'Sunlure', cat: 'Gemstone', img: 'assets/p-sunlure.webp', price: 20399, metal: 'yellow' },
  { id: 'ember-hoops', name: 'Ember Arc Hoops', cat: 'Earring', img: 'assets/p-ember-hoops.webp', price: 11299, metal: 'white' },
  { id: 'trilight', name: 'Trilight Hoops', cat: 'Earring', img: 'assets/p-trilight.webp', price: 21499, metal: 'white' },
];

const byId = (id) => PRODUCTS.find(p => p.id === id);

const fmtAED = (n) => `AED ${n.toLocaleString('en-US')}`;

// ===========================================================
// ProductCard
// ===========================================================
const ProductCard = ({product, onOpen}) => {
  const [liked, setLiked] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem('palaces-likes') || '{}')[product.id] || false; } catch { return false; }
  });
  const toggleLike = (e) => {
    e.stopPropagation();
    const next = !liked;
    setLiked(next);
    try {
      const obj = JSON.parse(localStorage.getItem('palaces-likes') || '{}');
      if (next) obj[product.id] = true; else delete obj[product.id];
      localStorage.setItem('palaces-likes', JSON.stringify(obj));
    } catch {}
  };
  return (
    <div className="product-card" onClick={() => onOpen && onOpen(product.id)}>
      <div className="product-card__media">
        <img src={product.img} alt={product.name} loading="lazy" />
        <button className="product-card__heart" onClick={toggleLike} aria-label="Save">
          <span style={{color: liked ? '#7B1E2B' : 'var(--charcoal)'}}>
            <Icon.Heart size={15} filled={liked} />
          </span>
        </button>
        {product.tag && (
          <span style={{position: 'absolute', top: 14, left: 14}} className="tag">{product.tag}</span>
        )}
      </div>
      <div className="product-card__body">
        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16}}>
          <h4 className="display" style={{margin: 0, fontSize: 22}}>{product.name}</h4>
          <span className="price" style={{fontSize: 13, color: 'var(--charcoal)', whiteSpace: 'nowrap'}}>
            {product.priceFrom ? `from ${fmtAED(product.priceFrom)}` : fmtAED(product.price)}
          </span>
        </div>
        <p className="label" style={{margin: '6px 0 0'}}>{product.cat} · 18k {metalName(product.metal)}</p>
      </div>
    </div>
  );
};

const metalName = (m) => ({
  white: 'White Gold',
  yellow: 'Yellow Gold',
  rose: 'Rose Gold',
  platinum: 'Platinum',
})[m] || 'Gold';

// ===========================================================
// Section header
// ===========================================================
const SectionHead = ({eyebrow, title, sub, align = 'left', action}) => (
  <div style={{
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
    marginBottom: 56,
    textAlign: align,
    flexWrap: 'wrap',
    gap: 24,
  }}>
    <div style={{maxWidth: 640}}>
      {eyebrow && <div className="eyebrow" style={{marginBottom: 14}}>{eyebrow}</div>}
      <h2 className="display" style={{fontSize: 'clamp(36px, 4.2vw, 56px)', margin: 0}}>{title}</h2>
      {sub && <p style={{margin: '16px 0 0', fontSize: 15, color: 'var(--ink-60)', maxWidth: 540}}>{sub}</p>}
    </div>
    {action}
  </div>
);

// Export to window so component files can pick these up
Object.assign(window, {
  Icon, PalacesMark, PRODUCTS, byId, fmtAED, metalName, ProductCard, SectionHead,
});
