"use client";

import { useState } from "react";
import Link from "next/link";
import { Check, ArrowRight, HelpCircle } from "lucide-react";
import { MarketingNav } from "@/components/marketing/nav";
import { MarketingFooter } from "@/components/marketing/footer";

const tiers = [
  {
    name: "Free",
    price: "$0",
    period: "forever",
    description: "Perfect for trying Echo with your team.",
    cards: "50 cards/month",
    features: [
      "AI-powered OCR extraction",
      "Web upload (PDF, JPEG, PNG)",
      "2 team members",
      "1 location",
      "CSV export",
      "Community support",
    ],
    cta: "Get Started Free",
    ctaHref: "/signup",
    highlighted: false,
  },
  {
    name: "Starter",
    price: "$29",
    period: "/month",
    annualPrice: "$24",
    description: "For churches ready to automate their guest workflow.",
    cards: "250 cards/month",
    features: [
      "Everything in Free, plus:",
      "Email & FTP scanner integration",
      "5 team members",
      "Collection day management",
      "Google Sheets integration",
      "Webhook support",
      "Email support",
    ],
    cta: "Start 14-Day Trial",
    ctaHref: "/signup?plan=starter",
    highlighted: false,
  },
  {
    name: "Growth",
    price: "$79",
    period: "/month",
    annualPrice: "$66",
    description: "Full integration power for growing congregations.",
    cards: "1,000 cards/month",
    features: [
      "Everything in Starter, plus:",
      "Planning Center sync",
      "Monday.com & Airtable",
      "15 team members",
      "3 locations",
      "Auto-assign to events",
      "API access",
      "Priority support",
    ],
    cta: "Start 14-Day Trial",
    ctaHref: "/signup?plan=growth",
    highlighted: true,
  },
  {
    name: "Enterprise",
    price: "Custom",
    period: "",
    description: "For multi-site churches and denominations.",
    cards: "Unlimited cards",
    features: [
      "Everything in Growth, plus:",
      "Unlimited team members",
      "Unlimited locations",
      "SSO / SAML authentication",
      "Custom integrations",
      "Dedicated account manager",
      "99.9% uptime SLA",
      "Self-hosted deployment option",
    ],
    cta: "Contact Sales",
    ctaHref: "mailto:sales@echoocr.com",
    highlighted: false,
  },
];

const comparisonRows = [
  { feature: "Cards per month", free: "50", starter: "250", growth: "1,000", enterprise: "Unlimited" },
  { feature: "Team members", free: "2", starter: "5", growth: "15", enterprise: "Unlimited" },
  { feature: "Locations", free: "1", starter: "1", growth: "3", enterprise: "Unlimited" },
  { feature: "AI-powered OCR", free: true, starter: true, growth: true, enterprise: true },
  { feature: "Web upload", free: true, starter: true, growth: true, enterprise: true },
  { feature: "Email scanning", free: false, starter: true, growth: true, enterprise: true },
  { feature: "FTP scanning", free: false, starter: true, growth: true, enterprise: true },
  { feature: "Collection days", free: false, starter: true, growth: true, enterprise: true },
  { feature: "CSV export", free: true, starter: true, growth: true, enterprise: true },
  { feature: "Google Sheets", free: false, starter: true, growth: true, enterprise: true },
  { feature: "Webhooks", free: false, starter: true, growth: true, enterprise: true },
  { feature: "Planning Center", free: false, starter: false, growth: true, enterprise: true },
  { feature: "Monday.com", free: false, starter: false, growth: true, enterprise: true },
  { feature: "Airtable", free: false, starter: false, growth: true, enterprise: true },
  { feature: "Auto-assign to events", free: false, starter: false, growth: true, enterprise: true },
  { feature: "API access", free: false, starter: false, growth: true, enterprise: true },
  { feature: "SSO / SAML", free: false, starter: false, growth: false, enterprise: true },
  { feature: "Custom integrations", free: false, starter: false, growth: false, enterprise: true },
  { feature: "Self-hosted option", free: false, starter: false, growth: false, enterprise: true },
  { feature: "Dedicated account manager", free: false, starter: false, growth: false, enterprise: true },
  { feature: "Uptime SLA", free: false, starter: false, growth: false, enterprise: true },
];

function CellValue({ value }: { value: boolean | string }) {
  if (typeof value === "string") {
    return <span className="text-sm font-medium">{value}</span>;
  }
  return value ? (
    <Check className="h-4 w-4 text-primary mx-auto" />
  ) : (
    <span className="text-muted-foreground/30">&mdash;</span>
  );
}

export default function PricingPage() {
  const [annual, setAnnual] = useState(false);

  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">
            Simple, transparent{" "}
            <span className="bg-gradient-to-r from-primary via-foreground to-primary bg-clip-text text-transparent">
              pricing.
            </span>
          </h1>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed mb-8">
            Start free. Upgrade when you&rsquo;re ready. Every plan saves your team
            hours of manual data entry every single week.
          </p>
          <div className="inline-flex items-center gap-3 rounded-full border border-border/60 bg-card/60 p-1 glass">
            <button
              onClick={() => setAnnual(false)}
              className={`rounded-full px-5 py-2 text-sm font-medium transition-all ${
                !annual
                  ? "bg-primary text-primary-foreground shadow-sm"
                  : "text-muted-foreground hover:text-foreground"
              }`}
            >
              Monthly
            </button>
            <button
              onClick={() => setAnnual(true)}
              className={`rounded-full px-5 py-2 text-sm font-medium transition-all ${
                annual
                  ? "bg-primary text-primary-foreground shadow-sm"
                  : "text-muted-foreground hover:text-foreground"
              }`}
            >
              Annual
              <span className="ml-1.5 text-xs opacity-80">Save 17%</span>
            </button>
          </div>
        </div>
      </section>

      <section className="pb-16">
        <div className="mx-auto max-w-6xl px-6">
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
            {tiers.map((tier) => (
              <div
                key={tier.name}
                className={`rounded-2xl p-6 flex flex-col ${
                  tier.highlighted
                    ? "glass-card ring-2 ring-primary/30 shadow-xl scale-[1.02]"
                    : "glass-card"
                }`}
              >
                {tier.highlighted && (
                  <div className="text-[10px] font-bold uppercase tracking-wider text-primary mb-4">
                    Most Popular
                  </div>
                )}
                <h3 className="text-lg font-semibold">{tier.name}</h3>
                <div className="mt-3 mb-1">
                  <span className="text-3xl font-bold">
                    {annual && tier.annualPrice ? tier.annualPrice : tier.price}
                  </span>
                  {tier.period && (
                    <span className="text-sm text-muted-foreground ml-1">
                      {tier.period}
                    </span>
                  )}
                </div>
                {annual && tier.annualPrice && (
                  <div className="text-xs text-muted-foreground mb-3">
                    Billed annually ({tier.annualPrice === "$24" ? "$288" : "$792"}/year)
                  </div>
                )}
                <p className="text-sm text-muted-foreground mb-4">
                  {tier.description}
                </p>
                <div className="text-sm font-semibold text-foreground mb-4 pb-4 border-b border-border/40">
                  {tier.cards}
                </div>
                <ul className="space-y-3 mb-8 flex-1">
                  {tier.features.map((feature) => (
                    <li key={feature} className="flex items-start gap-2.5 text-sm">
                      <Check className="h-4 w-4 text-primary mt-0.5 shrink-0" />
                      <span className="text-muted-foreground">{feature}</span>
                    </li>
                  ))}
                </ul>
                <Link
                  href={tier.ctaHref}
                  className={`block text-center rounded-lg py-2.5 text-sm font-semibold transition-all ${
                    tier.highlighted
                      ? "bg-primary text-primary-foreground shadow-sm hover:opacity-90"
                      : "border border-border/60 bg-card/60 text-foreground hover:bg-accent/40"
                  }`}
                >
                  {tier.cta}
                </Link>
              </div>
            ))}
          </div>
          <p className="text-center text-xs text-muted-foreground mt-8">
            All paid plans include a 14-day free trial. No credit card required to
            start. Need more cards? Overage billed at $0.08/card.
          </p>
        </div>
      </section>

      <section className="py-16">
        <div className="mx-auto max-w-5xl px-6">
          <h2 className="text-2xl font-bold tracking-tight text-center mb-10">
            Compare plans
          </h2>
          <div className="glass-card rounded-2xl overflow-hidden">
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-border/40">
                    <th className="text-left p-4 font-semibold w-[200px]">Feature</th>
                    <th className="text-center p-4 font-semibold">Free</th>
                    <th className="text-center p-4 font-semibold">Starter</th>
                    <th className="text-center p-4 font-semibold bg-primary/5">Growth</th>
                    <th className="text-center p-4 font-semibold">Enterprise</th>
                  </tr>
                </thead>
                <tbody>
                  {comparisonRows.map((row) => (
                    <tr key={row.feature} className="border-b border-border/20 last:border-0">
                      <td className="p-4 text-muted-foreground">{row.feature}</td>
                      <td className="p-4 text-center"><CellValue value={row.free} /></td>
                      <td className="p-4 text-center"><CellValue value={row.starter} /></td>
                      <td className="p-4 text-center bg-primary/5"><CellValue value={row.growth} /></td>
                      <td className="p-4 text-center"><CellValue value={row.enterprise} /></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>

      <section className="py-16">
        <div className="mx-auto max-w-3xl px-6">
          <h2 className="text-2xl font-bold tracking-tight text-center mb-10">
            Common questions about pricing
          </h2>
          <div className="space-y-6">
            {[
              {
                q: "What counts as a \"card\"?",
                a: "Each individual response card extracted from your upload counts as one card. A 10-page duplex PDF with 5 card pairs = 5 cards. A single photo of one card = 1 card.",
              },
              {
                q: "What happens if I exceed my monthly limit?",
                a: "We'll never cut you off mid-month. Overage is billed at $0.08 per card at the end of the billing cycle. If you're consistently over, we'll suggest upgrading to save money.",
              },
              {
                q: "Can I change plans at any time?",
                a: "Yes. Upgrade instantly and we'll prorate the difference. Downgrade at the end of your current billing period. No penalties, no contracts.",
              },
              {
                q: "Do you offer nonprofit discounts?",
                a: "Our pricing is already designed to be accessible for churches and nonprofits. If you're a small church with budget constraints, contact us — we're happy to work something out.",
              },
              {
                q: "Is there really no credit card required?",
                a: "Correct. The Free plan is fully functional with no credit card. Paid plan trials also start without payment — we only ask for billing info when you're ready to continue after the trial.",
              },
            ].map((faq) => (
              <div key={faq.q} className="glass-card rounded-xl p-6">
                <div className="flex items-start gap-3">
                  <HelpCircle className="h-5 w-5 text-primary mt-0.5 shrink-0" />
                  <div>
                    <h3 className="font-semibold text-sm mb-2">{faq.q}</h3>
                    <p className="text-sm text-muted-foreground leading-relaxed">{faq.a}</p>
                  </div>
                </div>
              </div>
            ))}
          </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 give your team Sunday evenings back?
            </h2>
            <p className="text-muted-foreground text-lg mb-8 max-w-xl mx-auto">
              Start free. No credit card. No commitment.
            </p>
            <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>
          </div>
        </div>
      </section>

      <MarketingFooter />
    </div>
  );
}