/* ============================================================
   RACK & BOX — Cart, Checkout, About, Contact, Account,
   Lookbook, Bespoke, Collections, Wishlist
   ============================================================ */

/* ---------------- CART PAGE ---------------- */
function CartPage({ onNav }) {
  const { cart, updateQty, removeFromCart } = useContext(RBCtx);
  if (cart.length === 0) {
    return (
      <div className="fade-page page-shell center" style={{ minHeight: "60vh", display: "grid", placeItems: "center" }}>
        <div>
          <Icon name="cart" size={46} stroke={1} style={{ color: "var(--ink-faint)" }} />
          <h1 className="serif" style={{ fontSize: 44, margin: "18px 0 10px" }}>No pieces added yet</h1>
          <p style={{ color: "var(--ink-soft)", marginBottom: 26 }}>Add pieces you like, then send us an enquiry.</p>
          <Btn onClick={() => onNav("shop", {})}>Browse the collection</Btn>
        </div>
      </div>
    );
  }
  return (
    <div className="fade-page page-shell">
      <div className="wrap-wide">
        <h1 className="serif page-h">Your Enquiry</h1>
        <div className="cart-grid">
          <div className="cart-items">
            {cart.map((it) => (
              <div className="cart-row" key={it.key}>
                <button className="cart-row-media zoomable" onClick={() => onNav("product", { id: it.id })}><Ph label={it.label} ratio="portrait" /></button>
                <div className="cart-row-body">
                  <div className="spread" style={{ alignItems: "flex-start" }}>
                    <div>
                      <button className="serif cart-row-name" onClick={() => onNav("product", { id: it.id })}>{it.name}</button>
                      <div className="mono cart-row-meta">{it.size} · {it.color}</div>
                    </div>
                  </div>
                  <div className="spread" style={{ marginTop: 18 }}>
                    <div className="qty">
                      <button onClick={() => updateQty(it.key, -1)}><Icon name="minus" size={14} /></button>
                      <span>{it.qty}</span>
                      <button onClick={() => updateQty(it.key, 1)}><Icon name="plus" size={14} /></button>
                    </div>
                    <button className="cart-remove" onClick={() => removeFromCart(it.key)}>Remove</button>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <aside className="summary">
            <h3 className="serif" style={{ fontSize: 24, marginBottom: 18 }}>Ready to enquire?</h3>
            <p style={{ color: "var(--ink-soft)", fontSize: 14, marginBottom: 18 }}>No prices are listed on-site — send your selection through and we'll follow up with availability and pricing.</p>
            <Btn block onClick={() => onNav("checkout", {})}>Send Enquiry</Btn>
          </aside>
        </div>
      </div>
    </div>
  );
}

/* ---------------- CHECKOUT / ENQUIRY ---------------- */
function CheckoutPage({ onNav }) {
  const { cart, clearCart } = useContext(RBCtx);
  const [sent, setSent] = useState(false);
  const [contactVia, setContactVia] = useState("Email");
  const [ref] = useState(() => (window.genRef ? window.genRef() : "LLAGM-000000"));

  if (sent) {
    return (
      <div className="fade-page page-shell">
        <div className="wrap confirm">
          <div className="confirm-badge"><Icon name="check" size={34} /></div>
          <Eyebrow>Enquiry sent</Eyebrow>
          <h1 className="serif" style={{ fontSize: "clamp(38px,5vw,64px)", fontWeight: 500, margin: "12px 0 16px" }}>Thank you.</h1>
          <p className="lede" style={{ maxWidth: "48ch", margin: "0 auto 10px" }}>
            We've received your enquiry and will get back to you by {contactVia.toLowerCase()}
            {contactVia === "Instagram DM" ? <> at <strong>{(window.BRAND?.igHandle) || "@lookslikeagoodman"}</strong></> : null} shortly.
          </p>
          <p className="mono" style={{ fontSize: 12, letterSpacing: "0.08em", color: "var(--ink-faint)" }}>Reference {ref}</p>
          <div className="row" style={{ gap: 14, justifyContent: "center", marginTop: 22 }}>
            <Btn onClick={() => { clearCart(); onNav("home", {}); }}>Back to home</Btn>
            <Btn variant="ghost" arrow={false} onClick={() => { clearCart(); onNav("shop", {}); }}>Continue browsing</Btn>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="fade-page page-shell">
      <div className="wrap-wide">
        <div className="checkout-top">
          <Logo size={26} onClick={() => onNav("home", {})} />
        </div>
        <div className="checkout-grid">
          <div className="checkout-main">
            <form className="fade-page" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
              <h2 className="serif checkout-h">Your details</h2>
              <div className="form-grid">
                <div className="field"><label>Name</label><input className="input" required placeholder="Your name" /></div>
                <div className="field"><label>Email</label><input className="input" type="email" placeholder="you@email.com" /></div>
                <div className="field"><label>Phone</label><input className="input" placeholder="+234 …" /></div>
                <div className="field"><label>Instagram handle</label><input className="input" placeholder="@yourhandle" /></div>
                <div className="field span2"><label>Preferred contact method</label>
                  <div className="bk-pills">
                    {["Email", "Instagram DM", "Phone"].map((m) => (
                      <button type="button" key={m} className={"chip" + (contactVia === m ? " active" : "")} onClick={() => setContactVia(m)}>{m}</button>
                    ))}
                  </div>
                </div>
                <div className="field span2"><label>Anything else?</label><textarea className="input" rows="3" placeholder="Sizing, occasion, made-to-measure requests…"></textarea></div>
              </div>
              <div className="checkout-nav">
                <button type="button" className="back-link" onClick={() => onNav("cart", {})}>← Back</button>
                <Btn arrow={false} type="submit">Send Enquiry</Btn>
              </div>
            </form>
          </div>
          <aside className="summary">
            <h3 className="serif" style={{ fontSize: 24, marginBottom: 18 }}>Your selection</h3>
            <div className="summary-items">
              {cart.map((it) => (
                <div className="summary-item" key={it.key}>
                  <div className="summary-item-img"><Ph label={it.label} ratio="square" /><span className="summary-qty">{it.qty}</span></div>
                  <div style={{ flex: 1 }}>
                    <div className="serif" style={{ fontSize: 15, lineHeight: 1.2 }}>{it.name}</div>
                    <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-faint)" }}>{it.size} · {it.color}</div>
                  </div>
                </div>
              ))}
            </div>
          </aside>
        </div>
      </div>
    </div>
  );
}

/* ---------------- ABOUT ---------------- */
function AboutPage({ onNav }) {
  return (
    <div className="fade-page">
      <section className="about-hero">
        <Ph label="ATELIER · STUDIO" ratio="cinema" className="about-hero-bg" />
        <div className="about-hero-ov" />
        <div className="wrap about-hero-content">
          <Eyebrow style={{ color: "var(--accent-bright)" }}>Our Story</Eyebrow>
          <h1 className="serif about-hero-h" style={{ whiteSpace: "pre-line" }}>{(window.BRAND?.story.heroHeading) || "Looks like\na good man."}</h1>
        </div>
      </section>
      <section className="section-pad">
        <div className="wrap about-intro">
          <Reveal><p className="serif about-lede">{(window.BRAND?.story.lede)}</p></Reveal>
          <Reveal delay={1}><p style={{ color: "var(--ink-soft)", fontSize: 16, lineHeight: 1.8 }}>{(window.BRAND?.story.body)} {(window.BRAND?.story.craftLine)}</p></Reveal>
        </div>
      </section>
      <section className="section-pad">
        <div className="wrap-wide values-grid">
          {[
            ["scissors", "Made to measure", "Every piece can be tailored to your measurements — enquire on any product."],
            ["leaf", "Traditional & contemporary", "Agbada, kaftans and tailored sets that move between ceremony and everyday."],
            ["globe", "Worn for the occasion", (window.BRAND?.story.valuesLine)],
          ].map(([ic, t, d], i) => (
            <Reveal key={t} delay={i + 1} className="value-card">
              <Icon name={ic} size={26} stroke={1.3} />
              <h3 className="serif" style={{ fontSize: 26, fontWeight: 500, margin: "16px 0 10px" }}>{t}</h3>
              <p style={{ color: "var(--ink-soft)" }}>{d}</p>
            </Reveal>
          ))}
        </div>
      </section>
      <BespokeBand onNav={onNav} />
    </div>
  );
}

/* ---------------- CONTACT ---------------- */
function ContactPage({ onNav }) {
  const [sent, setSent] = useState(false);
  return (
    <div className="fade-page page-shell">
      <div className="wrap-wide">
        <h1 className="serif page-h">Get in touch</h1>
        <p className="shop-sub" style={{ maxWidth: "52ch" }}>Reach us through the form below or DM us on Instagram — we reply as soon as we can.</p>
        <div className="contact-grid">
          <div className="contact-info">
            <div className="contact-card">
              <span className="contact-ic"><Icon name="ig" size={20} /></span>
              <div><span className="contact-t">Instagram</span><strong>{(window.BRAND?.igHandle) || "@lookslikeagoodman"}</strong><span className="contact-s">DM us anytime</span></div>
            </div>
            <div className="contact-card">
              <span className="contact-ic"><Icon name="pin" size={20} /></span>
              <div><span className="contact-t">Based in</span><strong>{(window.BRAND?.regionLine) || "Nigeria"}</strong></div>
            </div>
          </div>
          <div className="contact-form-wrap">
            {sent ? (
              <div className="contact-sent"><div className="confirm-badge sm"><Icon name="check" size={26} /></div><h3 className="serif" style={{ fontSize: 30, margin: "14px 0 8px" }}>Message received</h3><p style={{ color: "var(--ink-soft)" }}>Thank you for reaching out. We'll be in touch shortly.</p></div>
            ) : (
              <form className="contact-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                <h3 className="serif" style={{ fontSize: 28, marginBottom: 18 }}>Send a message</h3>
                <div className="form-grid">
                  <div className="field"><label>Name</label><input className="input" required placeholder="Your name" /></div>
                  <div className="field"><label>Email</label><input className="input" type="email" required placeholder="you@email.com" /></div>
                  <div className="field span2"><label>Subject</label>
                    <select className="input"><option>Order enquiry</option><option>Sizing & fit</option><option>Bespoke commission</option><option>Returns & exchange</option><option>Press & partnerships</option></select>
                  </div>
                  <div className="field span2"><label>Message</label><textarea className="input" rows="5" required placeholder="How can we help?"></textarea></div>
                </div>
                <Btn block arrow={false} type="submit" style={{ marginTop: 16 }}>Send message</Btn>
              </form>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CartPage, CheckoutPage, AboutPage, ContactPage });