// Home page — managed AI positioning. Voice is the entry point; the system is the product.

function HomePage() {
  return (
    <window.Page active="home">
      {/* HERO */}
      <section data-section="hero" style={{ background: INK, color: CREAM, padding: "120px 32px 100px", 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", right: -100, top: 40, opacity: 0.08 }}>
          <NoralMark size={720} color={SIGNAL} />
        </div>
        <div style={{ maxWidth: 1200, margin: "0 auto", position: "relative" }}>
          <Eyebrow color="rgba(245,241,234,0.78)">Managed AI infrastructure & services</Eyebrow>
          <Display size={108} color={CREAM} style={{ marginTop: 28, maxWidth: 1080 }}>
            We don't sell software.<br />
            We deploy <span style={{ color: SIGNAL }}>AI workers.</span>
          </Display>
          <Lede color="rgba(245,241,234,0.78)" style={{ marginTop: 32, fontSize: 20, maxWidth: 720 }}>
            NoralAI builds and operates intelligent digital workforces — managed AI systems that take work from conversation through coordination to completion. Voice is often the entry point. The value is everything that happens after.
          </Lede>
          <div style={{ display: "flex", gap: 12, marginTop: 40 }}>
            <Button href="contact.html" variant="primary" size="lg">Talk to us →</Button>
            <Button href="platform.html" variant="ghost" size="lg">See what AI runs</Button>
          </div>

          {/* stat row */}
          <div data-grid="4col" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32, marginTop: 96 }}>
            <StatCard dark value="24/7" label="Coverage · always on" />
            <StatCard dark value="< 2" label="Rings · avg pickup" />
            <StatCard dark value="End-to-end" label="From first touch to outcome" />
            <StatCard dark value="100%" label="Managed · we run it" />
          </div>
        </div>
      </section>

      {/* FROM CONVERSATION TO EXECUTION */}
      <Section paddingY={120}>
        <div data-grid="split" style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 80, alignItems: "start" }}>
          <div>
            <Eyebrow>From conversation to execution</Eyebrow>
            <H2 style={{ marginTop: 16 }}>Traditional systems<br />stop at communication.</H2>
            <H2 style={{ marginTop: 14, color: SIGNAL }}>Managed AI keeps going.</H2>
            <Lede style={{ marginTop: 24 }}>
              An agent doesn't just answer the call. It captures and structures the information, triggers workflows across systems, assigns work, follows up, and moves the process forward — without human intervention.
            </Lede>
          </div>

          {/* flow diagram */}
          <div style={{ display: "flex", flexDirection: "column", gap: 12, paddingTop: 24 }}>
            {[
              { phase: "Capture", body: "Information extracted and structured from every interaction.", n: "01" },
              { phase: "Trigger", body: "Workflows fire across CRM, calendar, telephony, and internal systems.", n: "02" },
              { phase: "Assign", body: "Work routed to the right team or rep with context attached.", n: "03" },
              { phase: "Follow up", body: "Reminders, confirmations, and re-engagement run automatically.", n: "04" },
              { phase: "Advance", body: "The process moves forward — no manual coordination required.", n: "05" },
            ].map((s, i) => (
              <div key={s.phase} style={{
                display: "grid", gridTemplateColumns: "60px 140px 1fr", gap: 20,
                alignItems: "center",
                background: CREAM, padding: "18px 22px", borderRadius: 12,
                border: `1px solid ${INK}11`,
                position: "relative",
              }}>
                <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.16em", color: SIGNAL, fontWeight: 600 }}>{s.n}</span>
                <span style={{ fontFamily: "'Inter', sans-serif", fontWeight: 700, fontSize: 18, letterSpacing: "-0.02em", color: INK }}>{s.phase}</span>
                <span style={{ fontSize: 14, color: STONE, lineHeight: 1.5 }}>{s.body}</span>
              </div>
            ))}
          </div>
        </div>
      </Section>

      {/* WHAT MANAGED AI RUNS */}
      <Section paddingY={120} style={{ background: CREAM }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 48, gap: 40, flexWrap: "wrap" }}>
          <div>
            <Eyebrow>Beyond voice · what managed AI runs</Eyebrow>
            <H2 style={{ marginTop: 16, maxWidth: 720 }}>Five operational systems,<br />running continuously.</H2>
          </div>
          <Lede style={{ fontSize: 16, maxWidth: 380 }}>
            Voice is the channel most people relate to. The full system manages everything that flows out of the conversation.
          </Lede>
        </div>

        <div data-grid="6col" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 16 }}>
          <SystemCard
            n="01"
            title="Revenue pipeline"
            body="Tracks every lead from first touch to outcome. Identifies stalled deals and triggers the right follow-up automatically."
            outcome="More deals close, fewer leads lost."
            cols="span 4"
          />
          <SystemCard
            n="02"
            title="Workflow automation"
            body="Tasks created, assigned, and tracked from conversation events. Delays escalated. Work moves without oversight."
            outcome="Things get done."
            cols="span 2"
            dark
          />
          <SystemCard
            n="03"
            title="Data capture"
            body="Information extracted and structured from every interaction. Systems updated in real time."
            outcome="Decisions on complete data."
            cols="span 2"
            dark
          />
          <SystemCard
            n="04"
            title="Cross-system orchestration"
            body="CRM, calendar, telephony, and internal tools triggered in concert. Data stays consistent without manual updates."
            outcome="A unified operation, no rip-and-replace."
            cols="span 4"
          />
          <SystemCard
            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."
            cols="span 6"
          />
        </div>
      </Section>

      {/* THE SHIFT */}
      <Section paddingY={120}>
        <div data-grid="split" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "start" }}>
          <div>
            <Eyebrow>The shift</Eyebrow>
            <H2 style={{ marginTop: 16 }}>
              Most software<br />helps people<br />do their jobs.
            </H2>
            <H2 style={{ marginTop: 14 }}>
              <Wordmark /> changes<br />how work gets done.
            </H2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 14, paddingTop: 24 }}>
            {[
              { from: "Hiring", to: "Deploying" },
              { from: "Training people", to: "Configuring systems" },
              { from: "Manual execution", to: "Automated systems" },
              { from: "Disconnected tools", to: "Coordinated workflows" },
              { from: "Reactive operations", to: "Continuous execution" },
            ].map(s => (
              <div key={s.from} style={{ background: CREAM, padding: 22, borderRadius: 14, border: `1px solid ${INK}11`, display: "flex", alignItems: "center", gap: 24 }}>
                <div style={{ flex: 1, fontFamily: "'JetBrains Mono', monospace", fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", color: STONE, textDecoration: "line-through", textDecorationColor: `${INK}44` }}>From {s.from}</div>
                <div style={{ color: SIGNAL, fontSize: 22 }}>→</div>
                <div style={{ flex: 1, fontFamily: "'Inter', sans-serif", fontWeight: 700, fontSize: 17, letterSpacing: "-0.02em", color: INK }}>To {s.to}</div>
              </div>
            ))}
          </div>
        </div>
      </Section>

      {/* DIFFERENTIATION */}
      <Section paddingY={100} style={{ background: CREAM }}>
        <Eyebrow>Differentiation</Eyebrow>
        <H2 style={{ marginTop: 16, maxWidth: 800 }}>The four things that<br />make <Wordmark /> different.</H2>

        <div data-grid="2col" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16, marginTop: 56 }}>
          {[
            { not: "DIY", is: "Managed", body: "We design, deploy, and operate the system end to end. You don't hire an internal AI team." },
            { not: "Text-only", is: "Voice-capable", body: "Voice is a real channel — phones answered, conversations completed. But voice is one input, not the product." },
            { not: "Layered on top", is: "Integrated into operations", body: "Agents work inside your CRM, calendar, telephony, and database. Real-time data, real actions, no rip-and-replace." },
            { not: "Experimentation", is: "Built for execution", body: "Production systems handling real interactions and workflows at scale — not pilots, not demos." },
          ].map(d => (
            <div key={d.is} style={{ background: PAPER, borderRadius: 16, border: `1px solid ${INK}11`, padding: 32 }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 14 }}>
                <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: MIST, textDecoration: "line-through" }}>Not {d.not}</span>
                <span style={{ color: SIGNAL, fontSize: 14 }}>→</span>
                <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: SIGNAL, fontWeight: 600 }}>{d.is}</span>
              </div>
              <div style={{ fontFamily: "'Inter', sans-serif", fontWeight: 700, fontSize: 26, letterSpacing: "-0.025em", lineHeight: 1.15, color: INK, marginBottom: 12 }}>{d.is}, not {d.not.toLowerCase()}.</div>
              <div style={{ fontSize: 15, color: STONE, lineHeight: 1.6 }}>{d.body}</div>
            </div>
          ))}
        </div>
      </Section>

      {/* DIGITAL EMPLOYEE → SYSTEM PANEL */}
      <Section paddingY={100}>
        <div data-grid="split" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <Eyebrow>The digital employee</Eyebrow>
            <H2 style={{ marginTop: 16 }}>Persistent. Task-oriented.<br />Designed to do the work.</H2>
            <Lede style={{ marginTop: 24 }}>
              Not chatbots. Not scripted responders. Each agent is a configured role — receptionist, scheduler, dispatcher, intake coordinator, pipeline manager — handling communication, scheduling, data, and workflow execution with speed and consistency.
            </Lede>
            <div style={{ display: "flex", gap: 12, marginTop: 32 }}>
              <Button href="platform.html" variant="primary">Explore the platform →</Button>
              <Button href="industries.html" variant="secondary">See industries</Button>
            </div>
          </div>

          {/* live ops panel */}
          <OpsPanel />
        </div>
      </Section>

      {/* CTA STRIP */}
      <Section paddingY={80} dark style={{ borderTop: "1px solid rgba(245,241,234,0.10)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24 }}>
          <div>
            <H2 color={CREAM}>A digital workforce,<br />deployed in weeks.</H2>
          </div>
          <div style={{ display: "flex", gap: 12 }}>
            <Button href="contact.html" variant="primary" size="lg">Talk to us →</Button>
            <Button href="platform.html" variant="ghost" size="lg">How it works</Button>
          </div>
        </div>
      </Section>
    </window.Page>
  );
}

// Card for the "Beyond voice" capabilities grid
const SystemCard = ({ n, title, body, outcome, cols, dark }) => (
  <div style={{
    gridColumn: cols,
    background: dark ? INK : PAPER,
    color: dark ? CREAM : INK,
    borderRadius: 16,
    border: dark ? "none" : `1px solid ${INK}11`,
    padding: 28,
    display: "flex", flexDirection: "column",
    minHeight: 220,
  }}>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 14 }}>
      <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.16em", color: SIGNAL, fontWeight: 600 }}>{n}</span>
    </div>
    <div style={{ fontFamily: "'Inter', sans-serif", fontWeight: 700, fontSize: 24, letterSpacing: "-0.025em", lineHeight: 1.15, marginBottom: 10 }}>{title}</div>
    <div style={{ fontSize: 14, color: dark ? "rgba(245,241,234,0.75)" : STONE, lineHeight: 1.6, flex: 1 }}>{body}</div>
    <div style={{
      marginTop: 20, paddingTop: 14,
      borderTop: dark ? "1px solid rgba(245,241,234,0.15)" : `1px solid ${INK}11`,
      fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase",
      color: dark ? CREAM : INK, fontWeight: 600,
    }}>
      <span style={{ color: SIGNAL }}>→ </span>{outcome}
    </div>
  </div>
);

// Live operations panel — shows the system in motion, not just one voice agent
const OpsPanel = () => (
  <div style={{ background: INK, color: CREAM, borderRadius: 20, padding: 28, position: "relative", overflow: "hidden" }}>
    <div style={{ position: "absolute", inset: 0, opacity: 0.04, backgroundImage: `radial-gradient(${CREAM} 1px, transparent 1px)`, backgroundSize: "20px 20px" }} />
    <div style={{ position: "relative" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 22 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ position: "relative", display: "inline-flex" }}>
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#5dd28a" }} />
            <span style={{ position: "absolute", inset: -3, borderRadius: "50%", border: "1.5px solid #5dd28a", opacity: 0.4 }} />
          </span>
          <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: CREAM, fontWeight: 600 }}>OPS · LIVE</span>
        </div>
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "rgba(245,241,234,0.78)" }}>ColeLand HVAC</span>
      </div>

      <div data-grid="3col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12, marginBottom: 20 }}>
        <MiniStat value="1,247" label="Calls handled" />
        <MiniStat value="312" label="Jobs scheduled" />
        <MiniStat value="$184k" label="Pipeline moved" />
      </div>

      <div style={{ borderTop: "1px solid rgba(245,241,234,0.12)", paddingTop: 14 }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(245,241,234,0.78)", fontWeight: 600, marginBottom: 12 }}>Recent activity</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {[
            { time: "14:22", action: "Inbound call captured · job #7841 created · dispatch assigned", color: SIGNAL },
            { time: "14:18", action: "Lead qualified · synced to CRM · rep notified", color: "#5dd28a" },
            { time: "14:14", action: "Follow-up scheduled · auto-confirmation sent", color: CREAM },
            { time: "14:11", action: "Stalled lead re-engaged · meeting booked", color: SIGNAL },
          ].map((row, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "48px 8px 1fr", gap: 12, alignItems: "center", fontSize: 12, lineHeight: 1.4 }}>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", color: "rgba(245,241,234,0.78)", fontSize: 11 }}>{row.time}</span>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: row.color }} />
              <span style={{ color: "rgba(245,241,234,0.85)" }}>{row.action}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ display: "flex", gap: 6, marginTop: 18, flexWrap: "wrap" }}>
        {["Voice", "CRM", "Calendar", "Pipeline", "SMS"].map(t => (
          <span key={t} style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.16em", textTransform: "uppercase", padding: "4px 10px", borderRadius: 6, background: "rgba(245,241,234,0.08)", color: CREAM, fontWeight: 600 }}>{t}</span>
        ))}
      </div>
    </div>
  </div>
);

const MiniStat = ({ value, label }) => (
  <div>
    <div style={{ fontFamily: "'Inter', sans-serif", fontWeight: 800, fontSize: 24, letterSpacing: "-0.035em", color: CREAM, lineHeight: 1.1 }}>{value}</div>
    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(245,241,234,0.78)", marginTop: 4 }}>{label}</div>
  </div>
);

window.HomePage = HomePage;