// CheckoutCMobile — phone-width layout (≤ 768px).
// Shares all data + Stripe wiring with the desktop layout via useCheckout().

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

  const current = plansData[c.plan];

  return (
    <div style={{
      width: "100%",
      maxWidth: 480,
      margin: "0 auto",
      background: "var(--bg-elev)",
      fontFamily: "var(--font-sans)",
      color: "var(--ss-black)",
      display: "flex",
      flexDirection: "column",
      minHeight: "100vh",
    }}>
      <header style={{ background: "var(--ss-navy)", color: "white", padding: "20px 20px 26px" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <img src="brand/sellers-shield-logo.png" alt="Sellers Shield" style={{ width: 34, height: 34, borderRadius: 7, display: "block" }} />
            <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.15 }}>
              <span style={{ fontSize: 12.5, fontWeight: 700 }}>Home Sale Legal Protection<sup style={{ fontSize: 7, top: -5, position: "relative" }}>™</sup></span>
              <span style={{ fontSize: 10, color: "oklch(78% 0.015 240)" }}>Powered by Sellers Shield</span>
            </div>
          </div>
          <a href="tel:8447474435" style={{ fontSize: 11.5, color: "oklch(82% 0.02 240)", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 4 }}>
            <Icon name="lock" size={10} color="oklch(82% 0.02 240)" /> Secure
          </a>
        </div>
        <span style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: "0.18em", color: "var(--ss-warm)", textTransform: "uppercase" }}>
          Coverage
        </span>
        <h1 style={{
          fontSize: 26,
          fontWeight: 700,
          letterSpacing: "-0.02em",
          lineHeight: 1.08,
          margin: "6px 0 0",
          color: "white",
          textWrap: "balance",
        }}>
          Up to $75,000 in legal defense{" "}
          <span style={{ color: "var(--ss-warm)" }}>if the buyer comes back.</span>
        </h1>
      </header>

      <main style={{ padding: "20px 20px 32px", flex: 1 }}>
        <MSectionLabel>Choose your plan</MSectionLabel>
        <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 12 }}>
          {Object.entries(plansData).map(([key, p]) => (
            <PlanCardMobile key={key} plan={p} selected={c.plan === key} onClick={() => c.setPlan(key)} />
          ))}
        </div>

        <div style={{
          display: "flex", alignItems: "center", gap: 10,
          padding: "10px 12px",
          background: "var(--ss-green-bg)",
          border: "1px solid oklch(85% 0.06 148)",
          borderRadius: 8,
          marginBottom: 24,
          fontSize: 12.5,
          color: "oklch(35% 0.08 148)",
        }}>
          <span style={{
            width: 20, height: 20, borderRadius: 999,
            background: "var(--ss-green)",
            display: "inline-flex", alignItems: "center", justifyContent: "center",
            flexShrink: 0,
          }}>
            <Icon name="check" size={11} color="white" />
          </span>
          <span><strong style={{ color: "oklch(30% 0.1 148)", fontWeight: 700 }}>100% refundable</strong> if your home doesn't sell.</span>
        </div>

        <MSectionLabel>Property to protect</MSectionLabel>
        <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: 8, marginTop: 10, marginBottom: 22 }}>
          <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>

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

        <MSectionLabel>Payment</MSectionLabel>
        <div id="stripe-payment-element-mobile" 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: 24,
          padding: "14px 14px",
          background: "oklch(96% 0.005 240)",
          borderRadius: 8,
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 10,
          fontSize: 11.5,
          color: "var(--ink-2)",
        }}>
          {["No retainers", "No deductibles", "No questions asked", "Attorney in 24–48 hrs"].map((f) => (
            <div key={f} style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <span style={{
                width: 16, height: 16, borderRadius: 999,
                background: "var(--ss-warm-bg)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                flexShrink: 0,
              }}>
                <Icon name="check" size={9} color="var(--ss-warm-2)" />
              </span>
              {f}
            </div>
          ))}
        </div>
      </main>

      <footer style={{
        position: "sticky",
        bottom: 0,
        background: "white",
        borderTop: "1px solid var(--line)",
        padding: "14px 20px 22px",
        boxShadow: "0 -8px 24px -16px rgba(15,32,70,0.18)",
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 10 }}>
          <div>
            <div style={{ fontSize: 10.5, color: "var(--ink-3)", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 600 }}>
              Total today
            </div>
            <div className="mono" style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em", marginTop: 1 }}>
              {formatCurrency(current.price)}
            </div>
          </div>
          <div style={{ fontSize: 11, color: "var(--ink-3)", textAlign: "right", lineHeight: 1.4 }}>
            <span style={{ display: "block", color: "var(--ss-black)", fontWeight: 600, fontSize: 12 }}>
              {current.termLong} Plan
            </span>
            $75,000 covered
          </div>
        </div>
        <Btn
          kind="primary"
          size="lg"
          full
          onClick={c.handleSubmit}
          icon={<Icon name="lock" size={13} color="white" />}
          style={{
            borderRadius: 999,
            height: 50,
            opacity: c.submitting || !c.paymentReady ? 0.6 : 1,
            cursor: c.submitting || !c.paymentReady ? "not-allowed" : "pointer",
          }}
        >
          {c.submitting ? "Processing…" : `Activate · Pay ${formatCurrency(current.price)}`}
        </Btn>
        <p style={{ fontSize: 10.5, color: "var(--ink-3)", textAlign: "center", marginTop: 8, lineHeight: 1.45, marginBottom: 0 }}>
          By completing your purchase, you agree to the <a href="#" style={{ color: "var(--ink-2)" }}>Coverage Terms</a>.
        </p>
      </footer>
    </div>
  );
};

const MSectionLabel = ({ children }) => (
  <div style={{
    fontSize: 10,
    fontWeight: 700,
    letterSpacing: "0.16em",
    color: "var(--ink-3)",
    textTransform: "uppercase",
    marginBottom: 10,
    paddingBottom: 6,
    borderBottom: "1px solid var(--line)",
  }}>
    {children}
  </div>
);

const PlanCardMobile = ({ 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: "12px 14px 14px",
        cursor: "pointer",
        fontFamily: "inherit",
      }}
    >
      <span style={{
        position: "absolute", top: 14, right: 14,
        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: 8, marginBottom: 4, paddingRight: 28, flexWrap: "wrap" }}>
        <span style={{
          background: bs.bg, color: bs.fg,
          fontSize: 9.5, fontWeight: 700,
          letterSpacing: "0.1em", textTransform: "uppercase",
          padding: "2.5px 6px", borderRadius: 4,
        }}>
          {plan.badge.label}
        </span>
        <span style={{ fontSize: 14.5, fontWeight: 700, letterSpacing: "-0.01em" }}>
          {plan.title}
        </span>
      </div>
      <div style={{ fontSize: 12, color: "var(--ink-2)", marginBottom: 8, paddingRight: 28 }}>
        Up to <strong style={{ color: "var(--ss-black)", fontWeight: 600 }}>$75,000</strong> in legal defense
      </div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 6, flexWrap: "wrap" }}>
        <span style={{ display: "inline-flex", alignItems: "baseline" }}>
          <span className="mono" style={{ fontSize: 11.5, fontWeight: 600, alignSelf: "flex-start", marginTop: 3 }}>$</span>
          <span className="mono" style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1 }}>
            {(plan.price / 100).toLocaleString("en-US", { maximumFractionDigits: 0 })}
          </span>
        </span>
        <span className="mono" style={{ fontSize: 11.5, 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: 9.5, fontWeight: 700,
          letterSpacing: "0.04em", textTransform: "uppercase",
          padding: "2px 6px", borderRadius: 4,
        }}>
          Save ${(plan.save / 100).toLocaleString("en-US")}
        </span>
      </div>
    </button>
  );
};

Object.assign(window, { CheckoutCMobile, MSectionLabel, PlanCardMobile });