/* confirm-full-access.jsx — interim "confirm full access" page.
   A logged-in trialist has clicked "Request full access". No fields
   needed: we explain what full access gives, reassure on spam,
   guard against an accidental single click (two-step confirm), and
   confirm that a specialist will call to arrange it. */
const { Button } = window.CapitalEconomicsDesignSystem_f2a5b2;
const { NS, SERIF, SiteHeader, SiteFooter } = window;

const CFA_ICONS = {
  check: <path d="M20 6 9 17l-5-5" />,
  "check-circle": <><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" /><path d="m9 11 3 3L22 4" /></>,
  "arrow-right": <><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></>,
  "arrow-left": <><path d="M19 12H5" /><path d="m12 19-7-7 7-7" /></>,
  phone: <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z" />,
  shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" />,
  lock: <><rect width="18" height="11" x="3" y="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></>,
  loader: <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />,
};
function CfaIcon({ name, size = 20, stroke = 2, style, className }) {
  return (
    <svg className={className} style={style} width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {CFA_ICONS[name]}
    </svg>
  );
}

const ACCOUNT = { name: "Jordan Okafor", company: "Meridian Capital", phone: "+44 20 7808 4000" };

const BENEFITS = [
  ["Every publication, no credit limit", "Read the full research archive across all 100+ economies we cover, with no ten-piece cap."],
  ["The complete data and forecasts", "Our full forecast set, data series and chart books, ready to export."],
  ["Alerts and economist access", "Real-time alerts on the releases you follow, plus direct Q&A with the economists behind the calls."],
];

let cfaCSS = false;
function injectCfaCSS() {
  if (cfaCSS) return; cfaCSS = true;
  const el = document.createElement("style");
  el.textContent = `
  .cfa-root { font-family: ${NS}; color: var(--text-primary); background: var(--surface-page); }
  .cfa-wrap { max-width: 620px; margin: 0 auto; padding: 60px 24px 88px; }
  .cfa-back { display: flex; width: fit-content; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--text-muted); text-decoration: none; margin: 0 0 34px; }
  .cfa-back:hover { color: var(--text-secondary); }
  .cfa-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ce-navy); margin: 0 0 16px; }
  .cfa-eyebrow svg { color: var(--ce-navy); }
  .cfa-h1 { font-family: ${SERIF}; font-weight: 600; font-size: 38px; line-height: 1.12; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 14px; text-wrap: balance; }
  .cfa-lead { font-size: 17px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 34px; max-width: 54ch; }

  .cfa-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-top: 3px solid var(--ce-navy); border-radius: var(--radius-md, 6px); padding: 30px 32px 30px; }
  .cfa-card-h { font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 20px; }

  .cfa-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
  .cfa-benefit { display: flex; gap: 13px; align-items: flex-start; }
  .cfa-benefit-mark { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-subtle); color: var(--ce-blue); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
  .cfa-benefit-t { font-size: 15.5px; font-weight: 700; color: var(--text-primary); margin: 0 0 3px; line-height: 1.3; }
  .cfa-benefit-d { font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin: 0; }

  .cfa-how { display: flex; align-items: flex-start; gap: 11px; margin: 26px 0 0; padding: 18px 18px; background: var(--surface-subtle); border-radius: var(--radius-md, 6px); }
  .cfa-how svg { color: var(--ce-navy); flex: 0 0 auto; margin-top: 1px; }
  .cfa-how p { font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin: 0; }
  .cfa-how strong { color: var(--text-primary); font-weight: 700; }

  .cfa-account { font-size: 13px; color: var(--text-muted); margin: 22px 0 0; line-height: 1.5; }
  .cfa-account strong { color: var(--text-secondary); font-weight: 700; }

  /* Action area — two-step to guard against accidental clicks */
  .cfa-actions { margin: 28px 0 0; }
  .cfa-actionrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
  .cfa-actionrow .ce-btn { min-width: 240px; height: 52px; font-size: 16px; }
  .cfa-cancel { background: 0; border: 0; font-family: ${NS}; font-size: 14px; font-weight: 600; color: var(--text-secondary); cursor: pointer; padding: 8px 4px; }
  .cfa-cancel:hover { color: var(--text-link); text-decoration: underline; }
  .cfa-spam { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin: 18px 0 0; }
  .cfa-spam svg { color: var(--positive-600, #3c8f5a); flex: 0 0 auto; }

  /* Step 2 — explicit confirm panel */
  .cfa-confirm { border: 1px solid var(--border-default); border-left: 3px solid var(--ce-blue); background: var(--surface-subtle); border-radius: var(--radius-md, 6px); padding: 22px 24px; margin: 28px 0 0; }
  .cfa-confirm-h { font-family: ${SERIF}; font-weight: 600; font-size: 20px; line-height: 1.2; color: var(--text-primary); margin: 0 0 8px; }
  .cfa-confirm-p { font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); margin: 0 0 20px; max-width: 52ch; }
  .cfa-confirm-p strong { color: var(--text-primary); font-weight: 700; }

  /* Done state */
  .cfa-done { text-align: center; padding: 8px 0 4px; }
  .cfa-done-mark { width: 56px; height: 56px; border-radius: 50%; background: var(--brand-subtle); color: var(--ce-blue); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
  .cfa-done-h { font-family: ${SERIF}; font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -0.015em; color: var(--text-primary); margin: 0 0 12px; }
  .cfa-done-p { font-size: 16px; line-height: 1.6; color: var(--text-secondary); margin: 0 auto 8px; max-width: 46ch; }
  .cfa-done-p strong { color: var(--text-primary); font-weight: 700; }
  .cfa-done-back { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--brand); text-decoration: none; margin-top: 20px; }
  .cfa-done-back:hover { text-decoration: underline; }

  .cfa-spin { animation: cfaspin 0.7s linear infinite; }
  @keyframes cfaspin { to { transform: rotate(360deg); } }

  @media (max-width: 560px) {
    .cfa-wrap { padding: 40px 20px 64px; }
    .cfa-h1 { font-size: 30px; }
    .cfa-card { padding: 24px 20px; }
    .cfa-actionrow .ce-btn { min-width: 0; width: 100%; }
    .cfa-cancel { width: 100%; }
  }
  `;
  document.head.appendChild(el);
}

function ConfirmFullAccess() {
  injectCfaCSS();
  const [step, setStep] = React.useState("intro"); // intro | confirm | loading | done
  const confirm = () => {
    setStep("loading");
    setTimeout(() => setStep("done"), 1500);
  };

  return (
    <div className="cfa-root">
      <div className="cfa-wrap">
        <a href="Content Detail Page - Trial (Unlocked).html" className="cfa-back">
          <CfaIcon name="arrow-left" size={15} />Back to reading
        </a>

        {step === "done" ? (
          <div className="cfa-card">
            <div className="cfa-done">
              <span className="cfa-done-mark"><CfaIcon name="check" size={28} stroke={2.4} /></span>
              <h1 className="cfa-done-h">Full access requested</h1>
              <p className="cfa-done-p">
                Thank you, {ACCOUNT.name.split(" ")[0]}. A member of our team will call you within one working
                day to arrange your full access to Capital Economics.
              </p>
              <p className="cfa-done-p">
                Nothing changes in the meantime, your trial keeps running as normal.
              </p>
              <a href="Content Detail Page - Trial (Unlocked).html" className="cfa-done-back">
                Back to reading<CfaIcon name="arrow-right" size={15} />
              </a>
            </div>
          </div>
        ) : (
          <>
            <p className="cfa-eyebrow"><CfaIcon name="lock" size={14} stroke={2.2} />Full access</p>
            <h1 className="cfa-h1">Confirm full access to Capital Economics</h1>
            <p className="cfa-lead">
              You are asking us to set up unrestricted access for your account. There is nothing more to fill
              in, one of our team will take it from here.
            </p>

            <div className="cfa-card">
              <p className="cfa-card-h">What full access gives you</p>
              <ul className="cfa-benefits">
                {BENEFITS.map(([t, d]) => (
                  <li className="cfa-benefit" key={t}>
                    <span className="cfa-benefit-mark"><CfaIcon name="check" size={14} stroke={2.6} /></span>
                    <div>
                      <p className="cfa-benefit-t">{t}</p>
                      <p className="cfa-benefit-d">{d}</p>
                    </div>
                  </li>
                ))}
              </ul>

              <div className="cfa-how">
                <CfaIcon name="phone" size={18} />
                <p>
                  <strong>A specialist will call you to arrange it.</strong> They will confirm the coverage your
                  team needs and set up access, usually within one working day. No payment is taken on this page.
                </p>
              </div>

              <p className="cfa-account">
                We will use the details on your account:{" "}
                <strong>{ACCOUNT.name}</strong>, {ACCOUNT.company} · {ACCOUNT.phone}
              </p>

              {step === "intro" && (
                <div className="cfa-actions">
                  <div className="cfa-actionrow">
                    <Button variant="primary" size="lg" onClick={() => setStep("confirm")}
                      iconEnd={<CfaIcon name="arrow-right" size={18} />}>
                      Request full access
                    </Button>
                    <a className="cfa-cancel" href="Content Detail Page - Trial (Unlocked).html">Not now</a>
                  </div>
                  <p className="cfa-spam">
                    <CfaIcon name="shield" size={15} />
                    One call to set things up. We will not add you to marketing lists or pass on your details.
                  </p>
                </div>
              )}

              {(step === "confirm" || step === "loading") && (
                <div className="cfa-confirm" role="group" aria-label="Confirm your request">
                  <h2 className="cfa-confirm-h">Request full access now?</h2>
                  <p className="cfa-confirm-p">
                    We will ask a member of our team to call <strong>{ACCOUNT.name}</strong> on{" "}
                    <strong>{ACCOUNT.phone}</strong> to arrange it. You can cancel any time before they reach you.
                  </p>
                  <div className="cfa-actionrow">
                    <Button variant="primary" size="lg" disabled={step === "loading"} onClick={confirm}
                      iconEnd={step === "loading"
                        ? <CfaIcon name="loader" size={18} className="cfa-spin" />
                        : <CfaIcon name="check" size={18} stroke={2.4} />}>
                      {step === "loading" ? "Sending…" : "Yes, confirm my request"}
                    </Button>
                    <button className="cfa-cancel" onClick={() => setStep("intro")} disabled={step === "loading"}>Go back</button>
                  </div>
                </div>
              )}
            </div>
          </>
        )}
      </div>
    </div>
  );
}

function Page() {
  return (
    <div style={{ minHeight: "100%", display: "flex", flexDirection: "column", background: "var(--surface-page)" }}>
      <SiteHeader />
      <main style={{ flex: 1 }}><ConfirmFullAccess /></main>
      <SiteFooter />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page />);