// ABOUT PAGE

/* ============================================================
   MissionGraphic — abstract architectural composition
   Concentric/nested frames suggest structure, reach, and scale:
   a small inner core (the rigorous analysis) expanding outward
   through successive rings into a broad surface (the decisions
   it now touches). Subtle radial rays + a plotted accent.
   ============================================================ */
function MissionGraphic() {
  return (
    <svg
      viewBox="0 0 440 440"
      width="100%"
      height="auto"
      style={{ maxWidth: 440, display: "block" }}
      role="img"
      aria-label="Abstract architectural diagram: nested rings expanding outward from a dense analytical core"
    >
      <defs>
        <radialGradient id="coreGlow" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0%" stopColor="#EF9F46" stopOpacity="0.28" />
          <stop offset="60%" stopColor="#EF9F46" stopOpacity="0.06" />
          <stop offset="100%" stopColor="#EF9F46" stopOpacity="0" />
        </radialGradient>
        <pattern id="hair" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
          <line x1="0" y1="0" x2="0" y2="6" stroke="#15130F" strokeOpacity="0.08" strokeWidth="0.6" />
        </pattern>
      </defs>

      {/* Soft radial wash behind everything */}
      <circle cx="220" cy="220" r="200" fill="url(#coreGlow)" />

      {/* Outermost frame — the broad surface of decisions */}
      <g stroke="#15130F" fill="none" strokeLinejoin="miter">
        <rect x="20" y="20" width="400" height="400" strokeOpacity="0.12" strokeWidth="0.8" />
        <rect x="44" y="44" width="352" height="352" strokeOpacity="0.14" strokeWidth="0.8" />
        <rect x="70" y="70" width="300" height="300" strokeOpacity="0.18" strokeWidth="0.8" />
        <rect x="98" y="98" width="244" height="244" strokeOpacity="0.22" strokeWidth="0.9" />
        <rect x="128" y="128" width="184" height="184" strokeOpacity="0.28" strokeWidth="1" />
      </g>

      {/* Corner tick marks on outermost frame */}
      {[[20, 20], [420, 20], [20, 420], [420, 420]].map(([cx, cy], i) => {
        const dx = cx === 20 ? 1 : -1;
        const dy = cy === 20 ? 1 : -1;
        return (
          <g key={i} stroke="#15130F" strokeOpacity="0.6" strokeWidth="1">
            <line x1={cx} y1={cy} x2={cx + dx * 10} y2={cy} />
            <line x1={cx} y1={cy} x2={cx} y2={cy + dy * 10} />
          </g>
        );
      })}

      {/* Diagonal rays from center (rigor radiating outward) */}
      <g stroke="#15130F" strokeOpacity="0.08" strokeWidth="0.6">
        {[0, 30, 60, 90, 120, 150].map(deg => (
          <line
            key={deg}
            x1="220" y1="220"
            x2={220 + 250 * Math.cos((deg * Math.PI) / 180)}
            y2={220 + 250 * Math.sin((deg * Math.PI) / 180)}
          />
        ))}
      </g>

      {/* Inner core block — the analytical unit */}
      <g transform="translate(160 160)">
        {/* Hatched backdrop */}
        <rect x="0" y="0" width="120" height="120" fill="url(#hair)" stroke="#15130F" strokeWidth="1" />
        {/* Inner composition: small gridded plot */}
        <g transform="translate(14 18)">
          {/* Mini plot frame */}
          <rect x="0" y="0" width="92" height="72" fill="#FBFAF7" stroke="#15130F" strokeOpacity="0.6" strokeWidth="0.8" />
          {/* Gridlines */}
          {[1, 2, 3].map(i => (
            <line key={"gv" + i} x1={i * 23} y1="0" x2={i * 23} y2="72" stroke="#15130F" strokeOpacity="0.08" />
          ))}
          {[1, 2].map(i => (
            <line key={"gh" + i} x1="0" y1={i * 24} x2="92" y2={i * 24} stroke="#15130F" strokeOpacity="0.08" />
          ))}

          {/* Area under curve — amber */}
          {(() => {
            const pts = [];
            for (let i = 0; i <= 32; i++) {
              const x = (i / 32) * 92;
              const t = (i / 32 - 0.5) * 8;
              const y = 72 - (1 / (1 + Math.exp(-t))) * 60 - 4;
              pts.push(`${x.toFixed(1)},${y.toFixed(1)}`);
            }
            return (
              <>
                <path d={`M 0 72 L ${pts.join(" L ")} L 92 72 Z`} fill="#EF9F46" opacity="0.28" />
                <polyline points={pts.join(" ")} fill="none" stroke="#EF9F46" strokeWidth="1.6" strokeLinecap="round" />
              </>
            );
          })()}

          {/* Data dots */}
          {[[16, 58], [38, 46], [58, 24], [78, 12]].map(([x, y], i) => (
            <circle key={i} cx={x} cy={y} r="1.8" fill="#15130F" />
          ))}
        </g>

        {/* Mini equation line under the plot */}
        <g transform="translate(14 102)" fill="#15130F" fontFamily="Cormorant Infant, serif">
          <text x="0" y="0" fontSize="11" fontStyle="italic">f</text>
          <text x="7" y="0" fontSize="11">(</text>
          <text x="13" y="0" fontSize="11" fontStyle="italic">x</text>
          <text x="20" y="0" fontSize="11">)</text>
          <text x="28" y="0" fontSize="11">=</text>
          <text x="38" y="0" fontSize="11" fontFamily="ui-monospace, monospace" opacity="0.6">1 / (1+e⁻ˣ)</text>
        </g>
      </g>

      {/* Inner frame around core — explicit boundary */}
      <rect x="158" y="158" width="124" height="124" fill="none" stroke="#EF9F46" strokeWidth="1.4" />

      {/* Axis labels on outer frame — corners of reach */}
      <g fontFamily="ui-monospace, monospace" fontSize="8.5" letterSpacing="0.14em" fill="#5B544A">
        <text x="34" y="36">MERGERS</text>
        <text x="406" y="36" textAnchor="end">CONDUCT</text>
        <text x="34" y="410">ABUSE</text>
        <text x="406" y="410" textAnchor="end">STATE-AID</text>
      </g>

      {/* Midframe ticks with small labels */}
      <g fontFamily="ui-monospace, monospace" fontSize="7.5" fill="#5B544A" letterSpacing="0.1em">
        <text x="220" y="78" textAnchor="middle" opacity="0.75">POLICY</text>
        <text x="220" y="370" textAnchor="middle" opacity="0.75">COUNSEL</text>
        <text x="78" y="224" textAnchor="middle" opacity="0.75" transform="rotate(-90 78 224)">EVIDENCE</text>
        <text x="362" y="224" textAnchor="middle" opacity="0.75" transform="rotate(90 362 224)">DECISION</text>
      </g>

      {/* Tiny accent dots on the innermost frame corners */}
      {[[128, 128], [312, 128], [128, 312], [312, 312]].map(([cx, cy], i) => (
        <circle key={i} cx={cx} cy={cy} r="2.4" fill="#EF9F46" />
      ))}

      {/* Lone outer accent — a single dot suggesting expansion */}
      <circle cx="400" cy="60" r="3.5" fill="#EF9F46" />
      <line x1="312" y1="128" x2="396" y2="64" stroke="#EF9F46" strokeWidth="0.8" strokeDasharray="2 3" opacity="0.7" />
    </svg>
  );
}

function PageAbout({ tweaks }) {
  useDocTitle("About");

  // Mission pillars — the three verbs
  const pillars = [
    {
      num: "01",
      verb: "Democratise",
      title: "Rigorous economics, in the hands of counsel.",
      body: "The lawyers and officials closest to a matter bring judgment no model can replace. We give them direct access to serious quantitative analysis — so the people shaping the argument can shape the economics behind it too.",
    },
    {
      num: "02",
      verb: "Accelerate",
      title: "Weeks, compressed into hours.",
      body: "Rigorous economic work should arrive while strategy is still being formed. We compress the time it takes to produce and revisit analysis — so rigour shapes decisions earlier, and adapts with them.",
    },
    {
      num: "03",
      verb: "Elevate",
      title: "Analysis human hours alone can't reach.",
      body: "Computation lets us test more scenarios, stress-check more assumptions, and surface economics that manual methods would leave unexamined — strengthening the analysis itself, not just the speed of it.",
    },
  ];

  // Tech brief — six design decisions
  const tech = [
    { icon: IconScale, title: "Economically rigorous.", body: "Dex is built to the standard of the profession. Every method reflects peer-reviewed practice and the way economists actually reason. If it wouldn't survive expert scrutiny, it doesn't ship." },
    { icon: IconWorkflow, title: "Every step shown.", body: "Every number traces back to an input, a method, and an assumption. Every calculation is inspectable; every data point sourced. Defensibility is the default." },
    { icon: IconCpu, title: "Judgment stays human.", body: "The expert decides. Dex takes on the mechanical heavy lifting — pulling data, running calculations, surfacing precedent, stress-testing assumptions — so professional hours go to the parts that actually require professional judgment." },
    { icon: IconShield, title: "Fluent in the frameworks.", body: "Law doesn't apply economics generically. Competition, IP, securities, tax, damages, regulatory policy — each has its own tests, thresholds, standards of proof, and decades of doctrine shaping how economic evidence is used. Dex is built upon those frameworks." },
    { icon: IconUsers, title: "Designed for teams.", body: "Legal and regulatory work isn't solo. Lawyers, economists, juniors, partners, external experts all touch the same analysis. Dex is built for that reality: one source of truth per matter." },
    { icon: IconLock, title: "Built for confidential work.", body: "Client data, deal data, privileged analysis. Nothing enters public AI systems. Encrypted in transit and at rest. Security assumed from the first line of code." },
  ];

  // Team — founders and advisors
  const team = [
    {
      name: "Justin Mayne",
      title: "CEO",
      role: "Co-founder & Chief Executive Officer",
      photo: "assets/team/justin.jpg",
      photoPos: "50% 30%",
      bio: "Competition lawyer turned builder. Justin founded Dex to put serious quantitative analysis directly in the hands of the lawyers running the matter. Previously worked on some of the highest-stakes competition cases at Blake, Cassels & Graydon.",
      linkedin: "https://www.linkedin.com/in/justin-dd-mayne/",
    },
    {
      name: "Tao Platt",
      title: "COO",
      role: "Co-founder & Chief Operating Officer",
      photo: "assets/team/tao.jpg",
      photoPos: "50% 25%",
      bio: "Economist. Previously at RBB Economics, supporting multi-jurisdiction competition proceedings. Before that led AI and digital-transformation work for UNICEF, the Gates Foundation, MasterCard Foundation, and South Africa's National Treasury. MSc, LSE (first in class).",
      linkedin: "https://www.linkedin.com/in/tao-platt/",
    },
    {
      name: "Noam Hoze",
      title: "CTO",
      role: "Co-founder & Chief Technology Officer",
      photo: "assets/team/noam.png",
      photoPos: "50% 30%",
      bio: "Engineer. Almost two decades of software engineering delivery and leadership, including at Vayyar, building sensor platforms shipped at scale. At Dex, architects the multi-agent platform — the orchestration, safety, and security layers that make AI outputs verifiable and regulator-ready.",
      linkedin: "https://www.linkedin.com/in/noam-hoze/",
    },
  ];

  const advisors = [
    {
      name: "Aaron Wolf",
      role: "Economic Advisor",
      bio: "PhD candidate in economics at Northwestern (2026). Econometrics, industrial organization, and data analysis. Previously a statistician at Yale's Economic Growth Center and a consultant on large competition and regulatory cases in the U.S.",
      linkedin: "https://www.linkedin.com/in/aarondwolf/",
    },
    {
      name: "Lauren Cappell",
      role: "Legal & Operational Advisor",
      bio: "Senior technology executive with a corporate-law foundation. Operating experience across Amazon, Thomson Reuters, and BlackBerry, and advisory roles at early- and mid-stage AI and enterprise-platform startups.",
      linkedin: "https://www.linkedin.com/in/lauren-cappell/",
    },
  ];

  function LinkedInIcon() {
    return (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
        <rect x="2" y="9" width="4" height="12" />
        <circle cx="4" cy="4" r="2" />
      </svg>
    );
  }

  function TeamCard({ member, large }) {
    const initials = member.name.split(" ").map(n => n[0]).join("");
    return (
      <div style={{
        background: "var(--bg-raised)",
        border: "1px solid var(--border)",
        borderRadius: "var(--radius-lg)",
        padding: large ? 40 : 32,
        display: "flex",
        flexDirection: "column",
        gap: 16,
        height: "100%",
      }}>
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <div style={{
              width: large ? 64 : 52,
              height: large ? 64 : 52,
              borderRadius: "50%",
              background: "var(--bg-sunken)",
              border: "1px solid var(--border)",
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              fontFamily: "Cormorant Infant, serif",
              fontSize: large ? 26 : 22,
              color: "var(--fg)",
              fontWeight: 500,
              flexShrink: 0,
            }}>{initials}</div>
            <div>
              <h3 style={{
                fontFamily: "Cormorant Infant, serif",
                fontSize: large ? 28 : 24,
                fontWeight: 500,
                margin: 0,
                letterSpacing: "-0.01em",
                lineHeight: 1.15,
              }}>{member.name}</h3>
              <div style={{
                fontSize: 11,
                fontWeight: 600,
                letterSpacing: "0.1em",
                textTransform: "uppercase",
                color: "var(--accent)",
                marginTop: 4,
              }}>{member.role}</div>
            </div>
          </div>
          <a
            href={member.linkedin}
            target="_blank"
            rel="noopener noreferrer"
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 6,
              fontSize: 12,
              color: "var(--fg-muted)",
              transition: "color 120ms var(--ease)",
              textDecoration: "none",
              flexShrink: 0,
              marginTop: 4,
            }}
            onMouseEnter={e => e.currentTarget.style.color = "var(--accent)"}
            onMouseLeave={e => e.currentTarget.style.color = "var(--fg-muted)"}
          >
            <LinkedInIcon />
          </a>
        </div>
        <div style={{ height: 1, background: "var(--border-faint)" }} />
        <p style={{
          fontSize: large ? 15.5 : 14.5,
          color: "var(--fg-muted)",
          lineHeight: 1.65,
          margin: 0,
        }}>{member.bio}</p>
      </div>
    );
  }

  return (
    <div className="page-fade">
      {/* ============ HERO — mission-led ============ */}
      <section className="hero hero-paper" style={{ padding: "88px 0 56px", position: "relative", overflow: "hidden" }}>
        <div className="container">
          <div className="about-hero-grid">
            <div>
              <Eyebrow>Our mission</Eyebrow>
              <h1 style={{ marginTop: 20 }}>
                Democratise, accelerate and <em className="accent-word">elevate economics</em> in law.
              </h1>
              <p className="lead">
                Major legal and regulatory decisions shape markets, industries, and lives. They deserve the best economic reasoning available — and the lawyers and officials closest to a matter are often best placed to shape how that reasoning comes together.
              </p>
            </div>
            <div className="about-hero-graphic">
              <MissionGraphic />
            </div>
          </div>
        </div>
      </section>

      {/* ============ MISSION PILLARS ============ */}
      <section className="bg-sunken" style={{ padding: "88px 0 96px" }}>
        <div className="container">
          {/* Concise lead-in label */}
          <div style={{ marginBottom: 32 }}>
            <Eyebrow>The mission, in three</Eyebrow>
          </div>

          {/* Three-column pillar cards */}
          <div className="about-pillars-grid">
            {pillars.map((p, i) => (
              <div
                key={i}
                style={{
                  padding: "40px 32px 36px",
                  borderLeft: i === 0 ? "none" : "1px solid var(--border)",
                  display: "flex",
                  flexDirection: "column",
                  gap: 16,
                  position: "relative",
                }}
              >
                {/* Accent top rule */}
                <div style={{
                  position: "absolute", top: 0, left: i === 0 ? 0 : -1, right: 0,
                  height: 3, background: "var(--accent)",
                }} />
                <div style={{
                  fontFamily: "ui-monospace, monospace",
                  fontSize: 11,
                  letterSpacing: "0.16em",
                  color: "var(--fg-muted)",
                  fontWeight: 600,
                }}>
                  {p.num}
                </div>
                <div style={{
                  fontFamily: "Cormorant Infant, serif",
                  fontSize: "clamp(32px, 3.2vw, 44px)",
                  fontWeight: 500,
                  lineHeight: 1,
                  letterSpacing: "-0.015em",
                  color: "var(--accent)",
                }}>
                  {p.verb}.
                </div>
                <h3 style={{
                  fontFamily: "Cormorant Infant, serif",
                  fontSize: 22,
                  fontWeight: 500,
                  lineHeight: 1.2,
                  letterSpacing: "-0.005em",
                  margin: 0,
                  color: "var(--fg)",
                  textWrap: "balance",
                }}>
                  {p.title}
                </h3>
                <p style={{
                  fontSize: 14.5,
                  color: "var(--fg-muted)",
                  lineHeight: 1.6,
                  margin: 0,
                  textWrap: "pretty",
                }}>
                  {p.body}
                </p>
              </div>
            ))}
          </div>

          {/* Responsive fallback note for narrow screens */}
          <style>{`
            @media (max-width: 860px) {
              .page-fade section .feat-grid { grid-template-columns: 1fr !important; }
            }
          `}</style>
        </div>
      </section>

      {/* ============ TECH BRIEF ============ */}
      <section className="bg-paper" style={{ padding: "96px 0" }}>
        <div className="container">
          <div style={{ marginBottom: 40, maxWidth: 760 }}>
            <Eyebrow>Tech brief</Eyebrow>
            <h2 style={{ fontSize: "clamp(32px, 4vw, 48px)", margin: "16px 0 12px", lineHeight: 1.05, textWrap: "balance" }}>
              Six design decisions.
            </h2>
            <p style={{ fontSize: 16, color: "var(--fg-muted)", maxWidth: "56ch" }}>
              The choices behind the platform — the ones that let our analysis stand up to regulator scrutiny.
            </p>
          </div>
          <div className="feat-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
            {tech.map((p, i) => (
              <div className="feat" key={i}>
                <p.icon size={22} style={{ color: "var(--accent)" }} />
                <h3>{p.title}</h3>
                <p>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============ TEAM ============ */}
      <section className="bg-sunken" style={{ padding: "96px 0" }}>
        <div className="container">
          <div style={{ marginBottom: 48, maxWidth: 820 }}>
            <Eyebrow>Founders</Eyebrow>
            <h2 style={{ fontSize: "clamp(32px, 4vw, 48px)", margin: "16px 0 12px", lineHeight: 1.05, textWrap: "balance" }}>
              Dex was built by people <em className="accent-word">who've been there</em>.
            </h2>
            <p style={{ fontSize: 16, color: "var(--fg-muted)", maxWidth: "56ch" }}>
              Lawyers, economists, and engineers who have lived inside the matters we build for.
            </p>
          </div>

          {/* Three-column founder cards */}
          <div className="about-team-grid">
            {team.map((m, i) => {
              const num = String(i + 1).padStart(2, "0");
              return (
                <article key={i} style={{
                  background: "var(--bg-raised)",
                  border: "1px solid var(--border)",
                  borderRadius: "var(--radius-lg)",
                  overflow: "hidden",
                  display: "flex",
                  flexDirection: "column",
                  position: "relative",
                }}>
                  {/* Photo */}
                  <div style={{
                    position: "relative",
                    width: "100%",
                    aspectRatio: "4 / 5",
                    background: "var(--bg-sunken)",
                    overflow: "hidden",
                  }}>
                    <img
                      src={m.photo}
                      alt={m.name}
                      loading="lazy"
                      style={{
                        position: "absolute",
                        inset: 0,
                        width: "100%",
                        height: "100%",
                        objectFit: "cover",
                        objectPosition: m.photoPos || "50% 30%",
                        display: "block",
                      }}
                    />
                    {/* Title chip */}
                    <div style={{
                      position: "absolute",
                      top: 16,
                      left: 16,
                      padding: "6px 12px",
                      background: "var(--accent)",
                      color: "var(--bg)",
                      fontFamily: "ui-monospace, monospace",
                      fontSize: 11,
                      fontWeight: 700,
                      letterSpacing: "0.14em",
                      borderRadius: 4,
                    }}>
                      {m.title}
                    </div>
                    {/* Number */}
                    <div style={{
                      position: "absolute",
                      top: 16,
                      right: 16,
                      fontFamily: "ui-monospace, monospace",
                      fontSize: 11,
                      fontWeight: 600,
                      letterSpacing: "0.14em",
                      color: "rgba(255,255,255,0.9)",
                      background: "rgba(0,0,0,0.35)",
                      padding: "6px 10px",
                      borderRadius: 4,
                      backdropFilter: "blur(4px)",
                    }}>
                      {num}
                    </div>
                  </div>

                  {/* Content */}
                  <div style={{
                    padding: "28px 28px 28px",
                    display: "flex",
                    flexDirection: "column",
                    gap: 14,
                    flex: 1,
                  }}>
                    {/* Accent rule */}
                    <div style={{ height: 2, width: 36, background: "var(--accent)" }} />

                    <div>
                      <h3 style={{
                        fontFamily: "Cormorant Infant, serif",
                        fontSize: "clamp(26px, 2.4vw, 32px)",
                        fontWeight: 500,
                        fontStyle: "italic",
                        margin: 0,
                        letterSpacing: "-0.01em",
                        lineHeight: 1.05,
                        color: "var(--fg)",
                      }}>{m.name}</h3>
                      <div style={{
                        fontSize: 11,
                        fontWeight: 600,
                        letterSpacing: "0.12em",
                        textTransform: "uppercase",
                        color: "var(--fg-muted)",
                        marginTop: 8,
                      }}>{m.role}</div>
                    </div>

                    <p style={{
                      fontSize: 14.5,
                      color: "var(--fg-muted)",
                      lineHeight: 1.6,
                      margin: 0,
                    }}>{m.bio}</p>

                    {/* LinkedIn */}
                    <a
                      href={m.linkedin}
                      target="_blank"
                      rel="noopener noreferrer"
                      aria-label={`${m.name} on LinkedIn`}
                      style={{
                        marginTop: "auto",
                        alignSelf: "flex-start",
                        display: "inline-flex",
                        alignItems: "center",
                        gap: 8,
                        padding: "8px 12px",
                        borderRadius: 999,
                        border: "1px solid var(--border)",
                        background: "var(--bg)",
                        color: "var(--fg-muted)",
                        fontSize: 12,
                        fontWeight: 600,
                        letterSpacing: "0.04em",
                        transition: "color 120ms var(--ease), border-color 120ms var(--ease)",
                        textDecoration: "none",
                      }}
                      onMouseEnter={e => { e.currentTarget.style.color = "var(--accent)"; e.currentTarget.style.borderColor = "var(--accent)"; }}
                      onMouseLeave={e => { e.currentTarget.style.color = "var(--fg-muted)"; e.currentTarget.style.borderColor = "var(--border)"; }}
                    >
                      <LinkedInIcon />
                      <span>LinkedIn</span>
                    </a>
                  </div>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      {/* ============ CLOSING ============ */}
      <section className="bg-paper section-lg">
        <div className="container" style={{ textAlign: "center" }}>
          <h2 style={{ fontSize: "clamp(36px, 5vw, 64px)", lineHeight: 1.05, margin: "0 auto 24px", fontFamily: "Cormorant Infant, serif", fontWeight: 500, maxWidth: "20ch", textWrap: "balance" }}>
            Speak to us.
          </h2>
          <p style={{ fontSize: 18, color: "var(--fg-muted)", maxWidth: "52ch", margin: "0 auto 32px" }}>
            Tell us about the matter on your desk. We'll show you what Dex does with it — and what it would mean for how your team works.
          </p>
          <BookDemoButton large label="Speak to us" />
        </div>
      </section>
    </div>
  );
}

window.PageAbout = PageAbout;
