/**
 * @file app/page.tsx
 * @description Welcome landing page component with responsive hero section, features showcase, and authentication redirect check.
 */

import { auth } from "@/auth";
import { redirect } from "next/navigation";
import Link from "next/link";
import Footer from "@/app/components/layout/Footer";
import { JSX } from "react/jsx-runtime";

/**
 * Properties for the FeatureCard component.
 *
 * @interface FeatureCardProps
 * @property {React.ReactNode} icon - The icon element displayed inside the feature card.
 * @property {string} title - The title of the feature.
 * @property {string} description - A short explanatory description of the feature.
 */
interface FeatureCardProps {
  icon: React.ReactNode;
  title: string;
  description: string;
}

/**
 * Renders an individual feature card highlighting a specific platform capability.
 *
 * @param {FeatureCardProps} props - The component props.
 * @param {React.ReactNode} props.icon - The feature icon.
 * @param {string} props.title - The feature title.
 * @param {string} props.description - The feature description text.
 * @returns {JSX.Element} The rendered feature card component.
 */
function FeatureCard({ icon, title, description }: FeatureCardProps) {
  return (
    <div className="group relative flex flex-row sm:flex-col items-center sm:items-start gap-4 sm:gap-0 p-4 sm:p-5 rounded-xl border border-border bg-card backdrop-blur-sm transition-all duration-300 hover:border-primary/40">
      <div className="shrink-0 sm:mb-3 rounded-lg p-2.5 bg-background text-primary transition-colors group-hover:bg-primary group-hover:text-background">
        {icon}
      </div>
      <div>
        <h3 className="text-sm sm:text-base font-semibold tracking-tight text-foreground mb-0.5 sm:mb-1">
          {title}
        </h3>
        <p className="text-xs text-foreground-muted leading-relaxed">
          {description}
        </p>
      </div>
    </div>
  );
}

/**
 * Renders the fully responsive welcome landing page using custom Tailwind CSS variables.
 *
 * @async
 * @returns {Promise<JSX.Element>} The rendered welcome landing page component.
 */
export default async function WelcomePage(): Promise<JSX.Element> {
  const session = typeof auth === "function" ? await auth() : null;

  if (session) {
    redirect("/summary");
  }

  return (
    <div className="relative min-h-dvh w-full flex flex-col justify-between overflow-x-hidden bg-background text-foreground selection:bg-primary selection:text-background">
      {/* Background Glow (Scaled down for mobile performance) */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-x-0 -top-20 sm:-top-32 -z-10 transform-gpu overflow-hidden blur-2xl sm:blur-3xl"
      >
        <div
          className="relative left-[calc(50%-10rem)] aspect-1155/678 w-[20rem] sm:w-50rem -translate-x-1/2 rotate-30deg bg-linear-to-tr from-accent to-primary opacity-20 sm:opacity-15"
          style={{
            clipPath:
              "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
          }}
        />
      </div>

      {/* Main Content Area */}
      <main className="flex-1 w-full flex flex-col items-center justify-center px-4 sm:px-6 py-8 sm:py-12 max-w-6xl mx-auto z-10">
        {/* Hero Header */}
        <div className="text-center max-w-3xl mx-auto space-y-3 sm:space-y-4">
          <h1 className="text-3xl sm:text-6xl font-extrabold tracking-tight text-foreground leading-tight">
            Master your work in seamless{" "}
            <span className="bg-linear-to-r from-primary to-accent bg-clip-text text-transparent">
              Flowstate
            </span>
          </h1>

          <p className="text-sm sm:text-lg text-foreground-muted max-w-xl mx-auto leading-relaxed px-2">
            Eliminate friction, organize your focus, and achieve effortless
            productivity with your modern workspace companion.
          </p>

          {/* Action Buttons */}
          <div className="flex flex-col sm:flex-row items-center justify-center gap-2.5 sm:gap-3 pt-3 w-full max-w-xs sm:max-w-none mx-auto">
            <Link
              href="/register/"
              className="w-full sm:w-auto inline-flex items-center justify-center px-6 py-3 text-sm font-semibold rounded-lg bg-primary text-background shadow-md hover:bg-primary-hover transition-colors duration-200"
            >
              Get Started
              <svg
                className="ml-2 -mr-1 h-4 w-4"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth="2"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
                />
              </svg>
            </Link>

            <Link
              href="/login/"
              className="w-full sm:w-auto inline-flex items-center justify-center px-6 py-3 text-sm font-semibold rounded-lg border border-border bg-card hover:bg-border/40 text-foreground transition-colors duration-200"
            >
              Sign In
            </Link>
          </div>
        </div>

        {/* Features Showcase */}
        <div className="mt-8 sm:mt-12 w-full max-w-4xl">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4">
            <FeatureCard
              icon={
                <svg
                  className="w-5 h-5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  strokeWidth="2"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M13 10V3L4 14h7v7l9-11h-7z"
                  />
                </svg>
              }
              title="Hyper Velocity"
              description="Eliminate switching friction with optimized workflows keeping you directly in the zone."
            />
            <FeatureCard
              icon={
                <svg
                  className="w-5 h-5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  strokeWidth="2"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
                  />
                </svg>
              }
              title="Clean Metrics"
              description="Visualize focus states and process summaries clearly without visual clutter."
            />
            <FeatureCard
              icon={
                <svg
                  className="w-5 h-5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  strokeWidth="2"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
                  />
                </svg>
              }
              title="Full Security"
              description="Encrypted data and robust authentication guards protecting your workspace session."
            />
          </div>
        </div>
      </main>

      {/* Footer Container */}
      <Footer />
    </div>
  );
}