"use client";

import Link from "next/link";
import {
  ScanLine,
  Mail,
  Link2,
  Users,
  CalendarDays,
  Building2,
  BarChart3,
  Shield,
  ArrowRight,
} from "lucide-react";
import { MarketingNav } from "@/components/marketing/nav";
import { MarketingFooter } from "@/components/marketing/footer";

const features = [
  {
    href: "/features/ai-ocr",
    icon: ScanLine,
    title: "AI-Powered OCR",
    description:
      "Vision AI extracts 20+ fields from every card — names, contact info, prayer requests, spiritual decisions — even messy handwriting.",
  },
  {
    href: "/features/scanner-integration",
    icon: Mail,
    title: "Scanner Integration",
    description:
      "Upload from your phone, scan to email, or send batches via FTP. Echo picks up files automatically and starts processing.",
  },
  {
    href: "/features/integrations",
    icon: Link2,
    title: "Integrations",
    description:
      "Sync directly to Planning Center, Google Sheets, Monday.com, Airtable, or any system via webhooks and CSV export.",
  },
  {
    href: "/features/team-collaboration",
    icon: Users,
    title: "Team Collaboration",
    description:
      "Invite your guest services team with five distinct roles. Assign cards for review and track follow-up across your team.",
  },
  {
    href: "/features/collection-days",
    icon: CalendarDays,
    title: "Collection Days & Events",
    description:
      "Define recurring services and events. Echo auto-assigns scanned cards to the correct service based on your schedule.",
  },
  {
    href: "/features/multi-site",
    icon: Building2,
    title: "Multi-Site Management",
    description:
      "Run multiple campuses under one organization. Independent schedules, scanners, and teams — one unified dashboard.",
  },
  {
    href: "/features/analytics",
    icon: BarChart3,
    title: "Dashboard & Analytics",
    description:
      "Real-time stats, powerful filtering, card detail views with full history, and CSV export for custom reporting.",
  },
  {
    href: "/features/security",
    icon: Shield,
    title: "Security & Privacy",
    description:
      "Encryption, role-based access, invitation-only teams, email verification, SSO support, and full audit trails.",
  },
];

export default function FeaturesIndexPage() {
  return (
    <div className="min-h-screen bg-background">
      <MarketingNav />

      <section className="relative pt-32 pb-16 sm:pt-40 sm:pb-20 overflow-hidden">
        <div className="absolute inset-0 gradient-mesh pointer-events-none" />
        <div className="relative mx-auto max-w-4xl px-6 text-center">
          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight leading-[1.1] mb-6">
            Everything your guest services team{" "}
            <span className="bg-gradient-to-r from-primary via-foreground to-primary bg-clip-text text-transparent">
              needs.
            </span>
          </h1>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed">
            Purpose-built for the way churches actually work &mdash; from the
            welcome center to the pastor&rsquo;s desk.
          </p>
        </div>
      </section>

      <section className="py-8 sm:py-12">
        <div className="mx-auto max-w-5xl px-6">
          <div className="grid sm:grid-cols-2 gap-5">
            {features.map((feature) => (
              <Link
                key={feature.href}
                href={feature.href}
                className="glass-card rounded-xl p-6 group hover:scale-[1.01] transition-transform"
              >
                <div className="flex items-start gap-4">
                  <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center shrink-0 group-hover:bg-primary/20 transition-colors">
                    <feature.icon className="h-5 w-5 text-primary" />
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center gap-2">
                      <h3 className="font-semibold">{feature.title}</h3>
                      <ArrowRight className="h-4 w-4 text-muted-foreground group-hover:text-primary group-hover:translate-x-0.5 transition-all" />
                    </div>
                    <p className="text-sm text-muted-foreground leading-relaxed mt-1.5">
                      {feature.description}
                    </p>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <section className="py-16 sm:py-24 relative">
        <div className="absolute inset-0 gradient-mesh pointer-events-none" />
        <div className="relative mx-auto max-w-3xl px-6 text-center">
          <div className="glass-card rounded-2xl p-10 sm:p-14">
            <h2 className="text-2xl sm:text-3xl font-bold tracking-tight mb-4">
              Ready to see it in action?
            </h2>
            <p className="text-muted-foreground text-lg mb-8 max-w-xl mx-auto">
              Start free with 50 cards per month. No credit card required.
            </p>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <Link
                href="/signup"
                className="inline-flex items-center gap-2 rounded-xl bg-primary px-8 py-3.5 text-base font-semibold text-primary-foreground shadow-lg hover:opacity-90 transition-opacity"
              >
                Get Started Free
                <ArrowRight className="h-4 w-4" />
              </Link>
              <Link
                href="/pricing"
                className="inline-flex items-center gap-2 rounded-xl border border-border/60 bg-card/60 px-8 py-3.5 text-base font-medium text-foreground hover:bg-accent/40 transition-colors glass"
              >
                View Pricing
              </Link>
            </div>
          </div>
        </div>
      </section>

      <MarketingFooter />
    </div>
  );
}
