"use client";

import {
  Heart,
  Globe,
  FileText,
  BarChart3,
  Webhook,
  ArrowRight,
  Link2,
  RefreshCw,
  Settings,
  Zap,
} from "lucide-react";
import Link from "next/link";
import { FeaturePageShell, DetailBlock } from "@/components/marketing/feature-page-shell";

const integrationCards = [
  {
    name: "Planning Center",
    tag: "Most Popular",
    icon: Heart,
    description:
      "OAuth-connected. Match or create People records, sync contact info, add to lists. Full field mapping with custom field support.",
    plan: "Growth",
  },
  {
    name: "Google Sheets",
    icon: FileText,
    description:
      "OAuth-connected. Append rows to any shared spreadsheet. Great for custom reporting or bridging to other tools.",
    plan: "Starter",
  },
  {
    name: "Monday.com",
    icon: Globe,
    description:
      "API-connected. Create board items with mapped columns for project-style follow-up tracking and automation.",
    plan: "Growth",
  },
  {
    name: "Airtable",
    icon: BarChart3,
    description:
      "API-connected. Push records with full field mapping into any base. Perfect for flexible data modeling.",
    plan: "Growth",
  },
  {
    name: "Webhooks",
    icon: Webhook,
    description:
      "Send signed JSON payloads to any URL on card events. Connect to Zapier, Make, n8n, or your custom backend.",
    plan: "Starter",
  },
  {
    name: "CSV Export",
    icon: FileText,
    description:
      "Export your full card table or filtered views as CSV. Import into any system or archive for records.",
    plan: "Free",
  },
];

export default function IntegrationsPage() {
  return (
    <FeaturePageShell
      badge="Integrations"
      badgeIcon={Link2}
      title="Connects to"
      titleAccent="where your team already works."
      subtitle="Echo doesn't replace your church management system — it feeds it. Scanned card data flows directly into Planning Center, Google Sheets, Monday.com, Airtable, or any system via webhooks."
    >
      <section className="py-12 sm:py-16">
        <div className="mx-auto max-w-5xl px-6 space-y-12">
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {integrationCards.map((integration) => (
              <div key={integration.name} className="glass-card rounded-xl p-6 relative">
                {integration.tag && (
                  <span className="absolute top-4 right-4 text-[10px] font-bold uppercase tracking-wider bg-primary/10 text-primary px-2 py-0.5 rounded-full">
                    {integration.tag}
                  </span>
                )}
                <div className="mb-4 h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center">
                  <integration.icon className="h-5 w-5 text-primary" />
                </div>
                <h3 className="font-semibold mb-2">{integration.name}</h3>
                <p className="text-sm text-muted-foreground leading-relaxed mb-3">
                  {integration.description}
                </p>
                <span className="text-[10px] font-medium text-muted-foreground/70 uppercase tracking-wider">
                  {integration.plan} plan &amp; above
                </span>
              </div>
            ))}
          </div>

          <div className="space-y-6">
            <DetailBlock icon={Zap} title="Event-driven triggers">
              <p>
                Every integration fires on the events you choose. Configure each
                connection to trigger on:
              </p>
              <ul className="list-disc list-inside space-y-1 mt-2">
                <li><strong>OCR complete</strong> &mdash; as soon as a card is processed</li>
                <li><strong>Card reviewed</strong> &mdash; after a team member verifies the data</li>
                <li><strong>Card exported</strong> &mdash; when marked as sent to your CRM</li>
              </ul>
              <p>
                Most churches trigger on &ldquo;reviewed&rdquo; so only human-verified
                data enters their systems.
              </p>
            </DetailBlock>

            <DetailBlock icon={Settings} title="Full field mapping" reversed>
              <p>
                Map Echo&rsquo;s extracted fields to your destination&rsquo;s fields
                with a visual mapper. For Planning Center, Echo can even pull your
                existing custom field definitions so everything lines up perfectly.
              </p>
              <p>
                Change your card layout? Just update the field mapping — no code required.
              </p>
            </DetailBlock>

            <DetailBlock icon={Heart} title="Planning Center deep integration">
              <p>
                The Planning Center integration goes beyond basic syncing:
              </p>
              <ul className="list-disc list-inside space-y-1 mt-2">
                <li>OAuth connection — no API keys to manage, tokens refresh automatically</li>
                <li>Smart person matching by email address or name</li>
                <li>Creates new People records for first-time guests</li>
                <li>Updates existing records with new contact info</li>
                <li>Adds people to PCO Lists (e.g. &ldquo;First Time Guests April 2026&rdquo;)</li>
                <li>Syncs phone numbers, emails, and addresses as typed sub-records</li>
              </ul>
            </DetailBlock>

            <DetailBlock icon={RefreshCw} title="Webhook signatures for security" reversed>
              <p>
                Every webhook payload is signed with your secret key using HMAC-SHA256.
                Your receiving endpoint can verify the signature to ensure the data
                came from Echo and wasn&rsquo;t tampered with. Full payload includes
                card data, event type, and timestamp.
              </p>
            </DetailBlock>
          </div>

          <div className="glass-card rounded-2xl p-8 sm:p-10 text-center">
            <h3 className="text-lg font-semibold mb-3">
              Don&rsquo;t see your tool?
            </h3>
            <p className="text-sm text-muted-foreground mb-5 max-w-lg mx-auto">
              Use webhooks to connect Echo to Zapier, Make, n8n, or any platform
              that accepts HTTP callbacks. Or reach out about a custom integration
              on our Enterprise plan.
            </p>
            <Link
              href="mailto:support@stillwell.cloud?subject=Integration%20request"
              className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:underline"
            >
              Request an integration
              <ArrowRight className="h-4 w-4" />
            </Link>
          </div>
        </div>
      </section>
    </FeaturePageShell>
  );
}
