const { useState, useEffect, useRef } = React;

const NAV_LINKS = [
  { label: "New In", href: "#new" },
  { label: "Collections", href: "#collections" },
  { label: "Abayas", href: "#new" },
  { label: "Our Story", href: "#story" },
  { label: "Stores", href: "#stores" },
];

/* ---------- Announcement marquee ---------- */
function Announcement() {
  const items = [
    "Free shipping across India on orders over ₹4,999",
    "New season — The Quiet Drape edit is live",
    "Now styling at Aiqah, Calicut · Kochi · Mangalore",
    "Made-to-measure available in-store",
  ];
  return (
    <div className="announce">
      <div className="announce__track">
        {[...items, ...items].map((t, i) => (
          <span className="announce__item" key={i}>
            {t}<span className="announce__dot" aria-hidden="true">✦</span>
          </span>
        ))}
      </div>
    </div>
  );
}

/* ---------- Header ---------- */
function Header({ count, onCart, onMenu, onSearch }) {
  const [solid, setSolid] = useState(false);
  useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={"header" + (solid ? " is-solid" : "")}>
      <div className="header__inner">
        <button className="header__icon header__burger" onClick={onMenu} aria-label="Open menu">
          <Icon name="menu" size={22} />
        </button>
        <nav className="header__nav header__nav--left">
          {NAV_LINKS.slice(0, 3).map((l) => (
            <a key={l.label} href={l.href} className="navlink">{l.label}</a>
          ))}
        </nav>
        <a href="#top" className="header__logo" aria-label="Glam Abaya home">
          <Logo size={44} />
        </a>
        <nav className="header__nav header__nav--right">
          {NAV_LINKS.slice(3).map((l) => (
            <a key={l.label} href={l.href} className="navlink">{l.label}</a>
          ))}
        </nav>
        <div className="header__actions">
          <button className="header__icon" onClick={onSearch} aria-label="Search"><Icon name="search" /></button>
          <button className="header__icon header__icon--hide" aria-label="Account"><Icon name="user" /></button>
          <button className="header__icon header__icon--hide" aria-label="Wishlist"><Icon name="heart" /></button>
          <button className="header__icon header__bag" onClick={onCart} aria-label="Cart">
            <Icon name="bag" />
            {count > 0 && <span className="header__count">{count}</span>}
          </button>
        </div>
      </div>
    </header>
  );
}

/* ---------- Mobile menu ---------- */
function MobileMenu({ open, onClose }) {
  return (
    <div className={"sheet sheet--left" + (open ? " is-open" : "")} aria-hidden={!open}>
      <div className="sheet__scrim" onClick={onClose} />
      <div className="sheet__panel">
        <div className="sheet__head">
          <Logo size={40} />
          <button className="header__icon" onClick={onClose} aria-label="Close"><Icon name="close" size={22} /></button>
        </div>
        <nav className="mobilenav">
          {NAV_LINKS.map((l) => (
            <a key={l.label} href={l.href} className="mobilenav__link" onClick={onClose}>
              {l.label}<Icon name="chevron" size={18} />
            </a>
          ))}
        </nav>
        <div className="sheet__foot">
          <a href="https://www.instagram.com/_glam_abaya/" target="_blank" rel="noreferrer" className="ghostlink">
            <Icon name="instagram" size={18} /> @_glam_abaya
          </a>
          <a href="tel:+918137069830" className="ghostlink"><Icon name="phone" size={18} /> 81370 69830</a>
        </div>
      </div>
    </div>
  );
}

/* ---------- Cart drawer ---------- */
function CartDrawer({ open, items, onClose, onQty, onRemove }) {
  const subtotal = items.reduce((s, it) => s + it.price * it.qty, 0);
  const free = 4999;
  const pct = Math.min(100, Math.round((subtotal / free) * 100));
  return (
    <div className={"sheet sheet--right" + (open ? " is-open" : "")} aria-hidden={!open}>
      <div className="sheet__scrim" onClick={onClose} />
      <aside className="sheet__panel cart">
        <div className="sheet__head">
          <span className="cart__title">Your bag <em>({items.reduce((s, i) => s + i.qty, 0)})</em></span>
          <button className="header__icon" onClick={onClose} aria-label="Close"><Icon name="close" size={22} /></button>
        </div>

        {items.length > 0 && (
          <div className="cart__ship">
            <p>{subtotal >= free ? "You've unlocked free shipping ✦" : `You're ${inr(free - subtotal)} away from free shipping`}</p>
            <div className="cart__bar"><span style={{ width: pct + "%" }} /></div>
          </div>
        )}

        <div className="cart__body">
          {items.length === 0 ? (
            <div className="cart__empty">
              <Frame label="your edit" ratio="1 / 1" tone="sand" rounded className="cart__emptyart" src="img/story_fabric" alt="" />
              <p className="cart__emptytitle">Your bag is empty</p>
              <p className="cart__emptynote">Begin with The Quiet Drape — our most-loved everyday abayas.</p>
              <a href="#new" className="btn btn--ink" onClick={onClose}>Shop new in</a>
            </div>
          ) : (
            items.map((it) => (
              <div className="lineitem" key={it.uid}>
                <Frame label={it.label} ratio="3 / 4" tone={it.tone} className="lineitem__img" src={it.img} alt={it.name} />
                <div className="lineitem__body">
                  <div className="lineitem__top">
                    <div>
                      <p className="lineitem__name">{it.name}</p>
                      <p className="lineitem__meta">{it.size} · <span className="swatchdot" style={{ background: it.color }} /></p>
                    </div>
                    <button className="lineitem__remove" onClick={() => onRemove(it.uid)} aria-label="Remove"><Icon name="close" size={16} /></button>
                  </div>
                  <div className="lineitem__bottom">
                    <div className="qty">
                      <button onClick={() => onQty(it.uid, -1)} aria-label="Decrease"><Icon name="minus" size={14} /></button>
                      <span>{it.qty}</span>
                      <button onClick={() => onQty(it.uid, 1)} aria-label="Increase"><Icon name="plus" size={14} /></button>
                    </div>
                    <span className="lineitem__price">{inr(it.price * it.qty)}</span>
                  </div>
                </div>
              </div>
            ))
          )}
        </div>

        {items.length > 0 && (
          <div className="cart__foot">
            <div className="cart__row"><span>Subtotal</span><span>{inr(subtotal)}</span></div>
            <p className="cart__note">Taxes & shipping calculated at checkout.</p>
            <button className="btn btn--copper btn--full">Checkout · {inr(subtotal)}</button>
            <button className="btn btn--text btn--full" onClick={onClose}>Continue shopping</button>
          </div>
        )}
      </aside>
    </div>
  );
}

Object.assign(window, { Announcement, Header, MobileMenu, CartDrawer });