// Shared UI: Header, Footer, Cart drawer, announcement bar
const { useState, useEffect, useRef, useMemo } = React;

const fmtPrice = (n) => "Rs " + n.toLocaleString("en-PK");

function Announce() {
  return null;
}

function Header({ page, go, cart, openCart }) {
  const count = cart.reduce((s, i) => s + i.qty, 0);
  return (
    <>
      <Announce />
      <header className="tf-header">
        <div className="tf-header-inner">
          <nav className="tf-nav">
            <a className={page === "shop" ? "active" : ""} onClick={() => go("shop")}>Shop</a>
            <a className={page === "pocket" ? "active" : ""} onClick={() => go("pocket")}>Pocket</a>
            <a onClick={() => go("shop")}>Discovery</a>
            <a onClick={() => go("home", "#story")}>Journal</a>
          </nav>
          <div className="tf-logo" onClick={() => go("home")}>
            Two Fragrances
            <span className="sub">Est. MMXXV · Karachi</span>
          </div>
          <div className="tf-nav-right">
            <button>Search</button>
            <button>Account</button>
            <button onClick={openCart}>
              Cart {count > 0 && <span className="cart-dot">{count}</span>}
            </button>
          </div>
        </div>
      </header>
    </>
  );
}

function Footer({ go }) {
  return (
    <footer className="tf-footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-logo">Two Fragrances</div>
            <p style={{ color: "var(--ink-soft)", maxWidth: 360, fontSize: 14, lineHeight: 1.7 }}>
              A small house making considered fragrance from Karachi. Two noses, one bottle, no compromise.
            </p>
          </div>
          <div className="footer-col">
            <h5>Shop</h5>
            <ul>
              <li><a onClick={() => go("shop")}>Signature 50ml</a></li>
              <li><a onClick={() => go("pocket")}>Pocket 10ml</a></li>
              <li><a onClick={() => go("shop")}>Discovery Set</a></li>
              <li><a onClick={() => go("shop")}>Gift Cards</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>House</h5>
            <ul>
              <li><a>Our Story</a></li>
              <li><a>The Two Noses</a></li>
              <li><a>Ingredients</a></li>
              <li><a>Journal</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Service</h5>
            <ul>
              <li><a>Shipping</a></li>
              <li><a>Returns</a></li>
              <li><a>Contact</a></li>
              <li><a>FAQ</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-huge">Two <em>Fragrances</em></div>
        <div className="footer-bottom">
          <span>© MMXXVI Two Fragrances. Karachi · Lahore · Dubai.</span>
          <span>Made slowly, with hands.</span>
        </div>
      </div>
    </footer>
  );
}

function CartDrawer({ open, onClose, cart, setCart, go }) {
  const total = cart.reduce((s, i) => s + i.price * i.qty, 0);
  const inc = (id) => setCart(cart.map(i => i.id === id ? { ...i, qty: i.qty + 1 } : i));
  const dec = (id) => setCart(cart.map(i => i.id === id ? { ...i, qty: Math.max(1, i.qty - 1) } : i).filter(i => i.qty > 0));
  const remove = (id) => setCart(cart.filter(i => i.id !== id));
  return (
    <>
      <div className={"drawer-overlay " + (open ? "open" : "")} onClick={onClose} />
      <aside className={"drawer " + (open ? "open" : "")} aria-hidden={!open}>
        <div className="drawer-head">
          <h3>Your Cart <span style={{ fontStyle: "italic", color: "var(--muted)", fontSize: 20 }}>({cart.reduce((s,i)=>s+i.qty,0)})</span></h3>
          <button className="drawer-close" onClick={onClose}>✕</button>
        </div>
        {cart.length === 0 ? (
          <div className="drawer-empty">
            <div className="big">A quiet shelf.</div>
            <p>Nothing here yet. Begin with a discovery set, or browse the full range.</p>
            <button className="btn" style={{ marginTop: 32 }} onClick={() => { onClose(); go("shop"); }}>Browse the range →</button>
          </div>
        ) : (
          <>
            <div className="drawer-items">
              {cart.map(item => (
                <div key={item.id} className="cart-item">
                  <div className="cart-item-img">
                    <img src={item.image} alt={item.name} />
                  </div>
                  <div>
                    <div className="cart-item-name">{item.name}</div>
                    <div className="cart-item-meta">{item.size}</div>
                    <div className="cart-item-qty">
                      <button onClick={() => dec(item.id)}>−</button>
                      <span>{item.qty}</span>
                      <button onClick={() => inc(item.id)}>+</button>
                      <button onClick={() => remove(item.id)} style={{ marginLeft: 12, border: "none", color: "var(--muted)", textDecoration: "underline", padding: 0, fontSize: 11 }}>Remove</button>
                    </div>
                  </div>
                  <div className="cart-item-price">{fmtPrice(item.price * item.qty)}</div>
                </div>
              ))}
            </div>
            <div className="drawer-foot">
              <div className="drawer-total">
                <span className="lbl">Subtotal</span>
                <span className="val">{fmtPrice(total)}</span>
              </div>
              <button className="btn" style={{ width: "100%" }} onClick={() => { onClose(); go("checkout"); }}>Proceed to Checkout</button>
              <p style={{ textAlign: "center", fontSize: 11, color: "var(--muted)", marginTop: 12, letterSpacing: "0.14em", textTransform: "uppercase" }}>Shipping calculated at checkout</p>
            </div>
          </>
        )}
      </aside>
    </>
  );
}

function Marquee() {
  const items = [
    "Niche fragrance, small batch", "Inspired by icons, not copies", "Made in Karachi",
    "Ships worldwide", "Hand-labeled", "Discovery with every order",
  ];
  const doubled = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        <span>
          {doubled.map((t, i) => (
            <React.Fragment key={i}>
              {t} <span className="dot" />
            </React.Fragment>
          ))}
        </span>
      </div>
    </div>
  );
}

function Newsletter() {
  const [email, setEmail] = useState("");
  const [done, setDone] = useState(false);
  return (
    <section className="newsletter">
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: 24 }}>— The House Letter —</div>
        <h3>A note, <em>now and again.</em></h3>
        <p>New releases, quiet notes from the studio, and occasional access before anyone else. No noise.</p>
        <form className="news-form" onSubmit={e => { e.preventDefault(); if (email) setDone(true); }}>
          <input value={email} onChange={e => setEmail(e.target.value)} placeholder="your@email.com" type="email" required />
          <button type="submit">{done ? "Thank you" : "Subscribe"}</button>
        </form>
      </div>
    </section>
  );
}

Object.assign(window, { Header, Footer, CartDrawer, Announce, Marquee, Newsletter, fmtPrice });