// Shared icons + small components
const I = {
  arrow: (p = {}) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" className="svg-arrow" {...p}>
      <path d="M5 12h14M13 5l7 7-7 7"/>
    </svg>
  ),
  search: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5-5"/></svg>,
  user: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>,
  bag: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M5 7h14l-1.2 12.2a2 2 0 01-2 1.8H8.2a2 2 0 01-2-1.8L5 7z"/><path d="M9 7V5a3 3 0 016 0v2"/></svg>,
  heart: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M12 20s-7-4.35-7-10a4 4 0 017-2.65A4 4 0 0119 10c0 5.65-7 10-7 10z"/></svg>,
  whatsapp: () => <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 3.5A11 11 0 003.4 17.2L2 22l5-1.3A11 11 0 0020.5 3.5zM12 20a8 8 0 01-4.1-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8 8 0 1112 20zm4.4-6c-.2-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.6.1-.2.2-.6.8-.8 1-.1.2-.3.2-.5.1-.9-.4-1.6-.7-2.4-1.6-.6-.6-1-1.3-1.1-1.5-.1-.2 0-.4.1-.5l.4-.5c.1-.1.2-.3.2-.4 0-.2 0-.3-.1-.4l-.7-1.6c-.2-.4-.4-.4-.6-.4h-.5c-.2 0-.4 0-.6.3-.2.2-.8.7-.8 1.8 0 1.1.8 2.1.9 2.3.1.1 1.7 2.7 4.2 3.8 1.4.6 2 .6 2.7.5.4-.1 1.4-.6 1.6-1.2.2-.6.2-1.1.1-1.2-.1-.1-.3-.2-.5-.3z"/></svg>,
  menu: () => <svg viewBox="0 0 24 24" stroke="currentColor" fill="none" strokeWidth="1.4"><path d="M3 7h18M3 12h18M3 17h18"/></svg>,
  close: () => <svg viewBox="0 0 24 24" stroke="currentColor" fill="none" strokeWidth="1.4" width="16" height="16"><path d="M6 6l12 12M6 18L18 6"/></svg>,
  pin: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M12 21s-7-7-7-12a7 7 0 0114 0c0 5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></svg>,
  phone: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M5 4h3l2 5-2.5 1.5a11 11 0 005 5L14 13l5 2v3a2 2 0 01-2 2A14 14 0 013 6a2 2 0 012-2z"/></svg>,
  mail: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><rect x="3" y="5" width="18" height="14" rx="1"/><path d="M3 7l9 6 9-6"/></svg>,
};

function Brand({ small }) {
  return (
    <div className="brandmark">
      <div className="glyph" style={small ? { fontSize: 26 } : {}}>Hiba Jaber</div>
      <span className="word">Fine Jewellery · Dubai</span>
    </div>
  );
}

function Announce() {
  const items = [
    "Complimentary UAE delivery",
    "Worldwide FedEx shipping",
    "2-year warranty on every piece",
    "Private appointments at the studio · Dubai Design District",
    "Hand-set in 18k gold by our artisans",
    "Personalised notes & gift packaging on request",
  ];
  const loop = [...items, ...items];
  return (
    <div className="announce">
      <div className="announce-track">
        {loop.map((t, i) => (
          <span key={i}><span className="dot"></span>{t}</span>
        ))}
      </div>
    </div>
  );
}

function Header({ onAppoint, onMobileNav }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(null);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", on);
    return () => window.removeEventListener("scroll", on);
  }, []);

  return (
    <header className={"header " + (scrolled ? "scrolled" : "")} onMouseLeave={() => setOpen(null)}>
      <div className="container header-inner">
        <nav className="nav-left">
          <a className="nav-link has-menu" onMouseEnter={() => setOpen("shop")}>Shop</a>
          <a className="nav-link has-menu" onMouseEnter={() => setOpen("col")}>Collections</a>
          <a className="nav-link" onMouseEnter={() => setOpen(null)}>Customize</a>
          <a className="nav-link" onMouseEnter={() => setOpen(null)}>Gifts</a>
          <a className="nav-link" onMouseEnter={() => setOpen(null)}>Stories</a>
        </nav>
        <a href="#"><Brand /></a>
        <div className="nav-right">
          <button className="icon-btn search-label"><I.search /><span>Search</span></button>
          <a className="lang"><b>EN</b> / AR</a>
          <button className="icon-btn"><I.heart /></button>
          <button className="icon-btn"><I.bag /><span className="bag-count">2</span></button>
          <button className="cta-pill" onClick={onAppoint}><span className="dot"></span>Book Appointment</button>
          <button className="icon-btn mobile-toggle" onClick={onMobileNav}><I.menu /></button>
        </div>
      </div>

      {open === "shop" && (
        <div className="megamenu" onMouseLeave={() => setOpen(null)}>
          <div className="container megamenu-grid">
            <div>
              <h5>By Category</h5>
              <ul>
                <li>Rings · 151</li>
                <li>Necklaces · 120</li>
                <li>Bracelets · 93</li>
                <li>Earrings · 70</li>
                <li>Cufflinks</li>
                <li>Gift Cards</li>
              </ul>
            </div>
            <div>
              <h5>By Story</h5>
              <ul>
                <li>Personalise — Initials & Names</li>
                <li>Heritage Pieces</li>
                <li>High Jewellery · Tennis</li>
                <li>Diamond Classics</li>
                <li>Everyday Pieces</li>
              </ul>
            </div>
            <div>
              <h5>By Price</h5>
              <ul>
                <li>Under AED 5,000</li>
                <li>AED 5,000 – 15,000</li>
                <li>AED 15,000 – 50,000</li>
                <li>Above AED 50,000</li>
                <li className="muted">Range: AED 800 – 180,800</li>
              </ul>
            </div>
            <div className="feat">
              <img src="media/product-15-single-initial-necklace-bold-chain-diamonds.webp" alt=""/>
              <div>
                <div className="eyebrow gold">New In</div>
                <h4>Single Initial · Bold Chain</h4>
                <p>Your letterform, set in diamonds on a sculpted chain. Made to order in 14 days.</p>
                <a className="eyebrow ink">Explore  →</a>
              </div>
            </div>
          </div>
        </div>
      )}

      {open === "col" && (
        <div className="megamenu" onMouseLeave={() => setOpen(null)}>
          <div className="container megamenu-grid">
            <div>
              <h5>Signature</h5>
              <ul>
                <li>Infinity</li>
                <li>Zigzag</li>
                <li>Odd One Out</li>
                <li>Single Initial</li>
                <li>Hearts</li>
              </ul>
            </div>
            <div>
              <h5>Diamond</h5>
              <ul>
                <li>Like a Diamond</li>
                <li>Tennis Jewellery</li>
                <li>Diamond Classics</li>
                <li>Solitaire Engagement</li>
              </ul>
            </div>
            <div>
              <h5>Heritage</h5>
              <ul>
                <li>Palestine Watermelon</li>
                <li>Palestine & Jordan Map</li>
                <li>Arabic Letterforms</li>
                <li>Customized Creations</li>
              </ul>
            </div>
            <div className="feat">
              <img src="media/product-17-palestine-watermelon-necklace.webp" alt=""/>
              <div>
                <div className="eyebrow gold">Heritage</div>
                <h4>Palestine Watermelon</h4>
                <p>A symbol carried close. Ruby and emerald pavé in 18k yellow gold.</p>
                <a className="eyebrow ink">Read the story  →</a>
              </div>
            </div>
          </div>
        </div>
      )}
    </header>
  );
}

window.Brand = Brand;
window.Header = Header;
window.Announce = Announce;
window.HJ_I = I;