/* ================================================================
   shared.jsx — single source of truth for components used on BOTH
   the Subscription Products page and the Homepage.
   Loaded before page.jsx / homepage.jsx; exports onto window.
================================================================ */
const { Button } = window.CapitalEconomicsDesignSystem_f2a5b2;

/* ----------------------------------------------------------------
   Icons — Lucide subset (24×24, 2px stroke), the system's UI set.
---------------------------------------------------------------- */
const ICON_PATHS = {
  "arrow-right": <><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></>,
  "arrow-up-right": <><path d="M7 7h10v10" /><path d="M7 17 17 7" /></>,
  check: <path d="M20 6 9 17l-5-5" />,
  "chevron-down": <path d="m6 9 6 6 6-6" />,
  "line-chart": <><path d="M3 3v16a2 2 0 0 0 2 2h16" /><path d="m19 9-5 5-4-4-3 3" /></>,
  database: <><ellipse cx="12" cy="5" rx="9" ry="3" /><path d="M3 5v14a9 3 0 0 0 18 0V5" /><path d="M3 12a9 3 0 0 0 18 0" /></>,
  "message-circle": <path d="M21 11.5a8.38 8.38 0 0 1-9 8.4 8.5 8.5 0 0 1-3.9-.9L3 21l1.9-4.1A8.38 8.38 0 0 1 4 12.5a8.5 8.5 0 0 1 8.5-8.5A8.38 8.38 0 0 1 21 11.5Z" />,
  table: <><path d="M12 3v18" /><rect width="18" height="18" x="3" y="3" rx="2" /><path d="M3 9h18M3 15h18" /></>,
  code: <><path d="m16 18 6-6-6-6" /><path d="m8 6-6 6 6 6" /></>,
  layers: <><path d="m12 2 9 5-9 5-9-5 9-5z" /><path d="m3 12 9 5 9-5" /><path d="m3 17 9 5 9-5" /></>,
  terminal: <><path d="m4 17 6-6-6-6" /><path d="M12 19h8" /></>,
  "calendar-clock": <><path d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h4" /><path d="M16 2v4M8 2v4M3 10h5" /><circle cx="17" cy="16" r="5" /><path d="M17 14.5V16l1 1" /></>,
  "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" /></>,
  globe: <><circle cx="12" cy="12" r="10" /><path d="M2 12h20" /><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" /></>,
  video: <><path d="m22 8-6 4 6 4V8z" /><rect width="14" height="12" x="2" y="6" rx="2" /></>,
  user: <><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></>,
  bell: <><path d="M10.268 21a2 2 0 0 0 3.464 0" /><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" /></>,
  briefcase: <><rect width="20" height="14" x="2" y="7" rx="2" /><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" /></>,
  award: <><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" /><circle cx="12" cy="8" r="6" /></>,
};
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">
      {ICON_PATHS[name]}
    </svg>
  );
}

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

/* ----------------------------------------------------------------
   Brand data-graphic — three animated line series. Draws in on load
   (respects prefers-reduced-motion). Used in both heroes.
---------------------------------------------------------------- */
function BrandGraph({ style, className }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const svg = ref.current;
    if (!svg) return;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    svg.querySelectorAll("path").forEach((p, i) => {
      const len = p.getTotalLength();
      p.style.strokeDasharray = len + " " + len;
      if (reduce) { p.style.strokeDashoffset = "0"; return; }
      p.style.strokeDashoffset = String(len);
      p.animate(
        [{ strokeDashoffset: len }, { strokeDashoffset: 0 }],
        { duration: 1700, delay: 150 + i * 280, easing: "cubic-bezier(0.2,0,0,1)", fill: "both" }
      );
    });
  }, []);
  return (
    <svg ref={ref} className={"ce-graph " + (className || "")} viewBox="0 0 966 524" fill="none"
      preserveAspectRatio="xMaxYMax meet" aria-hidden="true" style={style}>
      <path d="M89.0081 521.817L197.518 386.248L338.553 288.808L414.947 420.961L522.364 184.262L641.943 274.732L702.075 89.8281L870.853 155.973L922.648 168.956L963.51 95.1579" stroke="#0C978B" strokeWidth="3.635" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M1.81763 521.817L121.944 432.714L197.518 334.044L337.46 305.618L416.178 303.568L522.364 264.072L645.633 172.645L697.155 206.811L872.629 235.92L928.798 70.5588L964.056 31.7467" stroke="#144392" strokeWidth="3.635" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M40.6296 521.817L193.555 423.42L338.007 241.25L416.177 352.493L522.364 374.085L641.943 1.8175L697.155 352.493L872.629 63.7255L928.797 30.1066L964.056 137.25" stroke="#BCBCBC" strokeWidth="3.635" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

/* ----------------------------------------------------------------
   Shared trial CTA — IDENTICAL wording everywhere it appears.
   Primary: "Start free trial". Secondary: "Talk to our team".
---------------------------------------------------------------- */
function TrialCTA({ align = "left", inverse = false }) {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 14, justifyContent: align === "center" ? "center" : "flex-start" }}>
      <Button variant={inverse ? "inverse" : "primary"} size="lg"
        iconEnd={<Icon name="arrow-right" size={18} />}>
        Start free trial
      </Button>
      {inverse
        ? <Button variant="ghost" size="lg" className="btn-on-blue">Talk to our team</Button>
        : <Button variant="secondary" size="lg">Talk to our team</Button>}
    </div>
  );
}

function Eyebrow({ children, style }) {
  return <div className="ce-eyebrow" style={style}>{children}</div>;
}

function SectionHead({ eyebrow, title, intro, center = false, maxTitle = 720 }) {
  return (
    <div style={{ textAlign: center ? "center" : "left", marginBottom: 36 }}>
      {eyebrow && <Eyebrow style={{ marginBottom: 16 }}>{eyebrow}</Eyebrow>}
      <h2 style={{
        fontFamily: SERIF, fontWeight: 600, fontSize: 38, lineHeight: 1.13, letterSpacing: "-0.015em",
        color: "var(--text-primary)", margin: 0, maxWidth: maxTitle, marginLeft: center ? "auto" : 0, marginRight: center ? "auto" : 0,
      }}>{title}</h2>
      {intro && (
        <p style={{
          fontFamily: NS, fontSize: 18, lineHeight: 1.55, color: "var(--text-secondary)",
          margin: "16px 0 0", maxWidth: 620, marginLeft: center ? "auto" : 0, marginRight: center ? "auto" : 0,
        }}>{intro}</p>
      )}
    </div>
  );
}

/* ----------------------------------------------------------------
   Header — lifted verbatim, persistent "Start free trial" CTA,
   quiet demoted "Log in".
---------------------------------------------------------------- */
function SiteHeader() {
  const nav = ["Who We Help", "What We Do", "Solutions", "Consultancy", "Insights", "About Us", "Contact Us"];
  const dropdowns = ["Who We Help", "What We Do", "Solutions"];
  const [hover, setHover] = React.useState(null);
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 30, background: "#1d233f",
      borderBottom: "1px solid rgba(255,255,255,0.14)",
    }}>
      <div style={{ maxWidth: MAX, margin: "0 auto", padding: "0 32px", height: 88, display: "flex", alignItems: "center", gap: 22 }}>
        <a href="Homepage.html" style={{ display: "flex", flex: "0 0 auto" }}>
          <img src="assets/CE-logo-reversed.png" alt="Capital Economics" style={{ height: 40, display: "block" }} />
        </a>
        <nav style={{ display: "flex", gap: 1, marginLeft: 2 }}>
          {nav.map((n) => (
            <button key={n} onMouseEnter={() => setHover(n)} onMouseLeave={() => setHover(null)} style={{
              appearance: "none", border: 0, background: "transparent", cursor: "pointer", fontFamily: NS,
              fontSize: 14.5, fontWeight: 600, color: hover === n ? "#fff" : "rgba(255,255,255,0.8)",
              padding: "8px 9px", display: "inline-flex", alignItems: "center", gap: 4, whiteSpace: "nowrap",
            }}>
              {n}
              {dropdowns.includes(n) && <Icon name="chevron-down" size={14} stroke={2.2} />}
            </button>
          ))}
        </nav>
        <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 16 }}>
          <button onMouseEnter={() => setHover("__login")} onMouseLeave={() => setHover(null)} style={{
            appearance: "none", border: 0, background: "transparent", cursor: "pointer", fontFamily: NS,
            fontSize: 14.5, fontWeight: 600, color: hover === "__login" ? "#fff" : "rgba(255,255,255,0.78)",
            padding: "8px 2px", whiteSpace: "nowrap",
          }}>Log in</button>
          <Button variant="inverse" size="sm">Start free trial</Button>
        </div>
      </div>
    </header>
  );
}

/* ----------------------------------------------------------------
   Capability blocks — Analysis / Data & Forecasts / Economist
   Interaction. IDENTICAL copy on both pages. Homepage shows the
   "Learn more" links; products page does not.
---------------------------------------------------------------- */
const CAPABILITY_BLOCKS = [
  { icon: "line-chart", h: "Analysis", b: "Independent views from more than 60 economists across 100+ economies. Quick reads when the market moves, deep dives when you need the full argument.", link: "Learn more about our analysis", href: "#analysis" },
  { icon: "database", h: "Data & Forecasts", b: "Proprietary forecasts, indicators and interactive dashboards, embedded in the analysis and pulled straight into your own models through Excel and the API.", link: "Learn more about our data and forecasts", href: "#data-and-forecasts" },
  { icon: "message-circle", h: "Economist Interaction", b: "Drop-ins, live events and direct access to the economists writing the research. Ask the question, get the view from the person who holds it.", link: "Learn more about economist interaction", href: "#economist-interaction" },
];
function CapabilityGrid({ showLinks = false }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32, marginTop: 8 }}>
      {CAPABILITY_BLOCKS.map((bl) => (
        <div key={bl.h} style={{ display: "flex", flexDirection: "column" }}>
          <div style={{
            width: 44, height: 44, borderRadius: "var(--radius-md)", background: "var(--brand-subtle)",
            color: "var(--brand)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 20,
          }}>
            <Icon name={bl.icon} size={22} />
          </div>
          <h3 style={{ fontFamily: NS, fontWeight: 700, fontSize: 21, color: "var(--text-primary)", margin: "0 0 10px" }}>{bl.h}</h3>
          <p style={{ fontFamily: NS, fontSize: 16, lineHeight: 1.6, color: "var(--text-secondary)", margin: 0, maxWidth: 360 }}>{bl.b}</p>
          {showLinks && (
            <a href={bl.href} className="ce-textlink" style={{ marginTop: 16 }}>
              {bl.link}<Icon name="arrow-right" size={15} />
            </a>
          )}
        </div>
      ))}
    </div>
  );
}

/* ----------------------------------------------------------------
   Proof — client logo strip + pull quote. Identical on both pages.
---------------------------------------------------------------- */
function ProofSection() {
  const logos = [
    ["Legal & General", "Legal-And-General.svg"],
    ["Fidelity", "Fidelity.svg"],
    ["UBS", "UBS.svg"],
    ["BNY", "BNY.svg"],
    ["BNP Paribas", "BNP-Paribas.svg"],
    ["BlackRock", "BlackRock.svg"],
    ["Allianz", "Allianz.svg"],
    ["The Carlyle Group", "The-Carlyle-Group.svg"],
    ["Amazon", "Amazon.svg"],
    ["European Parliament", "European-Parliament.svg"],
    ["Lansons", "Lansons.svg"],
  ];
  return (
    <section style={{ background: "var(--surface-page)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ maxWidth: MAX, margin: "0 auto", padding: "64px 32px" }}>
        <div style={{ textAlign: "center", marginBottom: 40 }}>
          <Eyebrow style={{ marginBottom: 16 }}>Proof</Eyebrow>
          <h2 style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 34, lineHeight: 1.15, letterSpacing: "-0.015em", color: "var(--text-primary)", margin: 0 }}>
            Trusted by the teams that move on macro.
          </h2>
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", alignItems: "center", gap: "32px 52px", maxWidth: 960, margin: "0 auto 56px" }}>
          {logos.map(([name, file]) => (
            <img
              key={name}
              src={"assets/logos/" + file}
              alt={name}
              style={{ height: 30, width: "auto", maxWidth: 150, objectFit: "contain", opacity: 0.78, display: "block" }}
            />
          ))}
        </div>
        <figure style={{ maxWidth: 800, margin: "0 auto", textAlign: "center" }}>
          <blockquote style={{ fontFamily: SERIF, fontWeight: 500, fontSize: 25, lineHeight: 1.4, color: "var(--text-primary)", margin: 0, letterSpacing: "-0.01em" }}>
            “Capital Economics has proven to be a highly valuable source of analytical content. Its independent
            and systematic economic views help maintain a competitive edge.”
          </blockquote>
          <figcaption style={{ fontFamily: NS, fontSize: 15, color: "var(--text-secondary)", marginTop: 20 }}>
            — Strategy and Market Analyst, Saudi Aramco
          </figcaption>
        </figure>
      </div>
    </section>
  );
}

/* ----------------------------------------------------------------
   Closing CTA — third, identical trial CTA. Same copy on both pages.
---------------------------------------------------------------- */
function ClosingSection() {
  return (
    <section style={{
      position: "relative",
      background: "linear-gradient(rgba(20,24,46,0.85), rgba(20,24,46,0.92)), url('assets/start-now-bg.jpg') center/cover no-repeat",
      borderBottom: "1px solid var(--border-subtle)",
    }}>
      <div style={{ maxWidth: 760, margin: "0 auto", padding: "76px 32px", textAlign: "center", position: "relative", zIndex: 1 }}>
        <Eyebrow style={{ marginBottom: 16, color: "var(--ce-blue-light)" }}>Start now</Eyebrow>
        <h2 style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 40, lineHeight: 1.13, letterSpacing: "-0.015em", color: "#fff", margin: 0 }}>
          See the platform for yourself.
        </h2>
        <p style={{ fontFamily: NS, fontSize: 18, lineHeight: 1.55, color: "rgba(255,255,255,0.8)", margin: "18px auto 34px", maxWidth: 600 }}>
          Start a free trial in under a minute. No sales call needed to begin; explore the breadth of CE's
          coverage, then we will help you scope what you actually need.
        </p>
        <TrialCTA align="center" inverse />
      </div>
    </section>
  );
}

/* ----------------------------------------------------------------
   Footer — identical on both pages.
---------------------------------------------------------------- */
function SiteFooter() {
  const cols = [
    { h: "What We Do", items: ["Analysis", "Data and Forecasts", "Economist Interaction", "About Us"] },
    { h: "Solutions", items: ["Subscription Products", "Consultancy", "Channel Partners", "Technology"] },
    { h: "Policies", items: ["Privacy", "Terms of Sale", "Terms of Use", "Modern Slavery Statement", "Regulatory Matters", "Security"] },
  ];
  return (
    <footer style={{ background: "#1d233f", color: "var(--text-on-navy)" }}>
      <div style={{ maxWidth: MAX, margin: "0 auto", padding: "56px 32px 28px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 40 }}>
          <div>
            <img src="assets/CE-logo-reversed.png" alt="Capital Economics" style={{ height: 40, display: "block" }} />
            <p style={{ fontFamily: NS, fontWeight: 600, fontSize: 27, lineHeight: 1.2, letterSpacing: "-0.01em", color: "#fff", margin: "24px 0 0", maxWidth: 320 }}>
              Independent, data-driven economic insights to power your decisions
            </p>
          </div>
          {cols.map((c) => (
            <div key={c.h}>
              <div style={{ fontFamily: NS, fontWeight: 700, fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "#fff", marginBottom: 16 }}>{c.h}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 11 }}>
                {c.items.map((it) => (
                  <li key={it}><a href="#" style={{ fontFamily: NS, fontSize: 14, color: "rgba(255,255,255,0.66)", textDecoration: "none" }}>{it}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 48, paddingTop: 22, borderTop: "1px solid rgba(255,255,255,0.1)" }}>
          <span style={{ fontFamily: NS, fontSize: 13, color: "rgba(255,255,255,0.5)" }}>© 2026 Capital Economics Ltd. All rights reserved.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Icon, ICON_PATHS, MAX, NS, SERIF,
  BrandGraph, TrialCTA, Eyebrow, SectionHead,
  SiteHeader, CapabilityGrid, CAPABILITY_BLOCKS,
  ProofSection, ClosingSection, SiteFooter,
});