/* Shared bits used by all three home page directions.
   Loaded after system/marketing.jsx — depends on its globals. */

const { useState: useStateShared, useEffect: useEffectShared } = React;

/* ─── Footer ─────────────────────────────────────── */
const HomeFooter = () => (
  <footer style={{ borderTop: "1px solid var(--rule)", background: "var(--paper)" }}>
    <Container style={{ padding: "56px 32px 0" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 40, paddingBottom: 56 }}>
        <div>
          <ArxWordmark size={20} />
          <p style={{ marginTop: 14, fontSize: 13.5, lineHeight: 1.55, color: "var(--ink-2)", maxWidth: 30 + "ch" }}>
            AI workforce infrastructure for financial services.
          </p>
          <div style={{ marginTop: 18, display: "flex", flexWrap: "wrap", gap: 8 }}>
            <Pill tone="neutral">SOC 2 Type II</Pill>
            <Pill tone="neutral">ISO 27001</Pill>
            <Pill tone="neutral">NIST AI RMF</Pill>
          </div>
        </div>
        {[
          { h: "Operating model", l: [["Researcher", "/how-it-works/#researcher"], ["Producer", "/how-it-works/#producer"], ["Coordinator", "/how-it-works/#coordinator"], ["Governance", "/trust"], ["The pilot", "/talk-to-us/"]] },
          { h: "For operators",   l: [["The bet", "/thinking/"], ["Case stories", "/industries/"], ["Regulatory brief", "/trust"], ["Operator field notes", "/thinking/"]] },
          { h: "Company",         l: [["About", "/thinking/"], ["Founder's note", "/#founder"], ["Careers", "/careers.html"], ["Contact", "/talk-to-us/"]] },
        ].map(col => (
          <div key={col.h}>
            <div className="h4" style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em",
              textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 14 }}>{col.h}</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
              {col.l.map(([x, href]) => (
                <li key={x}><a href={href} style={{ fontSize: 13.5, color: "var(--ink-2)" }}>{x}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </Container>
    <div style={{ borderTop: "1px solid var(--rule)" }}>
      <Container style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
        padding: "20px 32px", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)" }}>
        <div>© 2026 Arx Labor, Inc. · arxlabor.com</div>
        <div style={{ display: "flex", gap: 18 }}>
          <a href="/terms.html" style={{ color: "var(--ink-3)" }}>Terms</a>
          <a href="/privacy" style={{ color: "var(--ink-3)" }}>Privacy</a>
          <a href="/dpa.html" style={{ color: "var(--ink-3)" }}>DPA</a>
        </div>
      </Container>
    </div>
    {/* Big Arx wordmark flourish */}
    <div style={{ overflow: "hidden", borderTop: "1px solid var(--rule)" }}>
      <Container style={{ padding: "40px 32px 24px" }}>
        <div style={{
          fontFamily: "var(--font-display)", fontWeight: 380,
          fontSize: "clamp(120px, 22vw, 320px)", lineHeight: 0.85,
          letterSpacing: "-0.06em", color: "var(--ink)",
          whiteSpace: "nowrap",
        }}>
          Arx<sup style={{ fontFamily: "var(--font-mono)", fontSize: "0.16em",
            color: "var(--ink-3)", letterSpacing: "0.08em", verticalAlign: "super",
            fontWeight: 500, marginLeft: 6 }}>LABOR</sup>
        </div>
      </Container>
    </div>
  </footer>
);

/* ─── Connector strip (logos as text) ───────────── */
const CONNECTORS = [
  "CrowdStrike", "Splunk", "Wiz", "Okta", "ServiceNow",
  "AWS", "Azure", "GCP", "Snowflake", "Datadog",
  "GitHub", "Slack", "PagerDuty", "Jira",
];

const ConnectorStrip = ({ label = "Works with the stack you already have" }) => (
  <div>
    <Eyebrow>{label}</Eyebrow>
    <div style={{
      marginTop: 18,
      display: "grid",
      gridTemplateColumns: "repeat(7, 1fr)",
      border: "1px solid var(--rule)",
      background: "var(--rule)",
      gap: 1,
    }}>
      {CONNECTORS.map(c => (
        <div key={c} style={{
          background: "var(--paper)", padding: "18px 14px",
          fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--ink-2)",
          textAlign: "center", letterSpacing: "-0.005em",
        }}>{c}</div>
      ))}
    </div>
    <div style={{ marginTop: 12, fontFamily: "var(--font-mono)", fontSize: 11,
      color: "var(--ink-3)", letterSpacing: "0.04em" }}>
      100+ connectors. Policy enforced server-side, never inside the agent.
    </div>
  </div>
);

/* ─── Final CTA strip ───────────────────────────── */
const CtaStrip = ({ heading, sub, primary = "Book a demo", secondary = "See the platform" }) => (
  <Section style={{ borderBottom: 0 }}>
    <Container>
      <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 80, alignItems: "end" }}>
        <H1 style={{ maxWidth: "20ch" }}>{heading}</H1>
        <div>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: "var(--ink-2)", maxWidth: "44ch", margin: 0 }}>{sub}</p>
          <div style={{ marginTop: 28, display: "flex", gap: 12 }}>
            <Button arrow>{primary}</Button>
            <Button variant="ghost">{secondary}</Button>
          </div>
        </div>
      </div>
    </Container>
  </Section>
);

/* ─── Quote / testimonial ───────────────────────── */
const Testimonial = ({ initials = "MR", name = "Maya Rao", role = "CISO, F100 Bank",
  body = "The agents worked from day one. Arx is what let us ship them — and tell the board what we shipped, with evidence." }) => (
  <Section>
    <Container>
      <div style={{ display: "grid", gridTemplateColumns: "200px 1fr", gap: 40, alignItems: "start" }}>
        <Eyebrow>FIELD NOTE · F100</Eyebrow>
        <div>
          <blockquote style={{ margin: 0,
            fontFamily: "var(--font-display)", fontWeight: 360, fontStyle: "italic",
            fontSize: "clamp(1.6rem, 3vw, 2.4rem)", lineHeight: 1.2,
            letterSpacing: "-0.02em", color: "var(--ink)", maxWidth: "30ch",
          }}>
            “{body}”
          </blockquote>
          <div style={{ marginTop: 28, display: "flex", alignItems: "center", gap: 14 }}>
            <Portrait initials={initials} size={48} />
            <div>
              <div style={{ fontSize: 14, fontWeight: 500 }}>{name}</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)",
                letterSpacing: "0.06em", textTransform: "uppercase", marginTop: 2 }}>{role}</div>
            </div>
          </div>
        </div>
      </div>
    </Container>
  </Section>
);

Object.assign(window, {
  HomeFooter, ConnectorStrip, CtaStrip, Testimonial, CONNECTORS,
});
