"use client";

import Link from "next/link";
import { ArrowRight, type LucideIcon } from "lucide-react";
import { MarketingNav } from "./nav";
import { MarketingFooter } from "./footer";

interface FeaturePageShellProps {
  badge: string;
  badgeIcon: LucideIcon;
  title: string;
  titleAccent: string;
  subtitle: string;
  children: React.ReactNode;
}

export function FeaturePageShell({
  badge,
  badgeIcon: BadgeIcon,
  title,
  titleAccent,
  subtitle,
  children,
}: FeaturePageShellProps) {
  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">
          <div className="inline-flex items-center gap-2 rounded-full border border-border/60 bg-card/60 px-4 py-1.5 text-xs font-medium text-muted-foreground mb-8 glass">
            <BadgeIcon className="h-3.5 w-3.5" />
            {badge}
          </div>
          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight leading-[1.1] mb-6">
            {title}{" "}
            <span className="bg-gradient-to-r from-primary via-foreground to-primary bg-clip-text text-transparent">
              {titleAccent}
            </span>
          </h1>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed">
            {subtitle}
          </p>
        </div>
      </section>

      {children}

      <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>
  );
}

interface DetailBlockProps {
  icon: LucideIcon;
  title: string;
  children: React.ReactNode;
  reversed?: boolean;
}

export function DetailBlock({ icon: Icon, title, children, reversed }: DetailBlockProps) {
  return (
    <div className={`glass-card rounded-2xl p-8 sm:p-10 flex flex-col ${reversed ? "sm:flex-row-reverse" : "sm:flex-row"} gap-8 items-start`}>
      <div className="shrink-0 h-14 w-14 rounded-xl bg-primary/10 flex items-center justify-center">
        <Icon className="h-7 w-7 text-primary" />
      </div>
      <div>
        <h3 className="text-lg font-semibold mb-3">{title}</h3>
        <div className="text-sm text-muted-foreground leading-relaxed space-y-3">
          {children}
        </div>
      </div>
    </div>
  );
}

interface StatRowProps {
  stats: { value: string; label: string }[];
}

export function StatRow({ stats }: StatRowProps) {
  return (
    <div className="glass-card rounded-2xl p-8 sm:p-10">
      <div className={`grid grid-cols-2 ${stats.length > 2 ? "md:grid-cols-" + stats.length : ""} gap-8 text-center`}>
        {stats.map((stat) => (
          <div key={stat.label}>
            <div className="text-3xl sm:text-4xl font-bold text-primary mb-2">{stat.value}</div>
            <div className="text-sm text-muted-foreground">{stat.label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}
