// CheckoutC — desktop layout.
// Visual design from the original mockup. Data + Stripe wiring comes from
// useCheckout() (see checkout-shared.jsx).

const CheckoutC = ({ checkout }) => {
  const c = checkout || useCheckout();
  React.useEffect(() => { c.setPaymentMountSelector("#stripe-payment-element"); }, []);

  const current = plansData[c.plan];

  return (
    <div style={{
      width: 1280,
      minHeight: 900,
      background: "var(--bg-elev)",
      fontFamily: "var(--font-sans)",
      color: "var(--ss-black)",
      display: "grid",
      gridTemplateColumns: "460px 1fr",
    }}>
      {/* LEFT — Brand panel (navy on cream) */}
      <aside style={{
        background: "var(--ss-navy)",
        color: "oklch(98% 0.005 80)",
        padding: "36px 40px 40px",
        display: "flex",
        flexDirection: "column",
        position: "relative",
        overflow: "hidden",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <img
            src="brand/sellers-shield-logo.png"
            alt="Sellers Shield"
            style={{ width: 48, height: 48, display: "block", borderRadius: 10 }}
          />
          <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.2 }}>
            <span style={{ fontSize: 14, fontWeight: 700, letterSpacing: "-0.01em" }}>
              Home Sale Legal Protection<sup style={{ fontSize: 8, top: -6, position: "relative", fontWeight: 600 }}>™</sup>
            </span>
            <span style={{ fontSize: 11.5, color: "oklch(78% 0.015 240)", marginTop: 2 }}>
              Powered by Sellers Shield
            </span>
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", padding: "40px 0 32px" }}>
          <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.16em", color: "var(--ss-warm)", textTransform: "uppercase" }}>
            Coverage
          </span>
          <h1 style={{
            fontSize: 44,
            fontWeight: 700,
            letterSpacing: "-0.025em",
            lineHeight: 1.02,
            margin: "14px 0 18px",
            textWrap: "balance",
            color: "white",
          }}>
            Up to $75,000 in legal defense
            <br />
            <span style={{ color: "var(--ss-warm)" }}>if the buyer comes back.</span>
          </h1>
          <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "oklch(85% 0.02 240)", margin: 0, maxWidth: 360 }}>
            Sellers Shield handles every claim end-to-end. We dissect the dispute, appoint a local real-estate attorney, and pay up to $75,000 in legal fees.
          </p>

          <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 14 }}>
            {[
              "No retainers",
              "No deductibles",
              "No questions asked",
              "Attorney assigned in 24–48 hours",
              "100% refundable if your home doesn't sell",
            ].map((f, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 14, fontSize: 14.5, color: "oklch(94% 0.01 240)", lineHeight: 1.35 }}>
                <span style={{
                  width: 28, height: 28, flexShrink: 0,
                  borderRadius: 999,
                  background: "oklch(36% 0.07 65 / 0.25)",
                  border: "1px solid oklch(70% 0.13 65 / 0.5)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                }}>
                  <Icon name="check" size={16} color="var(--ss-warm)" />
                </span>
                {f}
              </div>
            ))}
          </div>
        </div>

        <div style={{ marginTop: "auto", padding: "20px 22px", background: "oklch(30% 0.06 260)", borderRadius: 10 }}>
          <p style={{ fontSize: 14, lineHeight: 1.5, color: "oklch(96% 0.01 240)", margin: 0 }}>
            "Sellers Shield's team gave us a sense of safety. Quick response, kind voice on the other end of the phone."
          </p>
          <div style={{ marginTop: 12, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <div style={{ fontSize: 11.5, color: "oklch(80% 0.02 240)" }}>
              John I. · Protected Home Seller
            </div>
            <div style={{ display: "inline-flex", gap: 2 }}>
              {[...Array(5)].map((_, i) => (
                <svg key={i} viewBox="0 0 12 12" width="11" height="11"><path d="M6 1l1.5 3.2L11 4.7l-2.6 2.3L9.1 11 6 9.2 2.9 11l.7-4L1 4.7l3.5-.5z" fill="var(--ss-warm)" /></svg>
              ))}
            </div>
          </div>
        </div>
      </aside>

      {/* RIGHT — Form */}
      <main style={{ padding: "36px 56px 56px", maxWidth: 820, width: "100%" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 28 }}>
          <div className="mono" style={{ fontSize: 11.5, color: "var(--ink-3)", letterSpacing: "0.05em" }}>
            HOME SALE LEGAL PROTECTION
          </div>
          <div style={{ display: "flex", gap: 16, fontSize: 11.5, color: "var(--ink-3)" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <Icon name="lock" size={11} /> 256-bit TLS
            </span>
            <span>Help? <a style={{ color: "var(--ss-black)" }} href="tel:8447474435" className="mono">(844) 747-4435</a></span>
          </div>
        </div>

        <h2 style={{
          fontSize: 26,
          fontWeight: 700,
          letterSpacing: "-0.02em",
          margin: "0 0 4px",
          lineHeight: 1.2,
        }}>
          Activate your protection
        </h2>
        <p style={{ color: "var(--ink-3)", fontSize: 14, margin: "0 0 28px" }}>
          Coverage begins the day your home closes.
        </p>

        <SectionLabel>Choose your plan</SectionLabel>
        <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 12 }}>
          {Object.entries(plansData).map(([key, p]) => (
            <PlanCardC
              key={key}
              plan={p}
              selected={c.plan === key}
              onClick={() => c.setPlan(key)}
            />
          ))}
        </div>

        <div style={{
          display: "flex",
          alignItems: "center",
          gap: 10,
          padding: "10px 14px",
          background: "oklch(96% 0.005 240)",
          borderRadius: 8,
          fontSize: 12,
          color: "var(--ink-3)",
          marginBottom: 28,
        }}>
          <span style={{ fontWeight: 600, color: "var(--ink-2)", flexShrink: 0 }}>Covers:</span>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center" }}>
            {disputeTypes.map((d) => (
              <span key={d.label} style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
                <Icon name={d.icon} size={13} color="var(--ink-2)" />
                {d.label}
              </span>
            ))}
          </div>
        </div>

        <SectionLabel>Property to protect</SectionLabel>
        <Field label="Street address" required value={c.propertyLine1} onChange={(e) => c.setPropertyLine1(e.target.value)} placeholder="2841 N Henderson Ave" />
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gap: 12, marginTop: 12, marginBottom: 28 }}>
          <Field label="City"  required value={c.propertyCity}  onChange={(e) => c.setPropertyCity(e.target.value)}  placeholder="Dallas" />
          <Field label="State" required value={c.propertyState} onChange={(e) => c.setPropertyState(e.target.value.toUpperCase().slice(0,2))} placeholder="TX" />
          <Field label="ZIP"   required value={c.propertyZip}   onChange={(e) => c.setPropertyZip(e.target.value)}   placeholder="75206" />
        </div>

        <SectionLabel>Your information</SectionLabel>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <Field label="First name" required value={c.firstName} onChange={(e) => c.setFirstName(e.target.value)} placeholder="First name" />
          <Field label="Last name"  required value={c.lastName}  onChange={(e) => c.setLastName(e.target.value)}  placeholder="Last name" />
        </div>
        <div style={{ marginTop: 12 }}>
          <Field label="Email" required type="email" value={c.email} onChange={(e) => c.setEmail(e.target.value)} placeholder="you@email.com" hint="Certificate sent here" />
        </div>
        <div style={{ marginTop: 12, marginBottom: 28 }}>
          <Field label="Agent's email" type="email" value={c.agentEmail} onChange={(e) => c.setAgentEmail(e.target.value)} placeholder="agent@brokerage.com" hint="Optional" />
        </div>

        <SectionLabel>Payment</SectionLabel>
        {/* Stripe PaymentElement — renders Card / Bank / Apple Pay / Google Pay */}
        <div id="stripe-payment-element" style={{ minHeight: 220 }} />
        {!c.paymentReady && !c.error && (
          <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 8 }}>
            Loading secure payment field…
          </div>
        )}

        {c.error && (
          <div role="alert" style={{
            marginTop: 14,
            padding: "10px 14px",
            background: "var(--red-bg)",
            border: "1px solid var(--red)",
            borderRadius: 8,
            color: "var(--red)",
            fontSize: 13,
            lineHeight: 1.4,
          }}>
            {c.error}
          </div>
        )}

        <div style={{
          marginTop: 32,
          padding: "18px 20px",
          background: "oklch(96% 0.005 240)",
          border: "1px solid var(--line)",
          borderRadius: 10,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}>
          <div>
            <div style={{ fontSize: 11.5, color: "var(--ink-3)", letterSpacing: "0.05em", textTransform: "uppercase" }}>
              Total today (USD)
            </div>
            <div className="mono" style={{ fontSize: 26, fontWeight: 600, letterSpacing: "-0.02em", marginTop: 2 }}>
              {formatCurrency(current.price)}
            </div>
          </div>
          <div style={{ textAlign: "right", fontSize: 11.5, color: "var(--ink-3)", lineHeight: 1.5 }}>
            <span style={{ display: "block", color: "var(--ss-black)", fontWeight: 500, fontSize: 12.5 }}>
              {current.termLong} Protection
            </span>
            ${(current.coverage / 1000).toFixed(0)},000 legal defense
          </div>
        </div>

        <div style={{ marginTop: 16 }}>
          <Btn
            kind="primary"
            size="lg"
            full
            onClick={c.handleSubmit}
            icon={<Icon name="lock" size={14} color="white" />}
            style={{
              borderRadius: 999,
              height: 54,
              opacity: c.submitting || !c.paymentReady ? 0.6 : 1,
              cursor: c.submitting || !c.paymentReady ? "not-allowed" : "pointer",
            }}
          >
            {c.submitting
              ? "Processing…"
              : `Activate protection · Pay ${formatCurrency(current.price)}`}
          </Btn>
        </div>
        <p style={{ fontSize: 11.5, color: "var(--ink-3)", textAlign: "center", marginTop: 14, lineHeight: 1.55 }}>
          By completing your purchase, you agree to the <a href="#" style={{ color: "var(--ink-2)" }}>Coverage Terms</a>. Protection begins the day your home closes.
        </p>
      </main>
    </div>
  );
};

const SectionLabel = ({ children }) => (
  <div style={{
    fontSize: 10.5,
    fontWeight: 700,
    letterSpacing: "0.16em",
    color: "var(--ink-3)",
    textTransform: "uppercase",
    marginBottom: 12,
    paddingBottom: 8,
    borderBottom: "1px solid var(--line)",
    fontFamily: "var(--font-sans)",
  }}>
    {children}
  </div>
);

const PlanCardC = ({ plan, selected, onClick }) => {
  const badgeStyles = {
    green: { bg: "var(--ss-green)", fg: "white" },
    dark:  { bg: "oklch(35% 0 0)",  fg: "white" },
  };
  const bs = badgeStyles[plan.badge.tone];
  return (
    <button
      onClick={onClick}
      style={{
        position: "relative",
        textAlign: "left",
        background: selected ? "var(--ss-blue-bg)" : "var(--bg-elev)",
        border: `1.5px solid ${selected ? "var(--ss-blue)" : "var(--line)"}`,
        borderRadius: 10,
        padding: "14px 18px 16px",
        cursor: "pointer",
        fontFamily: "inherit",
        transition: "all .12s",
      }}
    >
      <span style={{
        position: "absolute", top: 16, right: 18,
        width: 18, height: 18, borderRadius: 999,
        border: `1.5px solid ${selected ? "var(--ss-blue)" : "var(--line-strong)"}`,
        background: selected ? "var(--ss-blue)" : "white",
        display: "inline-flex", alignItems: "center", justifyContent: "center",
      }}>
        {selected && <span style={{ width: 6, height: 6, borderRadius: 999, background: "white" }} />}
      </span>

      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4, paddingRight: 30 }}>
        <span style={{
          background: bs.bg, color: bs.fg,
          fontSize: 10, fontWeight: 700,
          letterSpacing: "0.1em", textTransform: "uppercase",
          padding: "3px 7px", borderRadius: 4,
        }}>
          {plan.badge.label}
        </span>
        <span style={{ fontSize: 16, fontWeight: 700, letterSpacing: "-0.01em" }}>
          {plan.title}
        </span>
      </div>
      <div style={{ fontSize: 13, color: "var(--ink-2)", marginBottom: 10, paddingRight: 30 }}>
        Up to <strong style={{ color: "var(--ss-black)", fontWeight: 600 }}>${(plan.coverage / 1000).toFixed(0)},000</strong> in legal defense
      </div>

      <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 12, flexWrap: "wrap" }}>
        <span style={{ display: "inline-flex", alignItems: "baseline" }}>
          <span className="mono" style={{ fontSize: 13, fontWeight: 600, alignSelf: "flex-start", marginTop: 4 }}>$</span>
          <span className="mono" style={{ fontSize: 26, fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1 }}>
            {(plan.price / 100).toLocaleString("en-US", { maximumFractionDigits: 0 })}
          </span>
        </span>
        <span className="mono" style={{ fontSize: 13, color: "var(--ink-4)", textDecoration: "line-through" }}>
          ${(plan.listPrice / 100).toLocaleString("en-US")}
        </span>
        <span style={{
          background: "var(--ss-green-bg)",
          color: "var(--ss-green-2)",
          fontSize: 10.5, fontWeight: 700,
          letterSpacing: "0.04em", textTransform: "uppercase",
          padding: "2px 7px", borderRadius: 4,
        }}>
          Save ${(plan.save / 100).toLocaleString("en-US")}
        </span>
      </div>
    </button>
  );
};

Object.assign(window, { CheckoutC, SectionLabel, PlanCardC });