import Link from "next/link";
import { ChapterContent } from "@/components/ChapterContent";
import { ChapterNav } from "@/components/ChapterNav";
import { ReadSidebar } from "@/components/ReadSidebar";
import { ReadingProgress } from "@/components/ReadingProgress";
import { SiteHeader } from "@/components/SiteHeader";
import { chapters, ebookMeta } from "@/content/ebook";

export const metadata = {
  title: `Read — ${ebookMeta.title} | Digital Nomad Guide`,
  description: ebookMeta.subtitle,
};

export default function ReadPage() {
  return (
    <div className="relative min-h-screen bg-[var(--background)] text-[var(--foreground)]">
      <SiteHeader ctaLabel="Home" ctaHref="/" showBack />
      <ReadingProgress />

      <div className="mx-auto flex max-w-6xl gap-10 px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
        <ReadSidebar />

        <div className="min-w-0 flex-1" style={{ maxWidth: "var(--read-max)" }}>
          <header className="mb-10 border-b border-[var(--border)] pb-10 text-center sm:mb-12 sm:pb-12">
            <p className="inline-flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--surface)] px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--accent)]">
              Digital nomad · English
            </p>
            <h1 className="mt-4 font-serif text-3xl font-medium tracking-tight sm:text-4xl">
              <span className="gradient-text">{ebookMeta.title}</span>
            </h1>
            <p className="mx-auto mt-3 max-w-lg text-[var(--muted)] leading-relaxed">
              {ebookMeta.subtitle}
            </p>
            <p className="mt-3 text-sm text-[var(--muted)]">
              {ebookMeta.author} · {ebookMeta.readTime} · {ebookMeta.pages} pages
            </p>
            <Link href="/" className="btn-secondary mt-6 text-sm lg:hidden">
              ← Landing page
            </Link>
          </header>

          <article className="prose-ebook">
            {chapters.map((chapter, index) => (
              <section
                key={chapter.id}
                id={chapter.id}
                className={
                  index > 0
                    ? "mt-16 scroll-mt-[calc(var(--header-h)+1.5rem)] border-t border-[var(--border)] pt-16 sm:mt-20 sm:pt-20"
                    : "scroll-mt-[calc(var(--header-h)+1.5rem)]"
                }
              >
                <h2>{chapter.title}</h2>
                {chapter.summary ? (
                  <p className="chapter-lead">{chapter.summary}</p>
                ) : null}
                <ChapterContent content={chapter.content} />
                <ChapterNav chapterId={chapter.id} />
              </section>
            ))}
          </article>

          <footer className="glass-card mt-16 px-6 py-10 text-center sm:mt-20">
            <p className="font-display text-lg font-bold text-[var(--foreground)]">
              You&apos;ve finished the trailhead
            </p>
            <p className="mt-2 text-sm text-[var(--muted)]">
              Pick one habit from this guide and test it in your next base. Safe
              travels—and deep work.
            </p>
            <div className="mt-6 flex flex-col items-center justify-center gap-3 sm:flex-row">
              <Link href="/" className="btn-secondary">
                Back to home
              </Link>
              <a href="#introduction" className="btn-primary">
                Re-read intro
              </a>
            </div>
          </footer>
        </div>
      </div>
    </div>
  );
}