import Link from "next/link";
import Image from "next/image";
import {
  CheckSquare,
  HardHat,
  FileText,
  ArrowRight,
  Shield,
  Users,
  Bell,
  ChevronRight,
  Home,
} from "lucide-react";

const features = [
  {
    icon: CheckSquare,
    title: "Smart Task Tracking",
    description:
      "Kanban boards, recurring schedules, and due date reminders keep every repair and project on track.",
    color: "bg-[#EDF2ED] text-[#6B8F71]",
  },
  {
    icon: HardHat,
    title: "Contractor Rolodex",
    description:
      "Store contact details, specialties, and notes for every service provider. Never lose a plumber's number again.",
    color: "bg-[#FDF3EE] text-[#C4856A]",
  },
  {
    icon: FileText,
    title: "Document Vault",
    description:
      "Warranties, manuals, leases — organized by property and always at your fingertips when you need them.",
    color: "bg-[#FEF3C7] text-[#92400E]",
  },
];

const steps = [
  {
    number: "01",
    title: "Add your home",
    description:
      "Create a residence and invite household members to collaborate on maintenance together.",
  },
  {
    number: "02",
    title: "Track everything",
    description:
      "Add tasks, log contractors, upload documents. Build your home's complete history over time.",
  },
  {
    number: "03",
    title: "Stay ahead",
    description:
      "Get reminders for upcoming maintenance. Never miss a filter change, inspection, or warranty deadline.",
  },
];

const highlights = [
  {
    icon: Shield,
    title: "Private & Secure",
    description: "Your data stays yours. We never share or sell your information.",
  },
  {
    icon: Users,
    title: "Household Sharing",
    description: "Invite family members with simple invite codes. Everyone stays in sync.",
  },
  {
    icon: Bell,
    title: "Smart Reminders",
    description: "Recurring tasks and due dates keep you ahead of every maintenance need.",
  },
  {
    icon: Home,
    title: "Multi-Property",
    description: "Manage one home or many. Each property gets its own organized space.",
  },
];

export default function HomePage() {
  return (
    <div className="min-h-screen bg-[#FAFAF7] text-[#2D3436] font-sans selection:bg-[#6B8F71]/20">
      {/* ─── Navigation ─── */}
      <nav className="fixed top-0 w-full z-50 bg-[#FAFAF7]/80 backdrop-blur-xl border-b border-[#E8E3DC]/60">
        <div className="max-w-7xl mx-auto px-6 flex items-center justify-between h-16">
          <Link href="/" className="flex items-center gap-2.5">
            <Image
              src="/logo.png"
              alt="honeyDue"
              width={32}
              height={32}
              className="rounded-lg"
            />
            <span className="font-heading text-xl font-bold tracking-tight text-[#2D3436]">
              honeyDue
            </span>
          </Link>

          <div className="hidden md:flex items-center gap-8">
            <a
              href="#features"
              className="text-sm font-medium text-[#8A8F87] hover:text-[#2D3436] transition-colors"
            >
              Features
            </a>
            <a
              href="#how-it-works"
              className="text-sm font-medium text-[#8A8F87] hover:text-[#2D3436] transition-colors"
            >
              How It Works
            </a>
            <Link
              href="/demo"
              className="text-sm font-medium text-[#8A8F87] hover:text-[#2D3436] transition-colors"
            >
              Demo
            </Link>
          </div>

          <div className="flex items-center gap-3">
            <Link
              href="/login"
              className="text-sm font-medium text-[#8A8F87] hover:text-[#2D3436] transition-colors hidden sm:inline-flex"
            >
              Sign In
            </Link>
            <Link
              href="/register"
              className="inline-flex items-center gap-1.5 rounded-full bg-[#2D3436] px-5 py-2 text-sm font-semibold text-white hover:bg-[#3D4446] transition-colors"
            >
              Get Started
              <ArrowRight className="size-3.5" />
            </Link>
          </div>
        </div>
      </nav>

      {/* ─── Hero ─── */}
      <section className="relative pt-32 pb-24 md:pt-40 md:pb-32 overflow-hidden">
        {/* Decorative background */}
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute top-20 right-[-10%] w-[600px] h-[600px] rounded-full bg-[#6B8F71]/[0.04] blur-3xl" />
          <div className="absolute bottom-0 left-[-5%] w-[400px] h-[400px] rounded-full bg-[#C4856A]/[0.03] blur-3xl" />
          {/* Subtle honeycomb pattern */}
          <div
            className="absolute inset-0 opacity-[0.06]"
            style={{
              backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='194'%3E%3Cpath d='M56 0L112 33.5v67L56 134 0 100.5v-67L56 0z' fill='none' stroke='%23C4856A' stroke-width='0.8'/%3E%3Cpath d='M56 67L112 100.5v67L56 201 0 167.5v-67L56 67z' fill='none' stroke='%23C4856A' stroke-width='0.8'/%3E%3C/svg%3E")`,
              backgroundSize: "112px 134px",
            }}
          />
        </div>

        <div className="max-w-7xl mx-auto px-6 relative">
          <div className="max-w-3xl">
            {/* Badge */}
            <div className="animate-fade-up stagger-1 inline-flex items-center gap-2 rounded-full border border-[#E8E3DC] bg-white px-4 py-1.5 text-sm text-[#8A8F87] mb-8 shadow-sm">
              <span className="inline-block size-2 rounded-full bg-[#6B8F71] animate-pulse" />
              Now available for homeowners
            </div>

            <h1 className="animate-fade-up stagger-2 font-heading text-5xl sm:text-6xl md:text-7xl font-bold tracking-tight leading-[1.08]">
              Your home,{" "}
              <span className="text-[#6B8F71]">perfectly maintained.</span>
            </h1>

            <p className="animate-fade-up stagger-3 mt-6 text-lg md:text-xl text-[#8A8F87] max-w-xl leading-relaxed">
              Track tasks, organize contractors, and store important
              documents. Everything you need to keep your home running
              smoothly — in one place.
            </p>

            <div className="animate-fade-up stagger-4 mt-10 flex flex-wrap gap-4">
              <Link
                href="/register"
                className="group inline-flex items-center gap-2 rounded-full bg-[#C4856A] px-7 py-3.5 text-base font-semibold text-white shadow-lg shadow-[#C4856A]/20 hover:bg-[#A86B52] transition-all hover:shadow-xl hover:shadow-[#C4856A]/25"
              >
                Get Started — Free
                <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
              </Link>
              <Link
                href="/demo"
                className="group inline-flex items-center gap-2 rounded-full border-2 border-[#E8E3DC] bg-white px-7 py-3.5 text-base font-semibold text-[#2D3436] hover:border-[#D6D1CA] hover:bg-[#F2EFE9] transition-all"
              >
                Try the Demo
                <ChevronRight className="size-4 text-[#8A8F87] transition-transform group-hover:translate-x-0.5" />
              </Link>
            </div>
          </div>

          {/* Hero visual — abstract app preview */}
          <div className="animate-fade-up stagger-5 hidden lg:block absolute top-12 right-6 w-[420px]">
            <div className="relative">
              {/* Main card */}
              <div className="rounded-2xl bg-white border border-[#E8E3DC] shadow-xl shadow-[#2D3436]/[0.04] p-5">
                <div className="flex items-center gap-3 mb-4">
                  <div className="size-8 rounded-lg bg-[#EDF2ED] flex items-center justify-center">
                    <CheckSquare className="size-4 text-[#6B8F71]" />
                  </div>
                  <div>
                    <div className="text-sm font-semibold">Upcoming Tasks</div>
                    <div className="text-xs text-[#8A8F87]">3 due this week</div>
                  </div>
                </div>
                <div className="space-y-2.5">
                  {[
                    { task: "Replace HVAC filter", due: "Tomorrow", status: "bg-[#FEF3C7] text-[#92400E]" },
                    { task: "Schedule gutter cleaning", due: "Wed", status: "bg-[#EDF2ED] text-[#6B8F71]" },
                    { task: "Check smoke detectors", due: "Fri", status: "bg-[#FDF3EE] text-[#C4856A]" },
                  ].map((item) => (
                    <div
                      key={item.task}
                      className="flex items-center justify-between rounded-lg bg-white px-3.5 py-2.5"
                    >
                      <span className="text-sm font-medium">{item.task}</span>
                      <span
                        className={`text-xs font-medium px-2 py-0.5 rounded-full ${item.status}`}
                      >
                        {item.due}
                      </span>
                    </div>
                  ))}
                </div>
              </div>

              {/* Floating stat card */}
              <div
                className="absolute -bottom-8 -left-8 rounded-xl bg-white border border-[#E8E3DC] shadow-lg shadow-[#2D3436]/[0.04] p-4 w-48"
                style={{ animation: "float 6s ease-in-out infinite" }}
              >
                <div className="text-xs text-[#8A8F87] mb-1">This Month</div>
                <div className="text-2xl font-bold font-heading text-[#6B8F71]">12 Done</div>
                <div className="mt-2 h-1.5 rounded-full bg-[#F2EFE9] overflow-hidden">
                  <div className="h-full w-3/4 rounded-full bg-[#6B8F71]" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ─── Social proof strip ─── */}
      <section className="border-y border-[#E8E3DC] bg-white/50">
        <div className="max-w-7xl mx-auto px-6 py-8 flex flex-wrap items-center justify-center gap-x-12 gap-y-4 text-center">
          {[
            { value: "Free", label: "to get started" },
            { value: "100%", label: "private & secure" },
            { value: "All-in-one", label: "home management" },
          ].map((stat) => (
            <div key={stat.label} className="flex items-baseline gap-2">
              <span className="text-lg font-bold font-heading text-[#2D3436]">
                {stat.value}
              </span>
              <span className="text-sm text-[#8A8F87]">{stat.label}</span>
            </div>
          ))}
        </div>
      </section>

      {/* ─── Features ─── */}
      <section id="features" className="py-24 md:py-32">
        <div className="max-w-7xl mx-auto px-6">
          <div className="max-w-2xl mb-16">
            <p className="text-sm font-semibold text-[#6B8F71] uppercase tracking-wider mb-3">
              Features
            </p>
            <h2 className="font-heading text-3xl md:text-4xl font-bold tracking-tight">
              Everything your home needs, nothing it doesn&apos;t.
            </h2>
            <p className="mt-4 text-lg text-[#8A8F87] leading-relaxed">
              honeyDue brings all your home maintenance into one clear,
              organized space. No bloat, no learning curve.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-6">
            {features.map((feature, i) => (
              <div
                key={feature.title}
                className={`group relative rounded-2xl border border-[#E8E3DC] bg-white p-8 transition-all hover:shadow-lg hover:shadow-[#2D3436]/[0.04] hover:-translate-y-0.5 stagger-${i + 1}`}
              >
                <div
                  className={`inline-flex items-center justify-center size-12 rounded-xl ${feature.color} mb-5`}
                >
                  <feature.icon className="size-5" />
                </div>
                <h3 className="font-heading text-xl font-bold mb-2">
                  {feature.title}
                </h3>
                <p className="text-[#8A8F87] leading-relaxed">
                  {feature.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── How It Works ─── */}
      <section
        id="how-it-works"
        className="py-24 md:py-32 bg-[#F2EFE9] relative noise-overlay"
      >
        <div className="max-w-7xl mx-auto px-6 relative">
          <div className="text-center max-w-2xl mx-auto mb-16">
            <p className="text-sm font-semibold text-[#6B8F71] uppercase tracking-wider mb-3">
              How It Works
            </p>
            <h2 className="font-heading text-3xl md:text-4xl font-bold tracking-tight">
              Up and running in minutes
            </h2>
          </div>

          <div className="grid md:grid-cols-3 gap-8 md:gap-12">
            {steps.map((step) => (
              <div key={step.number} className="text-center md:text-left">
                <div className="inline-flex items-center justify-center size-14 rounded-2xl bg-[#2D3436] text-white font-heading font-bold text-lg mb-5">
                  {step.number}
                </div>
                <h3 className="font-heading text-xl font-bold mb-2">
                  {step.title}
                </h3>
                <p className="text-[#8A8F87] leading-relaxed">
                  {step.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── Highlights Grid ─── */}
      <section className="py-24 md:py-32">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center max-w-2xl mx-auto mb-16">
            <h2 className="font-heading text-3xl md:text-4xl font-bold tracking-tight">
              Built for real homeowners
            </h2>
            <p className="mt-4 text-lg text-[#8A8F87]">
              Thoughtful details that make home maintenance feel manageable.
            </p>
          </div>

          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {highlights.map((item) => (
              <div
                key={item.title}
                className="rounded-2xl border border-[#E8E3DC] bg-white p-6 hover:shadow-md hover:shadow-[#2D3436]/[0.03] transition-all"
              >
                <item.icon className="size-6 text-[#6B8F71] mb-4" />
                <h3 className="font-heading font-bold text-base mb-1.5">
                  {item.title}
                </h3>
                <p className="text-sm text-[#8A8F87] leading-relaxed">
                  {item.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── CTA Section ─── */}
      <section className="py-24 md:py-32 relative overflow-hidden">
        <div className="absolute inset-0 bg-[#2D3436]" />
        {/* Sage glow */}
        <div className="absolute top-0 right-0 w-[500px] h-[500px] rounded-full bg-[#6B8F71]/10 blur-[120px] pointer-events-none" />
        <div className="absolute bottom-0 left-0 w-[400px] h-[400px] rounded-full bg-[#C4856A]/10 blur-[100px] pointer-events-none" />

        <div className="max-w-3xl mx-auto px-6 text-center relative">
          <h2 className="font-heading text-3xl md:text-5xl font-bold tracking-tight text-white">
            Ready to take control of your home?
          </h2>
          <p className="mt-5 text-lg text-[#9A9E97] max-w-xl mx-auto leading-relaxed">
            Join homeowners who&apos;ve simplified their maintenance routine.
            Free to start, no credit card required.
          </p>
          <div className="mt-10 flex flex-wrap justify-center gap-4">
            <Link
              href="/register"
              className="group inline-flex items-center gap-2 rounded-full bg-[#C4856A] px-8 py-4 text-base font-semibold text-white shadow-lg shadow-[#C4856A]/20 hover:bg-[#A86B52] transition-all"
            >
              Get Started — Free
              <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
            </Link>
            <Link
              href="/demo"
              className="inline-flex items-center gap-2 rounded-full border-2 border-white/15 px-8 py-4 text-base font-semibold text-white hover:border-white/30 hover:bg-white/5 transition-all"
            >
              Try the Demo
            </Link>
          </div>
        </div>
      </section>

      {/* ─── Footer ─── */}
      <footer className="bg-[#2D3436] border-t border-white/5 text-[#9A9E97]">
        <div className="max-w-7xl mx-auto px-6 py-16">
          <div className="grid md:grid-cols-4 gap-10">
            {/* Brand */}
            <div className="md:col-span-1">
              <Link href="/" className="flex items-center gap-2.5 mb-4">
                <Image
                  src="/logo.png"
                  alt="honeyDue"
                  width={28}
                  height={28}
                  className="rounded-md"
                />
                <span className="font-heading text-lg font-bold text-white">
                  honeyDue
                </span>
              </Link>
              <p className="text-sm leading-relaxed">
                Home maintenance made simple. Track tasks, organize
                contractors, store documents.
              </p>
            </div>

            {/* Product */}
            <div>
              <h4 className="text-sm font-semibold text-white mb-4">
                Product
              </h4>
              <ul className="space-y-2.5 text-sm">
                <li>
                  <a href="#features" className="hover:text-white transition-colors">
                    Features
                  </a>
                </li>
                <li>
                  <Link href="/demo" className="hover:text-white transition-colors">
                    Demo
                  </Link>
                </li>
                <li>
                  <a href="#how-it-works" className="hover:text-white transition-colors">
                    How It Works
                  </a>
                </li>
              </ul>
            </div>

            {/* Account */}
            <div>
              <h4 className="text-sm font-semibold text-white mb-4">
                Account
              </h4>
              <ul className="space-y-2.5 text-sm">
                <li>
                  <Link href="/login" className="hover:text-white transition-colors">
                    Sign In
                  </Link>
                </li>
                <li>
                  <Link href="/register" className="hover:text-white transition-colors">
                    Create Account
                  </Link>
                </li>
                <li>
                  <Link href="/forgot-password" className="hover:text-white transition-colors">
                    Reset Password
                  </Link>
                </li>
              </ul>
            </div>

            {/* Legal */}
            <div>
              <h4 className="text-sm font-semibold text-white mb-4">Legal</h4>
              <ul className="space-y-2.5 text-sm">
                <li>
                  <span className="cursor-default">Privacy Policy</span>
                </li>
                <li>
                  <span className="cursor-default">Terms of Service</span>
                </li>
              </ul>
            </div>
          </div>

          <div className="mt-16 pt-8 border-t border-white/5 flex flex-col sm:flex-row items-center justify-between gap-4">
            <p className="text-xs">
              &copy; {new Date().getFullYear()} honeyDue. All rights reserved.
            </p>
            <p className="text-xs">
              Made for homeowners, by homeowners.
            </p>
          </div>
        </div>
      </footer>
    </div>
  );
}
