/* ================================================================
   page.jsx — Subscription Products page.
   Shared components (header, footer, CTA, capability blocks, proof,
   closing, brand graph, icons, tokens) come from shared.jsx via window.
================================================================ */
const {
  Icon, MAX, NS, SERIF, BrandGraph, TrialCTA, Eyebrow, SectionHead,
  SiteHeader, CapabilityGrid, ProofSection, ClosingSection, SiteFooter,
} = window;
const { Button } = window.CapitalEconomicsDesignSystem_f2a5b2;

/* ----------------------------------------------------------------
   Section 1 — Hero
---------------------------------------------------------------- */
function Hero() {
  const stats = [
    ["Analysis", "60+ economists"],
    ["Data & Forecasts", "Excel & API"],
    ["Economist Access", "Direct"],
  ];
  return (
    <section style={{ background: "#1d233f", position: "relative", overflow: "hidden" }}>
      {/* Full-bleed brand data-graphic — lines run off the right edge */}
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
        <BrandGraph style={{
          position: "absolute", right: "-3%", bottom: 0,
          width: "min(62%, 1000px)", height: "auto", display: "block",
        }} />
        {/* ONE PLATFORM annotation */}
        <div style={{ position: "absolute", left: "58.5%", top: "24%" }}>
          <div style={{ width: 130, height: 1, background: "rgba(255,255,255,0.4)", marginBottom: 14 }} />
          <div style={{ fontFamily: NS, fontWeight: 700, fontSize: 14, letterSpacing: "0.12em", color: "#fff", whiteSpace: "nowrap" }}>ONE PLATFORM</div>
          <div style={{ fontFamily: NS, fontSize: 14.5, color: "rgba(255,255,255,0.62)", marginTop: 5, whiteSpace: "nowrap" }}>100+ economies</div>
        </div>
        {/* Bottom annotation row, aligned under the graph */}
        <div style={{ position: "absolute", left: "58.5%", right: "4%", bottom: "7%", display: "flex", gap: 52 }}>
          {stats.map(([t, s]) => (
            <div key={t}>
              <div style={{ fontFamily: NS, fontWeight: 700, fontSize: 15, color: "#fff", whiteSpace: "nowrap" }}>{t}</div>
              <div style={{ fontFamily: NS, fontSize: 14.5, color: "rgba(255,255,255,0.62)", marginTop: 4, whiteSpace: "nowrap" }}>{s}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{
        maxWidth: MAX, margin: "0 auto", padding: "140px 32px 90px",
        position: "relative", zIndex: 2,
      }}>
        <div style={{ maxWidth: 600 }}>
          <Eyebrow style={{ marginBottom: 18, color: "var(--ce-blue-light)" }}>Platform subscription</Eyebrow>
          <h1 style={{
            fontFamily: SERIF, fontWeight: 600, fontSize: 55, lineHeight: 1.07,
            letterSpacing: "-0.02em", color: "#fff", margin: 0, maxWidth: 600,
          }}>
            The full macro picture, scoped to your mandate.
          </h1>
          <p style={{ fontFamily: NS, fontSize: 19, lineHeight: 1.55, color: "var(--text-on-navy)", margin: "22px 0 34px", maxWidth: 540 }}>
            One platform for independent analysis, data and forecasts, and direct access to our economists
            across 100+ economies. Take the coverage you need today, extend it whenever you need more.
          </p>
          <TrialCTA inverse />
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------------------------
   Section 2 — What the platform is (capability blocks)
---------------------------------------------------------------- */
function PlatformSection() {
  return (
    <section style={{ background: "var(--surface-card)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ maxWidth: MAX, margin: "0 auto", padding: "64px 32px" }}>
        <SectionHead
          eyebrow="One subscription"
          title="One platform. Everything CE produces."
          intro="No tiers, no locked-off levels. One subscription gives you the full platform; you choose how much of the world it covers."
        />
        <CapabilityGrid />
      </div>
    </section>
  );
}

/* ----------------------------------------------------------------
   Section 3 — How coverage works (THE comparison table)
---------------------------------------------------------------- */
function CoverageSection() {
  const rows = [
    { label: "In a line",
      sel: "The full platform for the regions and themes you focus on",
      full: "The full platform across everything CE covers" },
    { label: "Best when",
      sel: "You have a defined mandate and a focused set of markets or themes",
      full: "You have a global, multi-asset or multi-region remit" },
    { label: "Coverage",
      sel: "1 to 6 topic or region areas",
      full: "All areas, no restrictions" },
    { label: "Platform experience",
      sel: "Identical", full: "Identical", identical: true },
    { label: "Bolt-ons",
      sel: "Available", full: "Available" },
  ];
  const cell = { fontFamily: NS, fontSize: 15.5, lineHeight: 1.5, color: "var(--text-secondary)", padding: "20px 28px", verticalAlign: "top", borderTop: "1px solid var(--border-subtle)" };
  const rowLabel = { ...cell, fontWeight: 700, color: "var(--text-primary)", width: 200, background: "var(--surface-sunken)" };
  const colHead = { fontFamily: SERIF, fontWeight: 600, fontSize: 22, color: "var(--text-primary)", padding: "24px 28px", textAlign: "left", verticalAlign: "bottom" };

  return (
    <section style={{ background: "linear-gradient(180deg, #F4F6FC 0%, #E2E8F5 100%)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ maxWidth: 1000, margin: "0 auto", padding: "64px 32px" }}>
        <SectionHead
          eyebrow="How coverage works"
          title="One platform, scoped to you."
          intro="Every subscription is the full platform. The only question is how much of CE's coverage you switch on, and we help you get that right."
        />

        <div style={{ background: "var(--surface-card)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-sm)" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", tableLayout: "fixed" }}>
            <colgroup>
              <col style={{ width: 200 }} />
              <col />
              <col />
            </colgroup>
            <thead>
              <tr>
                <th style={{ ...colHead, background: "var(--surface-sunken)" }}>
                  <Eyebrow>Compare scope</Eyebrow>
                </th>
                <th style={colHead}>Selected Coverage</th>
                <th style={colHead}>Full Coverage</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r) => (
                <tr key={r.label}>
                  <td style={rowLabel}>{r.label}</td>
                  {r.identical ? (
                    <>
                      <td style={{ ...cell, color: "var(--text-primary)", fontWeight: 600 }}>
                        <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                          <Icon name="check" size={17} style={{ color: "var(--positive)" }} />Identical
                        </span>
                      </td>
                      <td style={{ ...cell, color: "var(--text-primary)", fontWeight: 600 }}>
                        <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                          <Icon name="check" size={17} style={{ color: "var(--positive)" }} />Identical
                        </span>
                      </td>
                    </>
                  ) : (
                    <>
                      <td style={cell}>{r.sel}</td>
                      <td style={cell}>{r.full}</td>
                    </>
                  )}
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <p style={{ fontFamily: NS, fontSize: 16.5, lineHeight: 1.6, color: "var(--text-secondary)", textAlign: "center", margin: "34px auto 28px", maxWidth: 660 }}>
          Not sure which fits? Most clients land on the right scope in a short conversation, or start a trial
          and see the full breadth first.
        </p>

        <TrialCTA align="center" />
      </div>
    </section>
  );
}

/* ----------------------------------------------------------------
   Section 4 — Bolt-ons
---------------------------------------------------------------- */
function BoltOnsSection() {
  const items = [
    { icon: "table", h: "Excel Add-In", b: "Live CE data in your spreadsheets, always current.", use: "For heavy modelling." },
    { icon: "code", h: "Data API", b: "Programmatic access for your models and systems.", use: "For quant and technical teams." },
    { icon: "layers", h: "Content API", b: "Embed CE publications in your internal portal.", use: "For in-house research platforms." },
    { icon: "terminal", h: "Access via Bloomberg, FactSet & AlphaSense", b: "CE research inside the terminal you already use.", use: null },
    { icon: "calendar-clock", h: "Dedicated Economist Meetings", b: "Scheduled one-to-one time with named economists.", use: "No minimum commitment." },
  ];
  return (
    <section style={{ background: "var(--surface-card)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ maxWidth: MAX, margin: "0 auto", padding: "64px 32px" }}>
        <SectionHead
          eyebrow="Bolt-ons"
          title="Extend the platform as you grow."
          intro="Start with the platform. Add capability as your needs change, mid-contract or at renewal. Nothing here is a separate product to learn; it is the same research, reaching further into how you already work."
        />
        <div style={{ border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", overflow: "hidden", background: "var(--surface-card)" }}>
          {items.map((it, i) => (
            <div key={it.h} style={{
              display: "flex", alignItems: "center", gap: 22, padding: "22px 26px",
              borderTop: i === 0 ? "none" : "1px solid var(--border-subtle)",
            }}>
              <div style={{
                flex: "0 0 auto", width: 42, height: 42, borderRadius: "var(--radius-md)",
                background: "var(--brand-subtle)", color: "var(--brand)", display: "flex", alignItems: "center", justifyContent: "center",
              }}>
                <Icon name={it.icon} size={20} />
              </div>
              <div style={{ flex: "0 0 300px", fontFamily: NS, fontWeight: 700, fontSize: 16.5, color: "var(--text-primary)" }}>{it.h}</div>
              <div style={{ flex: 1, fontFamily: NS, fontSize: 15.5, lineHeight: 1.5, color: "var(--text-secondary)" }}>{it.b}</div>
              {it.use && (
                <div style={{ flex: "0 0 auto", fontFamily: NS, fontSize: 13, fontWeight: 600, color: "var(--text-muted)", fontStyle: "italic", textAlign: "right", minWidth: 180 }}>{it.use}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <div>
      <SiteHeader />
      <Hero />
      <PlatformSection />
      <CoverageSection />
      <BoltOnsSection />
      <ProofSection />
      <ClosingSection />
      <SiteFooter />
    </div>
  );
}

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