// ChairShare — payment checkout (3) + booking confirmation (4)

const CustomerCheckout = ({ onConfirm = () => {}, mobile = false, state = "default" }) => {
  const [name, setName] = useState("Sophie Lambert");
  const [email, setEmail] = useState("sophie.l@gmail.com");
  const [phone, setPhone] = useState("0412 345 678");

  const Summary = () => (
    <div className="card" style={{ padding: mobile ? 18 : 28, background: "var(--cs-bone)" }}>
      <div className="eyebrow" style={{ marginBottom: 14 }}>Your booking</div>
      <div style={{ display: "flex", gap: 14, alignItems: "center", marginBottom: 18 }}>
        <Avatar name="Amelia M" size={48} tone="rose" />
        <div>
          <div className="serif" style={{ fontSize: 17 }}>Amelia Marcheva</div>
          <div style={{ fontSize: 12, color: "var(--cs-ink-3)" }}>The Atelier · Yarraville</div>
        </div>
      </div>
      <hr className="hair" style={{ marginBottom: 14 }} />
      <div style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 13 }}>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <span style={{ color: "var(--cs-ink-3)" }}>Service</span>
          <span>Balayage & toner</span>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <span style={{ color: "var(--cs-ink-3)" }}>When</span>
          <span>Thu May 7 · 11:00</span>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <span style={{ color: "var(--cs-ink-3)" }}>Duration</span>
          <span>3 hrs</span>
        </div>
      </div>
      <hr className="hair" style={{ margin: "16px 0" }} />
      <div style={{ display: "flex", flexDirection: "column", gap: 8, fontSize: 13 }}>
        <div style={{ display: "flex", justifyContent: "space-between", color: "var(--cs-ink-3)" }}>
          <span>Service</span><span>$320.00</span>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", color: "var(--cs-rose-deep)" }}>
          <span>Early-bird discount</span><span>–$32.00</span>
        </div>
      </div>
      <hr className="hair" style={{ margin: "16px 0" }} />
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <span style={{ fontSize: 13, color: "var(--cs-ink-2)" }}>Total today</span>
        <span className="serif" style={{ fontSize: 32 }}>$288.00</span>
      </div>
    </div>
  );

  const Form = () => (
    <div>
      <h2 className="serif" style={{ fontSize: mobile ? 28 : 38, fontWeight: 400, margin: "0 0 8px" }}>
        Almost <span className="serif-it" style={{ color: "var(--cs-gold-deep)" }}>there.</span>
      </h2>
      <p style={{ fontSize: 14, color: "var(--cs-ink-3)", margin: "0 0 28px" }}>Confirm your details and pay to lock in the time.</p>

      <div className="eyebrow" style={{ marginBottom: 14 }}>Your details</div>
      <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", gap: 12, marginBottom: 12 }}>
        <div className="field"><label>Full name</label><input value={name} onChange={e => setName(e.target.value)} /></div>
        <div className="field"><label>Phone</label><input value={phone} onChange={e => setPhone(e.target.value)} /></div>
      </div>
      <div className="field" style={{ marginBottom: 12 }}><label>Email</label><input value={email} onChange={e => setEmail(e.target.value)} /></div>
      <div className="field" style={{ marginBottom: 28 }}>
        <label>Notes for Amelia <span style={{ color: "var(--cs-ink-3)", fontWeight: 400 }}>· optional</span></label>
        <textarea rows="3" placeholder="Anything she should know — past colour, allergies, photos…" />
      </div>

      <div className="eyebrow" style={{ marginBottom: 14 }}>Payment</div>
      <div className="card" style={{ padding: 18, marginBottom: 12, background: "var(--cs-paper)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
          <span style={{ fontSize: 13, color: "var(--cs-ink-2)" }}>Card details</span>
          <div style={{ display: "flex", gap: 5, opacity: 0.6 }}>
            {["VISA", "MC", "AMEX"].map(b => (
              <span key={b} style={{ fontSize: 9, padding: "2px 5px", border: "1px solid var(--cs-line-2)", borderRadius: 3, fontFamily: "var(--cs-mono)", fontWeight: 600 }}>{b}</span>
            ))}
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 0", borderBottom: "1px solid var(--cs-line)" }}>
          <Icon name="card" size={16} color="var(--cs-ink-3)" />
          <span className="mono" style={{ fontSize: 14, color: "var(--cs-ink)" }}>4242 4242 4242 4242</span>
        </div>
        <div style={{ display: "flex", gap: 18, padding: "12px 0", fontSize: 14 }}>
          <span className="mono" style={{ color: "var(--cs-ink-3)" }}>MM / YY</span>
          <span className="mono">12 / 27</span>
          <span style={{ marginLeft: "auto", color: "var(--cs-ink-3)", fontFamily: "var(--cs-mono)" }}>CVC ••• </span>
        </div>
      </div>
      <div style={{ fontSize: 11, color: "var(--cs-ink-3)", display: "flex", alignItems: "center", gap: 8, marginBottom: 22 }}>
        <Icon name="lock" size={11} /> Powered by Stripe · ChairShare never sees your card.
      </div>

      {state === "failed" && (
        <div style={{ background: "rgba(181,82,63,0.08)", border: "1px solid rgba(181,82,63,0.3)", color: "var(--cs-err)", padding: 14, borderRadius: "var(--cs-r)", marginBottom: 18, fontSize: 13 }}>
          <strong>Card declined.</strong> Try a different card, or contact your bank.
        </div>
      )}

      <div className="card" style={{ padding: 16, background: "var(--cs-cream-2)", borderColor: "var(--cs-line-2)", marginBottom: 22 }}>
        <div style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
          <Icon name="info" size={16} color="var(--cs-ink-2)" />
          <div style={{ fontSize: 12, color: "var(--cs-ink-2)", lineHeight: 1.5 }}>
            <strong>Cancellation policy.</strong> Free cancel up to 24 h before your appointment. After that, a 50% fee applies. No-show is charged in full.
          </div>
        </div>
      </div>

      <button onClick={onConfirm} disabled={state === "processing"} className="btn btn-primary btn-block btn-lg">
        {state === "processing" ? "Processing…" : <>Pay $288.00 & confirm <Icon name="arrow_right" size={14} /></>}
      </button>
      <div style={{ textAlign: "center", marginTop: 14, fontSize: 11, color: "var(--cs-ink-3)" }}>
        By confirming you agree to ChairShare's <a className="u">terms</a> and Amelia's policy.
      </div>
    </div>
  );

  if (mobile) {
    return (
      <PhoneFrame>
        <MobileTopBar title="Checkout" left={<button style={{background:"none",border:0,padding:0,cursor:"pointer"}}><Icon name="arrow_left" size={20}/></button>} right={<span style={{display:"flex",alignItems:"center",gap:4,fontSize:11,color:"var(--cs-ink-3)"}}><Icon name="lock" size={11}/></span>} />
        <div style={{ height: "calc(100% - 88px)", overflow: "auto", padding: "16px 18px 30px" }}>
          <Summary />
          <div style={{ height: 24 }} />
          <Form />
        </div>
      </PhoneFrame>
    );
  }
  return (
    <div className="cs" style={{ width: 1440, minHeight: 900, background: "var(--cs-cream)" }}>
      <header style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "22px 56px", borderBottom: "1px solid var(--cs-line)" }}>
        <Wordmark size={18} />
        <div style={{ display: "flex", alignItems: "center", gap: 24, fontSize: 12, color: "var(--cs-ink-3)" }}>
          <span>1. Choose <span style={{ color: "var(--cs-ink)" }}>·</span> 2. <strong style={{ color: "var(--cs-ink)" }}>Confirm</strong> · 3. Done</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="lock" size={12}/> Secure</span>
        </div>
      </header>
      <div style={{ padding: "48px 56px", display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64, maxWidth: 1200, margin: "0 auto" }}>
        <Form />
        <div style={{ position: "sticky", top: 24, alignSelf: "flex-start" }}>
          <Summary />
        </div>
      </div>
    </div>
  );
};

// ── CONFIRMATION ────────────────────────────────────────
const CustomerConfirmation = ({ mobile = false }) => {
  const Body = () => (
    <div>
      <div style={{ textAlign: "center", padding: mobile ? "30px 18px 20px" : "60px 56px 24px" }}>
        <div style={{ width: 88, height: 88, margin: "0 auto 28px", borderRadius: 999, background: "var(--cs-gold-soft)", display: "flex", alignItems: "center", justifyContent: "center", position: "relative" }}>
          <Icon name="check" size={44} color="var(--cs-gold-deep)" />
          <span className="serif-it" style={{ position: "absolute", top: -10, right: -16, fontSize: 26, color: "var(--cs-rose-deep)", transform: "rotate(15deg)" }}>·</span>
        </div>
        <div className="eyebrow" style={{ marginBottom: 14, color: "var(--cs-gold-deep)" }}>Booking confirmed</div>
        <h1 className="serif" style={{ fontSize: mobile ? 38 : 64, lineHeight: 1, margin: "0 0 16px", fontWeight: 400 }}>
          See you <span className="serif-it" style={{ color: "var(--cs-gold-deep)" }}>Thursday,<br/>Sophie.</span>
        </h1>
        <p style={{ fontSize: mobile ? 14 : 17, color: "var(--cs-ink-2)", margin: "0 auto", maxWidth: 460 }}>
          A confirmation has landed in <strong>sophie.l@gmail.com</strong>. Add it to your calendar so you don't forget.
        </p>
      </div>

      <div style={{ padding: mobile ? "8px 18px 20px" : "8px 56px 28px", maxWidth: mobile ? "none" : 720, margin: "0 auto" }}>
        <div className="card" style={{ padding: mobile ? 22 : 32 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 22, flexWrap: "wrap", gap: 12 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
              <Avatar name="Amelia M" size={mobile ? 44 : 52} tone="rose" />
              <div>
                <div className="serif" style={{ fontSize: mobile ? 18 : 22 }}>Amelia Marcheva</div>
                <div style={{ fontSize: 12, color: "var(--cs-ink-3)" }}>The Atelier · Yarraville</div>
              </div>
            </div>
            <a className="btn btn-ghost btn-sm"><Icon name="instagram" size={13} /> Follow</a>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr 1fr" : "repeat(4, 1fr)", gap: 18, marginBottom: 22, padding: "20px 0", borderTop: "1px solid var(--cs-line)", borderBottom: "1px solid var(--cs-line)" }}>
            {[
              ["Service", "Balayage & toner"],
              ["Date", "Thu May 7"],
              ["Time", "11:00 am"],
              ["Total paid", "$288.00"],
            ].map(([l, v]) => (
              <div key={l}>
                <div className="eyebrow" style={{ marginBottom: 6 }}>{l}</div>
                <div className="serif" style={{ fontSize: 16 }}>{v}</div>
              </div>
            ))}
          </div>

          <div style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 13, color: "var(--cs-ink-2)", marginBottom: 18 }}>
            <Icon name="pin" size={14} color="var(--cs-ink-3)" />
            <div>
              <div>21 Anderson St, Yarraville VIC 3013</div>
              <a className="u" style={{ fontSize: 12 }}>Get directions</a>
            </div>
          </div>

          <div className="eyebrow" style={{ marginBottom: 12 }}>Add to calendar</div>
          <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "repeat(3, 1fr)", gap: 8 }}>
            <button className="btn btn-ghost"><Icon name="apple" size={16} /> Apple</button>
            <button className="btn btn-ghost"><Icon name="google" size={16} /> Google</button>
            <button className="btn btn-ghost"><Icon name="calendar" size={16} /> Outlook (.ics)</button>
          </div>
        </div>

        <div style={{ display: "flex", justifyContent: "center", gap: 24, marginTop: 28, fontSize: 13, color: "var(--cs-ink-3)" }}>
          <a className="u">Reschedule</a>
          <span>·</span>
          <a className="u">Cancel booking</a>
        </div>
      </div>
    </div>
  );

  if (mobile) {
    return (
      <PhoneFrame>
        <div style={{ height: "100%", overflow: "auto", background: "var(--cs-cream)" }}>
          <MobileTopBar title="" transparent />
          <Body />
        </div>
      </PhoneFrame>
    );
  }
  return (
    <div className="cs" style={{ width: 1440, minHeight: 900, background: "var(--cs-cream)" }}>
      <header style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "22px 56px" }}>
        <Wordmark size={18} />
      </header>
      <Body />
    </div>
  );
};

window.CustomerCheckout = CustomerCheckout;
window.CustomerConfirmation = CustomerConfirmation;