import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { XCircle } from "lucide-react";

const problems = [
  {
    title: "Lack of practical skills",
    description: "Indian students often graduate with theoretical knowledge but zero hands-on experience required by the industry.",
  },
  {
    title: "High dropout rates",
    description: "Traditional EdTech platforms are boring and theory-heavy, leading to low completion and high student frustration.",
  },
  {
    title: "Career Confusion",
    description: "Students have no clarity on future careers or which skills actually align with their natural interests.",
  },
  {
    title: "The Digital Divide",
    description: "Lack of affordable, scalable skilling solutions that can reach every corner of India effectively.",
  },
];

export function ProblemSection() {
  return (
    <section className="py-20 bg-neutral-50">
      <Container>
        <div className="text-center max-w-3xl mx-auto mb-16">
          <Heading level="h2" className="text-3xl md:text-4xl">The Indian Student Problem</Heading>
          <Subheading className="mt-4">
            This problem exists at school, college, and early career levels. We are here to bridge this gap.
          </Subheading>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {problems.map((problem, index) => (
            <Card key={index} className="border-none shadow-sm bg-white">
              <CardHeader className="flex flex-row items-start space-x-4 space-y-0">
                <div className="mt-1">
                  <XCircle className="h-6 w-6 text-red-500" />
                </div>
                <div>
                  <CardTitle className="text-xl mb-2">{problem.title}</CardTitle>
                  <CardDescription className="text-neutral-600 text-base">
                    {problem.description}
                  </CardDescription>
                </div>
              </CardHeader>
            </Card>
          ))}
        </div>
      </Container>
    </section>
  );
}