'use client';

import React, { useState } from 'react';
import {
  Building2,
  Bell,
  Search,
  MapPin,
  Users,
  Database,
  Sparkles,
  Filter,
  Download,
  CheckCircle2,
  Clock,
  TrendingUp,
  FileText,
  Globe
} from 'lucide-react';

export default function LeadsPage() {
  const [email, setEmail] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (email) {
      setSubmitted(true);
      setEmail('');
    }
  };

  const upcomingFeatures = [
    { icon: Search, title: 'Property Search', description: 'Find properties by type, size, location, sale history, and ownership structure' },
    { icon: Users, title: 'Owner Discovery', description: 'Uncover property owners with contact information and entity details' },
    { icon: Database, title: 'Data Enrichment', description: 'Enhance your existing contacts with verified emails, phones, and social profiles' },
    { icon: Filter, title: 'Smart Filters', description: 'Build custom filters to find exactly the properties and owners you need' },
    { icon: MapPin, title: 'Market Mapping', description: 'Visualize opportunities on an interactive map with property overlays' },
    { icon: Download, title: 'List Export', description: 'Export curated lead lists directly to your pipeline or CSV' },
  ];

  const dataPoints = [
    'Property ownership records',
    'Transaction history',
    'Building permits',
    'Lien & debt information',
    'Zoning data',
    'Tenant information',
  ];

  return (
    <div className="space-y-8">
      {/* Hero Section */}
      <div className="clay-card shadow-lg border border-border/50 max-w-4xl mx-auto text-center p-8 lg:p-12 mb-8">
        {/* Animated Icon Stack */}
        <div className="relative w-24 h-24 mx-auto mb-8">
          <div className="absolute inset-0 clay-icon-btn !rounded-2xl w-24 h-24 flex items-center justify-center">
            <Building2 className="w-12 h-12 text-primary" />
          </div>
          <div className="absolute -top-2 -right-2 w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center border border-blue-200 shadow-sm">
            <Search className="w-4 h-4 text-blue-600" />
          </div>
          <div className="absolute -bottom-2 -left-2 w-8 h-8 bg-violet-100 rounded-lg flex items-center justify-center border border-violet-200 shadow-sm">
            <Sparkles className="w-4 h-4 text-violet-600" />
          </div>
        </div>

        {/* Badge */}
        <div className="inline-flex items-center gap-2 px-4 py-1.5 bg-primary/10 text-primary rounded-full text-sm font-medium mb-6">
          <Clock className="w-4 h-4" />
          Coming Q1 2026
        </div>

        <h1 className="text-3xl lg:text-4xl font-bold text-foreground mb-4">
          Lead Generation & Prospecting
        </h1>
        <p className="text-lg text-slate-500 mb-4 max-w-2xl mx-auto leading-relaxed">
          Discover high-potential properties and owners in your target markets.
          Powered by comprehensive property data, find your next deal before the competition.
        </p>
        <p className="text-slate-500 mb-8 max-w-xl mx-auto">
          Search millions of commercial properties, identify motivated sellers,
          and enrich your contacts with verified owner information and contact details.
        </p>

        {/* Email Signup */}
        {!submitted ? (
          <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-3 max-w-md mx-auto mb-4">
            <input
              type="email"
              placeholder="Enter your email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="flex-1 px-4 py-3 rounded-xl border border-border bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50"
              required
            />
            <button type="submit" className="clay-btn-primary px-6 py-3 font-medium inline-flex items-center justify-center gap-2">
              <Bell className="w-4 h-4" />
              Notify Me
            </button>
          </form>
        ) : (
          <div className="flex items-center justify-center gap-2 text-emerald-600 bg-emerald-50 px-6 py-3 rounded-xl max-w-md mx-auto mb-4">
            <CheckCircle2 className="w-5 h-5" />
            <span className="font-medium">You&apos;re on the list! We&apos;ll notify you when it&apos;s ready.</span>
          </div>
        )}
        <p className="text-sm text-slate-500">
          Get early access when leads launch. No spam, just updates.
        </p>
      </div>

      {/* Features Preview */}
      <div className="max-w-4xl mx-auto">
        <h2 className="text-xl font-semibold text-foreground text-center mb-6">
          What&apos;s Coming
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {upcomingFeatures.map((feature, index) => (
            <div
              key={index}
              className="clay-card p-5 opacity-75 border border-dashed border-border/70"
            >
              <div className="w-10 h-10 bg-muted rounded-lg flex items-center justify-center mb-3">
                <feature.icon className="w-5 h-5 text-muted-foreground" />
              </div>
              <h3 className="font-medium text-foreground mb-1">{feature.title}</h3>
              <p className="text-sm text-slate-500">{feature.description}</p>
            </div>
          ))}
        </div>

        {/* Search Interface Preview (Disabled/Grayed) */}
        <div className="clay-card p-6 mt-8 opacity-50 pointer-events-none select-none border border-dashed border-border">
          <div className="flex items-center gap-2 mb-4 text-muted-foreground">
            <Search className="w-5 h-5" />
            <span className="font-medium">Lead Search Preview</span>
            <span className="ml-auto text-xs bg-muted px-2 py-1 rounded">Coming Soon</span>
          </div>

          {/* Search Bar */}
          <div className="flex gap-3 mb-6">
            <div className="flex-1 h-12 bg-muted/50 rounded-xl border border-muted-foreground/20 flex items-center px-4">
              <Search className="w-5 h-5 text-muted-foreground/40 mr-3" />
              <span className="text-muted-foreground/40">Search properties, owners, or addresses...</span>
            </div>
            <div className="h-12 px-4 bg-muted/50 rounded-xl border border-muted-foreground/20 flex items-center gap-2">
              <Filter className="w-4 h-4 text-muted-foreground/40" />
              <span className="text-muted-foreground/40">Filters</span>
            </div>
          </div>

          {/* Results Preview */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {[1, 2].map((i) => (
              <div key={i} className="bg-muted/30 rounded-xl p-4 border border-muted-foreground/10">
                <div className="flex items-start gap-3">
                  <div className="w-12 h-12 bg-muted/50 rounded-lg flex items-center justify-center">
                    <Building2 className="w-6 h-6 text-muted-foreground/30" />
                  </div>
                  <div className="flex-1">
                    <div className="h-4 w-32 bg-muted/50 rounded mb-2" />
                    <div className="h-3 w-48 bg-muted/50 rounded mb-2" />
                    <div className="flex gap-2">
                      <div className="h-3 w-16 bg-muted/50 rounded" />
                      <div className="h-3 w-20 bg-muted/50 rounded" />
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Data Points */}
        <div className="clay-card p-6 mt-6">
          <div className="flex items-center gap-2 mb-4">
            <Database className="w-5 h-5 text-primary" />
            <h3 className="font-semibold text-foreground">Data You&apos;ll Access</h3>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
            {dataPoints.map((point, index) => (
              <div key={index} className="flex items-center gap-2 text-sm text-slate-500">
                <CheckCircle2 className="w-4 h-4 text-emerald-500" />
                {point}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}