import { Zap, CheckCircle2 } from 'lucide-react';

import { cn } from '@/lib/utils';

interface AiBannerProps {
  freeDrafts?: number;
  proDrafts?: number;
  teamDrafts?: number;
  className?: string;
}

export function AiBanner({
  freeDrafts = 5,
  proDrafts = 30,
  teamDrafts = 200,
  className,
}: AiBannerProps) {
  return (
    <section
      className={cn('bg-slate-900 py-16 text-slate-100', className)}
      aria-labelledby="ai-banner-heading"
    >
      <div className="container">
        <div className="mx-auto max-w-5xl rounded-xl bg-slate-900 px-8 py-12">
          <div className="grid gap-12 lg:grid-cols-2 lg:gap-16">
            {/* Left Side: Text Content */}
            <div className="flex flex-col justify-center">
              <h2
                id="ai-banner-heading"
                className="mb-6 text-3xl font-bold tracking-tight text-slate-100"
              >
                AI drafts included on every plan
              </h2>

              <div className="space-y-4">
                <p className="text-lg leading-relaxed text-slate-300">
                  Every RankWiz plan includes bundled AI draft generation. No API key required.
                </p>
                <p className="text-lg leading-relaxed text-slate-300">
                  Our system generates content rewrites and meta descriptions from your Google
                  Search Console data. It analyzes traffic patterns, CTR gaps, and position changes
                  to surface high-impact improvements.
                </p>

                <p className="text-lg leading-relaxed text-slate-300">
                  Want higher limits? Bring your own OpenAI key for advanced features. You pay
                  OpenAI directly for the tokens you use—we add zero markup. Scale as you grow, pay
                  only for what you need.
                </p>

                {/* Included Drafts Stats */}
                <div className="mt-8 grid grid-cols-3 gap-4 rounded-lg bg-slate-800 p-4">
                  <div className="text-center">
                    <div className="text-2xl font-bold text-blue-400">{freeDrafts}</div>
                    <div className="text-xs text-slate-400">Free drafts/month</div>
                  </div>
                  <div className="text-center">
                    <div className="text-2xl font-bold text-blue-400">{proDrafts}</div>
                    <div className="text-xs text-slate-400">Pro drafts/month</div>
                  </div>
                  <div className="text-center">
                    <div className="text-2xl font-bold text-blue-400">{teamDrafts}</div>
                    <div className="text-xs text-slate-400">Team drafts/month</div>
                  </div>
                </div>
              </div>
            </div>

            {/* Right Side: AI Draft Card Mock */}
            <div className="flex items-center justify-center">
              <div className="w-full rounded-lg border border-slate-700 bg-slate-800 p-6 shadow-lg">
                {/* Draft Header */}
                <div className="mb-4 flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Zap className="h-4 w-4 text-amber-400" aria-hidden="true" />
                    <span className="text-xs font-semibold text-slate-400">AI DRAFT — GPT-4o</span>
                  </div>
                  <div className="flex items-center gap-1 rounded-full bg-green-900 px-2 py-1">
                    <CheckCircle2 className="h-3 w-3 text-green-400" aria-hidden="true" />
                    <span className="text-xs text-green-300">Generated</span>
                  </div>
                </div>

                {/* Content Preview */}
                <div className="mb-6 space-y-2">
                  <div className="h-4 w-full rounded bg-slate-700" />
                  <div className="h-4 w-5/6 rounded bg-slate-700" />
                  <div className="h-4 w-4/6 rounded bg-slate-700" />
                  <div className="h-4 w-full rounded bg-slate-700" />
                </div>

                {/* Action Buttons */}
                <div className="flex gap-3">
                  <button className="flex-1 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700">
                    Publish to WP
                  </button>
                  <button className="flex-1 rounded-lg border border-slate-600 bg-slate-700 px-4 py-2 text-sm font-medium text-slate-300 transition-colors hover:bg-slate-600">
                    Edit in Editor
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}