"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { TrendingUp, Users, Globe, ShieldCheck } from "lucide-react";

export function BusinessGTM() {
  return (
    <section className="py-20">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* Business Model */}
          <div>
            <Heading className="text-3xl mb-8">Business Model</Heading>
            <div className="space-y-4">
              <Card>
                <CardHeader className="pb-2">
                  <CardTitle className="text-xl flex justify-between">
                    Subscription <span>₹500/month</span>
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-muted-foreground text-sm">Access to all skill roadmaps, projects, and community.</p>
                </CardContent>
              </Card>
              <Card>
                <CardHeader className="pb-2">
                  <CardTitle className="text-xl">Certifications</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-muted-foreground text-sm">Secondary revenue from industry-recognized skill badges.</p>
                </CardContent>
              </Card>
              <div className="grid grid-cols-3 gap-4 mt-6">
                <div className="text-center p-4 bg-slate-50 dark:bg-neutral-900 rounded-lg">
                  <p className="text-xs text-muted-foreground uppercase font-bold">CAC</p>
                  <p className="text-xl font-bold text-primary">₹150</p>
                </div>
                <div className="text-center p-4 bg-slate-50 dark:bg-neutral-900 rounded-lg">
                  <p className="text-xs text-muted-foreground uppercase font-bold">LTV</p>
                  <p className="text-xl font-bold text-primary">₹4500</p>
                </div>
                <div className="text-center p-4 bg-slate-50 dark:bg-neutral-900 rounded-lg">
                  <p className="text-xs text-muted-foreground uppercase font-bold">Margin</p>
                  <p className="text-xl font-bold text-primary">85%</p>
                </div>
              </div>
            </div>
          </div>

          {/* GTM Strategy */}
          <div>
            <Heading className="text-3xl mb-8">Go-To-Market</Heading>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div className="p-4 border rounded-xl flex gap-3">
                <Users className="w-5 h-5 text-primary shrink-0" />
                <div>
                  <h4 className="font-bold text-sm">Influencers</h4>
                  <p className="text-xs text-muted-foreground">Collabs with education creators.</p>
                </div>
              </div>
              <div className="p-4 border rounded-xl flex gap-3">
                <TrendingUp className="w-5 h-5 text-primary shrink-0" />
                <div>
                  <h4 className="font-bold text-sm">Referrals</h4>
                  <p className="text-xs text-muted-foreground">Student-led growth loops.</p>
                </div>
              </div>
              <div className="p-4 border rounded-xl flex gap-3">
                <Globe className="w-5 h-5 text-primary shrink-0" />
                <div>
                  <h4 className="font-bold text-sm">College Events</h4>
                  <p className="text-xs text-muted-foreground">Live workshops and clubs.</p>
                </div>
              </div>
              <div className="p-4 border rounded-xl flex gap-3">
                <ShieldCheck className="w-5 h-5 text-primary shrink-0" />
                <div>
                  <h4 className="font-bold text-sm">Scalability</h4>
                  <p className="text-xs text-muted-foreground">AI layer for millions of users.</p>
                </div>
              </div>
            </div>
            
            <div className="mt-8 p-6 bg-primary/5 border border-primary/20 rounded-xl">
              <h4 className="font-bold mb-4">Vision for Scale</h4>
              <div className="flex justify-between items-end gap-2">
                {[1000, 10000, 50000, "1M+"].map((val, i) => (
                  <div key={i} className="flex flex-col items-center gap-2 flex-1">
                    <div 
                      className="w-full bg-primary rounded-t-md" 
                      style={{ height: `${(i + 1) * 25}px`, opacity: 0.4 + (i * 0.2) }}
                    />
                    <span className="text-[10px] font-bold">{val}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}