/* ============================================================
   CHINASA MARTINS — Cart, Checkout (enquiry), About, Contact
   No real prices exist — checkout is an enquiry, not a payment.
   ============================================================ */

/* ---------------- 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 }}>Let's find something worth enquiring about.</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">{it.size} · {it.color}</div>
                    </div>
                    <span className="mono" style={{ fontSize: 13, color: "var(--ink-soft)" }}>Enquire</span>
                  </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, showItems }) {
  const { cart } = useContext(RBCtx);
  return (
    <aside className="summary">
      <h3 className="serif" style={{ fontSize: 24, marginBottom: 18 }}>Enquiry summary</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>
            <span className="mono" style={{ fontSize: 12, color: "var(--ink-soft)" }}>Enquire</span>
          </div>
        ))}
      </div>
      <p style={{ fontSize: 13, color: "var(--ink-soft)", margin: "16px 0 0" }}>Pricing isn't listed yet — we'll confirm cost, availability and lead time once we receive your enquiry.</p>
      {cta && <Btn block onClick={onCta} style={{ marginTop: 18 }}>{cta}</Btn>}
      <div className="summary-assure">
        <span><Icon name="shield" size={15} /> No payment taken now</span>
        <span><Icon name="ig" size={15} /> Or DM {(window.BRAND && window.BRAND.igHandle) || "@nasamartins"}</span>
      </div>
    </aside>
  );
}

/* ---------------- CHECKOUT (ENQUIRY) ---------------- */
function CheckoutPage({ onNav }) {
  const { cart, clearCart } = useContext(RBCtx);
  const [step, setStep] = useState(1);

  if (cart.length === 0 && step < 3) {
    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 enquire about</h1><Btn onClick={() => onNav("shop", {})}>Browse the collection</Btn></div>
      </div>
    );
  }

  if (step === 3) {
    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 <strong className="mono">#{(window.BRAND && window.BRAND.orderPrefix) || "CM"}-{Math.floor(Math.random() * 90000 + 10000)}</strong> and will reply with pricing and availability.</p>
          <p style={{ color: "var(--ink-soft)", marginBottom: 32 }}>Prefer Instagram? DM {(window.BRAND && window.BRAND.igHandle) || "@nasamartins"} and reference your enquiry number.</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={26} onClick={() => onNav("home", {})} />
          <div className="checkout-steps">
            {["Your details", "Review & send"].map((s, i) => (
              <div key={s} className={"cstep" + (step === i + 1 ? " on" : "") + (step > i + 1 ? " done" : "")}>
                <span className="cstep-n">{step > i + 1 ? <Icon name="check" size={13} /> : i + 1}</span>{s}
              </div>
            ))}
          </div>
        </div>

        <div className="checkout-grid">
          <div className="checkout-main">
            {step === 1 && (
              <div className="fade-page">
                <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" required placeholder="you@email.com" /></div>
                  <div className="field span2"><label>Phone or Instagram handle</label><input className="input" placeholder="+234 … or @yourhandle" /></div>
                  <div className="field span2"><label>City / Country</label><input className="input" placeholder="Where you're enquiring from" /></div>
                  <div className="field span2"><label>Anything else?</label><textarea className="input" rows="3" placeholder="Sizing, occasion, timing…"></textarea></div>
                </div>
                <div className="checkout-nav">
                  <button className="back-link" onClick={() => onNav("cart", {})}>← Return to bag</button>
                  <Btn arrow={false} onClick={() => setStep(2)}>Review enquiry</Btn>
                </div>
              </div>
            )}
            {step === 2 && (
              <div className="fade-page">
                <h2 className="serif checkout-h">Review &amp; send</h2>
                <p className="pay-note">We'll reply by email (or Instagram, if you'd rather) with pricing, availability and next steps — no payment is taken now.</p>
                <label className="pay-check"><input type="checkbox" defaultChecked /> <span>Email me about new drops</span></label>
                <div className="checkout-nav">
                  <button className="back-link" onClick={() => setStep(1)}>← Your details</button>
                  <Btn arrow={false} onClick={() => setStep(3)}>Send enquiry</Btn>
                </div>
              </div>
            )}
          </div>
          <OrderSummary onNav={onNav} showItems />
        </div>
      </div>
    </div>
  );
}

/* ---------------- ABOUT ---------------- */
function AboutPage({ onNav }) {
  return (
    <div className="fade-page">
      <section className="about-hero">
        <Ph label="LOOK · NEON BLAZER SET" 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 to\nbe seen."}</h1>
        </div>
      </section>
      <section className="section-pad">
        <div className="wrap about-intro">
          <Reveal><p className="serif about-lede">{(window.BRAND?.story.lede) || "Chinasa Martins designs contemporary ready-to-wear out of Lagos."}</p></Reveal>
          <Reveal delay={1}><p style={{ color: "var(--ink-soft)", fontSize: 16, lineHeight: 1.8 }}>{(window.BRAND?.story.body) || "Structured suiting, draped eveningwear, and denim and print separates built for people who dress with intent."} {(window.BRAND?.story.craftLine) || "Each look is shot and styled in-house."}</p></Reveal>
        </div>
      </section>
      <section className="section-pad">
        <div className="wrap-wide values-grid">
          {[
            ["scissors", "Silhouette first", "Every look starts with cut and structure — tailoring, drape and proportion before anything else."],
            ["spark", "Bold colour", "Camo, neon, red, purple — colour is used with intention, not as an afterthought."],
            ["ig", "Shot in Lagos", "Every look is styled and shot in-house — follow " + ((window.BRAND && window.BRAND.igHandle) || "@nasamartins") + " for the newest drops."],
          ].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>
      <EnquireBand 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" }}>Pricing, availability and sizing are all handled directly — message us and we'll reply personally.</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) || "@nasamartins"}</strong><span className="contact-s">Fastest way to reach us — DM 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) || "Lagos, Nigeria"}</strong><span className="contact-s">Enquiries welcome from anywhere</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>Pricing & availability</option><option>Sizing & fit</option><option>Press & partnerships</option><option>Something else</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 });