import React, { useState } from "react";
import { motion } from "framer-motion";
import { Sparkles, ShieldCheck, Activity, LayoutDashboard, ArrowRight, Menu, X, Star, PhoneCall, Globe2, Languages } from "lucide-react";

/**
 * Modern Responsive Landing Page
 * - Single-file React component
 * - TailwindCSS utility classes
 * - Framer Motion micro-animations
 * - Lucide icons
 * - Glassmorphism + soft gradient accents
 * - Mobile-first, fully responsive
 * - Easy to rebrand: edit brand colors and text below
 */

const nav = [
  { label: "Features", href: "#features" },
  { label: "Why Us", href: "#why" },
  { label: "Showcase", href: "#showcase" },
  { label: "Pricing", href: "#pricing" },
  { label: "Contact", href: "#contact" },
];

const features = [
  {
    icon: <LayoutDashboard className="h-6 w-6" />,
    title: "Adaptive Layouts",
    text: "Grids that adapt from 320px to ultra‑wide screens with elegant spacing and rhythm.",
  },
  {
    icon: <ShieldCheck className="h-6 w-6" />,
    title: "Enterprise‑grade",
    text: "Accessibility‑first, semantic markup, and room for security policies and audits.",
  },
  {
    icon: <Activity className="h-6 w-6" />,
    title: "Performance",
    text: "Lighthouse‑friendly: optimized images, minimal layout shift, and lazy loading hooks.",
  },
  {
    icon: <Globe2 className="h-6 w-6" />,
    title: "International‑ready",
    text: "Bilingual sections and RTL‑safe patterns baked in from the start.",
  },
];

const tiers = [
  { name: "Starter", price: "₹0", desc: "Great for prototypes", items: ["1 Project", "Basic Sections", "Email Support"] },
  { name: "Pro", price: "₹1,999/mo", desc: "For growing teams", items: ["Unlimited Pages", "CMS‑ready Blocks", "Priority Support"] },
  { name: "Enterprise", price: "Talk to us", desc: "Tailored at scale", items: ["Custom Design System", "SLA & SSO", "Onboarding & Training"] },
];

const ShowcaseCard = ({ title, subtitle }: { title: string; subtitle: string }) => (
  <motion.div
    whileHover={{ y: -4 }}
    className="group rounded-2xl bg-white/70 dark:bg-white/5 backdrop-blur-xl border border-black/5 dark:border-white/10 p-5 shadow-sm hover:shadow-md transition-shadow">
    <div className="aspect-video w-full rounded-xl bg-gradient-to-br from-indigo-200 via-violet-200 to-emerald-200 dark:from-indigo-500/30 dark:via-fuchsia-500/20 dark:to-emerald-500/20" />
    <div className="mt-4">
      <h4 className="text-base font-semibold tracking-tight text-gray-900 dark:text-white">{title}</h4>
      <p className="text-sm text-gray-600 dark:text-gray-300">{subtitle}</p>
    </div>
  </motion.div>
);

export default function ModernLanding() {
  const [open, setOpen] = useState(false);

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50 via-white to-slate-50 dark:from-slate-900 dark:via-slate-950 dark:to-slate-900 text-slate-800 dark:text-slate-100">
      {/* Decorative background blobs */}
      <div aria-hidden className="pointer-events-none fixed inset-0 -z-10 overflow-hidden">
        <div className="absolute -top-24 -right-16 h-72 w-72 rounded-full bg-indigo-400/20 blur-3xl" />
        <div className="absolute top-1/3 -left-24 h-80 w-80 rounded-full bg-emerald-400/20 blur-3xl" />
        <div className="absolute bottom-0 right-1/4 h-64 w-64 rounded-full bg-fuchsia-400/10 blur-3xl" />
      </div>

      {/* Header */}
      <header className="sticky top-0 z-40 backdrop-blur-lg bg-white/60 dark:bg-slate-900/40 border-b border-black/5 dark:border-white/10">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex h-16 items-center justify-between">
            <a href="#home" className="flex items-center gap-2">
              <span className="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 to-emerald-500 text-white shadow-sm">
                <Sparkles className="h-5 w-5" />
              </span>
              <span className="font-bold tracking-tight">YourBrand</span>
            </a>

            <nav className="hidden md:flex items-center gap-8 text-sm">
              {nav.map((n) => (
                <a key={n.href} href={n.href} className="text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white transition-colors">
                  {n.label}
                </a>
              ))}
              <a href="#contact" className="inline-flex items-center gap-2 rounded-xl border border-slate-200 dark:border-slate-800 px-3 py-1.5 hover:bg-slate-100 dark:hover:bg-slate-800">
                <PhoneCall className="h-4 w-4" /> Contact
              </a>
            </nav>

            <button className="md:hidden p-2 rounded-lg border border-slate-200 dark:border-slate-800" onClick={() => setOpen(!open)} aria-label="Toggle Menu">
              {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
            </button>
          </div>
        </div>

        {/* Mobile menu */}
        {open && (
          <div className="md:hidden border-t border-black/5 dark:border-white/10">
            <div className="mx-auto max-w-7xl px-4 py-4 space-y-2">
              {nav.map((n) => (
                <a key={n.href} href={n.href} onClick={() => setOpen(false)} className="block rounded-lg px-3 py-2 hover:bg-slate-100 dark:hover:bg-slate-800">
                  {n.label}
                </a>
              ))}
            </div>
          </div>
        )}
      </header>

      {/* Hero */}
      <section id="home" className="relative">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 sm:py-24">
          <div className="grid lg:grid-cols-12 gap-10 items-center">
            <div className="lg:col-span-6">
              <motion.h1
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6 }}
                className="text-4xl sm:text-5xl font-extrabold tracking-tight leading-tight">
                Build fast. Look modern. <span className="bg-gradient-to-r from-indigo-600 to-emerald-500 bg-clip-text text-transparent">Ship confidently.</span>
              </motion.h1>
              <p className="mt-4 text-lg text-slate-600 dark:text-slate-300">
                A unique, responsive design system you can drop into any project. Clean structure, high polish, zero fuss.
              </p>
              <div className="mt-6 flex flex-col sm:flex-row gap-3">
                <a href="#showcase" className="inline-flex items-center justify-center rounded-xl bg-slate-900 text-white px-5 py-3 hover:opacity-95">
                  View Components <ArrowRight className="ml-2 h-4 w-4" />
                </a>
                <a href="#pricing" className="inline-flex items-center justify-center rounded-xl border border-slate-300 dark:border-slate-700 px-5 py-3 hover:bg-slate-100 dark:hover:bg-slate-800">
                  Pricing
                </a>
              </div>
              <div className="mt-8 flex items-center gap-4 text-slate-600 dark:text-slate-400">
                <div className="flex items-center gap-1">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="h-4 w-4 fill-current" />
                  ))}
                </div>
                <span className="text-sm">Loved by designers & developers</span>
              </div>
            </div>

            <div className="lg:col-span-6">
              <motion.div
                initial={{ opacity: 0, scale: 0.98 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.6, delay: 0.1 }}
                className="relative">
                <div className="absolute -inset-4 bg-gradient-to-r from-indigo-500/20 to-emerald-500/20 rounded-3xl blur-2xl" />
                <div className="relative rounded-3xl border border-black/5 dark:border-white/10 bg-white/70 dark:bg-white/5 backdrop-blur-xl p-4 shadow-xl">
                  <div className="aspect-video w-full rounded-2xl bg-slate-200/60 dark:bg-slate-800/60" />
                  <div className="mt-4 grid grid-cols-3 gap-3">
                    {["Hero", "Stats", "Cards"].map((t) => (
                      <div key={t} className="rounded-xl border border-slate-200 dark:border-slate-800 p-3 text-center text-sm">{t}</div>
                    ))}
                  </div>
                </div>
              </motion.div>
            </div>
          </div>
        </div>
      </section>

      {/* Feature grid */}
      <section id="features" className="py-16 sm:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="max-w-2xl">
            <h2 className="text-2xl sm:text-3xl font-bold tracking-tight">Beautifully responsive, by design</h2>
            <p className="mt-3 text-slate-600 dark:text-slate-300">Each section is a composable block with sensible defaults and room to scale.</p>
          </div>

          <div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {features.map((f) => (
              <motion.div key={f.title} whileHover={{ y: -4 }} className="rounded-2xl border border-black/5 dark:border-white/10 bg-white/60 dark:bg-white/5 backdrop-blur-xl p-5">
                <div className="inline-flex items-center justify-center h-10 w-10 rounded-xl bg-gradient-to-br from-indigo-500 to-emerald-500 text-white shadow-sm">
                  {f.icon}
                </div>
                <h3 className="mt-4 font-semibold">{f.title}</h3>
                <p className="mt-1 text-sm text-slate-600 dark:text-slate-300">{f.text}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Why section */}
      <section id="why" className="py-16 sm:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid gap-10 lg:grid-cols-12 items-center">
            <div className="lg:col-span-7">
              <div className="grid sm:grid-cols-3 gap-4">
                {[
                  { number: "98%", label: "CLS Stability" },
                  { number: "<1s", label: "TTI on 4G" },
                  { number: "AA+", label: "A11y Score" },
                ].map((s) => (
                  <div key={s.label} className="rounded-2xl border border-black/5 dark:border-white/10 bg-white/60 dark:bg-white/5 backdrop-blur-xl p-5">
                    <div className="text-3xl font-extrabold">{s.number}</div>
                    <div className="text-sm text-slate-600 dark:text-slate-300">{s.label}</div>
                  </div>
                ))}
              </div>
            </div>
            <div className="lg:col-span-5">
              <h3 className="text-2xl font-bold tracking-tight">Modern, unique, and practical</h3>
              <p className="mt-3 text-slate-600 dark:text-slate-300">
                We combine soft gradients, glass surfaces, and subtle motion to achieve a fresh, premium look without sacrificing readability or performance.
              </p>
              <ul className="mt-4 space-y-2 text-sm text-slate-700 dark:text-slate-300">
                <li>• Consistent 8px spacing scale for rhythm</li>
                <li>• Content width clamps for legibility</li>
                <li>• Motion reduced for users who prefer less animation</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Showcase */}
      <section id="showcase" className="py-16 sm:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex items-end justify-between gap-4">
            <div>
              <h3 className="text-2xl sm:text-3xl font-bold tracking-tight">Composable sections</h3>
              <p className="mt-2 text-slate-600 dark:text-slate-300">Pick what you need: hero, stats, cards, testimonials, pricing, and more.</p>
            </div>
            <a href="#pricing" className="hidden sm:inline-flex items-center gap-2 rounded-xl border border-slate-200 dark:border-slate-800 px-3 py-2 hover:bg-slate-100 dark:hover:bg-slate-800 text-sm">See Pricing <ArrowRight className="h-4 w-4" /></a>
          </div>

          <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            <ShowcaseCard title="Healthcare Landing" subtitle="Appointments, services, and trust signals" />
            <ShowcaseCard title="SaaS Dashboard" subtitle="KPIs, cards, and activity feeds" />
            <ShowcaseCard title="Education Portal" subtitle="Modules, schedules, and progress" />
          </div>
        </div>
      </section>

      {/* Pricing */}
      <section id="pricing" className="py-16 sm:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="max-w-2xl">
            <h3 className="text-2xl sm:text-3xl font-bold tracking-tight">Simple pricing that scales</h3>
            <p className="mt-2 text-slate-600 dark:text-slate-300">Start free. Upgrade when you need advanced blocks and support.</p>
          </div>

          <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {tiers.map((t) => (
              <motion.div key={t.name} whileHover={{ y: -4 }} className="rounded-2xl border border-black/5 dark:border-white/10 bg-white/60 dark:bg-white/5 backdrop-blur-xl p-6">
                <div className="flex items-center justify-between">
                  <h4 className="text-lg font-semibold">{t.name}</h4>
                  <span className="rounded-full bg-gradient-to-br from-indigo-500 to-emerald-500 px-3 py-1 text-xs text-white">Popular</span>
                </div>
                <div className="mt-2 text-3xl font-bold">{t.price}</div>
                <p className="mt-1 text-sm text-slate-600 dark:text-slate-300">{t.desc}</p>
                <ul className="mt-4 space-y-2 text-sm">
                  {t.items.map((i) => (
                    <li key={i}>• {i}</li>
                  ))}
                </ul>
                <a href="#contact" className="mt-6 inline-flex w-full items-center justify-center gap-2 rounded-xl bg-slate-900 text-white px-4 py-2 hover:opacity-95">Choose <ArrowRight className="h-4 w-4" /></a>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Bilingual CTA */}
      <section className="py-16">
        <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
          <div className="rounded-3xl border border-black/5 dark:border-white/10 bg-white/70 dark:bg-white/5 backdrop-blur-xl p-8 sm:p-10 text-center">
            <div className="flex items-center justify-center gap-3 text-sm text-slate-600 dark:text-slate-300">
              <Languages className="h-4 w-4" /> <span>বাংলা • English ready</span>
            </div>
            <h3 className="mt-3 text-2xl sm:text-3xl font-bold tracking-tight">Designed for multilingual content</h3>
            <p className="mt-2 text-slate-600 dark:text-slate-300">Swap labels with a JSON map; layout stays perfectly balanced—LTR or RTL.</p>
          </div>
        </div>
      </section>

      {/* Contact */}
      <section id="contact" className="py-16 sm:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid gap-8 lg:grid-cols-2">
            <div>
              <h3 className="text-2xl sm:text-3xl font-bold tracking-tight">Let’s build your unique look</h3>
              <p className="mt-2 text-slate-600 dark:text-slate-300">Share your logo, colors, and a short brief. We’ll tailor this layout to your brand within hours.</p>

              <div className="mt-6 grid grid-cols-3 gap-3">
                {[
                  "#1e293b",
                  "#4f46e5",
                  "#10b981",
                  "#9333ea",
                  "#0ea5e9",
                  "#f59e0b",
                ].map((c) => (
                  <div key={c} className="rounded-xl border border-slate-200 dark:border-slate-800 p-3">
                    <div className="h-12 w-full rounded-lg" style={{ backgroundColor: c }} />
                    <div className="mt-2 text-xs text-center opacity-80">{c}</div>
                  </div>
                ))}
              </div>
            </div>

            <form className="rounded-2xl border border-black/5 dark:border-white/10 bg-white/70 dark:bg-white/5 backdrop-blur-xl p-6">
              <div className="grid gap-4">
                <div>
                  <label className="text-sm">Name</label>
                  <input className="mt-1 w-full rounded-xl border border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/40 px-3 py-2 outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Your name" />
                </div>
                <div>
                  <label className="text-sm">Email</label>
                  <input type="email" className="mt-1 w-full rounded-xl border border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/40 px-3 py-2 outline-none focus:ring-2 focus:ring-indigo-500" placeholder="you@company.com" />
                </div>
                <div>
                  <label className="text-sm">What are you building?</label>
                  <textarea rows={4} className="mt-1 w-full rounded-xl border border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/40 px-3 py-2 outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Brief description..." />
                </div>
                <button className="inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-br from-indigo-600 to-emerald-500 text-white px-4 py-2 font-medium">
                  Send <ArrowRight className="h-4 w-4" />
                </button>
              </div>
            </form>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-black/5 dark:border-white/10">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-slate-600 dark:text-slate-400">
          <div className="flex items-center gap-2">
            <span className="inline-flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-emerald-500 text-white">
              <Sparkles className="h-4 w-4" />
            </span>
            <span>© {new Date().getFullYear()} YourBrand</span>
          </div>
          <div className="flex items-center gap-6">
            <a href="#" className="hover:text-slate-900 dark:hover:text-white">Privacy</a>
            <a href="#" className="hover:text-slate-900 dark:hover:text-white">Terms</a>
            <a href="#" className="hover:text-slate-900 dark:hover:text-white">Status</a>
          </div>
        </div>
      </footer>
    </div>
  );
}