const { useState } = React;

/* --- UI helpers (no index variables used) --- */
function Badge({ children, tone = "default" }) {
  const s = {
    display: "inline-flex",
    alignItems: "center",
    gap: 6,
    border: "1px solid var(--ring)",
    borderRadius: "999px",
    padding: "6px 10px",
    fontWeight: 700,
    fontSize: "12.5px",
    background: "#fff",
    color: "var(--text)",
  };
  if (tone === "info") {
    s.background = "#F1F5FF";
    s.border = "1px solid #C7D2FE";
    s.color = "#1E3A8A";
  }
  return <span style={s}>{children}</span>;
}
function Pill({ children }) {
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        border: "1px solid var(--ring)",
        borderRadius: "999px",
        padding: "6px 10px",
        marginRight: 8,
        marginBottom: 8,
        background: "#fff",
        color: "var(--text)",
        fontWeight: 700,
        fontSize: "12.5px",
      }}
    >
      {children}
    </span>
  );
}
function Section({ title, children }) {
  return (
    <section className="card" style={{ marginTop: 16 }}>
      <h2 style={{ marginTop: 0, marginBottom: 8, fontSize: 18 }}>{title}</h2>
      <div>{children}</div>
    </section>
  );
}
function StatCard({ label, lines = [] }) {
  return (
    <div className="card" style={{ padding: 12 }}>
      <div className="muted">{label}</div>
      <div style={{ fontSize: 14, marginTop: 6 }}>
        {lines.map((text, k) => (
          <div key={`l-${k}`} style={{ marginTop: 2 }}>
            {text}
          </div>
        ))}
      </div>
    </div>
  );
}

/* --- Card --- */
function PolicyFDICard() {
  const [links] = useState({
    pdf: "./Econpaper.pdf", // adjust path if needed
  });

  return (
    <div>
      {/* Cover */}
      <header className="card card-cover">
        <div
          className="cover-head"
          style={{ backgroundImage: "url('./policy-cover.jpg')" }}
        >
          <div className="head-content">
            <div className="icon">🏛️</div>
            <div>
              <h1 className="title">
                Reindustrialization & Economic Sovereignty — FDI Control in
                France
              </h1>
              <div className="meta">
                Policy Analysis • Strategic Sectors • Balanced Regulation
              </div>
            </div>
          </div>
        </div>

        {/* Intro */}
        <div className="card-body">
          <div
            style={{
              display: "flex",
              gap: 8,
              flexWrap: "wrap",
              marginBottom: 8,
            }}
          >
            <Badge tone="info">Desk-based policy analysis</Badge>
            <Badge>FDI • Sovereignty • Regulation</Badge>
          </div>

          <p style={{ marginTop: 0, color: "#2C3445", lineHeight: 1.55 }}>
            Analysis of how France screens foreign investments to protect
            strategic sectors while preserving attractiveness. Reviews the legal
            framework, evidence, and policy alternatives, and proposes a
            pragmatic, balanced approach. Co-written with Matt Roullet.
          </p>

          <div
            style={{
              marginTop: 12,
              display: "flex",
              justifyContent: "center",
              gap: 10,
              flexWrap: "wrap",
            }}
          >
            <a
              className="btn"
              href={links.pdf}
              target="_blank"
              rel="noopener noreferrer"
            >
              Open Report (PDF)
            </a>
          </div>
        </div>
      </header>

      {/* Framework milestones */}
      <Section title="Existing Framework — Key Milestones">
        <div style={{ display: "flex", flexWrap: "wrap" }}>
          <Pill>2014 expansion of screened sectors</Pill>
          <Pill>2019 scope update (AI, cyber, semiconductors)</Pill>
          <Pill>2020 temporary 10% threshold for listed firms</Pill>
          <Pill>2023/24: 10% threshold made permanent</Pill>
        </div>
      </Section>

      {/* Evidence & Context */}
      <Section title="Context & Evidence (Illustrative)">
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit,minmax(240px,1fr))",
            gap: 12,
          }}
        >
          <StatCard
            label="Screening Activity"
            lines={[
              "Hundreds of filings annually; a material share cleared with conditions.",
            ]}
          />
          <StatCard
            label="Investor Origin"
            lines={[
              "Majority of final investors originate outside the EU/EEA.",
            ]}
          />
          <StatCard
            label="Sector Focus"
            lines={[
              "Critical infrastructure/commodities/services dominate the caseload.",
            ]}
          />
        </div>
      </Section>

      {/* Policy Alternatives */}
      <Section title="Policy Alternatives Considered">
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit,minmax(260px,1fr))",
            gap: 12,
          }}
        >
          <StatCard
            label="A) Strengthen Sectoral Screening"
            lines={[
              "Frequent updates to protected sectors; clearer timelines; unified platform.",
              "Pros: better protection in sensitive tech; Cons: risk of protectionist signal.",
            ]}
          />
          <StatCard
            label="B) Reciprocity-Based Regulation"
            lines={[
              "Condition access on symmetric openness; leverage in bilateral talks.",
              "Risks: retaliation, EU-compatibility, admin burden.",
            ]}
          />
          <StatCard
            label="C) Flexible Case-by-Case (Recommended)"
            lines={[
              "Adaptive evaluation + transparency + capacity building.",
              "Balances sovereignty with attractiveness and EU coordination.",
            ]}
          />
        </div>
      </Section>

      {/* Recommendations */}
      <Section title="Recommendations">
        <ul style={{ marginTop: 8 }}>
          <li>
            Scale administrative capacity and digitalize the review pipeline.
          </li>
          <li>Deepen EU-level cooperation for consistency and enforcement.</li>
          <li>
            Refresh strategic lists regularly with techno-geopolitical
            monitoring.
          </li>
        </ul>
      </Section>

      <div style={{ textAlign: "center", marginTop: 16 }}>
        <a className="btn ghost" href="/" rel="noopener">
          ← Back to Home
        </a>
      </div>
    </div>
  );
}

/* Mount */
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<PolicyFDICard />);