// Industries page — full lifecycle workflows per vertical, not just voice.

function IndustriesPage() {
  const industries = [
    {
      name: "Home Services",
      tag: "HVAC · Plumbing · Roofing · Solar",
      scenario: "A homeowner calls about a roofing or solar project.",
      flow: [
        "Call answered, lead qualified in real time",
        "Appointment scheduled and synced to calendars",
        "Job created in the CRM with full context",
        "Sales rep assigned by territory and availability",
        "Reminders, confirmations, and follow-ups run automatically",
        "Stalled deals re-engaged on schedule",
      ],
      result: "The full lifecycle — first call to revenue — coordinated and advanced automatically.",
    },
    {
      name: "Healthcare",
      tag: "Practices · Clinics · Networks",
      scenario: "A patient needs to book or manage an appointment.",
      flow: [
        "Appointment scheduled, rescheduled, or confirmed",
        "Patient intake collected and logged",
        "Insurance and eligibility workflows initiated",
        "Reminders sent across channels",
        "Post-visit follow-ups and refill requests handled",
      ],
      result: "Patient flow managed end-to-end — front desk workload down, access up.",
    },
    {
      name: "Property Management",
      tag: "Residential · Commercial · Multi-Site",
      scenario: "A tenant submits a maintenance request or leasing inquiry.",
      flow: [
        "Request captured and categorized automatically",
        "Work order created and assigned to the right team",
        "Tenant receives real-time status updates",
        "Follow-ups sent until the issue resolves",
        "Leasing inquiries qualified and tours booked",
      ],
      result: "Faster resolution, streamlined operations across every property.",
    },
    {
      name: "Government & Public Sector",
      tag: "Municipalities · Agencies · Utilities",
      scenario: "A constituent needs help with permits, housing, or services.",
      flow: [
        "Inquiry handled with accurate, current information",
        "Constituent guided through applications step-by-step",
        "Status updates provided automatically",
        "Cases routed and tracked to internal teams",
        "After-hours coverage without after-hours staffing",
      ],
      result: "Higher accessibility, faster response, less administrative burden.",
    },
    {
      name: "Professional Services",
      tag: "Legal · Accounting · Consulting",
      scenario: "A prospective client reaches out for a consultation.",
      flow: [
        "Inquiry qualified, key details captured",
        "Consultation scheduled instantly on the right calendar",
        "Urgent or high-value opportunities prioritized",
        "Intake data structured and stored",
        "Follow-ups triggered automatically until conversion",
      ],
      result: "Higher conversion rates, consistent professional client experience.",
    },
  ];

  return (
    <window.Page active="industries">
      <section data-section="hero" style={{ padding: "100px 32px 60px" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
          <Eyebrow>Industries · how managed AI runs in the real world</Eyebrow>
          <Display size={88} style={{ marginTop: 24, maxWidth: 1000 }}>
            From first interaction<br />to <span style={{ color: SIGNAL }}>final outcome.</span>
          </Display>
          <Lede style={{ marginTop: 32, fontSize: 20 }}>
            <Wordmark /> works across industries where coordination and responsiveness drive revenue and trust. Each deployment configures the full system — from the conversation through to the work that completes it.
          </Lede>
        </div>
      </section>

      <Section paddingY={64}>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {industries.map((ind, i) => (
            <IndustryRow key={ind.name} ind={ind} dark={i % 2 === 1} idx={i} />
          ))}
        </div>
      </Section>

      <Section paddingY={80} style={{ background: CREAM }}>
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto" }}>
          <Eyebrow>Don't see your industry?</Eyebrow>
          <H2 style={{ marginTop: 16, marginBottom: 24 }}>If your operation runs on calls,<br />workflows, and follow-through — we can deploy.</H2>
          <Lede style={{ margin: "0 auto 32px" }}>
            <Wordmark /> deploys anywhere communication, coordination, and execution are central to performance. Tell us about your workflow.
          </Lede>
          <Button href="contact.html" variant="primary" size="lg">Talk to us →</Button>
        </div>
      </Section>
    </window.Page>
  );
}

const IndustryRow = ({ ind, dark, idx }) => {
  const bg = dark ? INK : CREAM;
  const fg = dark ? CREAM : INK;
  const muted = dark ? "rgba(245,241,234,0.75)" : STONE;
  const border = dark ? "rgba(245,241,234,0.15)" : `${INK}19`;

  return (
    <div style={{
      background: bg, color: fg,
      borderRadius: 20,
      padding: 40,
      border: dark ? "none" : `1px solid ${INK}11`,
      position: "relative", overflow: "hidden",
    }}>
      {dark && (
        <div data-decorative="true" aria-hidden="true" style={{ position: "absolute", right: -40, top: -40, opacity: 0.10 }}>
          <NoralMark size={360} color={SIGNAL} />
        </div>
      )}
      <div data-grid="3col" style={{
        position: "relative",
        display: "grid", gridTemplateColumns: "1fr 1.3fr 1fr", gap: 48,
        alignItems: "start",
      }}>
        {/* col 1 — name */}
        <div>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: dark ? "rgba(245,241,234,0.78)" : MIST, fontWeight: 600, marginBottom: 14 }}>
            0{idx + 1} · {ind.tag}
          </div>
          <div style={{ fontFamily: "'Inter', sans-serif", fontWeight: 800, fontSize: 40, letterSpacing: "-0.04em", lineHeight: 1.05, marginBottom: 16 }}>
            {ind.name}
          </div>
          <div style={{
            fontFamily: "'Inter', sans-serif", fontWeight: 500, fontSize: 16, lineHeight: 1.5,
            color: muted, fontStyle: "italic",
            paddingLeft: 14, borderLeft: `2px solid ${SIGNAL}`,
          }}>
            "{ind.scenario}"
          </div>
        </div>

        {/* col 2 — what AI does */}
        <div>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: SIGNAL, fontWeight: 600, marginBottom: 16 }}>
            What managed AI runs
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
            {ind.flow.map((step, i) => (
              <li key={i} style={{ display: "flex", gap: 14, alignItems: "baseline" }}>
                <span style={{
                  fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.05em",
                  color: SIGNAL, fontWeight: 600, flexShrink: 0, paddingTop: 2,
                }}>{String(i + 1).padStart(2, "0")}</span>
                <span style={{ fontSize: 15, color: fg, lineHeight: 1.5 }}>{step}</span>
              </li>
            ))}
          </ul>
        </div>

        {/* col 3 — result */}
        <div style={{
          background: dark ? "rgba(245,241,234,0.06)" : PAPER,
          border: `1px solid ${border}`,
          borderRadius: 14, padding: 22,
        }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: dark ? "rgba(245,241,234,0.78)" : MIST, fontWeight: 600, marginBottom: 10 }}>
            Result
          </div>
          <div style={{ fontFamily: "'Inter', sans-serif", fontWeight: 700, fontSize: 18, letterSpacing: "-0.02em", color: fg, lineHeight: 1.3 }}>
            <span style={{ color: SIGNAL }}>→ </span>{ind.result}
          </div>
        </div>
      </div>
    </div>
  );
};

window.IndustriesPage = IndustriesPage;