Assist_Design/apps/portal/src/features/landing-page/views/PublicLandingView.tsx

import Link from "next/link";
import { Logo } from "@/components/atoms/logo";
import {
  UserIcon,
  SparklesIcon,
  CreditCardIcon,
  Cog6ToothIcon,
  PhoneIcon,
  ArrowRightIcon,
} from "@heroicons/react/24/outline";

export function PublicLandingView() {
  return (
    <div className="space-y-12">
      {/* Hero */}
      <section className="text-center space-y-8">
        <div className="relative inline-block">
          {/* Subtle glow behind logo */}
          <div className="absolute inset-0 bg-primary/15 blur-3xl rounded-full scale-[2]" />
          <div className="relative inline-flex items-center justify-center h-24 w-24 rounded-3xl bg-card border border-border/40 shadow-2xl shadow-primary/20 mx-auto">
            <Logo size={56} />
          </div>
        </div>
        <div className="space-y-4">
          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-foreground">
            Customer Portal
          </h1>
          <p className="text-lg sm:text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
            Manage your services, billing, and support in one place.
          </p>
        </div>
      </section>

      {/* Primary actions */}
      <section className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
        <div className="group relative bg-card rounded-2xl border border-border/50 p-7 shadow-lg shadow-black/5 hover:shadow-xl hover:border-border/80 transition-all duration-300 hover:-translate-y-1">
          <div className="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity" />
          <div className="relative flex items-start gap-5">
            <div className="h-14 w-14 rounded-2xl bg-gradient-to-br from-primary/15 to-primary/5 border border-primary/20 flex items-center justify-center flex-shrink-0">
              <UserIcon className="h-7 w-7 text-primary" />
            </div>
            <div className="min-w-0 flex-1">
              <h2 className="text-xl font-semibold text-foreground">Existing customers</h2>
              <p className="text-sm text-muted-foreground mt-2 leading-relaxed">
                Sign in or migrate your account from the old system.
              </p>
              <div className="mt-6 flex flex-col sm:flex-row gap-3">
                <Link
                  href="/auth/login"
                  className="inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold bg-primary text-primary-foreground hover:bg-primary-hover shadow-md shadow-primary/25 hover:shadow-lg hover:shadow-primary/30 transition-all"
                >
                  Sign in
                  <ArrowRightIcon className="h-4 w-4" />
                </Link>
                <Link
                  href="/auth/link-whmcs"
                  className="inline-flex items-center justify-center rounded-xl px-6 py-3 text-sm font-medium border border-border bg-card hover:bg-muted/50 transition-colors"
                >
                  Migrate account
                </Link>
              </div>
            </div>
          </div>
        </div>

        <div className="group relative bg-card rounded-2xl border border-border/50 p-7 shadow-lg shadow-black/5 hover:shadow-xl hover:border-border/80 transition-all duration-300 hover:-translate-y-1">
          <div className="absolute inset-0 bg-gradient-to-br from-success/5 to-transparent rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity" />
          <div className="relative flex items-start gap-5">
            <div className="h-14 w-14 rounded-2xl bg-gradient-to-br from-success/15 to-success/5 border border-success/20 flex items-center justify-center flex-shrink-0">
              <SparklesIcon className="h-7 w-7 text-success" />
            </div>
            <div className="min-w-0 flex-1">
              <h2 className="text-xl font-semibold text-foreground">New customers</h2>
              <p className="text-sm text-muted-foreground mt-2 leading-relaxed">
                Create an account to get started with our services.
              </p>
              <div className="mt-6">
                <Link
                  href="/auth/signup"
                  className="inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold bg-primary text-primary-foreground hover:bg-primary-hover shadow-md shadow-primary/25 hover:shadow-lg hover:shadow-primary/30 transition-all"
                >
                  Create account
                  <ArrowRightIcon className="h-4 w-4" />
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Feature highlights */}
      <section className="max-w-4xl mx-auto">
        <div className="bg-card rounded-2xl border border-border/50 p-8 sm:p-10 shadow-lg shadow-black/5">
          <div className="flex items-center justify-between gap-4 flex-wrap mb-10">
            <div>
              <h2 className="text-2xl font-bold text-foreground">Everything you need</h2>
              <p className="text-muted-foreground mt-2">Powerful tools to manage your account</p>
            </div>
            <Link
              href="/support"
              className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:text-primary-hover transition-colors"
            >
              Need help?
              <ArrowRightIcon className="h-4 w-4" />
            </Link>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
            <div className="group rounded-2xl border border-border/50 bg-card p-6 hover:border-primary/30 hover:shadow-md transition-all duration-300">
              <div className="h-12 w-12 rounded-xl bg-gradient-to-br from-primary/15 to-primary/5 border border-primary/15 flex items-center justify-center mb-5">
                <CreditCardIcon className="h-6 w-6 text-primary" />
              </div>
              <div className="text-lg font-semibold text-foreground">Billing</div>
              <div className="text-sm text-muted-foreground mt-2 leading-relaxed">
                View invoices, payments, and billing history.
              </div>
            </div>

            <div className="group rounded-2xl border border-border/50 bg-card p-6 hover:border-info/30 hover:shadow-md transition-all duration-300">
              <div className="h-12 w-12 rounded-xl bg-gradient-to-br from-info/15 to-info/5 border border-info/15 flex items-center justify-center mb-5">
                <Cog6ToothIcon className="h-6 w-6 text-info" />
              </div>
              <div className="text-lg font-semibold text-foreground">Services</div>
              <div className="text-sm text-muted-foreground mt-2 leading-relaxed">
                Manage subscriptions and service details.
              </div>
            </div>

            <div className="group rounded-2xl border border-border/50 bg-card p-6 hover:border-success/30 hover:shadow-md transition-all duration-300">
              <div className="h-12 w-12 rounded-xl bg-gradient-to-br from-success/15 to-success/5 border border-success/15 flex items-center justify-center mb-5">
                <PhoneIcon className="h-6 w-6 text-success" />
              </div>
              <div className="text-lg font-semibold text-foreground">Support</div>
              <div className="text-sm text-muted-foreground mt-2 leading-relaxed">
                Create cases and track responses in one place.
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}