// Platform page — managed AI scope, voice as one channel.

function PlatformPage() {
  const lifecycle = [
    { n: "01", title: "Discovery & process mapping", body: "Identify high-impact workflows where AI can replace or augment human effort — communication-heavy or repetitive operational processes." },
    { n: "02", title: "Agent design & configuration", body: "Custom AI agents built around specific roles — receptionist, scheduler, dispatcher, intake coordinator, pipeline manager — with defined behaviors, objectives, and integrations." },
    { n: "03", title: "System integration", body: "Agents connected directly to the tools you already rely on: CRMs, calendars, telephony, internal databases. Real-time data, real actions." },
    { n: "04", title: "Deployment & go-live", body: "Activated in live environments, handling real interactions and workflows across voice, SMS, and digital channels." },
    { n: "05", title: "Continuous optimization", body: "Performance monitored and refined over time — accuracy, conversation quality, task completion, and outcomes improve as the system learns." },
  ];

  const systems = [
    { n: "01", title: "Revenue pipeline management", body: "Tracks every lead from first interaction to outcome. Identifies stalled opportunities, prioritizes actions for sales teams, triggers re-engagement automatically.", outcome: "More deals close, fewer leads lost." },
    { n: "02", title: "Workflow automation & task execution", body: "Tasks created and assigned from conversation events. Progress tracked. Delays escalated. Processes move forward without manual coordination.", outcome: "Work gets done without constant oversight." },
    { n: "03", title: "Data capture & structuring", body: "Information extracted and organized from every interaction. Systems updated in real time. Information stays searchable and actionable.", outcome: "Better decisions on complete data." },
    { n: "04", title: "Cross-system orchestration", body: "CRM, calendar, telephony, and internal tools triggered in concert. Actions cascade across systems. Data stays consistent without manual updates.", outcome: "A unified operation, no rip-and-replace." },
    { n: "05", title: "Continuous optimization", body: "Performance analyzed across conversations and workflows. Responses, timing, and outcomes improve over time. The system scales what works and fixes what doesn't.", outcome: "Systems get better without more management effort." },
  ];

  const replaces = [
    "Missed calls and delayed responses",
    "Manual scheduling and coordination",
    "Repetitive inbound and outbound communication",
    "Inconsistent customer experiences across staff",
    "Bottlenecks caused by limited human availability",
    "Stalled leads and untracked follow-ups",
  ];

  const beforeAfter = [
    { before: "Work fragmented across people and systems", after: "Work executed through coordinated systems" },
    { before: "Processes rely on manual follow-up", after: "Processes move automatically from step to step" },
    { before: "Opportunities missed due to delays", after: "Every interaction leads to an action" },
    { before: "Growth requires hiring more staff", after: "Growth driven by systems, not headcount" },
  ];

  return (
    <window.Page active="platform">
      {/* HERO */}
      <section data-section="hero" style={{ padding: "100px 32px 60px" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
          <Eyebrow>Platform · managed AI infrastructure</Eyebrow>
          <Display size={88} style={{ marginTop: 24, maxWidth: 1000 }}>
            From concept to fully<br />operational <span style={{ color: SIGNAL }}>AI systems.</span>
          </Display>
          <Lede style={{ marginTop: 32, fontSize: 20 }}>
            <Wordmark /> moves organizations from concept to production without disruption. Every deployment follows a structured lifecycle, run end to end by our team — and what we ship is a system, not a single agent.
          </Lede>
        </div>
      </section>

      {/* LIFECYCLE */}
      <Section paddingY={64}>
        <Eyebrow>How it works · the deployment lifecycle</Eyebrow>
        <H2 style={{ marginTop: 16, marginBottom: 56 }}>Five steps. One operating system.</H2>

        <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
          {lifecycle.map((s, i) => (
            <div key={s.n} data-grid="3col" style={{
              display: "grid", gridTemplateColumns: "120px 1fr 80px",
              gap: 32, alignItems: "start",
              padding: "32px 0",
              borderTop: i === 0 ? `1px solid ${INK}19` : "none",
              borderBottom: `1px solid ${INK}19`,
            }}>
              <div style={{ fontFamily: "'Inter', sans-serif", fontWeight: 800, fontSize: 56, letterSpacing: "-0.045em", color: SIGNAL, lineHeight: 1 }}>{s.n}</div>
              <div>
                <div style={{ fontFamily: "'Inter', sans-serif", fontWeight: 700, fontSize: 28, letterSpacing: "-0.03em", color: INK, marginBottom: 8 }}>{s.title}</div>
                <div style={{ fontSize: 16, color: STONE, lineHeight: 1.6, maxWidth: 720 }}>{s.body}</div>
              </div>
              <div data-decorative="true" aria-hidden="true" style={{ display: "flex", justifyContent: "flex-end", paddingTop: 14 }}>
                <NoralMark size={48} color={SIGNAL} />
              </div>
            </div>
          ))}
        </div>
      </Section>

      {/* WHAT MANAGED AI RUNS */}
      <Section paddingY={100} id="capabilities" style={{ background: CREAM }}>
        <div id="capabilities" />
        <Eyebrow>Beyond voice · what the platform runs</Eyebrow>
        <H2 style={{ marginTop: 16, marginBottom: 16, maxWidth: 800 }}>Five operational systems,<br />running continuously.</H2>
        <Lede style={{ marginBottom: 48, maxWidth: 720 }}>
          Voice is the entry point. The product is everything that happens after the conversation — pipeline, workflow, data, orchestration, optimization.
        </Lede>

        <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
          {systems.map((s, i) => (
            <div key={s.n} data-grid="3col" style={{
              display: "grid", gridTemplateColumns: "100px 1fr 1fr",
              gap: 40, alignItems: "start",
              padding: "32px 0",
              borderTop: i === 0 ? `1px solid ${INK}19` : "none",
              borderBottom: `1px solid ${INK}19`,
            }}>
              <div style={{ fontFamily: "'Inter', sans-serif", fontWeight: 800, fontSize: 40, letterSpacing: "-0.045em", color: SIGNAL, lineHeight: 1 }}>{s.n}</div>
              <div>
                <div style={{ fontFamily: "'Inter', sans-serif", fontWeight: 700, fontSize: 22, letterSpacing: "-0.025em", color: INK, marginBottom: 8 }}>{s.title}</div>
                <div style={{ fontSize: 15, color: STONE, lineHeight: 1.6 }}>{s.body}</div>
              </div>
              <div style={{
                background: PAPER, borderRadius: 12, padding: "18px 22px",
                border: `1px solid ${INK}11`, alignSelf: "start",
              }}>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: MIST, fontWeight: 600, marginBottom: 6 }}>Outcome</div>
                <div style={{ fontFamily: "'Inter', sans-serif", fontWeight: 600, fontSize: 16, letterSpacing: "-0.015em", color: INK, lineHeight: 1.3 }}>
                  <span style={{ color: SIGNAL }}>→ </span>{s.outcome}
                </div>
              </div>
            </div>
          ))}
        </div>
      </Section>

      {/* BEFORE / AFTER */}
      <Section paddingY={100} dark>
        <Eyebrow color="rgba(245,241,234,0.78)">Before · after</Eyebrow>
        <H2 color={CREAM} style={{ marginTop: 16, marginBottom: 56, maxWidth: 800 }}>The structural shift,<br />in operational terms.</H2>

        <div data-grid="2col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: "1px solid rgba(245,241,234,0.15)", borderRadius: 16, overflow: "hidden" }}>
          <div style={{ padding: "24px 28px", borderRight: "1px solid rgba(245,241,234,0.15)", borderBottom: "1px solid rgba(245,241,234,0.15)" }}>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(245,241,234,0.78)", fontWeight: 600 }}>Before</div>
          </div>
          <div style={{ padding: "24px 28px", borderBottom: "1px solid rgba(245,241,234,0.15)", background: "rgba(255,91,46,0.06)" }}>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: SIGNAL, fontWeight: 600 }}>After</div>
          </div>
          {beforeAfter.map((row, i) => (
            <React.Fragment key={i}>
              <div style={{
                padding: "24px 28px", borderRight: "1px solid rgba(245,241,234,0.15)",
                borderBottom: i < beforeAfter.length - 1 ? "1px solid rgba(245,241,234,0.15)" : "none",
                fontFamily: "'Inter', sans-serif", fontWeight: 500, fontSize: 18, letterSpacing: "-0.015em",
                color: "rgba(245,241,234,0.78)", textDecoration: "line-through", textDecorationColor: "rgba(245,241,234,0.4)",
              }}>{row.before}</div>
              <div style={{
                padding: "24px 28px",
                borderBottom: i < beforeAfter.length - 1 ? "1px solid rgba(245,241,234,0.15)" : "none",
                fontFamily: "'Inter', sans-serif", fontWeight: 700, fontSize: 18, letterSpacing: "-0.02em",
                color: CREAM, background: "rgba(255,91,46,0.04)",
                display: "flex", alignItems: "center", gap: 14,
              }}>
                <span style={{ color: SIGNAL, fontSize: 16 }}>→</span>{row.after}
              </div>
            </React.Fragment>
          ))}
        </div>
      </Section>

      {/* REPLACES */}
      <Section paddingY={100}>
        <div id="replaces" />
        <div data-grid="split" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
          <div>
            <Eyebrow>What this replaces</Eyebrow>
            <H2 style={{ marginTop: 16 }}>Not a productivity layer.<br /><span style={{ color: SIGNAL }}>A replacement</span> for what's broken.</H2>
            <Lede style={{ marginTop: 24 }}>
              Managed AI isn't a tool layered on top of existing teams. It's designed to replace — or significantly reduce dependency on — the operational gaps that quietly cost you customers and revenue.
            </Lede>
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column" }}>
            {replaces.map((r, i) => (
              <li key={r} style={{
                display: "flex", alignItems: "center", gap: 24,
                padding: "18px 0",
                borderTop: i === 0 ? `1px solid ${INK}19` : "none",
                borderBottom: `1px solid ${INK}19`,
              }}>
                <span style={{ width: 24, height: 24, borderRadius: "50%", border: `1.5px solid ${SIGNAL}`, display: "inline-flex", alignItems: "center", justifyContent: "center", color: SIGNAL, fontSize: 13, flexShrink: 0 }}>×</span>
                <span style={{ fontFamily: "'Inter', sans-serif", fontWeight: 600, fontSize: 19, letterSpacing: "-0.02em", color: INK, textDecoration: "line-through", textDecorationColor: `${INK}33` }}>{r}</span>
              </li>
            ))}
          </ul>
        </div>
      </Section>

      {/* WHY NOW */}
      <Section paddingY={100} style={{ background: CREAM }}>
        <div data-grid="split" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>
          <div>
            <Eyebrow>Why it matters now</Eyebrow>
            <H2 style={{ marginTop: 16 }}>The convergence.</H2>
          </div>
          <div style={{ paddingTop: 12 }}>
            <Lede style={{ marginBottom: 20 }}>
              Advances in large language models, voice synthesis, and system integration have made it possible for AI agents to operate reliably in real-world business environments — not just controlled demos.
            </Lede>
            <Lede>
              At the same time, rising labor costs, staffing shortages, and increasing customer expectations are forcing organizations to rethink how work gets done. <Wordmark /> sits at the convergence — modernize operations without waiting for internal transformation.
            </Lede>
          </div>
        </div>
      </Section>

      {/* CTA */}
      <Section paddingY={80} dark>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24 }}>
          <H2 color={CREAM}>Ready to see your<br />first system live?</H2>
          <Button href="contact.html" variant="primary" size="lg">Talk to us →</Button>
        </div>
      </Section>
    </window.Page>
  );
}

window.PlatformPage = PlatformPage;