/* ================================================================
   confirmed.jsx — Capital Economics post-submission confirmation.
   The reward moment after the free-trial form: credits granted,
   reading one tap away, sales follow-up framed as a benefit.
   Single centred card, minimal chrome. Mobile-first.
================================================================ */
const { Button } = window.CapitalEconomicsDesignSystem_f2a5b2;

const NS = "var(--font-ui)";
const SERIF = "var(--font-serif)";

const ICONS = {
  check: <path d="M20 6 9 17l-5-5" />,
  "arrow-right": <><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></>,
  "file-text": <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" /><path d="M16 13H8M16 17H8M10 9H8" /></>,
};
function Icon({ name, size = 20, stroke = 2, style }) {
  return (
    <svg style={style} width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {ICONS[name]}
    </svg>
  );
}

/* Minimal top bar — logo only. */
function TopBar() {
  return (
    <header style={{ borderBottom: "1px solid var(--border-subtle)", background: "var(--surface-card)" }}>
      <div style={{
        maxWidth: 1180, margin: "0 auto", padding: "0 28px", height: 68, display: "flex", alignItems: "center",
      }}>
        <a href="Homepage.html" style={{ display: "flex" }} aria-label="Capital Economics home">
          <img src="assets/CE-logo-primary.svg" alt="Capital Economics" style={{ height: 40, display: "block" }} />
        </a>
      </div>
    </header>
  );
}

/* Credit balance — three filled markers + a confident count.
   Shows value and gentle scarcity at a glance. */
function CreditBalance() {
  const total = 3, used = 0, remaining = total - used;
  return (
    <div style={{
      display: "flex", alignItems: "center", justifyContent: "center", gap: 18,
      background: "var(--brand-subtle)", border: "1px solid var(--blue-100)",
      borderRadius: "var(--radius-md)", padding: "16px 22px", margin: "4px auto 0", width: "fit-content",
    }}>
      <div style={{ display: "flex", gap: 8 }}>
        {Array.from({ length: total }).map((_, i) => {
          const filled = i < remaining;
          return (
            <span key={i} style={{
              width: 30, height: 30, borderRadius: "50%", flex: "none",
              display: "flex", alignItems: "center", justifyContent: "center",
              background: filled ? "var(--brand)" : "transparent",
              border: filled ? "1px solid var(--brand)" : "1.5px solid var(--blue-200)",
              color: filled ? "#fff" : "var(--blue-200)",
            }}>
              <Icon name="file-text" size={15} stroke={2.2} />
            </span>
          );
        })}
      </div>
      <div style={{ textAlign: "left" }}>
        <div style={{
          fontFamily: NS, fontWeight: 700, fontSize: 19, letterSpacing: "-0.01em",
          color: "var(--text-primary)", fontVariantNumeric: "tabular-nums", lineHeight: 1,
        }}>{remaining} / {total} articles</div>
        <div style={{ fontFamily: NS, fontSize: 13, color: "var(--text-secondary)", marginTop: 5 }}>remaining on your trial</div>
      </div>
    </div>
  );
}

function ConfirmationCard() {
  return (
    <div className="confirm-card" style={{
      background: "var(--surface-card)", border: "1px solid var(--border-default)",
      borderRadius: "var(--radius-lg)", boxShadow: "0 8px 30px rgba(36,33,58,0.08)",
      padding: "44px 44px 40px", textAlign: "center", maxWidth: 480, width: "100%",
    }}>
      <div style={{
        width: 52, height: 52, borderRadius: "50%", background: "var(--positive-100)",
        color: "var(--positive-600)", display: "flex", alignItems: "center", justifyContent: "center",
        margin: "0 auto 24px",
      }}>
        <Icon name="check" size={28} stroke={2.5} />
      </div>

      <h1 style={{
        fontFamily: SERIF, fontWeight: 600, fontSize: 42, lineHeight: 1.05,
        letterSpacing: "-0.02em", color: "var(--text-primary)", margin: 0,
      }}>
        You're in.
      </h1>
      <p style={{
        fontFamily: NS, fontSize: 17.5, lineHeight: 1.5, color: "var(--text-secondary)",
        margin: "14px auto 0", maxWidth: 360,
      }}>
        Three pieces of CE research, ready to explore.
      </p>

      <div style={{ margin: "28px 0 0" }}>
        <CreditBalance />
      </div>

      <div style={{ margin: "30px 0 0" }}>
        <Button variant="primary" size="lg" block iconEnd={<Icon name="arrow-right" size={18} />}>
          Start reading
        </Button>
      </div>

      <p style={{
        fontFamily: NS, fontSize: 14.5, lineHeight: 1.5, color: "var(--text-secondary)",
        margin: "20px auto 0", maxWidth: 380,
      }}>
        A CE specialist will be in touch to help you get the most from your trial.
      </p>

      <div style={{ marginTop: 24, paddingTop: 22, borderTop: "1px solid var(--border-subtle)" }}>
        <a href="#" style={{
          fontFamily: NS, fontSize: 14.5, fontWeight: 600, color: "var(--text-link)",
          textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 6,
        }}>
          Browse all insights<Icon name="arrow-right" size={15} />
        </a>
      </div>
    </div>
  );
}

function App() {
  return (
    <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column", background: "var(--surface-page)" }}>
      <TopBar />
      <main style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", padding: "48px 24px" }}>
        <ConfirmationCard />
      </main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);