frontend/app/matrix/page.tsx

"use client";

import React from "react";
import Link from "next/link";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/Card";
import { Button } from "@/components/ui/Button";
import { Search, TestTube } from "lucide-react";
import { InfoButton } from "@/components/ui/InfoButton";

export default function MatrixPage() {
  return (
    <div className="min-h-screen pb-12">
      {/* Hero Section */}
      <div className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-cyan-50 to-pink-50 py-12 mb-8">
        <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="text-center animate-fade-in">
            <div className="flex items-center justify-center gap-3 mb-4">
              <h1 className="text-4xl md:text-5xl font-extrabold">
                <span className="gradient-text">Matrix</span>
                <span className="text-gray-900"> System</span>
              </h1>
              <InfoButton
                title="Matrix System Explained"
                content="The Matrix System is a systematic approach to ad generation that combines Angles and Concepts.

ANGLES: The reason someone should care right now. They target specific emotional triggers or pain points.

CONCEPTS: The creative execution style - how your ad looks and feels visually.

By combining different angles with different concepts, you create a matrix of possibilities. This systematic approach helps you:
- Test multiple combinations efficiently
- Find winning angle/concept pairs
- Scale successful patterns
- Avoid creative fatigue

Use the Matrix flow in Generate to select specific combinations, or use the Testing Matrix Builder to create systematic test plans."
                position="bottom"
              />
            </div>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
              Explore the Angle × Concept matrix for systematic ad generation
            </p>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <Card 
            variant="glass" 
            className="animate-scale-in hover:scale-105 transition-all duration-300 group cursor-pointer" 
            style={{ animationDelay: "0.1s" }}
          >
            <Link href="/browse/angles" className="block">
              <CardHeader>
                <div className="p-3 rounded-xl bg-gradient-to-br from-purple-500 via-pink-500 to-rose-500 w-fit mb-3 shadow-lg group-hover:shadow-xl group-hover:scale-110 transition-all duration-300">
                  <Search className="h-6 w-6 text-white" />
                </div>
                <CardTitle className="group-hover:text-purple-600 transition-colors">Browse Angles</CardTitle>
                <CardDescription>
                  Explore all 100 available angles
                </CardDescription>
              </CardHeader>
              <CardContent>
                <Button variant="outline" className="w-full border-purple-200 hover:border-purple-400 hover:bg-purple-50 transition-colors">
                  View Angles
                </Button>
              </CardContent>
            </Link>
          </Card>

          <Card 
            variant="glass" 
            className="animate-scale-in hover:scale-105 transition-all duration-300 group cursor-pointer" 
            style={{ animationDelay: "0.2s" }}
          >
            <Link href="/browse/concepts" className="block">
              <CardHeader>
                <div className="p-3 rounded-xl bg-gradient-to-br from-emerald-500 via-teal-500 to-cyan-500 w-fit mb-3 shadow-lg group-hover:shadow-xl group-hover:scale-110 transition-all duration-300">
                  <Search className="h-6 w-6 text-white" />
                </div>
                <CardTitle className="group-hover:text-emerald-600 transition-colors">Browse Concepts</CardTitle>
                <CardDescription>
                  Explore all 100 available concepts
                </CardDescription>
              </CardHeader>
              <CardContent>
                <Button variant="outline" className="w-full border-emerald-200 hover:border-emerald-400 hover:bg-emerald-50 transition-colors">
                  View Concepts
                </Button>
              </CardContent>
            </Link>
          </Card>

          <Card 
            variant="glass" 
            className="animate-scale-in hover:scale-105 transition-all duration-300 group cursor-pointer" 
            style={{ animationDelay: "0.3s" }}
          >
            <Link href="/matrix/testing" className="block">
              <CardHeader>
                <div className="p-3 rounded-xl bg-gradient-to-br from-amber-500 via-orange-500 to-pink-500 w-fit mb-3 shadow-lg group-hover:shadow-xl group-hover:scale-110 transition-all duration-300">
                  <TestTube className="h-6 w-6 text-white" />
                </div>
                <CardTitle className="group-hover:text-orange-600 transition-colors">Testing Matrix Builder</CardTitle>
                <CardDescription>
                  Generate systematic testing matrices for optimization
                </CardDescription>
              </CardHeader>
              <CardContent>
                <Button variant="secondary" className="w-full group-hover:shadow-lg transition-all">
                  <TestTube className="h-4 w-4 mr-2 group-hover:rotate-12 transition-transform duration-300" />
                  Build Testing Matrix
                </Button>
              </CardContent>
            </Link>
          </Card>
        </div>
      </div>
    </div>
  );
}