/* ============================================================
   KHAL DESIGN — Cart, Checkout (enquiry-based), About, Contact
   ============================================================ */

/* ---------------- 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" }}>Your bag is empty</h1>
          <p style={{ color: "var(--ink-soft)", marginBottom: 26 }}>Find a pair worth the enquiry.</p>
          <Btn onClick={() => onNav("shop", {})}>Start shopping</Btn>
        </div>
      </div>
    );
  }
  return (
    <div className="fade-page page-shell">
      <div className="wrap-wide">
        <h1 className="serif page-h">Your Bag</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">EU {it.size} · {it.color}</div>
                    </div>
                    <Price ngn={it.price} style={{ fontFamily: "var(--font-display)", fontSize: 22 }} />
                  </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>
          <OrderSummary onNav={onNav} cta="Send Enquiry" onCta={() => onNav("checkout", {})} />
        </div>
      </div>
    </div>
  );
}

function OrderSummary({ onNav, cta, onCta }) {
  const { cart } = useContext(RBCtx);
  return (
    <aside className="summary">
      <h3 className="serif" style={{ fontSize: 24, marginBottom: 18 }}>Your enquiry</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)" }}>EU {it.size} · {it.color}</div></div>
          </div>
        ))}
      </div>
      <p style={{ fontSize: 13, color: "var(--ink-soft)", marginTop: 16 }}>
        No prices are listed yet — the workshop confirms pricing, materials and delivery once we review your enquiry.
      </p>
      {cta && <Btn block onClick={onCta} style={{ marginTop: 18 }}>{cta}</Btn>}
      <div className="summary-assure">
        <span><Icon name="shield" size={15} /> Reviewed directly by the workshop</span>
        <span><Icon name="truck" size={15} /> Delivery confirmed at enquiry</span>
      </div>
    </aside>
  );
}

/* ---------------- CHECKOUT (Enquiry form) ---------------- */
function CheckoutPage({ onNav }) {
  const { cart, clearCart } = useContext(RBCtx);
  const [sent, setSent] = useState(false);

  if (cart.length === 0 && !sent) {
    return (
      <div className="fade-page page-shell center" style={{ minHeight: "50vh", display: "grid", placeItems: "center" }}>
        <div><h1 className="serif" style={{ fontSize: 38, marginBottom: 16 }}>Nothing to send yet</h1><Btn onClick={() => onNav("shop", {})}>Browse the collection</Btn></div>
      </div>
    );
  }

  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. We'll be in touch.</h1>
          <p className="lede" style={{ maxWidth: "48ch", margin: "0 auto 10px" }}>
            The workshop reviews every enquiry personally and will confirm pricing, sizing and delivery directly.
          </p>
          <p style={{ color: "var(--ink-soft)", marginBottom: 32 }}>
            For quick questions, message us on Instagram — {(window.BRAND?.igHandle) || "@khal_designs"}.
          </p>
          <div className="row" style={{ gap: 14, justifyContent: "center" }}>
            <Btn onClick={() => { clearCart(); onNav("home", {}); }}>Back to home</Btn>
            <Btn variant="ghost" arrow={false} onClick={() => { clearCart(); onNav("shop", {}); }}>Continue shopping</Btn>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="fade-page page-shell">
      <div className="wrap-wide">
        <div className="checkout-top">
          <Logo size={22} onClick={() => onNav("home", {})} />
          <button className="checkout-secure"><Icon name="shield" size={15} /> Reviewed directly</button>
        </div>

        <div className="checkout-grid">
          <div className="checkout-main">
            <div className="fade-page">
              <h2 className="serif checkout-h">Your details</h2>
              <div className="form-grid">
                <div className="field span2"><label>Email address</label><input className="input" type="email" required placeholder="you@email.com" /></div>
                <div className="field"><label>First name</label><input className="input" required placeholder="First name" /></div>
                <div className="field"><label>Last name</label><input className="input" required placeholder="Last name" /></div>
                <div className="field"><label>City</label><input className="input" placeholder="City" /></div>
                <div className="field"><label>Phone / Instagram handle</label><input className="input" placeholder="+234 … or @yourhandle" /></div>
                <div className="field span2"><label>Anything else?</label><textarea className="input" rows="3" placeholder="Sizing notes, delivery preferences…"></textarea></div>
              </div>
              <div className="checkout-nav">
                <button className="back-link" onClick={() => onNav("cart", {})}>← Return to bag</button>
                <Btn arrow={false} onClick={() => setSent(true)}>Send Enquiry</Btn>
              </div>
            </div>
          </div>
          <OrderSummary onNav={onNav} />
        </div>
      </div>
    </div>
  );
}

/* ---------------- ABOUT ---------------- */
function AboutPage({ onNav }) {
  return (
    <div className="fade-page">
      <section className="about-hero">
        <Ph label="ATELIER · WORKSHOP" 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) || "Made by hand,\nin Lagos."}</h1>
        </div>
      </section>
      <section className="section-pad">
        <div className="wrap about-intro">
          <Reveal><p className="serif about-lede">{(window.BRAND?.story.lede) || "Khal Design is a Lagos leather workshop — every pair measured, cut and finished by hand."}</p></Reveal>
          <Reveal delay={1}><p style={{ color: "var(--ink-soft)", fontSize: 16, lineHeight: 1.8 }}>{(window.BRAND?.story.body) || "From pattern cutting to lasting and final polish, each shoe passes through the same hands, start to finish."} {(window.BRAND?.story.craftLine) || "Loafers, oxfords, slides and boots — built on real lasts, in real leather."}</p></Reveal>
        </div>
      </section>
      <section className="section-pad">
        <div className="wrap-wide values-grid">
          {[
            ["scissors", "Cut by hand", "Every pattern is measured and cut on the bench before it becomes a shoe."],
            ["ruler", "Lasted & fitted", "Uppers are shaped on real lasts, so the finished fit holds its shape."],
            ["globe", "Made to order", (window.BRAND?.story.valuesLine) || "Follow the work in progress on Instagram — @khal_designs."],
          ].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);
  const igUrl = (window.BRAND && window.BRAND.igUrl) || "https://instagram.com/khal_designs";
  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" }}>The fastest way to reach the workshop is Instagram. For enquiries, orders and bespoke briefs, use the form below.</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><a href={igUrl} target="_blank" rel="noopener">{(window.BRAND?.igHandle) || "@khal_designs"}</a></strong><span className="contact-s">Fastest way to reach us</span></div>
            </div>
            <div className="contact-card">
              <span className="contact-ic"><Icon name="pin" size={20} /></span>
              <div><span className="contact-t">{(window.BRAND?.addresses.hq.label) || "Lagos Workshop"}</span><strong>{(window.BRAND?.addresses.hq.line) || "Lagos, Nigeria"}</strong><span className="contact-s">By appointment — book a fitting</span></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>Academy</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, OrderSummary });