"use client";

import {
  FileText, Phone, Flame, Zap, Target, Link2,
  Code2, BarChart3, Sparkles,
} from "lucide-react";

const FEATURES = [
  { icon: FileText, title: "Form Tracking", description: "Track every form submission with full page attribution. Know which pages drive leads.", color: "text-purple-600", bg: "bg-purple-50" },
  { icon: Phone, title: "Phone Click Tracking", description: "Capture every click-to-call with the exact page, phone number, and DOM position (header vs footer vs in-content).", color: "text-blue-600", bg: "bg-blue-50" },
  { icon: Flame, title: "Heatmaps & Scroll Depth", description: "See where users click and how far they scroll. Find out if visitors actually see your CTAs.", color: "text-orange-600", bg: "bg-orange-50" },
  { icon: Zap, title: "Core Web Vitals", description: "Real user performance data — LCP, CLS, INP from actual visitors, not synthetic tests.", color: "text-amber-600", bg: "bg-amber-50" },
  { icon: Target, title: "Conversion Funnel", description: "Visualize the full journey: visitors \u2192 engaged \u2192 saw CTA \u2192 interacted \u2192 converted. Find where you lose them.", color: "text-emerald-600", bg: "bg-emerald-50" },
  { icon: Link2, title: "Multi-Touch Attribution", description: "See how organic, paid, social, and direct traffic work together to drive conversions. First touch, last touch, and assisted.", color: "text-indigo-600", bg: "bg-indigo-50" },
];

const STEPS = [
  { num: "1", title: "Copy the snippet", description: "Add one line of JavaScript to your website" },
  { num: "2", title: "Data starts flowing", description: "Within minutes, behavioral data appears in your dashboard" },
  { num: "3", title: "Get insights", description: "See exactly how visitors interact with your site and what drives conversions" },
];

export function SetupPage() {
  return (
    <div className="max-w-[800px] mx-auto py-12">

      {/* Hero */}
      <div className="text-center mb-12">
        <div className="w-20 h-20 bg-purple-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
          <Code2 className="w-10 h-10 text-purple-600" />
        </div>
        <h1 className="text-3xl font-bold text-slate-900 mb-3">Unlock Machine Enhancing Analytics</h1>
        <p className="text-slate-500 max-w-lg mx-auto leading-relaxed">
          The meSEO Site Tag gives you behavioral data that no other SEO platform can access — directly from your website, not from third-party APIs.
        </p>
      </div>

      {/* Feature cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-12">
        {FEATURES.map((f) => {
          const Icon = f.icon;
          return (
            <div key={f.title} className="bg-white rounded-xl border border-slate-200 p-5 hover:border-slate-300 hover:shadow-sm transition-all">
              <div className={`w-10 h-10 rounded-lg ${f.bg} flex items-center justify-center mb-3`}>
                <Icon className={`w-5 h-5 ${f.color}`} />
              </div>
              <h3 className="text-sm font-bold text-slate-900 mb-1">{f.title}</h3>
              <p className="text-xs text-slate-500 leading-relaxed">{f.description}</p>
            </div>
          );
        })}
      </div>

      {/* How it works */}
      <div className="mb-12">
        <h2 className="text-center text-sm font-bold uppercase tracking-widest text-slate-400 mb-6">How It Works</h2>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
          {STEPS.map((s) => (
            <div key={s.num} className="text-center">
              <div className="w-10 h-10 rounded-full bg-purple-600 text-white text-sm font-bold flex items-center justify-center mx-auto mb-3">
                {s.num}
              </div>
              <h3 className="text-sm font-bold text-slate-900 mb-1">{s.title}</h3>
              <p className="text-xs text-slate-500 leading-relaxed">{s.description}</p>
            </div>
          ))}
        </div>
      </div>

      {/* CTA */}
      <div className="text-center mb-10">
        <a
          href="/site-tag"
          className="inline-flex items-center gap-2 px-8 py-3.5 bg-purple-600 text-white text-sm font-semibold rounded-xl hover:bg-purple-700 transition-colors shadow-lg shadow-purple-600/20"
        >
          <Sparkles className="w-4 h-4" />
          Install Site Tag
        </a>
        <p className="text-xs text-slate-400 mt-3">Takes less than 2 minutes. No impact on site speed.</p>
      </div>

      {/* Differentiator callout */}
      <div className="rounded-xl border border-slate-200 bg-slate-50 px-6 py-5 text-center">
        <BarChart3 className="w-5 h-5 text-slate-400 mx-auto mb-2" />
        <p className="text-sm text-slate-600 leading-relaxed max-w-lg mx-auto">
          meSEO is the only AI SEO platform with Machine Enhancing behavioral data. While other tools rely on Google Analytics sampling and third-party estimates, the Site Tag captures every interaction directly.
        </p>
      </div>

    </div>
  );
}
