"use client";

import {
  Building2,
  MapPin,
  Users,
  ArrowLeftRight,
  Settings,
  Globe,
} from "lucide-react";
import { FeaturePageShell, DetailBlock, StatRow } from "@/components/marketing/feature-page-shell";

export default function MultiSitePage() {
  return (
    <FeaturePageShell
      badge="Multi-Site"
      badgeIcon={Building2}
      title="One organization."
      titleAccent="Every campus."
      subtitle="Run multiple locations under a single Echo account. Each campus gets its own collection days, scanner setup, and team assignments — all feeding into one unified dashboard."
    >
      <section className="py-12 sm:py-16">
        <div className="mx-auto max-w-4xl px-6 space-y-6">
          <StatRow
            stats={[
              { value: "1", label: "Unified dashboard" },
              { value: "N", label: "Locations per org" },
              { value: "Per-site", label: "Event schedules" },
            ]}
          />

          <DetailBlock icon={MapPin} title="Locations with independent schedules">
            <p>
              Each location in your organization has its own name, address, timezone
              override, and set of collection days. Your downtown campus might have
              services at 9 AM and 11 AM on Sundays, while your satellite campus
              meets at 10 AM — Echo tracks both separately.
            </p>
          </DetailBlock>

          <DetailBlock icon={ArrowLeftRight} title="Separate scanners, unified pipeline" reversed>
            <p>
              Each campus can have its own scanner configuration. Northside emails
              scans to one inbox, Downtown uses FTP, and the mobile campus uploads
              from phones. All three feed into the same processing pipeline and
              appear in the same dashboard.
            </p>
          </DetailBlock>

          <DetailBlock icon={Users} title="Per-location team assignments">
            <p>
              Assign team members to review cards from specific locations. Your
              downtown volunteer coordinator only sees downtown cards, while the
              executive pastor sees everything. Role-based permissions work
              alongside location context.
            </p>
          </DetailBlock>

          <DetailBlock icon={Globe} title="Organization-wide reporting" reversed>
            <p>
              See aggregate stats across all locations or drill down by campus.
              How many first-time guests did we have across all sites this month?
              Which campus had the most prayer requests? The dashboard gives you
              both the big picture and the details.
            </p>
          </DetailBlock>

          <DetailBlock icon={Settings} title="Centralized settings, local overrides">
            <p>
              Organization-level settings (AI provider, integration connections,
              team permissions) apply everywhere. Location-specific settings
              (timezone, scanner config, collection day schedules) can be
              customized per campus. Change your Planning Center connection once
              and it applies to all locations.
            </p>
          </DetailBlock>

          <DetailBlock icon={Building2} title="Organization switcher for multi-org users" reversed>
            <p>
              Consultants, denominational leaders, or staff who serve multiple
              churches can switch between organizations from the sidebar. Each
              org is fully isolated — separate data, separate teams, separate
              billing.
            </p>
          </DetailBlock>
        </div>
      </section>
    </FeaturePageShell>
  );
}
