"use client";

import {
  Users,
  ShieldCheck,
  UserPlus,
  Eye,
  Pencil,
  Crown,
  ClipboardCheck,
  Bell,
} from "lucide-react";
import { FeaturePageShell, DetailBlock } from "@/components/marketing/feature-page-shell";

const roles = [
  {
    icon: Crown,
    name: "Owner",
    description: "Full control. Manages billing, org settings, and all users. Created during setup.",
  },
  {
    icon: ShieldCheck,
    name: "Admin",
    description: "Manages team members, all settings, integrations, and every card operation.",
  },
  {
    icon: Pencil,
    name: "Editor",
    description: "Creates, edits, deletes cards. Runs OCR, manages imports and collection days.",
  },
  {
    icon: ClipboardCheck,
    name: "Reviewer",
    description: "Edits cards assigned to them. Marks cards as reviewed for syncing.",
  },
  {
    icon: Eye,
    name: "Viewer",
    description: "Read-only access to cards, events, and stats. Perfect for senior pastors who just want visibility.",
  },
];

export default function TeamCollaborationPage() {
  return (
    <FeaturePageShell
      badge="Team Management"
      badgeIcon={Users}
      title="Your whole team,"
      titleAccent="with the right access."
      subtitle="Invite volunteers, staff, and pastors with role-based permissions. Everyone sees exactly what they need — nothing more, nothing less."
    >
      <section className="py-12 sm:py-16">
        <div className="mx-auto max-w-4xl px-6 space-y-6">
          <div className="glass-card rounded-2xl p-8 sm:p-10">
            <h3 className="text-lg font-semibold mb-6 text-center">Five roles, clear boundaries</h3>
            <div className="space-y-4">
              {roles.map((role) => (
                <div key={role.name} className="flex items-start gap-4 p-4 rounded-xl hover:bg-accent/20 transition-colors">
                  <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
                    <role.icon className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-sm">{role.name}</h4>
                    <p className="text-sm text-muted-foreground mt-0.5">{role.description}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <DetailBlock icon={UserPlus} title="Invitation-based onboarding">
            <p>
              No self-registration on your instance. Admins send email invitations
              with a pre-assigned role. The invitee clicks a link, creates their
              account, and is immediately placed on your team with the right permissions.
            </p>
            <p>
              Invitations expire after 7 days and can be revoked at any time from
              the team management page.
            </p>
          </DetailBlock>

          <DetailBlock icon={ClipboardCheck} title="Card assignment & review workflow" reversed>
            <p>
              After cards are scanned, assign them to specific team members for
              review. Reviewers see only their assigned cards, verify the AI&rsquo;s
              extraction, make corrections, and mark them as reviewed.
            </p>
            <p>
              Once reviewed, cards can be synced to Planning Center or your CRM
              with confidence that the data is accurate. The full assignment and
              review history is tracked in the activity log.
            </p>
          </DetailBlock>

          <DetailBlock icon={Bell} title="In-app notifications">
            <p>
              Team members receive notifications when cards are assigned to them,
              when processing completes, and when errors need attention. A
              notification center in the header keeps everyone informed without
              email overload.
            </p>
          </DetailBlock>

          <DetailBlock icon={Users} title="Built for church teams" reversed>
            <p>
              Most churches have a mix of paid staff and volunteers on their guest
              services team. Echo makes it easy to give volunteers limited access
              (Reviewer or Viewer) while staff have broader control (Editor or Admin).
            </p>
            <p>
              The Owner role is reserved for the person who set up the account —
              typically the executive pastor or admin director — ensuring there&rsquo;s
              always a single point of accountability.
            </p>
          </DetailBlock>
        </div>
      </section>
    </FeaturePageShell>
  );
}
