const { useState } = React;

/* ---------- Hero ---------- */
function Hero({ onShop }) {
  return (
    <section className="hero" id="top">
      <Frame label="campaign / the quiet drape" ratio="auto" tone="ink" className="hero__bg" src="img/hero" alt="Glam Abaya — The Quiet Drape campaign" eager />
      <div className="hero__veil" />
      <div className="hero__content">
        <Reveal className="hero__eyebrow"><Eyebrow light>New Season · SS26</Eyebrow></Reveal>
        <Reveal as="h1" className="hero__title" delay={80}>
          The Quiet<br /><em>Drape</em>
        </Reveal>
        <Reveal className="hero__sub" delay={160}>
          Modest silhouettes cut from flowing crepe and washed linen.
          Abayas made to move with you — and to enhance your appearance.
        </Reveal>
        <Reveal className="hero__cta" delay={240}>
          <a href="#new" className="btn btn--copper" onClick={onShop}>Shop the edit <Icon name="arrowRight" size={18} /></a>
          <a href="#collections" className="btn btn--ghost-light">View collections</a>
        </Reveal>
      </div>
      <div className="hero__scroll"><span /> Scroll</div>
    </section>
  );
}

/* ---------- Value strip ---------- */
function ValueStrip() {
  const vals = [
    { icon: "sparkle", t: "Hand-finished", s: "Detailed in small batches" },
    { icon: "truck", t: "Free shipping", s: "On orders over ₹4,999" },
    { icon: "ruler", t: "Made to measure", s: "Tailoring in-store" },
    { icon: "leaf", t: "Breathable fabric", s: "Crepe, linen & satin" },
  ];
  return (
    <section className="values">
      {vals.map((v) => (
        <div className="values__item" key={v.t}>
          <Icon name={v.icon} size={22} />
          <div>
            <p className="values__t">{v.t}</p>
            <p className="values__s">{v.s}</p>
          </div>
        </div>
      ))}
    </section>
  );
}

/* ---------- Collections ---------- */
function Collections() {
  return (
    <section className="section collections" id="collections">
      <div className="section__head">
        <Eyebrow>Shop by edit</Eyebrow>
        <h2 className="section__title">Collections</h2>
        <p className="section__lead">Four ways to wear Glam Abaya — from the everyday drape to occasion hand-work.</p>
      </div>
      <div className="collections__grid">
        {COLLECTIONS.map((c, i) => (
          <Reveal key={c.id} as="a" href="#new" className={"colcard" + (i === 0 ? " colcard--wide" : "")} delay={i * 70}>
            <Frame label={c.label} ratio={i === 0 ? "16 / 10" : "4 / 5"} tone={c.tone} className="colcard__img" src={c.img} alt={c.name} />
            <div className="colcard__body">
              <div>
                <p className="colcard__name">{c.name}</p>
                <p className="colcard__count">{c.count} styles</p>
              </div>
              <span className="colcard__go"><Icon name="arrowUpRight" size={18} /></span>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

/* ---------- Product card ---------- */
function ProductCard({ p, onAdd, onWish, wished, delay }) {
  return (
    <Reveal className="pcard" delay={delay}>
      <div className="pcard__media">
        <Frame label={p.label} ratio="3 / 4" tone={p.tone} className="pcard__img pcard__img--a" src={p.img} alt={p.name} />
        <Frame label={p.label + " · b"} ratio="3 / 4" tone={p.alt} className="pcard__img pcard__img--b" src={p.imgAlt} alt={p.name + " alternate"} />
        {p.tag && <span className={"pcard__tag" + (p.tag === "Bestseller" ? " is-best" : "")}>{p.tag}</span>}
        <button className={"pcard__wish" + (wished ? " is-on" : "")} onClick={() => onWish(p.id)} aria-label="Add to wishlist">
          <Icon name="heart" size={18} />
        </button>
        <button className="pcard__add" onClick={() => onAdd(p)}>
          <Icon name="plus" size={16} /> Quick add
        </button>
      </div>
      <div className="pcard__info">
        <div className="pcard__line">
          <p className="pcard__name">{p.name}</p>
          <p className="pcard__price">{inr(p.price)}</p>
        </div>
        <div className="pcard__bottom">
          <span className="pcard__cat">{p.cat}</span>
          <div className="pcard__swatches">
            {p.colors.map((c) => <span key={c} className="swatchdot" style={{ background: c }} />)}
          </div>
        </div>
      </div>
    </Reveal>
  );
}

/* ---------- New arrivals grid ---------- */
function NewArrivals({ onAdd, onWish, wishlist }) {
  const [filter, setFilter] = useState("All");
  const cats = ["All", "Everyday", "Open & Kimono", "Occasion"];
  const list = filter === "All" ? PRODUCTS : PRODUCTS.filter((p) => p.cat === filter);
  return (
    <section className="section arrivals" id="new">
      <div className="section__head section__head--row">
        <div>
          <Eyebrow>Just landed</Eyebrow>
          <h2 className="section__title">New in</h2>
        </div>
        <div className="filters">
          {cats.map((c) => (
            <button key={c} className={"chip" + (filter === c ? " is-active" : "")} onClick={() => setFilter(c)}>{c}</button>
          ))}
        </div>
      </div>
      <div className="arrivals__grid">
        {list.map((p, i) => (
          <ProductCard key={p.id} p={p} onAdd={onAdd} onWish={onWish} wished={wishlist.includes(p.id)} delay={(i % 4) * 60} />
        ))}
      </div>
      <div className="arrivals__more">
        <a href="#new" className="btn btn--ink">View all abayas <Icon name="arrowRight" size={18} /></a>
      </div>
    </section>
  );
}

/* ---------- Quick add modal ---------- */
function QuickAdd({ product, onClose, onConfirm }) {
  const [size, setSize] = useState(null);
  const [color, setColor] = useState(product ? product.colors[0] : null);
  if (!product) return null;
  const sizes = ["52", "54", "56", "58", "60"];
  return (
    <div className="modal is-open" onClick={onClose}>
      <div className="modal__panel" onClick={(e) => e.stopPropagation()}>
        <button className="modal__close header__icon" onClick={onClose} aria-label="Close"><Icon name="close" size={22} /></button>
        <Frame label={product.label} ratio="3 / 4" tone={product.tone} className="modal__img" src={product.img} alt={product.name} />
        <div className="modal__body">
          <p className="modal__cat">{product.cat}</p>
          <h3 className="modal__name">{product.name}</h3>
          <p className="modal__price">{inr(product.price)}</p>
          <p className="modal__desc">A fluid floor-length abaya in breathable crepe with a concealed front and softly draped sleeve.</p>

          <div className="modal__group">
            <span className="modal__label">Colour</span>
            <div className="modal__swatches">
              {product.colors.map((c) => (
                <button key={c} className={"swatchbtn" + (color === c ? " is-on" : "")} style={{ background: c }} onClick={() => setColor(c)} aria-label="Colour" />
              ))}
            </div>
          </div>

          <div className="modal__group">
            <div className="modal__labelrow"><span className="modal__label">Length (inches)</span><a href="#stores" className="modal__guide">Size guide</a></div>
            <div className="modal__sizes">
              {sizes.map((s) => (
                <button key={s} className={"sizebtn" + (size === s ? " is-on" : "")} onClick={() => setSize(s)}>{s}"</button>
              ))}
            </div>
          </div>

          <button
            className="btn btn--copper btn--full modal__add"
            disabled={!size}
            onClick={() => onConfirm(product, { size: size + '"', color })}
          >
            {size ? "Add to bag · " + inr(product.price) : "Select a length"}
          </button>
          <p className="modal__ship"><Icon name="truck" size={16} /> Ships in 2–4 days · easy returns in-store</p>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Hero, ValueStrip, Collections, ProductCard, NewArrivals, QuickAdd });