import Image from "next/image";
import Link from "next/link";
import { LandingAuthProvider } from "@/components/landing/auth-modal-context";
import { AuthTrigger } from "@/components/landing/auth-trigger";
import { LandingDashboardPreview } from "@/components/landing/dashboard-preview";
import { LandingFeatureIcons } from "@/components/landing/feature-icons";
import { LandingHeader } from "@/components/landing/mobile-nav";

const TRUST_POINTS = [
  "Isolated studio data",
  "Live subdomain included",
  "No shared tenant fallback",
] as const;

const FEATURES = [
  {
    title: "Portfolio CMS",
    description:
      "Create, draft, and publish architecture projects with tenant-scoped media.",
    icon: "projects" as const,
  },
  {
    title: "Inquiry intake",
    description:
      "Capture leads from your public site into a private studio inbox.",
    icon: "clients" as const,
  },
  {
    title: "Studio website",
    description:
      "Each studio gets an isolated public site on its own subdomain.",
    icon: "billing" as const,
  },
  {
    title: "Media library",
    description:
      "Upload and manage assets under tenants/<id>/ storage boundaries.",
    icon: "analytics" as const,
  },
  {
    title: "Access control",
    description:
      "Role-based permissions and server-side authorization on every mutation.",
    icon: "security" as const,
  },
] as const;

const TEMPLATES = [
  {
    name: "Modern",
    tone: "Clean portfolio presentation",
    image: "/landing/hero-architecture.jpg",
  },
  {
    name: "Terrain",
    tone: "Warm spatial storytelling",
    image: "/landing/gallery-interior.jpg",
  },
  {
    name: "Vista",
    tone: "Bold project emphasis",
    image: "/landing/gallery-facade.jpg",
  },
] as const;

export default async function PlatformHomePage({
  searchParams,
}: {
  searchParams: Promise<{ auth?: string }>;
}) {
  const params = await searchParams;
  const initialAuth =
    params.auth === "login" || params.auth === "register" ? params.auth : null;

  return (
    <LandingAuthProvider initialAuth={initialAuth}>
      <div className="flex min-h-full flex-1 flex-col bg-[var(--archi-dark)] text-white">
        <section className="relative isolate min-h-[100svh] overflow-hidden">
          <Image
            src="/landing/hero-architecture.jpg"
            alt=""
            fill
            priority
            sizes="100vw"
            className="object-cover object-[center_35%]"
          />
          <div
            aria-hidden
            className="absolute inset-0 bg-[linear-gradient(105deg,rgba(8,8,10,0.92)_0%,rgba(8,8,10,0.72)_48%,rgba(8,8,10,0.45)_100%)]"
          />

          <LandingHeader />

          <div className="relative z-10 mx-auto grid w-full max-w-7xl items-center gap-12 px-6 pt-10 pb-24 lg:grid-cols-[1.05fr_0.95fr] lg:gap-10 lg:px-10 lg:pt-16 lg:pb-28">
            <div className="max-w-xl">
              <p className="archi-animate-in text-[11px] font-semibold tracking-[0.2em] text-[var(--archi-gold-bright)] uppercase">
                Enterprise multi-tenant platform for architects
              </p>

              <h1 className="archi-animate-in archi-animate-in-delay-1 mt-5 font-[family-name:var(--font-display)] text-[2.8rem] leading-[1.02] font-extrabold tracking-tight text-white sm:text-5xl lg:text-[3.6rem]">
                Design. Showcase.
                <br />
                Manage. Grow.
              </h1>

              <p className="archi-animate-in archi-animate-in-delay-2 mt-5 max-w-md text-[15px] leading-7 text-white/70 sm:text-base">
                ARCHI gives every architecture studio an isolated website,
                portfolio CMS, media library, and inquiry pipeline — with
                strict tenant data boundaries.
              </p>

              <div className="archi-animate-in archi-animate-in-delay-3 mt-8 flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:flex-wrap sm:items-center">
                <AuthTrigger
                  view="register"
                  className="inline-flex min-h-12 w-full items-center justify-center gap-2 rounded-lg bg-[var(--archi-gold)] px-5 py-3 text-sm font-semibold text-[var(--archi-dark)] transition hover:bg-[var(--archi-gold-bright)] sm:w-auto"
                >
                  Create studio account
                  <ArrowRight />
                </AuthTrigger>
                <AuthTrigger
                  view="login"
                  className="inline-flex min-h-12 w-full items-center justify-center gap-2 rounded-lg border border-white/25 bg-white/5 px-5 py-3 text-sm font-medium text-white backdrop-blur transition hover:border-white/45 hover:bg-white/10 sm:w-auto"
                >
                  Sign in to dashboard
                </AuthTrigger>
              </div>

              <ul className="mt-6 flex flex-wrap gap-x-5 gap-y-2 text-[12px] text-white/65">
                {TRUST_POINTS.map((point) => (
                  <li key={point} className="inline-flex items-center gap-1.5">
                    <CheckIcon />
                    {point}
                  </li>
                ))}
              </ul>
            </div>

            <div className="archi-animate-in archi-animate-in-delay-2 relative mx-auto w-full max-w-lg lg:mx-0 lg:justify-self-end">
              <LandingDashboardPreview />
            </div>
          </div>
        </section>

        <section
          id="features"
          className="relative overflow-hidden bg-[var(--archi-cream-soft)] px-6 py-16 text-[var(--archi-ink)] lg:px-10 lg:py-20"
        >
          <div className="mx-auto mb-12 max-w-7xl lg:mb-14">
            <div className="h-px w-16 bg-gradient-to-r from-[var(--archi-gold)] to-transparent" />
            <h2 className="mt-5 font-[family-name:var(--font-display)] text-3xl font-bold tracking-tight sm:text-4xl">
              What ships today
            </h2>
            <p className="mt-3 max-w-2xl text-[15px] leading-7 text-[var(--archi-ink-muted)]">
              Production capabilities available to every active studio — no demo
              modules advertised ahead of delivery.
            </p>
          </div>
          <div className="mx-auto grid max-w-7xl gap-10 sm:grid-cols-2 lg:grid-cols-5 lg:gap-6">
            {FEATURES.map((feature) => (
              <article key={feature.title} className="min-w-0">
                <LandingFeatureIcons name={feature.icon} />
                <h3 className="mt-4 text-[15px] font-semibold tracking-tight">
                  {feature.title}
                </h3>
                <p className="mt-2 text-[13px] leading-6 text-[var(--archi-ink-muted)]">
                  {feature.description}
                </p>
              </article>
            ))}
          </div>
        </section>

        <section
          id="solutions"
          className="bg-[var(--archi-cream)] px-6 py-16 text-[var(--archi-ink)] lg:px-10 lg:py-20"
        >
          <div className="mx-auto max-w-7xl">
            <h2 className="font-[family-name:var(--font-display)] text-3xl font-bold tracking-tight sm:text-4xl">
              Studio websites that stay yours.
            </h2>
            <p className="mt-3 max-w-xl text-[15px] leading-7 text-[var(--archi-ink-muted)]">
              Each tenant publishes on an isolated hostname. Visitors never fall
              through to another studio&apos;s content.
            </p>
            <Link
              href="/discover"
              className="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-[var(--archi-gold)] hover:text-[var(--archi-gold-bright)]"
            >
              Browse published studios
              <ArrowRight className="h-3.5 w-3.5" />
            </Link>

            <div className="mt-10 grid gap-4 sm:grid-cols-3">
              {TEMPLATES.map((template) => (
                <article
                  key={template.name}
                  className="group overflow-hidden border border-[var(--archi-line)] bg-white"
                >
                  <div className="relative aspect-[4/5]">
                    <Image
                      src={template.image}
                      alt=""
                      fill
                      sizes="280px"
                      className="object-cover transition duration-700 group-hover:scale-105"
                    />
                    <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/75 to-transparent p-4 pt-16">
                      <p className="text-[11px] font-semibold tracking-[0.18em] text-white uppercase">
                        {template.name}
                      </p>
                      <p className="mt-1 text-xs text-white/70">{template.tone}</p>
                    </div>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </section>

        <section
          id="security"
          className="border-y border-white/10 bg-[var(--archi-dark)] px-6 py-16 lg:px-10"
        >
          <div className="mx-auto grid max-w-7xl gap-10 lg:grid-cols-2 lg:items-center">
            <div>
              <h2 className="font-[family-name:var(--font-display)] text-3xl font-bold tracking-tight sm:text-4xl">
                Built for tenant isolation.
              </h2>
              <p className="mt-4 text-[15px] leading-7 text-white/60">
                ARCHI never trusts client-supplied tenant IDs. Storage keys,
                cache keys, queries, and authorization checks are always bound
                to a trusted server-side TenantContext.
              </p>
            </div>
            <ul className="space-y-4 text-sm text-white/70">
              {[
                "Per-studio subdomain routing with no default-tenant fallback",
                "RBAC permissions enforced on the server for every mutation",
                "Media served only to authenticated members of that tenant",
                "Session memberships refreshed so revoked access expires quickly",
              ].map((item) => (
                <li key={item} className="flex gap-3">
                  <CheckIcon />
                  <span>{item}</span>
                </li>
              ))}
            </ul>
          </div>
        </section>

        <footer className="relative overflow-hidden border-t border-white/10 bg-[var(--archi-dark)] text-white">
          <div
            aria-hidden
            className="pointer-events-none absolute inset-0"
            style={{
              background:
                "radial-gradient(ellipse 50% 60% at 90% 0%, rgba(201,162,39,0.12), transparent 55%)",
            }}
          />
          <div className="relative mx-auto flex max-w-7xl flex-col gap-8 px-[max(1.25rem,env(safe-area-inset-left))] py-12 pr-[max(1.25rem,env(safe-area-inset-right))] pb-[max(2.5rem,env(safe-area-inset-bottom))] sm:gap-10 lg:px-10 lg:py-14">
            <div className="flex flex-col gap-6 border-b border-white/10 pb-8 sm:flex-row sm:items-end sm:justify-between">
              <div>
                <div className="mb-4 h-px w-12 bg-gradient-to-r from-[var(--archi-gold)] to-transparent" />
                <div className="flex items-center gap-2.5">
                  <ArchMark className="h-5 w-5" />
                  <span className="font-[family-name:var(--font-display)] text-lg font-semibold tracking-[0.2em]">
                    ARCHI
                  </span>
                </div>
                <p className="mt-4 max-w-md text-sm leading-6 text-white/45">
                  Enterprise multi-tenant platform for architecture studios —
                  websites, portfolios, and private inquiry pipelines.
                </p>
              </div>
              <AuthTrigger
                view="register"
                className="inline-flex min-h-12 w-full items-center justify-center gap-2 bg-[var(--archi-gold)] px-5 py-3 text-sm font-semibold text-[var(--archi-dark)] transition hover:bg-[var(--archi-gold-bright)] sm:w-auto"
              >
                Start your studio
                <ArrowRight />
              </AuthTrigger>
            </div>
            <div className="flex flex-col gap-4 text-[13px] text-white/35 sm:flex-row sm:items-center sm:justify-between">
              <nav className="flex flex-wrap gap-x-6 gap-y-2">
                <Link href="/discover" className="transition hover:text-white">
                  Discover
                </Link>
                <Link href="/?auth=login" className="transition hover:text-white">
                  Sign in
                </Link>
                <Link href="/register" className="transition hover:text-white">
                  Register
                </Link>
              </nav>
              <p>© {new Date().getFullYear()} ARCHI Platform. All rights reserved.</p>
            </div>
          </div>
        </footer>
      </div>
    </LandingAuthProvider>
  );
}

function ArchMark({ className = "h-6 w-6" }: { className?: string }) {
  return (
    <svg viewBox="0 0 32 32" className={className} aria-hidden fill="none">
      <path
        d="M16 3L28 28H22.5L19.7 21.2H12.3L9.5 28H4L16 3Z"
        fill="var(--archi-gold)"
      />
      <path d="M13.4 18.2H18.6L16 12.2L13.4 18.2Z" fill="var(--archi-dark)" />
    </svg>
  );
}

function ArrowRight({ className = "h-4 w-4" }: { className?: string }) {
  return (
    <svg viewBox="0 0 16 16" className={className} aria-hidden fill="none">
      <path
        d="M3 8h10M9 4l4 4-4 4"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function CheckIcon() {
  return (
    <svg viewBox="0 0 16 16" className="h-3.5 w-3.5 shrink-0" aria-hidden fill="none">
      <path
        d="M3.5 8.5l3 3 6-7"
        stroke="var(--archi-gold)"
        strokeWidth="1.6"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}