import Image from "next/image";
import Link from "next/link";
import { ContactSection } from "../../components/contact-section";
import { DemoCta } from "../../components/demo-cta";
import { FaqSection } from "../../components/faq-section";
import { PageSchema } from "../../components/page-schema";
import { SiteFooter } from "../../components/site-footer";
import { SiteHeader } from "../../components/site-header";
import { defaultFaqs } from "../../data/faq";
import { siteInfo } from "../../data/site";

export const metadata = {
  title: "Pricing",
  description:
    "LedgerOne pricing: first two connected accounts are free. Unlimited accounts are $9 per month.",
  keywords: siteInfo.keywords
};

const plans = [
  {
    name: "Starter",
    price: "Free",
    tagline: "Best for getting your first ledger online.",
    badge: "2 accounts",
    features: [
      "First two connected accounts",
      "Unlimited exports",
      "Rule engine access",
      "Audit logs included"
    ],
    cta: "Start free",
    primary: false
  },
  {
    name: "Unlimited",
    price: "$9",
    tagline: "Scale your ledger without limits.",
    badge: "Unlimited accounts",
    features: [
      "Unlimited connected accounts",
      "Priority sync cadence",
      "Advanced rule automation",
      "Team-ready exports"
    ],
    cta: "Choose Unlimited",
    primary: true
  }
];

const comparisons = [
  { label: "Connected accounts", starter: "2", pro: "Unlimited" },
  { label: "Exports", starter: "Unlimited", pro: "Unlimited" },
  { label: "Rule engine", starter: "Core rules", pro: "Advanced rules" },
  { label: "Audit logs", starter: "Included", pro: "Included" },
  { label: "Support", starter: "Standard", pro: "Priority" }
];

export default function PricingPage() {
  const schema = [
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      name: "LedgerOne Pricing",
      description:
        "LedgerOne pricing: first two connected accounts are free. Unlimited accounts are $9 per month.",
      url: `${siteInfo.url}/pricing`
    },
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      mainEntity: defaultFaqs.map((item) => ({
        "@type": "Question",
        name: item.question,
        acceptedAnswer: { "@type": "Answer", text: item.answer }
      }))
    }
  ];

  return (
    <div className="min-h-screen bg-background font-sans text-foreground flex flex-col">
      <SiteHeader />

      <main className="flex-1 pt-32 pb-24 relative overflow-hidden">
        <div className="absolute inset-0 mesh-gradient -z-10 opacity-40" />

        <div className="max-w-7xl mx-auto px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16 animate-slide-up">
            <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
              Simple, transparent pricing.
            </h1>
            <p className="mt-6 text-lg text-muted-foreground">
              Start with the essentials and upgrade only when you need more accounts.
              Both plans include unlimited exports and audit logs.
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            {plans.map((plan) => (
              <div
                key={plan.name}
                className={`rounded-2xl p-8 border transition-all ${plan.primary
                    ? "border-primary bg-background shadow-glow-teal ring-1 ring-primary"
                    : "border-border bg-background/50 shadow-sm hover:shadow-md glass-panel"
                  }`}
              >
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-semibold text-foreground">{plan.name}</h3>
                  {plan.primary && (
                    <span className="inline-flex items-center rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
                      Most Popular
                    </span>
                  )}
                </div>
                <div className="mt-4 flex items-baseline text-foreground">
                  <span className="text-4xl font-bold tracking-tight">{plan.price}</span>
                  {plan.price !== "Free" && <span className="ml-1 text-xl font-semibold text-muted-foreground">/month</span>}
                </div>
                <p className="mt-2 text-sm text-muted-foreground">{plan.tagline}</p>

                <ul className="mt-8 space-y-4">
                  {plan.features.map((feature) => (
                    <li key={feature} className="flex items-start">
                      <div className="flex-shrink-0">
                        <svg className="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                        </svg>
                      </div>
                      <p className="ml-3 text-sm text-muted-foreground">{feature}</p>
                    </li>
                  ))}
                </ul>

                <Link
                  href="/register"
                  className={`mt-8 block w-full rounded-lg px-4 py-3 text-center text-sm font-semibold shadow-sm transition-all hover:-translate-y-0.5 ${plan.primary
                      ? "bg-primary text-primary-foreground hover:bg-primary/90"
                      : "bg-background text-primary ring-1 ring-inset ring-primary/20 hover:ring-primary/40"
                    }`}
                >
                  {plan.cta}
                </Link>
              </div>
            ))}
          </div>

          <div className="mt-24 max-w-4xl mx-auto glass-panel rounded-xl p-1">
            <div className="px-6 py-4 border-b border-border">
              <h2 className="text-xl font-bold text-foreground">Compare plans</h2>
            </div>
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-border">
                <thead className="bg-secondary/30">
                  <tr>
                    <th scope="col" className="px-6 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Feature</th>
                    <th scope="col" className="px-6 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Starter</th>
                    <th scope="col" className="px-6 py-4 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Unlimited</th>
                  </tr>
                </thead>
                <tbody className="bg-background divide-y divide-border">
                  {comparisons.map((item) => (
                    <tr key={item.label}>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">{item.label}</td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">{item.starter}</td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">{item.pro}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </main>

      <SiteFooter />
      <PageSchema schema={schema} />
    </div>
  );
}