/* ================================================================
   trial.jsx — Capital Economics "Start your free trial" landing.
   Single-purpose conversion page: one form, minimal chrome.
   Two columns on desktop (value | form), single column on mobile
   with the form lifted directly under the headline.
   Components + tokens come from the CE design system bundle.
================================================================ */
const { Button, Input, Select, Checkbox } = window.CapitalEconomicsDesignSystem_f2a5b2;

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

/* ---- Icons (Lucide subset, 24x24, 2px stroke) ---- */
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" /></>,
  "credit-card": <><rect width="20" height="14" x="2" y="5" rx="2" /><path d="M2 10h20" /></>,
  clock: <><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></>,
  lock: <><rect width="18" height="11" x="3" y="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></>,
};
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, plus a quiet sign-in link.
--------------------------------------------------------------- */
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", justifyContent: "space-between", gap: 16,
      }}>
        <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>
        <span style={{ fontFamily: NS, fontSize: 14.5, color: "var(--text-secondary)" }}>
          Already have an account?{" "}
          <a href="#" style={{ color: "var(--text-link)", fontWeight: 600, textDecoration: "none" }}>Sign in</a>
        </span>
      </div>
    </header>
  );
}

/* ---------------------------------------------------------------
   Left column — the value side.
--------------------------------------------------------------- */
const REASSURANCE = [
  { icon: "file-text", label: "3 free articles" },
  { icon: "credit-card", label: "No card required" },
  { icon: "clock", label: "Reading in under a minute" },
];
const TRUST_LOGOS = ["BlackRock", "Fidelity", "UBS", "BNY", "BNP-Paribas"];

function Intro() {
  return (
    <div className="trial-intro">
      <div className="ce-eyebrow" style={{ marginBottom: 16 }}>Free trial</div>
      <h1 style={{
        fontFamily: SERIF, fontWeight: 600, fontSize: 46, lineHeight: 1.06,
        letterSpacing: "-0.02em", color: "var(--text-primary)", margin: 0,
      }}>
        Start your free trial
      </h1>
      <p style={{
        fontFamily: NS, fontSize: 18.5, lineHeight: 1.55, color: "var(--text-secondary)",
        margin: "20px 0 0", maxWidth: 460,
      }}>
        Three pieces of CE research, free. Independent macro across 100+ economies.
        Start reading now, no payment details needed.
      </p>

      <ul style={{ listStyle: "none", padding: 0, margin: "32px 0 0", display: "flex", flexDirection: "column", gap: 16 }}>
        {REASSURANCE.map((r) => (
          <li key={r.label} style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <span style={{
              width: 38, height: 38, borderRadius: "var(--radius-md)", flex: "none",
              background: "var(--brand-subtle)", color: "var(--brand)",
              display: "flex", alignItems: "center", justifyContent: "center",
            }}>
              <Icon name={r.icon} size={19} />
            </span>
            <span style={{ fontFamily: NS, fontSize: 16.5, fontWeight: 600, color: "var(--text-primary)", whiteSpace: "nowrap" }}>{r.label}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function Proof() {
  return (
    <div className="trial-proof">
      <div style={{ paddingTop: 36, borderTop: "1px solid var(--border-subtle)" }}>
        <div style={{
          fontFamily: NS, fontWeight: 700, fontSize: 11.5, letterSpacing: "0.14em",
          textTransform: "uppercase", color: "var(--text-muted)", marginBottom: 20,
        }}>Trusted by</div>
        <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "20px 34px" }}>
          {TRUST_LOGOS.map((f) => (
            <img key={f} src={"assets/logos/" + f + ".svg"} alt={f.replace(/-/g, " ")}
              style={{ height: 22, width: "auto", maxWidth: 116, objectFit: "contain", opacity: 0.55, display: "block" }} />
          ))}
        </div>
      </div>

      <figure style={{ margin: "36px 0 0", maxWidth: 480 }}>
        <blockquote style={{
          fontFamily: SERIF, fontWeight: 500, fontSize: 19.5, lineHeight: 1.5,
          letterSpacing: "-0.01em", color: "var(--text-primary)", margin: 0,
        }}>
          “The first thing I read each morning. Independent, fast, and consistently ahead of the consensus.”
        </blockquote>
        <figcaption style={{ fontFamily: NS, fontSize: 14.5, color: "var(--text-secondary)", marginTop: 16 }}>
          Portfolio Manager, global macro fund
        </figcaption>
      </figure>
    </div>
  );
}

/* ---------------------------------------------------------------
   Right column — the form card (the primary action).
--------------------------------------------------------------- */
const COUNTRIES = [
  "United Kingdom", "United States", "Germany", "France", "Switzerland",
  "Netherlands", "Ireland", "Luxembourg", "Spain", "Italy", "Sweden",
  "United Arab Emirates", "Singapore", "Hong Kong", "Japan", "Australia",
  "Canada", "China", "India", "Other",
];

function FreeArticle({ kicker, title }) {
  return (
    <a href="#" style={{
      display: "block", textDecoration: "none", padding: "16px 18px",
      border: "1px solid var(--border-default)", borderRadius: "var(--radius-md)",
      background: "var(--surface-card)",
    }}>
      <div style={{
        fontFamily: NS, fontWeight: 700, fontSize: 10.5, letterSpacing: "0.12em",
        textTransform: "uppercase", color: "var(--brand)", marginBottom: 7,
      }}>{kicker}</div>
      <div style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 17, lineHeight: 1.25, color: "var(--text-primary)" }}>{title}</div>
    </a>
  );
}

function SuccessPanel({ name }) {
  const articles = [
    { kicker: "US Economics", title: "The Fed's December cut still looks likely despite sticky services inflation." },
    { kicker: "UK Economics", title: "Why we have pulled our next Bank Rate cut forward to August." },
    { kicker: "China", title: "Q1 GDP of 5.2% flatters reality. The detail paints a weaker picture." },
  ];
  return (
    <div>
      <div style={{
        width: 48, height: 48, borderRadius: "50%", background: "var(--positive-100)",
        color: "var(--positive-600)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 22,
      }}>
        <Icon name="check" size={26} stroke={2.5} />
      </div>
      <h2 style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 27, lineHeight: 1.14, letterSpacing: "-0.015em", color: "var(--text-primary)", margin: 0 }}>
        You're in{name ? ", " + name : ""}. Start reading.
      </h2>
      <p style={{ fontFamily: NS, fontSize: 15.5, lineHeight: 1.55, color: "var(--text-secondary)", margin: "12px 0 26px" }}>
        Three pieces of CE research, unlocked. One of our team will be in touch shortly to help you scope full access.
      </p>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {articles.map((a) => <FreeArticle key={a.title} {...a} />)}
      </div>
    </div>
  );
}

function FormCard() {
  const [data, setData] = React.useState({ email: "", first: "", last: "", company: "", country: "United Kingdom" });
  const [submitted, setSubmitted] = React.useState(false);
  const set = (k) => (e) => setData((d) => ({ ...d, [k]: e.target.value }));

  const onSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <div className="trial-form" 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: "34px 34px 32px",
    }}>
      {submitted ? (
        <SuccessPanel name={data.first.trim()} />
      ) : (
        <form onSubmit={onSubmit} noValidate>
          <Input label="Business email" type="email" name="email" required
            placeholder="you@firm.com" autoComplete="email" value={data.email} onChange={set("email")} />

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 18 }}>
            <Input label="First name" name="first" required autoComplete="given-name" value={data.first} onChange={set("first")} />
            <Input label="Last name" name="last" required autoComplete="family-name" value={data.last} onChange={set("last")} />
          </div>

          <div style={{ marginTop: 18 }}>
            <Input label="Company name" name="company" required autoComplete="organization" value={data.company} onChange={set("company")} />
          </div>

          <div style={{ marginTop: 18 }}>
            <Select label="Country" name="country" options={COUNTRIES} value={data.country} onChange={set("country")} />
          </div>

          <div style={{ marginTop: 26 }}>
            <Button type="submit" variant="primary" size="lg" block
              iconEnd={<Icon name="arrow-right" size={18} />}>
              Start free trial
            </Button>
          </div>

          <p style={{ fontFamily: NS, fontSize: 13.5, color: "var(--text-muted)", textAlign: "center", margin: "14px 0 0" }}>
            Free. 3 articles. No card required.
          </p>

          <div style={{ marginTop: 22, paddingTop: 20, borderTop: "1px solid var(--border-subtle)" }}>
            <Checkbox name="consent"
              label={<span style={{ fontSize: 13.5, color: "var(--text-secondary)", lineHeight: 1.45 }}>
                Email me Capital Economics research highlights and event invitations. You can unsubscribe at any time.
              </span>} />
          </div>
        </form>
      )}
    </div>
  );
}

/* ---------------------------------------------------------------
   Page
--------------------------------------------------------------- */
function App() {
  return (
    <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column", background: "var(--surface-page)" }}>
      <TopBar />
      <main style={{ flex: 1, display: "flex", alignItems: "center" }}>
        <div className="trial-grid" style={{ width: "100%", maxWidth: 1180, margin: "0 auto", padding: "56px 28px" }}>
          <Intro />
          <FormCard />
          <Proof />
        </div>
      </main>
      <footer style={{ borderTop: "1px solid var(--border-subtle)", background: "var(--surface-card)" }}>
        <div style={{
          maxWidth: 1180, margin: "0 auto", padding: "20px 28px",
          fontFamily: NS, fontSize: 13, color: "var(--text-muted)",
        }}>
          © 2026 Capital Economics Ltd. Independent macroeconomic research.
        </div>
      </footer>
    </div>
  );
}

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