import Link from "next/link";
import { BookCover } from "@/components/BookCover";
import { FaqAccordion } from "@/components/FaqAccordion";
import { HighlightIcon } from "@/components/HighlightIcon";
import { SiteHeader } from "@/components/SiteHeader";
import {
  ebookMeta,
  heroStats,
  highlights,
  nomadHubs,
  pillars,
  tableOfContents,
  testimonial,
} from "@/content/ebook";

const hubMarquee = [...nomadHubs, ...nomadHubs];

export default function LandingPage() {
  return (
    <div className="relative min-h-screen bg-[var(--background)] text-[var(--foreground)]">
      <SiteHeader />

      <main>
        {/* Hero */}
        <section className="relative overflow-hidden px-4 pb-14 pt-8 sm:px-6 sm:pb-20 sm:pt-12 lg:px-8 lg:pb-28 lg:pt-16">
          <div className="mx-auto grid max-w-6xl items-center gap-12 lg:grid-cols-2 lg:gap-20">
            <div className="order-2 text-center lg:order-1 lg:text-left">
              <p className="mb-4 inline-flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--surface)] px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--accent)] shadow-sm">
                <span className="h-2 w-2 rounded-full bg-[var(--gradient-2)]" />
                Free ebook · Digital nomad · English
              </p>
              <h1 className="font-display text-[2.35rem] font-extrabold leading-[1.06] tracking-tight sm:text-5xl lg:text-[3.4rem]">
                Work from{" "}
                <span className="gradient-text">anywhere</span>
                <span className="block text-[var(--foreground)]">with a plan.</span>
              </h1>
              <p className="mx-auto mt-5 max-w-xl text-lg leading-relaxed text-[var(--muted)] lg:mx-0">
                <span className="font-semibold text-[var(--foreground)]">
                  {ebookMeta.title}
                </span>{" "}
                is a field guide for remote workers and founders building a
                location-independent life—bases, visas, gear, community, and
                rhythm.
              </p>
              <p className="mt-4 text-sm text-[var(--muted)]">
                by{" "}
                <span className="font-medium text-[var(--foreground)]">
                  {ebookMeta.author}
                </span>
                <span className="mx-2 opacity-40">·</span>
                {ebookMeta.readTime}
                <span className="mx-2 opacity-40">·</span>
                {ebookMeta.pages} pages
              </p>
              <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row lg:justify-start">
                <Link href="/read" className="btn-primary w-full sm:w-auto">
                  Read free — no signup
                </Link>
                <a href="#contents" className="btn-secondary w-full sm:w-auto">
                  Browse chapters
                </a>
              </div>
              <dl className="mt-10 grid grid-cols-2 gap-3 sm:grid-cols-4 lg:max-w-xl">
                {heroStats.map((stat) => (
                  <div
                    key={stat.label}
                    className="rounded-xl border border-[var(--border)] bg-[var(--surface)] px-3 py-3 text-center shadow-sm"
                  >
                    <dt className="font-display text-lg font-bold text-[var(--foreground)]">
                      {stat.value}
                    </dt>
                    <dd className="mt-0.5 text-[10px] font-medium uppercase tracking-wider text-[var(--muted)]">
                      {stat.label}
                    </dd>
                  </div>
                ))}
              </dl>
            </div>

            <div className="order-1 flex justify-center lg:order-2 lg:justify-end">
              <BookCover />
            </div>
          </div>
        </section>

        {/* Hub marquee */}
        <section
          className="border-y border-[var(--border)] bg-[var(--surface)] py-4 dark:bg-[var(--surface-elevated)]"
          aria-label="Popular nomad hubs"
        >
          <div className="overflow-hidden">
            <div className="marquee-track gap-3 px-2">
              {hubMarquee.map((hub, i) => (
                <span
                  key={`${hub.city}-${i}`}
                  className="mx-1.5 inline-flex shrink-0 items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--surface)] px-4 py-2 text-sm shadow-sm"
                >
                  <span className="font-semibold text-[var(--foreground)]">
                    {hub.city}
                  </span>
                  <span className="text-[var(--muted)]">{hub.country}</span>
                  <span className="hidden text-xs text-[var(--accent)] sm:inline">
                    · {hub.vibe}
                  </span>
                </span>
              ))}
            </div>
          </div>
        </section>

        {/* Highlights */}
        <section className="px-4 py-16 sm:px-6 sm:py-20 lg:px-8">
          <div className="mx-auto max-w-6xl">
            <p className="text-center text-xs font-semibold uppercase tracking-[0.2em] text-[var(--accent)]">
              What you&apos;ll master
            </p>
            <h2 className="mt-2 text-center font-serif text-2xl font-medium tracking-tight sm:text-3xl">
              Built for the{" "}
              <span className="gradient-text">digital nomad</span> reality
            </h2>
            <div className="mt-10 grid gap-4 sm:grid-cols-2">
              {highlights.map((item) => (
                <div
                  key={item.title}
                  className="glass-card group rounded-2xl p-6 transition-transform duration-300 hover:-translate-y-1"
                >
                  <div className="mb-4 flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br from-[var(--gradient-1)]/15 via-[var(--gradient-2)]/15 to-[var(--gradient-3)]/15 text-[var(--accent)]">
                    <HighlightIcon name={item.icon} />
                  </div>
                  <h3 className="font-display text-base font-bold text-[var(--foreground)]">
                    {item.title}
                  </h3>
                  <p className="mt-2 text-sm leading-relaxed text-[var(--muted)]">
                    {item.description}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Pillars */}
        <section className="border-y border-[var(--border)] bg-[var(--surface)] px-4 py-16 dark:bg-[var(--surface-elevated)] sm:px-6 sm:py-24 lg:px-8">
          <div className="mx-auto max-w-6xl">
            <div className="mx-auto max-w-2xl text-center">
              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--accent)]">
                Four pillars
              </p>
              <h2 className="mt-2 font-serif text-2xl font-medium sm:text-3xl">
                Location freedom,{" "}
                <span className="gradient-text">without chaos</span>
              </h2>
            </div>
            <div className="mt-12 grid gap-6 sm:grid-cols-2">
              {pillars.map((pillar, index) => (
                <article
                  key={pillar.title}
                  className="glass-card rounded-2xl p-6 sm:p-8"
                >
                  <span className="font-mono text-xs font-bold text-[var(--accent)]">
                    0{index + 1}
                  </span>
                  <h3 className="mt-2 font-display text-lg font-bold">
                    {pillar.title}
                  </h3>
                  <p className="mt-2 text-[var(--muted)] leading-relaxed">
                    {pillar.body}
                  </p>
                </article>
              ))}
            </div>
          </div>
        </section>

        {/* Testimonial */}
        <section className="px-4 py-16 sm:px-6 lg:px-8">
          <figure className="glass-card relative mx-auto max-w-3xl overflow-hidden rounded-3xl p-8 sm:p-10">
            <div
              className="absolute -right-8 -top-8 h-32 w-32 rounded-full bg-[var(--gradient-1)]/20 blur-2xl"
              aria-hidden
            />
            <blockquote className="relative font-serif text-xl leading-relaxed text-[var(--foreground)] sm:text-2xl">
              &ldquo;{testimonial.quote}&rdquo;
            </blockquote>
            <figcaption className="relative mt-6 flex flex-wrap items-center gap-3 text-sm">
              <span className="font-display font-bold">{testimonial.author}</span>
              <span className="text-[var(--muted)]">{testimonial.role}</span>
              <span className="w-full text-xs text-[var(--accent)] sm:w-auto">
                {testimonial.location}
              </span>
            </figcaption>
          </figure>
        </section>

        {/* Table of contents */}
        <section
          id="contents"
          className="border-t border-[var(--border)] px-4 py-16 sm:px-6 sm:py-24 lg:px-8"
        >
          <div className="mx-auto max-w-6xl">
            <div className="mb-10 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
              <div>
                <p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--accent)]">
                  Table of contents
                </p>
                <h2 className="mt-2 font-serif text-2xl font-medium sm:text-3xl">
                  Six chapters + introduction
                </h2>
              </div>
              <p className="max-w-sm text-sm text-[var(--muted)]">
                Read in-browser on laptop, tablet, or phone—with light/dark mode
                for late-night flights.
              </p>
            </div>

            <ol className="grid gap-3 lg:grid-cols-2">
              {tableOfContents.map((item, index) => (
                <li key={item.id}>
                  <Link
                    href={`/read#${item.id}`}
                    className="glass-card group flex gap-4 rounded-2xl p-5 transition-all hover:border-[var(--accent)]/35 hover:shadow-[var(--glow-sm)]"
                  >
                    <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-[var(--gradient-1)] to-[var(--gradient-3)] text-sm font-bold text-white">
                      {String(index + 1).padStart(2, "0")}
                    </span>
                    <span className="min-w-0 flex-1">
                      <span className="block font-display font-semibold leading-snug group-hover:text-[var(--accent)]">
                        {item.title}
                      </span>
                      {item.summary ? (
                        <span className="mt-1 block text-sm text-[var(--muted)] line-clamp-2">
                          {item.summary}
                        </span>
                      ) : null}
                    </span>
                    <span
                      className="shrink-0 self-center text-[var(--muted)] transition-transform group-hover:translate-x-1 group-hover:text-[var(--accent)]"
                      aria-hidden
                    >
                      →
                    </span>
                  </Link>
                </li>
              ))}
            </ol>
          </div>
        </section>

        {/* FAQ */}
        <section className="border-t border-[var(--border)] bg-[var(--background)] px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
          <div className="mx-auto max-w-3xl">
            <p className="text-center text-xs font-semibold uppercase tracking-[0.2em] text-[var(--accent)]">
              FAQ
            </p>
            <h2 className="mt-2 text-center font-serif text-2xl font-medium sm:text-3xl">
              Before you pack
            </h2>
            <div className="mt-10">
              <FaqAccordion />
            </div>
          </div>
        </section>

        {/* CTA */}
        <section className="px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
          <div className="cta-panel relative mx-auto max-w-6xl overflow-hidden rounded-3xl shadow-[var(--glow-lg)]">
            <div
              className="absolute inset-0 bg-[radial-gradient(ellipse_at_80%_0%,rgba(255,255,255,0.12),transparent_55%)]"
              aria-hidden
            />
            <div className="relative px-8 py-14 text-center sm:px-16 sm:py-20">
              <p className="cta-panel__eyebrow text-xs font-bold uppercase tracking-[0.2em]">
                Your next base starts here
              </p>
              <h2 className="cta-panel__title mt-3 font-display text-2xl font-bold sm:text-4xl">
                Read the nomad playbook tonight
              </h2>
              <p className="cta-panel__body mx-auto mt-4 max-w-lg text-base sm:text-lg">
                No signup. No paywall. Open on any device, switch themes for red-eye
                flights, and jump straight to visas or community.
              </p>
              <Link
                href="/read"
                className="cta-panel__btn mt-8 inline-flex h-12 items-center justify-center rounded-full px-10 text-sm font-bold shadow-xl transition-transform hover:scale-[1.02] active:scale-[0.98]"
              >
                Open {ebookMeta.title}
              </Link>
            </div>
          </div>
        </section>
      </main>

      <footer className="border-t border-[var(--border)]">
        <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 px-4 py-8 text-sm text-[var(--muted)] sm:flex-row sm:px-6 lg:px-8">
          <p>
            © {ebookMeta.year} {ebookMeta.author} · {ebookMeta.title} — digital
            nomad field guide
          </p>
          <Link
            href="/read"
            className="font-medium text-[var(--accent)] transition-opacity hover:opacity-80"
          >
            Read the ebook
          </Link>
        </div>
      </footer>
    </div>
  );
}