import Image from "next/image";
import Link from "next/link";
import { chatHref, LandingCta } from "@/components/landing/landing-cta";
import { LandingTheme } from "@/components/landing/landing-theme";
import { buttonVariants } from "@/components/ui/button";
import { suggestions } from "@/lib/constants";
import {
  ELEVATE_ABOUT_URL,
  ELEVATE_COACHING_URL,
  ELEVATE_ETIQUETTE_URL,
  landingImages,
  pillars,
  pressLogos,
} from "@/lib/landing-content";
import { cn } from "@/lib/utils";

export function LandingPage() {
  return (
    <div className="relative min-h-dvh overflow-hidden bg-background text-foreground">
      <LandingTheme />
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,oklch(0.72_0.1_350/0.18),transparent),radial-gradient(ellipse_60%_40%_at_100%_0%,oklch(0.7_0.08_230/0.12),transparent),radial-gradient(ellipse_50%_30%_at_0%_100%,oklch(0.72_0.1_350/0.08),transparent)]"
      />

      <header className="relative z-20 mx-auto flex w-full max-w-6xl items-center justify-between px-5 py-5 sm:px-8 sm:py-6">
        <Link
          className="flex items-center gap-3 rounded-lg outline-none ring-ring transition-[box-shadow] focus-visible:ring-2"
          href="/"
        >
          <Image
            alt="Elevate Etiquette"
            className="size-10 rounded-full object-contain"
            height={40}
            src={landingImages.eeLogo}
            width={40}
          />
          <span className="font-serif text-lg tracking-tight text-foreground">
            Ask Alison
          </span>
        </Link>
        <div className="relative z-20 flex items-center gap-2 sm:gap-3">
          <a
            className={cn(
              buttonVariants({ variant: "ghost" }),
              "hidden sm:inline-flex"
            )}
            href={ELEVATE_ETIQUETTE_URL}
            rel="noopener noreferrer"
            target="_blank"
          >
            Elevate Etiquette
          </a>
          <LandingCta>Start chatting</LandingCta>
        </div>
      </header>

      <main className="relative z-10">
        <section className="mx-auto max-w-6xl px-5 pb-12 pt-4 sm:px-8 sm:pb-20 sm:pt-8">
          <div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-14">
            <div>
              <p className="text-sm font-medium tracking-wide text-primary uppercase">
                Elevate Etiquette
              </p>
              <h1 className="mt-3 font-serif text-4xl tracking-tight text-foreground text-balance sm:text-5xl">
                Helping you shine in every social and professional setting
              </h1>
              <p className="mt-6 text-base leading-relaxed text-muted-foreground text-pretty sm:text-lg">
                How do you want to be remembered by your family, colleagues,
                clients, and friends? There is an art to living in community, to
                loving others well, and to respecting others and ourselves—and
                it all circles back to etiquette.
              </p>
              <p className="mt-4 text-base leading-relaxed text-muted-foreground text-pretty">
                Ask Alison brings that same warmth and expertise to your screen:
                thoughtful guidance grounded in Alison Cheperdak&apos;s voice
                and published writing.
              </p>
              <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                <LandingCta size="lg">Ask a question</LandingCta>
                <a
                  className={cn(
                    buttonVariants({ variant: "outline", size: "lg" }),
                    "h-11 px-8 text-base"
                  )}
                  href={ELEVATE_COACHING_URL}
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  Work with Alison
                </a>
              </div>
            </div>
            <div className="relative mx-auto w-full max-w-md lg:max-w-none">
              <div className="overflow-hidden rounded-2xl border border-border/70 shadow-[var(--shadow-float)]">
                <Image
                  alt="Alison M. Cheperdak, J.D., founder of Elevate Etiquette"
                  className="aspect-[4/5] w-full object-cover object-center"
                  height={800}
                  priority
                  src={landingImages.alisonPortrait}
                  width={640}
                />
              </div>
            </div>
          </div>
        </section>

        <section className="border-y border-border/60 bg-card/50 py-10 sm:py-12">
          <div className="mx-auto max-w-6xl px-5 sm:px-8">
            <p className="text-center font-serif text-sm tracking-[0.2em] text-muted-foreground uppercase">
              As seen in
            </p>
            <ul className="mt-8 flex flex-wrap items-center justify-center gap-x-10 gap-y-6">
              {pressLogos.map((logo) => (
                <li key={logo.name}>
                  <Image
                    alt={logo.name}
                    className="h-8 w-auto max-w-[7.5rem] object-contain opacity-70 grayscale transition-opacity hover:opacity-100 sm:h-9"
                    height={logo.height}
                    src={logo.src}
                    width={logo.width}
                  />
                </li>
              ))}
            </ul>
          </div>
        </section>

        <section className="mx-auto max-w-6xl px-5 py-16 sm:px-8 sm:py-20">
          <div className="grid items-center gap-10 lg:grid-cols-[1fr_1.1fr] lg:gap-16">
            <div className="order-2 lg:order-1">
              <h2 className="font-serif text-2xl tracking-tight text-foreground sm:text-3xl">
                Meet Alison M. Cheperdak, J.D.
              </h2>
              <p className="mt-2 text-sm font-medium text-primary">
                Attorney, Author, Entrepreneur &amp; Internationally Certified
                Etiquette Coach
              </p>
              <p className="mt-5 leading-relaxed text-muted-foreground text-pretty">
                Hello, I&apos;m Alison! I happily help organizations and people
                just like you become the most poised, confident, and effective
                versions of themselves through teaching modern manners and
                international protocol, among other important soft skills.
              </p>
              <p className="mt-4 leading-relaxed text-muted-foreground text-pretty">
                Alison is passionate about helping organizations and individuals
                elevate their presence through modern manners, international
                protocol, and the soft skills that inspire confidence and grace.
              </p>
              <p className="mt-4 leading-relaxed text-muted-foreground text-pretty">
                Etiquette is about more than following rules and protocol;
                it&apos;s about treating yourself and others with kindness,
                consideration, and respect. Alison teaches the kind of
                confidence that feels as natural as it looks refined.
              </p>
              <a
                className={cn(
                  buttonVariants({ variant: "outline" }),
                  "mt-6 inline-flex"
                )}
                href={ELEVATE_ABOUT_URL}
                rel="noopener noreferrer"
                target="_blank"
              >
                About Alison
              </a>
            </div>
            <div className="order-1 overflow-hidden rounded-2xl border border-border/70 shadow-[var(--shadow-card)] lg:order-2">
              <Image
                alt="Alison Cheperdak speaking on etiquette and executive presence"
                className="aspect-[5/4] w-full object-cover"
                height={640}
                src={landingImages.alisonHero}
                width={800}
              />
            </div>
          </div>
        </section>

        <section className="border-t border-border/60 bg-secondary/30 py-16 sm:py-20">
          <div className="mx-auto max-w-6xl px-5 sm:px-8">
            <div className="mx-auto max-w-2xl text-center">
              <h2 className="font-serif text-2xl tracking-tight text-foreground sm:text-3xl">
                What we do at Elevate Etiquette
              </h2>
              <p className="mt-4 text-muted-foreground text-pretty">
                At Elevate Etiquette, we believe the art of etiquette transcends
                the ordinary—it&apos;s about cultivating grace, confidence, and
                connection in every interaction.
              </p>
            </div>
            <ul className="mt-12 grid gap-6 md:grid-cols-3">
              {pillars.map((pillar) => (
                <li
                  className="rounded-2xl border border-border/70 bg-card p-6 shadow-[var(--shadow-card)]"
                  key={pillar.title}
                >
                  <h3 className="font-serif text-xl text-foreground">
                    {pillar.title}
                  </h3>
                  <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
                    {pillar.description}
                  </p>
                </li>
              ))}
            </ul>
          </div>
        </section>

        <section className="mx-auto max-w-6xl px-5 py-16 sm:px-8 sm:py-20">
          <div className="mx-auto max-w-3xl text-center">
            <h2 className="font-serif text-2xl tracking-tight text-foreground sm:text-3xl">
              The people we remember
            </h2>
            <p className="mt-5 leading-relaxed text-muted-foreground text-pretty">
              Professional and academic credentials are wonderful and
              necessary—but they alone are not enough to truly shine. It&apos;s
              the intern who writes an appropriate thank-you note, the manager
              who gives thorough performance reviews with clarity and
              magnanimity, the family member who navigates Thanksgiving without
              awkwardness, and the friend who knows how to show up with grace.
              These are the people we remember, admire, and regard as
              exceptional—because they are.
            </p>
          </div>
        </section>

        <section className="border-t border-border/60 bg-card/40 py-16 sm:py-20">
          <div className="mx-auto max-w-6xl px-5 sm:px-8">
            <div className="mx-auto max-w-2xl text-center">
              <h2 className="font-serif text-2xl tracking-tight text-foreground sm:text-3xl">
                Popular questions to start with
              </h2>
              <p className="mt-3 text-muted-foreground">
                Or bring your own—Alison is ready when you are.
              </p>
            </div>
            <ul className="mx-auto mt-10 grid max-w-4xl gap-3 sm:grid-cols-2">
              {suggestions.map((suggestion) => (
                <li key={suggestion}>
                  <Link
                    className="block rounded-xl border border-primary/15 bg-card/50 px-4 py-3.5 text-left text-sm leading-relaxed text-muted-foreground transition-colors hover:border-primary/25 hover:bg-primary/[0.04] hover:text-foreground"
                    href={chatHref}
                    prefetch
                  >
                    {suggestion}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </section>

        <section className="border-t border-border/60 bg-secondary/40 py-16 sm:py-20">
          <div className="mx-auto max-w-3xl px-5 text-center sm:px-8">
            <h2 className="font-serif text-2xl tracking-tight text-foreground sm:text-3xl">
              Join a growing community
            </h2>
            <p className="mt-4 text-muted-foreground text-pretty">
              Modern etiquette enthusiasts who believe kindness never goes out
              of style. Start a private conversation with Ask Alison, or explore
              coaching and trainings at Elevate Etiquette.
            </p>
            <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
              <LandingCta size="lg">Start your conversation</LandingCta>
              <a
                className={cn(
                  buttonVariants({ variant: "outline", size: "lg" }),
                  "h-11 px-8 text-base"
                )}
                href={ELEVATE_ETIQUETTE_URL}
                rel="noopener noreferrer"
                target="_blank"
              >
                Visit elevateetiquette.com
              </a>
            </div>
          </div>
        </section>
      </main>

      <footer className="relative z-10 border-t border-border/60 px-5 py-8 sm:px-8">
        <div className="mx-auto flex max-w-6xl justify-center text-sm text-muted-foreground">
          <nav className="flex flex-wrap items-center justify-center gap-6">
            <Link
              className="transition-colors hover:text-foreground"
              href={chatHref}
              prefetch
            >
              Chat
            </Link>
            <a
              className="transition-colors hover:text-foreground"
              href={ELEVATE_COACHING_URL}
              rel="noopener noreferrer"
              target="_blank"
            >
              Coaching
            </a>
            <a
              className="transition-colors hover:text-foreground"
              href={ELEVATE_ETIQUETTE_URL}
              rel="noopener noreferrer"
              target="_blank"
            >
              elevateetiquette.com
            </a>
          </nav>
        </div>
      </footer>
    </div>
  );
}