import { Link } from 'react-router-dom';
import {
  BarChart3,
  Shield,
  Users,
  TrendingUp,
  ArrowRight,
  ScanSearch,
  Target,
  ChevronRight,
  CheckCircle2,
  LineChart,
  DollarSign,
} from 'lucide-react';
import { useAuth } from '../contexts/AuthContext';
import logo from '../assets/logo.png';

const features = [
  {
    icon: BarChart3,
    title: 'Analytics you can brief a board on',
    description:
      'Engagement, reach, and audience breakdowns pulled through the official Instagram Graph API—structured so both sides see the same numbers.',
    span: 'lg:col-span-2 lg:row-span-1',
    accent: 'from-violet-500/10 to-brand-600/5',
  },
  {
    icon: ScanSearch,
    title: 'Matching that reads the brief',
    description:
      'Niche fit, budget alignment, and audience geography scored together—not a single keyword box.',
    span: 'lg:col-span-1',
    accent: 'from-brand-500/10 to-rose-500/5',
  },
  {
    icon: Shield,
    title: 'Discovery without doxxing',
    description:
      'Brands evaluate performance first. Handles and identities unlock only after a collaboration is accepted.',
    span: 'lg:col-span-1',
    accent: 'from-slate-500/10 to-brand-600/5',
  },
  {
    icon: Target,
    title: 'Pricing signals, not guesswork',
    description:
      'Estimated rate bands and budget-fit scoring help you open conversations in a realistic range.',
    span: 'lg:col-span-2',
    accent: 'from-emerald-500/10 to-brand-600/5',
  },
] as const;

const steps = [
  {
    step: '01',
    title: 'Connect',
    desc: 'Creators link a professional Instagram account. We pull insights through Meta’s APIs—no scraping, no shortcuts.',
  },
  {
    step: '02',
    title: 'Discover',
    desc: 'You describe the campaign and who should see it. Our models rank creators on fit, not just follower count.',
  },
  {
    step: '03',
    title: 'Collaborate',
    desc: 'Requests go out in-product. When someone accepts, both sides get full context to move fast.',
  },
] as const;

export default function Landing() {
  const { isAuthenticated, user } = useAuth();

  const dashboardLink = user?.is_influencer
    ? '/influencer/dashboard'
    : user?.is_business
      ? '/business/dashboard'
      : '/register';

  return (
    <div className="min-h-screen bg-[#fafaf9] text-[#0c0a09] antialiased [font-feature-settings:'ss01','cv02']">
      <style>{`
        @keyframes landing-shimmer {
          0%, 100% { opacity: 0.35; transform: translate(0, 0) scale(1); }
          50% { opacity: 0.55; transform: translate(2%, -1%) scale(1.02); }
        }
        @keyframes landing-drift {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-6px); }
        }
        .landing-mesh {
          background:
            radial-gradient(ellipse 80% 50% at 70% -10%, rgba(136, 24, 77, 0.14), transparent),
            radial-gradient(ellipse 60% 40% at 0% 50%, rgba(124, 58, 237, 0.08), transparent),
            radial-gradient(ellipse 50% 30% at 100% 80%, rgba(136, 24, 77, 0.06), transparent);
        }
        .landing-grid-bg {
          background-image:
            linear-gradient(rgba(12, 10, 9, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(12, 10, 9, 0.03) 1px, transparent 1px);
          background-size: 48px 48px;
        }
        .landing-shimmer-blob {
          animation: landing-shimmer 14s ease-in-out infinite;
        }
        .landing-card-float {
          animation: landing-drift 5s ease-in-out infinite;
        }
      `}</style>

      {/* Nav */}
      <header className="sticky top-0 z-50 border-b border-stone-200/80 bg-[#fafaf9]/80 backdrop-blur-md">
        <div className="mx-auto flex max-w-6xl items-center justify-between px-5 py-4 md:px-8">
          <Link to="/" className="flex items-center gap-2.5">
            <img src={logo} alt="Sync" className="h-9 w-auto" />
            <span className="hidden text-sm font-semibold tracking-tight text-stone-800 sm:inline">
              Sync
            </span>
          </Link>
          <nav className="flex items-center gap-1 sm:gap-2">
            {isAuthenticated ? (
              <Link
                to={dashboardLink}
                className="inline-flex items-center gap-2 rounded-full bg-brand-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition hover:bg-brand-700"
              >
                Open dashboard
                <ArrowRight className="h-4 w-4" strokeWidth={2} />
              </Link>
            ) : (
              <>
                <Link
                  to="/login"
                  className="rounded-full px-4 py-2 text-sm font-medium text-stone-600 transition hover:text-stone-900"
                >
                  Sign in
                </Link>
                <Link
                  to="/register"
                  className="inline-flex items-center gap-2 rounded-full bg-brand-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition hover:bg-brand-700"
                >
                  Get started
                  <ArrowRight className="h-4 w-4" strokeWidth={2} />
                </Link>
              </>
            )}
          </nav>
        </div>
      </header>

      {/* Hero */}
      <section className="relative overflow-hidden border-b border-stone-200/60 landing-mesh">
        <div className="pointer-events-none absolute inset-0 landing-grid-bg opacity-40" />
        <div className="pointer-events-none absolute -right-32 top-20 h-96 w-96 rounded-full bg-brand-600/10 blur-3xl landing-shimmer-blob" />
        <div className="relative mx-auto max-w-6xl px-5 pb-20 pt-16 md:px-8 md:pb-28 md:pt-20 lg:pb-32">
          <div className="grid items-center gap-14 lg:grid-cols-[1.05fr_0.95fr] lg:gap-12">
            <div>
              <p className="mb-6 inline-flex items-center gap-2 rounded-full border border-stone-200/90 bg-white/90 px-3.5 py-1.5 text-xs font-medium uppercase tracking-[0.12em] text-stone-500 shadow-sm">
                <span className="text-brand-600">Influencer infrastructure</span>
                <span className="text-stone-300">·</span>
                <span>Instagram-native</span>
              </p>
              <h1 className="font-serif text-[2.35rem] font-medium leading-[1.08] tracking-tight text-stone-900 sm:text-5xl lg:text-[3.25rem]">
                Partnerships that close—
                <span className="block text-brand-700">without the spreadsheet chaos.</span>
              </h1>
              <p className="mt-6 max-w-xl text-lg leading-relaxed text-stone-600">
                Sync is the operating layer for brand–creator work: verified performance data,
                AI-assisted matching, and a collaboration flow that respects both sides’ time.
              </p>
              <div className="mt-10 flex flex-col gap-3 sm:flex-row sm:items-center">
                <Link
                  to="/register"
                  className="inline-flex items-center justify-center gap-2 rounded-full bg-brand-600 px-7 py-3.5 text-sm font-semibold text-white shadow-md shadow-brand-600/20 transition hover:bg-brand-700"
                >
                  <Users className="h-4 w-4" strokeWidth={2} />
                  I&apos;m a creator
                </Link>
                <Link
                  to="/register"
                  className="inline-flex items-center justify-center gap-2 rounded-full border border-stone-300 bg-white px-7 py-3.5 text-sm font-semibold text-stone-800 shadow-sm transition hover:border-stone-400 hover:bg-stone-50"
                >
                  <TrendingUp className="h-4 w-4" strokeWidth={2} />
                  I&apos;m a business
                </Link>
              </div>
              <div className="mt-12 flex flex-wrap items-center gap-x-6 gap-y-2 border-t border-stone-200/80 pt-8 text-sm text-stone-500">
                <span className="flex items-center gap-2 font-medium text-stone-700">
                  <CheckCircle2 className="h-4 w-4 text-emerald-600" strokeWidth={2} />
                  Meta Graph API
                </span>
                <span className="hidden h-4 w-px bg-stone-200 sm:block" />
                <span>Structured workflows for matching, pricing context, and collaboration requests</span>
              </div>
            </div>

            {/* Abstract product visual — CSS only */}
            <div className="relative mx-auto w-full max-w-md lg:mx-0 lg:max-w-none">
              <div className="relative rounded-2xl border border-stone-200/90 bg-white p-1 shadow-xl shadow-stone-900/[0.06] landing-card-float">
                <div className="overflow-hidden rounded-[0.9rem] bg-gradient-to-br from-stone-50 to-white p-6">
                  <div className="mb-4 flex items-center justify-between">
                    <span className="text-xs font-semibold uppercase tracking-wider text-stone-400">
                      Match preview
                    </span>
                    <span className="rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-medium text-emerald-700">
                      Score breakdown
                    </span>
                  </div>
                  <div className="space-y-3">
                    <div className="flex items-center gap-3 rounded-xl border border-stone-100 bg-white p-3 shadow-sm">
                      <div className="flex h-10 w-10 items-center justify-center rounded-lg border border-stone-100 bg-white text-brand-600">
                        <LineChart className="h-5 w-5" strokeWidth={2} />
                      </div>
                      <div className="min-w-0 flex-1">
                        <p className="truncate text-sm font-semibold text-stone-800">
                          Niche &amp; audience fit
                        </p>
                        <p className="text-xs text-stone-500">Weighted against your brief</p>
                      </div>
                      <span className="text-sm font-bold text-brand-600">94%</span>
                    </div>
                    <div className="flex items-center gap-3 rounded-xl border border-stone-100 bg-white p-3 shadow-sm">
                      <div className="flex h-10 w-10 items-center justify-center rounded-lg border border-stone-100 bg-white text-emerald-600">
                        <DollarSign className="h-5 w-5" strokeWidth={2} />
                      </div>
                      <div className="min-w-0 flex-1">
                        <p className="truncate text-sm font-semibold text-stone-800">
                          Budget alignment
                        </p>
                        <p className="text-xs text-stone-500">Estimated band vs. your range</p>
                      </div>
                      <span className="text-sm font-bold text-emerald-600">88%</span>
                    </div>
                    <div className="rounded-xl border border-dashed border-stone-200 bg-stone-50/80 p-4 text-center text-xs text-stone-500">
                      + Geography &amp; engagement signals in full match
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Features — bento */}
      <section className="mx-auto max-w-6xl px-5 py-24 md:px-8">
        <div className="mb-16 max-w-2xl">
          <p className="mb-3 text-xs font-semibold uppercase tracking-[0.2em] text-brand-600">
            Platform
          </p>
          <h2 className="font-serif text-3xl font-medium tracking-tight text-stone-900 md:text-4xl">
            One surface for discovery, diligence, and handoff.
          </h2>
          <p className="mt-4 text-lg text-stone-600">
            Profiles, AI-assisted ranking, and in-app collaboration requests—so both sides work from the same data model.
          </p>
        </div>
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 lg:gap-5 lg:auto-rows-fr">
          {features.map((feature) => {
            const Icon = feature.icon;
            return (
              <div
                key={feature.title}
                className={`group relative overflow-hidden rounded-2xl border border-stone-200/90 bg-white p-8 shadow-sm transition hover:border-stone-300 hover:shadow-md ${feature.span}`}
              >
                <div
                  className={`pointer-events-none absolute -right-20 -top-20 h-48 w-48 rounded-full bg-gradient-to-br ${feature.accent} opacity-80 blur-2xl transition group-hover:opacity-100`}
                />
                <div className="relative">
                  <div className="mb-5 flex h-11 w-11 items-center justify-center rounded-xl border border-brand-100 bg-brand-50 text-brand-600 shadow-sm">
                    <Icon className="h-5 w-5" strokeWidth={2} />
                  </div>
                  <h3 className="text-lg font-semibold tracking-tight text-stone-900">
                    {feature.title}
                  </h3>
                  <p className="mt-3 text-sm leading-relaxed text-stone-600">
                    {feature.description}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </section>

      {/* How it works */}
      <section className="border-y border-stone-200/60 bg-stone-100/40 py-24">
        <div className="mx-auto max-w-6xl px-5 md:px-8">
          <div className="mb-16 text-center">
            <h2 className="font-serif text-3xl font-medium tracking-tight text-stone-900 md:text-4xl">
              How Sync works
            </h2>
            <p className="mx-auto mt-4 max-w-lg text-stone-600">
              Connect Instagram, run a match from your brief and budget, then send and track collaboration requests in one place.
            </p>
          </div>
          <div className="grid gap-8 md:grid-cols-3 md:gap-6">
            {steps.map((item) => (
              <div
                key={item.step}
                className="rounded-2xl border border-stone-200/80 bg-white p-8 shadow-sm"
              >
                <span className="font-mono text-sm font-medium text-brand-600">{item.step}</span>
                <h3 className="mt-3 text-xl font-semibold text-stone-900">{item.title}</h3>
                <p className="mt-3 text-sm leading-relaxed text-stone-600">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="mx-auto max-w-6xl px-5 pb-24 md:px-8">
        <div className="rounded-3xl border border-stone-200 bg-white px-8 py-14 text-center shadow-sm md:py-16">
          <h2 className="font-serif text-2xl font-medium text-stone-900 md:text-3xl">
            Bring your next campaign into focus.
          </h2>
          <p className="mx-auto mt-4 max-w-md text-stone-600">
            Accounts are free to create. Connect Instagram when you&apos;re ready—we&apos;ll guide the setup.
          </p>
          <Link
            to="/register"
            className="mt-8 inline-flex items-center gap-2 rounded-full bg-brand-600 px-8 py-3.5 text-sm font-semibold text-white shadow-md shadow-brand-600/15 transition hover:bg-brand-700"
          >
            Create your workspace
            <ChevronRight className="h-4 w-4" strokeWidth={2} />
          </Link>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-stone-200 bg-white">
        <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 px-5 py-10 md:flex-row md:px-8">
          <div className="flex items-center gap-2">
            <img src={logo} alt="Sync" className="h-7 w-auto opacity-90" />
            <span className="text-sm font-medium text-stone-700">Sync</span>
          </div>
          <p className="text-center text-xs text-stone-400 md:text-right">
            © {new Date().getFullYear()} Sync. All rights reserved.
          </p>
        </div>
      </footer>
    </div>
  );
}
