"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import {
  Shield,
  Sparkles,
  LineChart,
  Globe2,
  Lock,
  Clock,
  BadgeCheck,
  Menu,
  X,
  ArrowRight,
} from "lucide-react";
import { Logo } from "@/components/shared/Logo";
import { Button } from "@/components/ui/Button";
import { cn } from "@/lib/utils/cn";
import { Reveal } from "./Reveal";
import { PricingToggle } from "./PricingToggle";

const navLinks = [
  { href: "#how-it-works", label: "How it works" },
  { href: "#features", label: "Features" },
  { href: "#vision", label: "Vision" },
  { href: "#pricing", label: "Pricing" },
  { href: "#contact", label: "Contact" },
];

const howSteps = [
  {
    num: "01",
    title: "Connect",
    body: "Connect your sources and answer surveys to pull your scattered data into one secure Survey Stronghold.",
  },
  {
    num: "02",
    title: "Choose",
    body: "Choose your rules: control what's shared, who can access it, and how it may be used.",
  },
  {
    num: "03",
    title: "Get Paid",
    body: "License your data to vetted R&D partners and get paid when your approved data points are used.",
  },
];

const features = [
  {
    icon: Shield,
    title: "Security Stronghold",
    body: "SOC 2, GDPR, and role-based encryption keep respondent data locked down at every layer.",
  },
  {
    icon: Sparkles,
    title: "AI Survey Builder",
    body: "Describe your goal and get a draft survey with logic and validation already configured.",
  },
  {
    icon: LineChart,
    title: "Real-time Analytics",
    body: "Watch responses land live, with sentiment and word-cloud breakdowns on open text.",
  },
  {
    icon: Globe2,
    title: "Multi-channel Sharing",
    body: "Web link, embed, QR code, and email campaigns — distribute everywhere from one panel.",
  },
];

const testimonials = [
  {
    quote:
      "We moved our entire customer research pipeline over in a week. Branching logic alone paid for the upgrade.",
    name: "Riya Kapoor",
    role: "Head of CX, Northline",
    initials: "RK",
  },
  {
    quote:
      "The analytics dashboard is the first one my execs actually open on their own without being asked.",
    name: "David Mensah",
    role: "Product Ops, Fielder",
    initials: "DM",
  },
  {
    quote:
      "Security review took two days instead of two months. SOC 2 docs were ready before we even asked.",
    name: "Sana Prakash",
    role: "IT Security Lead, Vaultra",
    initials: "SP",
  },
];

const securityBadges = [
  { icon: Shield, label: "SOC 2 Type II" },
  { icon: Lock, label: "GDPR Compliant" },
  { icon: Clock, label: "99.98% Uptime SLA" },
  { icon: BadgeCheck, label: "ISO 27001" },
];

export function LandingPage() {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <main className="min-h-screen bg-bg">
      {/* ── Nav ─────────────────────────────────────────────── */}
      <header
        className={cn(
          "sticky top-0 z-50 bg-navy text-white transition-shadow duration-300",
          scrolled && "shadow-[0_8px_24px_rgba(0,0,0,0.28)]"
        )}
      >
        <nav className="mx-auto flex max-w-[1240px] items-center justify-between px-5 py-4 sm:px-8 lg:px-12">
          <Logo textClassName="text-white text-[19px]" />

          <div className="hidden items-center gap-8 text-sm font-medium text-white/75 lg:flex">
            {navLinks.map((l) => (
              <a
                key={l.href}
                href={l.href}
                className="transition-colors hover:text-white"
              >
                {l.label}
              </a>
            ))}
          </div>

          <div className="hidden items-center gap-2.5 sm:flex">
            <Link href="/login">
              <Button variant="ghost" size="sm">
                Log in
              </Button>
            </Link>
            <Link href="/register">
              <Button size="sm">Get started</Button>
            </Link>
          </div>

          <button
            type="button"
            className="rounded-sm p-2 text-white/80 hover:bg-white/10 lg:hidden"
            aria-label={mobileOpen ? "Close menu" : "Open menu"}
            onClick={() => setMobileOpen((v) => !v)}
          >
            {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
          </button>
        </nav>

        {mobileOpen && (
          <div className="border-t border-white/10 px-5 py-4 sm:px-8 lg:hidden">
            <div className="flex flex-col gap-3 text-sm font-medium text-white/80">
              {navLinks.map((l) => (
                <a
                  key={l.href}
                  href={l.href}
                  onClick={() => setMobileOpen(false)}
                  className="py-1.5 hover:text-white"
                >
                  {l.label}
                </a>
              ))}
            </div>
            <div className="mt-4 flex gap-2.5">
              <Link href="/login" className="flex-1">
                <Button variant="ghost" size="sm" className="w-full">
                  Log in
                </Button>
              </Link>
              <Link href="/register" className="flex-1">
                <Button size="sm" className="w-full">
                  Get started
                </Button>
              </Link>
            </div>
          </div>
        )}
      </header>

      {/* ── Hero ────────────────────────────────────────────── */}
      <section className="relative overflow-hidden bg-gradient-to-b from-navy to-navy-2 text-white">
        <div className="lp-hero-nodes pointer-events-none absolute inset-0 opacity-40" aria-hidden />
        <div className="relative mx-auto grid max-w-[1240px] items-center gap-12 px-5 pb-16 pt-14 sm:px-8 sm:pb-20 sm:pt-20 lg:grid-cols-[1.1fr_1fr] lg:gap-14 lg:px-12">
          <div>
            <div className="lp-hero-in mb-5 inline-flex items-center gap-2 rounded-full border border-accent/35 bg-accent/15 px-3 py-1.5 text-[12.5px] font-bold uppercase tracking-[0.06em] text-accent">
              <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-accent" />
              SOC 2 Type II · GDPR Ready
            </div>
            <h1 className="lp-hero-in lp-hero-in-d1 max-w-xl text-[2.35rem] font-black leading-[1.06] tracking-tight sm:text-5xl lg:text-[52px]">
              Your data.
              <br />
              <span className="text-accent">Your fortress.</span>
            </h1>
            <p className="lp-hero-in lp-hero-in-d2 mt-5 max-w-md text-[17px] leading-relaxed text-white/70">
              Data is the world’s most valuable resource. SurveyStronghold helps
              you build, distribute, and analyze surveys — then control who
              benefits from the insights you create.
            </p>
            <div className="lp-hero-in lp-hero-in-d3 mt-8 flex flex-wrap gap-3">
              <Link href="/register" className="group">
                <Button size="lg" className="gap-2">
                  Start free
                  <ArrowRight className="h-4 w-4 transition-transform duration-200 group-hover:translate-x-0.5" />
                </Button>
              </Link>
              <Link href="/login">
                <Button
                  variant="ghost"
                  size="lg"
                  className="border-white/25 text-white"
                >
                  Log in
                </Button>
              </Link>
            </div>
            <div className="lp-hero-in lp-hero-in-d4 mt-9 flex flex-wrap gap-x-7 gap-y-3 text-[13px] text-white/55">
              <div>
                <b className="font-mono text-white">48,120+</b> surveys shipped
              </div>
              <div>
                <b className="font-mono text-white">99.98%</b> uptime
              </div>
              <div>
                <b className="font-mono text-white">4.8/5</b> avg. rating
              </div>
            </div>
          </div>

          <div className="lp-hero-in lp-hero-in-d2 lp-demo-mock hidden sm:block">
            <div className="overflow-hidden rounded-2xl bg-card text-text shadow-lg">
              <div className="flex gap-1.5 border-b border-border bg-[#F1F5F9] px-3.5 py-2.5">
                <span className="h-2.5 w-2.5 rounded-full bg-[#CBD5E1]" />
                <span className="h-2.5 w-2.5 rounded-full bg-[#CBD5E1]" />
                <span className="h-2.5 w-2.5 rounded-full bg-[#CBD5E1]" />
              </div>
              <div className="space-y-3 p-5 sm:p-6">
                <div className="rounded-[10px] border border-border p-4">
                  <div className="mb-2.5 text-[13px] font-semibold">
                    How likely are you to recommend us to a colleague?
                  </div>
                  <div className="flex gap-1.5">
                    {["7", "8", "9", "10"].map((n) => (
                      <div
                        key={n}
                        className={cn(
                          "flex flex-1 items-center justify-center rounded-[7px] border px-2 py-2 text-[12.5px]",
                          n === "9"
                            ? "border-accent bg-[#F0F9FF] font-semibold text-primary"
                            : "border-border text-muted"
                        )}
                      >
                        {n}
                      </div>
                    ))}
                  </div>
                </div>
                <div className="rounded-[10px] border border-border p-4">
                  <div className="mb-2.5 text-[13px] font-semibold">
                    What made your experience great?
                  </div>
                  <div className="flex flex-col gap-2">
                    <div className="flex items-center gap-2 rounded-[7px] border border-accent bg-[#F0F9FF] px-2.5 py-2 text-[12.5px] font-semibold text-primary">
                      ✓ Fast, responsive support
                    </div>
                    <div className="rounded-[7px] border border-border px-2.5 py-2 text-[12.5px] text-muted">
                      Easy onboarding
                    </div>
                    <div className="rounded-[7px] border border-border px-2.5 py-2 text-[12.5px] text-muted">
                      Pricing
                    </div>
                  </div>
                </div>
                <div className="h-1.5 overflow-hidden rounded-sm bg-[#E2E8F0]">
                  <div className="lp-progress-fill h-full w-[64%] bg-gradient-to-r from-primary to-accent" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="lp-crenel" aria-hidden />
      </section>

      {/* ── How it works (marketing site) ───────────────────── */}
      <section id="how-it-works" className="scroll-mt-24 px-5 py-20 sm:px-8 lg:px-12">
        <div className="mx-auto max-w-[1240px]">
          <Reveal className="mb-12 max-w-xl">
            <p className="mb-2.5 text-[12.5px] font-bold uppercase tracking-[0.08em] text-primary">
              Product
            </p>
            <h2 className="text-3xl font-extrabold tracking-tight text-navy sm:text-[34px]">
              How it works
            </h2>
            <p className="mt-3 text-[15.5px] leading-relaxed text-muted">
              YOU are the 21st century gold rush. Collect, permission, and
              benefit from the data you create — on your terms.
            </p>
          </Reveal>

          <div className="grid gap-10 md:grid-cols-3 md:gap-8">
            {howSteps.map((step, i) => (
              <Reveal key={step.num} delayMs={i * 100} className="relative">
                <div className="font-mono text-5xl font-black text-accent/90 sm:text-6xl">
                  {step.num}
                </div>
                <div className="my-4 h-px w-full bg-accent/40" />
                <h3 className="mb-2 text-xl font-bold text-navy">{step.title}</h3>
                <p className="text-[14.5px] leading-relaxed text-muted">
                  {step.body}
                </p>
              </Reveal>
            ))}
          </div>

          <Reveal delayMs={200} className="mt-12 flex flex-wrap gap-3">
            <Link href="/register">
              <Button size="lg">Sign up to sell data</Button>
            </Link>
            <a href="mailto:contact@surveystronghold.com?subject=Buy%20data%20inquiry">
              <Button variant="outline" size="lg">
                Sign up to buy data
              </Button>
            </a>
          </Reveal>
        </div>
      </section>

      {/* ── Features (HTML product) ─────────────────────────── */}
      <section
        id="features"
        className="scroll-mt-24 border-y border-border bg-white px-5 py-20 sm:px-8 lg:px-12"
      >
        <div className="mx-auto max-w-[1240px]">
          <Reveal className="mx-auto mb-12 max-w-[620px] text-center">
            <p className="mb-2.5 text-[12.5px] font-bold uppercase tracking-[0.08em] text-primary">
              Platform
            </p>
            <h2 className="text-3xl font-extrabold tracking-tight text-navy sm:text-[34px]">
              Everything the fortress needs, built in
            </h2>
            <p className="mt-3 text-[15.5px] leading-relaxed text-muted">
              From the first question to the final export, every layer is
              designed for reliability at scale.
            </p>
          </Reveal>

          <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
            {features.map((f, i) => (
              <Reveal
                key={f.title}
                delayMs={i * 80}
                className="rounded-xl border border-border bg-card p-6 shadow-DEFAULT transition-transform duration-300 hover:-translate-y-1"
              >
                <div className="mb-4 flex h-[42px] w-[42px] items-center justify-center rounded-[10px] bg-[#EFF6FF] text-primary">
                  <f.icon className="h-5 w-5" strokeWidth={2} />
                </div>
                <h3 className="mb-2 text-[15.5px] font-bold text-text">
                  {f.title}
                </h3>
                <p className="text-[13.5px] leading-relaxed text-muted">
                  {f.body}
                </p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ── Vision (marketing site) ─────────────────────────── */}
      <section id="vision" className="scroll-mt-24 px-5 py-24 sm:px-8 lg:px-12">
        <div className="mx-auto max-w-3xl text-center">
          <Reveal>
            <p className="mb-2.5 text-[12.5px] font-bold uppercase tracking-[0.08em] text-primary">
              About
            </p>
            <h2 className="mb-8 text-3xl font-extrabold tracking-tight text-navy sm:text-4xl">
              The Vision
            </h2>
          </Reveal>
          <Reveal delayMs={120}>
            <p className="text-left text-[15.5px] leading-[1.8] text-muted sm:text-center sm:text-base">
              At Survey Stronghold, our vision is to create a future where people
              have real control over the information they create every day. For
              too long, society has generated valuable data through everyday
              activity without clear ownership, transparency, or benefit. That
              information has helped power research, technology, advertising, and
              product development, but the people behind the data are often left
              out of the process. Survey Stronghold is changing that by giving
              individuals a secure way to collect, manage, permission, and
              benefit from their own information. We believe data should not just
              be extracted from people. It should be controlled by them, shared
              on their terms, and used in ways that create value for both
              individuals and responsible organizations.
            </p>
          </Reveal>
        </div>
      </section>

      {/* ── Why us (marketing site) ─────────────────────────── */}
      <section className="border-y border-border bg-[#F1F5F9] px-5 py-24 sm:px-8 lg:px-12">
        <div className="mx-auto max-w-3xl text-center">
          <Reveal>
            <h2 className="mb-8 text-3xl font-extrabold tracking-tight text-primary sm:text-4xl">
              Why us
            </h2>
          </Reveal>
          <Reveal delayMs={120}>
            <p className="text-left text-[15.5px] leading-[1.8] text-text/80 sm:text-center sm:text-base">
              Data is the most valuable resource in the world. Companies across
              industries want to develop new products and improve their marketing
              strategies. SurveyStronghold is building the first interactive data
              set owned by humans. Right now, most data is cold and comes in
              spreadsheets that customers must trust without verification.
              Imagine if research and development could interact with the people
              behind the data. Human-owned data is more useful, credible, and
              enhanced than data bought from third parties. SurveyStronghold is
              here to show this.
            </p>
          </Reveal>
        </div>
      </section>

      {/* ── Pricing (HTML product) ──────────────────────────── */}
      <section id="pricing" className="scroll-mt-24 px-5 py-20 sm:px-8 lg:px-12">
        <div className="mx-auto max-w-[1240px]">
          <Reveal className="mx-auto mb-10 max-w-[620px] text-center">
            <p className="mb-2.5 text-[12.5px] font-bold uppercase tracking-[0.08em] text-primary">
              Pricing
            </p>
            <h2 className="text-3xl font-extrabold tracking-tight text-navy sm:text-[34px]">
              Plans that scale with your response volume
            </h2>
          </Reveal>
          <PricingToggle />
        </div>
      </section>

      {/* ── Testimonials (HTML product) ─────────────────────── */}
      <section className="border-t border-border bg-white px-5 py-20 sm:px-8 lg:px-12">
        <div className="mx-auto max-w-[1240px]">
          <Reveal className="mx-auto mb-12 max-w-[620px] text-center">
            <p className="mb-2.5 text-[12.5px] font-bold uppercase tracking-[0.08em] text-primary">
              Trusted by teams
            </p>
            <h2 className="text-3xl font-extrabold tracking-tight text-navy sm:text-[34px]">
              Research teams run on SurveyStronghold
            </h2>
          </Reveal>
          <div className="grid gap-5 md:grid-cols-3">
            {testimonials.map((t, i) => (
              <Reveal
                key={t.name}
                delayMs={i * 90}
                className="rounded-xl border border-border bg-card p-6 shadow-DEFAULT"
              >
                <div className="mb-3 tracking-[2px] text-warning">★★★★★</div>
                <p className="mb-5 text-sm leading-relaxed text-text">
                  &ldquo;{t.quote}&rdquo;
                </p>
                <div className="flex items-center gap-2.5">
                  <div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary text-[13px] font-bold text-white">
                    {t.initials}
                  </div>
                  <div>
                    <div className="text-[13px] font-bold">{t.name}</div>
                    <div className="text-[11.5px] text-muted">{t.role}</div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ── Contact CTA (marketing site) ────────────────────── */}
      <section
        id="contact"
        className="scroll-mt-24 border-t border-border px-5 py-20 sm:px-8 lg:px-12"
      >
        <div className="mx-auto flex max-w-[1240px] flex-col items-start justify-between gap-8 md:flex-row md:items-end">
          <Reveal>
            <p className="mb-2.5 text-[12.5px] font-bold uppercase tracking-[0.08em] text-primary">
              Featured
            </p>
            <h2 className="max-w-md text-3xl font-extrabold tracking-tight text-navy sm:text-4xl">
              Questions about purchasing data from us?
            </h2>
          </Reveal>
          <Reveal delayMs={100} className="flex flex-col gap-3 sm:flex-row sm:items-center">
            <a href="mailto:contact@surveystronghold.com?subject=Schedule%20consultation">
              <Button size="lg" className="gap-2">
                Schedule consultation
                <ArrowRight className="h-4 w-4" />
              </Button>
            </a>
            <div className="text-sm text-muted">
              <a
                href="mailto:contact@surveystronghold.com"
                className="font-semibold text-primary hover:underline"
              >
                contact@surveystronghold.com
              </a>
              <div className="mt-1">Tel: +1 877-297-4081</div>
              <div className="mt-0.5">Serving the domestic United States</div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ── Security strip ──────────────────────────────────── */}
      <div className="flex flex-wrap items-center justify-center gap-x-12 gap-y-4 border-y border-border bg-[#F1F5F9] px-5 py-8 sm:px-8">
        {securityBadges.map((b, i) => (
          <Reveal
            key={b.label}
            delayMs={i * 60}
            className="flex items-center gap-2.5 text-[13px] font-bold text-muted"
          >
            <b.icon className="h-[18px] w-[18px] text-primary" strokeWidth={2} />
            {b.label}
          </Reveal>
        ))}
      </div>

      {/* ── Footer ──────────────────────────────────────────── */}
      <footer className="bg-navy px-5 pb-7 pt-14 text-white/60 sm:px-8 lg:px-12">
        <div className="mx-auto grid max-w-[1240px] gap-9 border-b border-white/12 pb-9 sm:grid-cols-2 lg:grid-cols-[1.4fr_1fr_1fr_1fr]">
          <div>
            <Logo textClassName="text-white text-base" className="mb-3.5" />
            <p className="max-w-[260px] text-[13px] leading-relaxed">
              Enterprise survey infrastructure and human-owned data — built to
              hold under scale.
            </p>
          </div>
          <div>
            <h4 className="mb-3.5 text-[13px] font-semibold text-white">
              Product
            </h4>
            <ul className="flex flex-col gap-2.5 text-[13px]">
              <li>
                <a href="#features" className="hover:text-white">
                  Features
                </a>
              </li>
              <li>
                <a href="#pricing" className="hover:text-white">
                  Pricing
                </a>
              </li>
              <li>
                <a href="#how-it-works" className="hover:text-white">
                  How it works
                </a>
              </li>
              <li>
                <Link href="/register" className="hover:text-white">
                  Get started
                </Link>
              </li>
            </ul>
          </div>
          <div>
            <h4 className="mb-3.5 text-[13px] font-semibold text-white">
              Contact
            </h4>
            <ul className="flex flex-col gap-2.5 text-[13px]">
              <li>
                <a
                  href="mailto:contact@surveystronghold.com"
                  className="hover:text-white"
                >
                  contact@surveystronghold.com
                </a>
              </li>
              <li>
                <a href="tel:+18772974081" className="hover:text-white">
                  +1 877-297-4081
                </a>
              </li>
            </ul>
          </div>
          <div>
            <h4 className="mb-3.5 text-[13px] font-semibold text-white">
              Social
            </h4>
            <div className="flex gap-3 text-[13px]">
              <a
                href="https://www.instagram.com"
                target="_blank"
                rel="noreferrer"
                className="hover:text-white"
              >
                Instagram
              </a>
              <a
                href="https://www.linkedin.com"
                target="_blank"
                rel="noreferrer"
                className="hover:text-white"
              >
                LinkedIn
              </a>
              <a
                href="https://www.facebook.com"
                target="_blank"
                rel="noreferrer"
                className="hover:text-white"
              >
                Facebook
              </a>
            </div>
          </div>
        </div>
        <div className="mx-auto mt-5 flex max-w-[1240px] flex-col gap-2 text-[12.5px] sm:flex-row sm:justify-between">
          <span>© 2026 SurveyStronghold</span>
          <span>Made for teams who take data seriously.</span>
        </div>
      </footer>
    </main>
  );
}