import { Card } from "@/components/ui/card";
import { ArrowRight, Users, Package, DollarSign, Network } from "lucide-react";
import { motion } from "framer-motion";

export default function DistributorSalesDiagram() {
  return (
    <div className="p-6 bg-gray-50 min-h-screen flex flex-col items-center">
      <h1 className="text-3xl font-bold mb-8 text-gray-800">Defense Delivered Distribution Model</h1>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-5xl">
        {/* Defense Delivered */}
        <motion.div whileHover={{ scale: 1.03 }}>
          <Card className="p-6 text-center shadow-md bg-white border-l-4 border-blue-600">
            <Package className="w-10 h-10 mx-auto text-blue-600 mb-2" />
            <h2 className="text-xl font-semibold mb-2">Defense Delivered HQ</h2>
            <p className="text-gray-600 text-sm">
              Provides controller, CAD design, and hardware kits. Trains and certifies distributors. Retains recurring subscription revenue.
            </p>
          </Card>
        </motion.div>

        <div className="flex justify-center items-center">
          <ArrowRight className="w-10 h-10 text-gray-500 hidden md:block" />
        </div>

        {/* Distributors */}
        <motion.div whileHover={{ scale: 1.03 }}>
          <Card className="p-6 text-center shadow-md bg-white border-l-4 border-green-600">
            <Network className="w-10 h-10 mx-auto text-green-600 mb-2" />
            <h2 className="text-xl font-semibold mb-2">Certified Distributors</h2>
            <p className="text-gray-600 text-sm">
              Purchase full system packages at wholesale pricing. Install locally for homeowners, HOAs, and facilities.
            </p>
          </Card>
        </motion.div>

        {/* Flow to End Clients */}
        <div className="col-span-3 flex justify-center items-center mt-4">
          <ArrowRight className="w-10 h-10 text-gray-500 rotate-90 md:rotate-0" />
        </div>

        {/* Homeowners / Clients */}
        <motion.div whileHover={{ scale: 1.03 }} className="md:col-span-3">
          <Card className="p-6 text-center shadow-md bg-white border-l-4 border-orange-500">
            <Users className="w-10 h-10 mx-auto text-orange-500 mb-2" />
            <h2 className="text-xl font-semibold mb-2">Homeowners, HOAs & Commercial Clients</h2>
            <p className="text-gray-600 text-sm">
              Receive professional wildfire protection systems installed by trained distributors. Supported remotely by Defense Delivered for monitoring and updates.
            </p>
          </Card>
        </motion.div>

        {/* Revenue Flow */}
        <div className="col-span-3 flex flex-col items-center mt-10">
          <DollarSign className="w-10 h-10 text-yellow-500 mb-2" />
          <p className="text-gray-700 text-center max-w-2xl">
            <strong>Revenue Flow:</strong> Distributors earn 20–25% margin on installations. Defense Delivered retains subscription revenue and margins on controller, CAD design, and hardware sales.
          </p>
        </div>
      </div>
    </div>
  );
}