import Link from "next/link";
import FeedbackForm from "@/app/components/forms/FeedbackForm";
import data from "@/app/data/feedback.json";

export default function FeedbackPage() {
  return (
    <main className="relative min-h-screen pt-[160px] pb-[80px] px-[var(--spacing-gutter)]">
      <div className="pointer-events-none absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-[1200px] h-[min(800px,90vh)] hero-glow -z-10" />

      <div className="max-w-[800px] mx-auto">
        <div className="mb-8">
          <Link
            className="group flex items-center gap-2 text-outline hover:text-primary transition-colors"
            href="/"
          >
            <span className="material-symbols-outlined text-[20px] transition-transform group-hover:-translate-x-1">
              arrow_back
            </span>
            Back to Home
          </Link>
        </div>

        <div className="text-center mb-10 md:mb-14">
          <h1 className="font-[var(--font-display-lg)] text-[clamp(2rem,4vw+1rem,4.5rem)] leading-tight font-bold tracking-tighter mb-4 text-primary">
            {data.title}
          </h1>
          <p className="text-on-surface-variant text-lg max-w-2xl mx-auto">{data.subtitle}</p>
        </div>

        <div className="glass-panel p-6 md:p-10 rounded-xl space-y-8 relative overflow-hidden shadow-2xl">
          <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-primary/25 to-transparent" />
          <FeedbackForm data={data} />
        </div>
      </div>
    </main>
  );
}