src/components/AboutPage.tsx

import { Heart, Brain, Target, Users, Linkedin, GraduationCap } from "lucide-react";
import { Card } from "@/components/ui/card";

const teamMembers = [
  { name: "Fatma Al-Zahraa Emad", linkedin: "#" },
  { name: "Gehad Mohamed", linkedin: "#" },
  { name: "Hebatullah El Gazoly", linkedin: "#" },
  { name: "Mohamed Assem", linkedin: "#" },
  { name: "Mohamed Sameh", linkedin: "#" },
];

export const AboutPage = () => {
  return (
    <div className="space-y-12 animate-fade-in">
      {/* Hero Section */}
      <div className="text-center">
        <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-primary/10">
          <Heart className="h-10 w-10 text-primary" />
        </div>
        <h1 className="mb-4 font-display text-4xl font-bold tracking-tight">
          About <span className="gradient-text">Cardexa</span>
        </h1>
        <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
          An AI-powered echocardiography analysis platform for automated cardiac function assessment
        </p>
      </div>

      {/* Project Overview */}
      <div className="grid gap-6 md:grid-cols-3">
        <Card className="glass-card p-6">
          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10">
            <Brain className="h-6 w-6 text-primary" />
          </div>
          <h3 className="mb-2 font-display text-lg font-semibold">AI-Powered Analysis</h3>
          <p className="text-sm text-muted-foreground">
            Leveraging deep learning models to automatically analyze echocardiography videos and extract critical cardiac measurements.
          </p>
        </Card>

        <Card className="glass-card p-6">
          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10">
            <Target className="h-6 w-6 text-primary" />
          </div>
          <h3 className="mb-2 font-display text-lg font-semibold">Precise Measurements</h3>
          <p className="text-sm text-muted-foreground">
            Accurate identification of end-systolic and end-diastolic frames with volume calculations and ejection fraction estimation.
          </p>
        </Card>

        <Card className="glass-card p-6">
          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10">
            <Heart className="h-6 w-6 text-primary" />
          </div>
          <h3 className="mb-2 font-display text-lg font-semibold">Clinical Assessment</h3>
          <p className="text-sm text-muted-foreground">
            Automated classification of heart function status to assist medical professionals in diagnosis and treatment planning.
          </p>
        </Card>
      </div>

      {/* Supervisors Section */}
      <div>
        <div className="mb-6 flex items-center justify-center gap-3">
          <GraduationCap className="h-6 w-6 text-primary" />
          <h2 className="font-display text-2xl font-bold">Project Supervisors</h2>
        </div>
        <div className="grid gap-6 md:grid-cols-2">
          <Card className="glass-card p-6">
            <div className="flex items-center gap-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10">
                <GraduationCap className="h-6 w-6 text-primary" />
              </div>
              <div>
                <p className="text-sm text-muted-foreground">Supervisor</p>
                <h3 className="font-display text-xl font-semibold">Dr. Mohammed A. Hassan</h3>
              </div>
            </div>
          </Card>
          <Card className="glass-card p-6">
            <div className="flex items-center gap-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10">
                <GraduationCap className="h-6 w-6 text-primary" />
              </div>
              <div>
                <p className="text-sm text-muted-foreground">Teaching Assistant</p>
                <h3 className="font-display text-xl font-semibold">Eng. Maha Salah</h3>
              </div>
            </div>
          </Card>
        </div>
      </div>

      {/* Team Section */}
      <div>
        <div className="mb-8 flex items-center justify-center gap-3">
          <Users className="h-6 w-6 text-primary" />
          <h2 className="font-display text-2xl font-bold">Our Team</h2>
        </div>
        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-5">
          {teamMembers.map((member, index) => (
            <a
              key={index}
              href={member.linkedin}
              target="_blank"
              rel="noopener noreferrer"
              className="group"
            >
              <Card className="glass-card overflow-hidden transition-all duration-300 hover:ring-2 hover:ring-primary/30 hover:-translate-y-1">
                <div className="aspect-square bg-gradient-to-br from-primary/20 to-accent flex items-center justify-center relative overflow-hidden">
                  <div className="absolute inset-0 bg-gradient-to-br from-primary/5 to-primary/20" />
                  <div className="relative flex h-20 w-20 items-center justify-center rounded-full bg-background/80 text-2xl font-display font-bold text-primary">
                    {member.name.split(" ").map(n => n[0]).join("")}
                  </div>
                  <div className="absolute bottom-3 right-3 flex h-8 w-8 items-center justify-center rounded-full bg-background/90 opacity-0 transition-opacity group-hover:opacity-100">
                    <Linkedin className="h-4 w-4 text-primary" />
                  </div>
                </div>
                <div className="p-4 text-center">
                  <p className="font-medium text-sm">{member.name}</p>
                </div>
              </Card>
            </a>
          ))}
        </div>
      </div>

      {/* Footer Note */}
      <div className="text-center text-sm text-muted-foreground">
        <p>© 2024 Cardexa - Cardiac Analysis Platform</p>
        <p className="mt-1">Built with ❤️ for better healthcare</p>
      </div>
    </div>
  );
};