// "AI Pioneers. Not Passengers." — system diagram with Ignited at center,
// connected to Dividend (AI) and FVP (Fractional Talent).

const SystemSection = () => {
  const [info, setInfo] = React.useState(null);
  return (
    <section id="ai-innovation" className="r-system" style={{ background: "var(--white)", padding: "140px 0 120px", position: "relative" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 60 }}>
          <SectionEyebrow index="(03)" label={copyText("home.system.eyebrow")} />
        </div>

        <h2 className="display r-h2-large" style={{
          fontSize: "clamp(46px, 6.8vw, 112px)",
          margin: 0,
          letterSpacing: "-0.035em",
        }}>
          {copyText("home.system.headline_word1")} <span style={{ fontStyle: "italic", fontWeight: 600, color: "var(--blue)", position: "relative", display: "inline-block", padding: "0 0.05em", zIndex: 0 }}>
            <SketchCircle animate strokeWidth={3} color="#1AA5F5" style={{ position: "absolute", left: "-10%", top: "-15%", width: "120%", height: "130%", pointerEvents: "none", zIndex: -1 }} />
            <span style={{ position: "relative", zIndex: 1 }}>{copyText("home.system.headline_accent1")}</span>
          </span><br/>
          {copyText("home.system.headline_word2")} <span style={{ fontStyle: "italic", fontWeight: 600 }}>{copyText("home.system.headline_accent2")}</span>
        </h2>

        <div className="r-grid-system r-grid-1-1" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, marginTop: 80, alignItems: "start" }}>
          <div>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--ink)", margin: 0, marginBottom: 18, letterSpacing: "-0.01em" }}>
              {copyText("home.system.para1")}
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--ink)", margin: 0, marginBottom: 32 }}>
              {copyText("home.system.para2_pre")}<em>{copyText("home.system.para2_em")}</em>.
            </p>
          </div>

          <div style={{ position: "relative" }}>
            {/* Hand-drawn margin note — anchored to the diagram, top-right corner */}
            <div className="r-margin-note" style={{ position: "absolute", right: -8, top: -56, display: "flex", alignItems: "flex-end", gap: 2, pointerEvents: "none", zIndex: 3 }}>
              <SketchNote rotate={-6} color="#0A0A0F" style={{ fontSize: 22 }}>
                {copyText("home.system.note")}
              </SketchNote>
              <SketchArrow width={54} height={54} direction="sw" color="#0A0A0F" strokeWidth={2.5} style={{ transform: "rotate(-12deg) translateY(8px)" }} />
            </div>
            <SystemDiagram onLearnMore={setInfo} />
          </div>
        </div>
      </div>
      <SystemInfoModal which={info} onClose={() => setInfo(null)} />
    </section>
  );
};

// All-SVG system diagram — scales as a single unit so nothing distorts.
// Coordinates live in a fixed 800×550 viewBox; the SVG uses meet
// preservation, so on narrow viewports it letterboxes (with whitespace)
// instead of stretching text and lines.
const SystemDiagram = ({ onLearnMore }) => {
  return (
    <div className="r-system-diagram" style={{
      position: "relative",
      width: "100%",
      aspectRatio: "16 / 11",
      background: "#fff",
      overflow: "hidden",
    }}>
      <svg
        viewBox="0 0 800 550"
        preserveAspectRatio="xMidYMid meet"
        xmlns="http://www.w3.org/2000/svg"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", display: "block" }}
      >
        <defs>
          {/* Dot grid pattern — scoped to the SVG so it scales with the diagram */}
          <pattern id="r-system-dotgrid" width="24" height="24" patternUnits="userSpaceOnUse">
            <circle cx="1" cy="1" r="1" fill="rgba(10,10,15,0.06)" />
          </pattern>
        </defs>

        {/* Subtle grid backdrop */}
        <rect x="0" y="0" width="800" height="550" fill="url(#r-system-dotgrid)" />

        {/* Corner label */}
        <text
          x="32" y="40"
          fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace"
          fontSize="15"
          fill="rgba(10,10,15,0.55)"
          letterSpacing="0.04em"
        >
          FIG.01 · THE IGNITED SYSTEM
        </text>

        {/* Ignited node (center top) — html via foreignObject so logo + text stay live */}
        <foreignObject x="260" y="60" width="280" height="140">
          <div xmlns="http://www.w3.org/1999/xhtml" style={{
            display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center",
          }}>
            <img
              src="assets/ignited-logo.png"
              alt=""
              style={{ height: 72, width: "auto", objectFit: "contain", marginBottom: 12, display: "block" }}
            />
            <div style={{ fontSize: 18, color: "var(--muted)", letterSpacing: "-0.005em", fontFamily: "var(--body)" }}>
              {copyText("home.system.ignited_subtitle")}
            </div>
          </div>
        </foreignObject>

        {/* Connecting lines: Ignited → FVP (left) */}
        <path
          d="M 380 220 C 340 248, 290 282, 250 308 C 230 320, 220 332, 215 342"
          stroke="#1AA5F5" strokeWidth="2" fill="none" strokeLinecap="round"
        />
        {/* Ignited → Dividend (right) */}
        <path
          d="M 420 220 C 460 248, 510 282, 550 308 C 570 320, 580 332, 585 342"
          stroke="#1AA5F5" strokeWidth="2" fill="none" strokeLinecap="round"
        />
        {/* FVP → Dividend (bottom, dashed) */}
        <path
          d="M 260 415 C 340 408, 460 425, 540 412"
          stroke="rgba(10,10,15,0.35)" strokeWidth="1.25" fill="none" strokeLinecap="round" strokeDasharray="2 6"
        />
        {/* Arrowheads */}
        <path d="M 207 334 L 215 344 L 225 336" stroke="#1AA5F5" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="M 575 336 L 585 344 L 593 334" stroke="#1AA5F5" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>

        {/* Inline annotations — rotation matches each connector's slope */}
        <g fontFamily="Caveat, cursive" fill="#0A0A0F">
          <text x="296" y="252" fontSize="30" textAnchor="middle" transform="rotate(-36 296 252)">talent in</text>
          <text x="504" y="252" fontSize="30" textAnchor="middle" transform="rotate(36 504 252)">AI tooling</text>
          <text x="400" y="400" fontSize="30" fill="rgba(10,10,15,0.55)" textAnchor="middle">cross-pollination</text>
        </g>

        {/* FVP node (bottom-left) */}
        <foreignObject x="40" y="360" width="260" height="160">
          <div xmlns="http://www.w3.org/1999/xhtml" style={{
            display: "flex", flexDirection: "column", alignItems: "flex-start", textAlign: "left",
          }}>
            <img
              src="assets/fvp-logo.png"
              alt=""
              style={{ height: 50, width: "auto", objectFit: "contain", marginBottom: 12, display: "block" }}
            />
            <div style={{ fontSize: 18, color: "var(--muted)", letterSpacing: "-0.005em", fontFamily: "var(--body)" }}>
              {copyText("home.system.fvp_subtitle")}
            </div>
            <button onClick={() => onLearnMore && onLearnMore("fvp")} style={{
              display: "inline-block", marginTop: 12, fontSize: 16,
              color: "var(--blue)", border: "none", background: "transparent", padding: 0,
              borderBottom: "1px solid currentColor", cursor: "pointer",
              fontFamily: "var(--body)",
            }}>Learn more →</button>
          </div>
        </foreignObject>

        {/* Dividend node (bottom-right) */}
        <foreignObject x="500" y="360" width="260" height="160">
          <div xmlns="http://www.w3.org/1999/xhtml" style={{
            display: "flex", flexDirection: "column", alignItems: "flex-end", textAlign: "right",
          }}>
            <img
              src="assets/dividend-logo.svg"
              alt=""
              style={{ height: 36, width: "auto", objectFit: "contain", marginBottom: 12, display: "block" }}
            />
            <div style={{ fontSize: 18, color: "var(--muted)", letterSpacing: "-0.005em", fontFamily: "var(--body)" }}>
              {copyText("home.system.dividend_subtitle")}
            </div>
            <button onClick={() => onLearnMore && onLearnMore("dividend")} style={{
              display: "inline-block", marginTop: 12, fontSize: 16,
              color: "var(--blue)", border: "none", background: "transparent", padding: 0,
              borderBottom: "1px solid currentColor", cursor: "pointer",
              fontFamily: "var(--body)",
            }}>Learn more →</button>
          </div>
        </foreignObject>
      </svg>
    </div>
  );
};

// Minimally-invasive info modal for the FVP / DiviDen "Learn more" links.
const SYSTEM_INFO = {
  fvp: {
    logo: "assets/fvp-logo.png",
    name: "Fractional Venture Partners",
    body: "Fractional Venture Partners is redefining what senior talent looks like in the modern economy. Built as a new kind of guild for the AI era, FVP connects companies with elite fractional operators, strategists, builders, and specialists who can step in, solve real problems, and create immediate momentum. As the world moves beyond traditional employment models, FVP gives businesses access to high-level expertise without the drag of full-time hiring \u2014 helping teams move faster, stay leaner, and tap into the kind of talent that usually sits out of reach.",
  },
  dividend: {
    logo: "assets/dividend-logo.svg",
    name: "DiviDen",
    body: "DiviDen is an AI-powered command center for business leaders who want total visibility, control, and predictive insight across their organizations. Built to superpower companies with AI, DiviDen transforms scattered data, disconnected workflows, and manual decision-making into one intelligent operating system. It gives executives the \u201CJarvis effect\u201D \u2014 proactive awareness, smarter recommendations, real-time optimization, and the ability to see around corners before problems become problems. This is not AI as a buzzword. This is AI as infrastructure.",
  },
};

const SystemInfoModal = ({ which, onClose }) => {
  React.useEffect(() => {
    if (!which) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [which, onClose]);
  if (!which) return null;
  const data = SYSTEM_INFO[which];
  if (!data) return null;
  return ReactDOM.createPortal(
    <div
      onClick={onClose}
      style={{
        position: "fixed", inset: 0, zIndex: 150,
        background: "rgba(10,10,15,0.32)",
        backdropFilter: "blur(2px)", WebkitBackdropFilter: "blur(2px)",
        display: "grid", placeItems: "center", padding: 24,
        animation: "sysInfoFade .18s ease",
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        role="dialog" aria-modal="true" aria-label={data.name}
        style={{
          width: "min(460px, 100%)",
          background: "var(--white)",
          border: "1px solid var(--rule-strong)",
          boxShadow: "0 30px 80px -20px rgba(10,10,15,0.45)",
          padding: "28px 28px 26px",
          position: "relative",
          animation: "sysInfoPop .2s cubic-bezier(.22,1,.36,1) both",
        }}
      >
        <button
          onClick={onClose} aria-label="Close"
          style={{
            position: "absolute", top: 14, right: 14,
            width: 32, height: 32, borderRadius: 99,
            border: "1px solid var(--rule)", background: "transparent",
            color: "var(--muted)", display: "grid", placeItems: "center",
            cursor: "pointer", fontSize: 15, lineHeight: 1,
          }}
        >✕</button>
        <img src={data.logo} alt={data.name} style={{ height: 36, width: "auto", objectFit: "contain", display: "block", marginBottom: 18 }} />
        <p style={{ margin: 0, fontSize: 15, lineHeight: 1.62, color: "var(--ink)", letterSpacing: "-0.005em", textWrap: "pretty" }}>
          {data.body}
        </p>
      </div>
      <style>{`
        @keyframes sysInfoFade { from { opacity: 0 } to { opacity: 1 } }
        @keyframes sysInfoPop { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }
      `}</style>
    </div>,
    document.body
  );
};

window.SystemSection = SystemSection;