// Company page

function CompanyPage() {
  const category = [
    { label: "AI Agents / Agentic Systems", body: "Persistent, task-oriented agents — not chatbots." },
    { label: "Voice AI Infrastructure", body: "Voice as the primary channel, built for production." },
    { label: "Workflow Automation", body: "Real actions in real systems — not summaries." },
    { label: "Managed AI Services", body: "We design, deploy, and operate the system." },
  ];

  return (
    <window.Page active="company">
      {/* HERO */}
      <section data-section="hero" style={{ background: INK, color: CREAM, padding: "100px 32px 80px", position: "relative", overflow: "hidden" }}>
        <div aria-hidden="true" style={{ position: "absolute", inset: 0, opacity: 0.05, backgroundImage: `radial-gradient(${CREAM} 1px, transparent 1px)`, backgroundSize: "32px 32px" }} />
        <div data-decorative="true" aria-hidden="true" style={{ position: "absolute", left: -80, bottom: -80, opacity: 0.08 }}>
          <NoralMark size={520} color={SIGNAL} />
        </div>
        <div style={{ maxWidth: 1200, margin: "0 auto", position: "relative" }}>
          <Eyebrow color="rgba(245,241,234,0.78)">Company</Eyebrow>
          <Display size={88} color={CREAM} style={{ marginTop: 24, maxWidth: 1000 }}>
            The system through<br />which organizations<br />deploy <span style={{ color: SIGNAL }}>AI workers.</span>
          </Display>
          <Lede color="rgba(245,241,234,0.78)" style={{ marginTop: 32, fontSize: 20 }}>
            NoralAI is a managed AI infrastructure and services company. We build and operate intelligent digital workforces for businesses and public organizations — without asking them to become AI experts first.
          </Lede>
        </div>
      </section>

      {/* THE OPERATIONAL GAP */}
      <Section paddingY={100}>
        <div data-grid="split" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 64 }}>
          <div>
            <Eyebrow>The gap we close</Eyebrow>
            <H2 style={{ marginTop: 16 }}>Most organizations<br />understand AI. Few<br />can deploy it.</H2>
          </div>
          <div style={{ paddingTop: 12 }}>
            <Lede style={{ marginBottom: 20 }}>
              Most organizations understand the potential of AI, but lack the technical expertise, internal resources, and strategic clarity to implement it effectively.
            </Lede>
            <Lede>
              Rather than offering standalone software, NoralAI delivers fully managed AI solutions — from design and deployment to ongoing optimization — allowing clients to adopt AI without building internal AI teams.
            </Lede>
          </div>
        </div>
      </Section>

      {/* CATEGORY */}
      <Section paddingY={100} style={{ background: CREAM }}>
        <Eyebrow>Category</Eyebrow>
        <H2 style={{ marginTop: 16, marginBottom: 48, maxWidth: 800 }}><Wordmark /> operates at the<br />intersection of four categories.</H2>
        <div data-grid="2col" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
          {category.map((c, i) => (
            <div key={c.label} style={{ background: PAPER, borderRadius: 16, border: `1px solid ${INK}11`, padding: 32 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 12 }}>
                <div style={{ width: 36, height: 36, borderRadius: "50%", background: `${SIGNAL}19`, color: SIGNAL, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "'JetBrains Mono', monospace", fontSize: 13, fontWeight: 700 }}>{i + 1}</div>
                <div style={{ fontFamily: "'Inter', sans-serif", fontWeight: 700, fontSize: 22, letterSpacing: "-0.025em", color: INK }}>{c.label}</div>
              </div>
              <div style={{ fontSize: 15, color: STONE, lineHeight: 1.6, marginLeft: 52 }}>{c.body}</div>
            </div>
          ))}
        </div>
      </Section>

      {/* THE SHIFT */}
      <Section paddingY={100} id="shift">
        <div id="shift" />
        <div data-grid="split" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80 }}>
          <div>
            <Eyebrow>For clients · for investors</Eyebrow>
            <H2 style={{ marginTop: 16 }}>Two audiences.<br />One <span style={{ color: SIGNAL }}>structural shift.</span></H2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div style={{ background: CREAM, borderRadius: 16, border: `1px solid ${INK}11`, padding: 28 }}>
              <Eyebrow>For clients</Eyebrow>
              <div style={{ fontFamily: "'Inter', sans-serif", fontWeight: 700, fontSize: 22, letterSpacing: "-0.025em", color: INK, marginTop: 10, marginBottom: 8 }}>
                A shift from labor-based operations to AI-augmented systems.
              </div>
              <div style={{ fontSize: 14, color: STONE, lineHeight: 1.6 }}>
                Faster response. Lower cost. Consistent service. Scale that doesn't require proportional hiring.
              </div>
            </div>
            <div style={{ background: INK, color: CREAM, borderRadius: 16, padding: 28 }}>
              <Eyebrow color="rgba(245,241,234,0.78)">For investors</Eyebrow>
              <div style={{ fontFamily: "'Inter', sans-serif", fontWeight: 700, fontSize: 22, letterSpacing: "-0.025em", marginTop: 10, marginBottom: 8 }}>
                Early positioning in the move from software tools to <span style={{ color: SIGNAL }}>autonomous, AI-driven operational infrastructure.</span>
              </div>
              <div style={{ fontSize: 14, color: "rgba(245,241,234,0.7)", lineHeight: 1.6 }}>
                The category is forming now. Buyers are moving from pilots to production.
              </div>
            </div>
          </div>
        </div>
      </Section>

      {/* VISION */}
      <Section paddingY={120} dark>
        <div style={{ maxWidth: 900 }}>
          <Eyebrow color="rgba(245,241,234,0.78)">Long-term vision</Eyebrow>
          <H2 color={CREAM} style={{ marginTop: 16, fontSize: 64, lineHeight: 1.05 }}>
            To become the system through which organizations <span style={{ color: SIGNAL }}>deploy, manage, and scale</span> AI workers across every function of their business.
          </H2>
        </div>
      </Section>
    </window.Page>
  );
}

window.CompanyPage = CompanyPage;