import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Card, CardContent } from "@/components/ui/card";
import { TrendingUp, Users, DollarSign, Rocket } from "lucide-react";

export function BusinessModel() {
  return (
    <section className="py-20 bg-blue-50">
      <Container>
        <div className="text-center max-w-3xl mx-auto mb-16">
          <Heading level="h2" className="text-3xl md:text-4xl">Business Model & Vision</Heading>
          <Subheading className="mt-4">
            How we scale and sustain the impact across India.
          </Subheading>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
          <Card className="border-none shadow-sm">
            <CardContent className="p-8 text-center">
              <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <DollarSign className="h-6 w-6 text-blue-600" />
              </div>
              <h3 className="text-3xl font-bold mb-2">₹500/mo</h3>
              <p className="text-neutral-600 font-medium">Subscription Model</p>
              <p className="text-sm text-neutral-500 mt-2">Affordable access to all premium tracks and certifications.</p>
            </CardContent>
          </Card>
          
          <Card className="border-none shadow-sm">
            <CardContent className="p-8 text-center">
              <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <TrendingUp className="h-6 w-6 text-green-600" />
              </div>
              <h3 className="text-3xl font-bold mb-2">75%</h3>
              <p className="text-neutral-600 font-medium">Gross Margin</p>
              <p className="text-sm text-neutral-500 mt-2">Highly scalable digital infrastructure with low operational overhead.</p>
            </CardContent>
          </Card>

          <Card className="border-none shadow-sm">
            <CardContent className="p-8 text-center">
              <div className="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <Users className="h-6 w-6 text-purple-600" />
              </div>
              <h3 className="text-3xl font-bold mb-2">3.5x</h3>
              <p className="text-neutral-600 font-medium">LTV / CAC Ratio</p>
              <p className="text-sm text-neutral-500 mt-2">Strong unit economics driven by organic student referrals.</p>
            </CardContent>
          </Card>
        </div>

        <div className="bg-white p-8 md:p-12 rounded-3xl shadow-sm border border-neutral-100">
          <div className="flex items-center gap-3 mb-8">
            <Rocket className="h-8 w-8 text-blue-600" />
            <h3 className="text-2xl font-bold">Vision for Scale</h3>
          </div>
          
          <div className="space-y-8">
            <div className="relative">
              <div className="flex justify-between mb-2 text-sm font-bold">
                <span>Phase 1: Foundation</span>
                <span>1,000 Students</span>
              </div>
              <div className="w-full h-3 bg-neutral-100 rounded-full overflow-hidden">
                <div className="w-[10%] h-full bg-blue-600 rounded-full" />
              </div>
            </div>
            
            <div className="relative">
              <div className="flex justify-between mb-2 text-sm font-bold">
                <span>Phase 2: Growth</span>
                <span>50,000 Students</span>
              </div>
              <div className="w-full h-3 bg-neutral-100 rounded-full overflow-hidden">
                <div className="w-[40%] h-full bg-blue-400 rounded-full" />
              </div>
            </div>

            <div className="relative">
              <div className="flex justify-between mb-2 text-sm font-bold">
                <span>Phase 3: Pan-India Impact</span>
                <span>1,000,000+ Students</span>
              </div>
              <div className="w-full h-3 bg-neutral-100 rounded-full overflow-hidden">
                <div className="w-[100%] h-full bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full" />
              </div>
            </div>
          </div>
          
          <p className="mt-10 text-center text-neutral-600 italic">
            "Our long-term goal is to become the pan-India skill platform and job marketplace for the next generation."
          </p>
        </div>
      </Container>
    </section>
  );
}