import React from "react";
import { ArrowRight, Zap, ShieldCheck, TrendingDown, Factory, Wind, Sun, Battery } from "lucide-react";
import { Link } from "react-router-dom";
import { Logo } from "../components/Logo";
import { SavingsCalculator } from "../components/SavingsCalculator";
import { SafeImage } from "../components/SafeImage";
import { motion } from "motion/react";

export const Home: React.FC = () => {
  return (
    <div className="space-y-24 pb-24">
      {/* Hero Section */}
      <section className="relative min-h-screen flex items-center pt-20 overflow-hidden">
        <div className="absolute inset-0 z-0">
          <SafeImage
            src="/images/solar-1.jpg"
            fallbackSrc="https://images.unsplash.com/photo-1466611653911-95282ee3656b?q=80&w=2070&auto=format&fit=crop"
            alt="Utility scale solar farm"
            className="w-full h-full object-cover brightness-[0.4]"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-dark/80 via-dark/40 to-transparent" />
        </div>

        <div className="container-custom relative z-10">
          <div className="max-w-3xl space-y-8">
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6 }}
            >
              <div className="mb-8">
                <Logo className="h-16 brightness-0 invert" />
              </div>
              <span className="inline-block px-4 py-1.5 bg-primary/20 backdrop-blur-md border border-primary/30 text-primary font-bold text-xs uppercase tracking-widest rounded-full mb-6">
                South African Electricity Trading
              </span>
              <h1 className="text-5xl md:text-7xl font-black text-white leading-tight">
                Cheaper Renewable Electricity for <span className="text-primary">South African Businesses</span>
              </h1>
              <p className="text-xl text-white/80 leading-relaxed mt-6 max-w-2xl">
                Source electricity from large-scale solar, wind and battery projects and reduce your electricity costs by 20% or more.
              </p>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="flex flex-col sm:flex-row gap-4"
            >
              <Link to="/contact" className="btn-primary flex items-center justify-center gap-2 text-lg px-8">
                Request a Savings Estimate <ArrowRight size={20} />
              </Link>
              <Link to="/contact" className="btn-secondary border-white text-white hover:bg-white/10 flex items-center justify-center gap-2 text-lg px-8">
                Book a Consultation
              </Link>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Why Wiel Energy */}
      <section className="container-custom">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <h2 className="text-3xl md:text-4xl font-black mb-6">Why Wiel Energy?</h2>
          <p className="text-dark/60 text-lg">
            We bridge the gap between large-scale renewable energy producers and commercial electricity users, delivering value through market expertise.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {[
            {
              icon: <TrendingDown className="text-primary" size={32} />,
              title: "20%+ Cost Savings",
              desc: "Significantly cheaper electricity compared to traditional Eskom or municipal tariffs."
            },
            {
              icon: <ShieldCheck className="text-primary" size={32} />,
              title: "Predictable Pricing",
              desc: "Hedge against volatile tariff hikes with long-term, predictable energy pricing options."
            },
            {
              icon: <Zap className="text-primary" size={32} />,
              title: "Renewable Supply",
              desc: "Directly reduce your carbon footprint by sourcing from utility-scale solar and wind IPPs."
            }
          ].map((item, idx) => (
            <div key={idx} className="glass-card p-8 hover:border-primary/30 transition-all group">
              <div className="mb-6 p-4 bg-primary/5 rounded-2xl w-fit group-hover:bg-primary/10 transition-colors">
                {item.icon}
              </div>
              <h3 className="text-xl font-bold mb-4">{item.title}</h3>
              <p className="text-dark/60 leading-relaxed">{item.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* How it Works Diagram */}
      <section className="bg-dark py-24 text-white overflow-hidden">
        <div className="container-custom">
          <div className="text-center max-w-3xl mx-auto mb-20">
            <h2 className="text-3xl md:text-4xl font-black mb-6">The Trading Ecosystem</h2>
            <p className="text-muted-blue text-lg">
              How we deliver IPP-generated renewable energy directly to your business operations.
            </p>
          </div>

          <div className="relative">
            {/* Connection Line */}
            <div className="hidden lg:block absolute top-1/2 left-0 right-0 h-0.5 bg-gradient-to-r from-primary/20 via-primary to-primary/20 -translate-y-1/2 z-0" />
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 relative z-10">
              {[
                { icon: <Sun size={40} />, label: "IPP Generator", desc: "Utility-scale solar, wind & BESS projects" },
                { icon: <Zap size={40} />, label: "Electricity Trader", desc: "Wiel Energy aggregates & structures supply" },
                { icon: <Factory size={40} />, label: "Network Delivery", desc: "Wheeling through Eskom or Municipal grids" },
                { icon: <ShieldCheck size={40} />, label: "Your Business", desc: "Lower costs & sustainable energy supply" }
              ].map((step, idx) => (
                <div key={idx} className="flex flex-col items-center text-center space-y-6">
                  <div className="w-24 h-24 rounded-full bg-primary flex items-center justify-center shadow-[0_0_30px_rgba(39,103,127,0.4)] border-4 border-dark">
                    {step.icon}
                  </div>
                  <div className="space-y-2">
                    <h4 className="text-xl font-bold">{step.label}</h4>
                    <p className="text-muted-blue text-sm max-w-[200px] mx-auto">{step.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Calculator Section */}
      <section className="container-custom">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <h2 className="text-3xl md:text-4xl font-black mb-6">Calculate Your Potential Savings</h2>
          <p className="text-dark/60 text-lg">
            Use our estimator to see how much your business could save by switching to traded renewable electricity.
          </p>
        </div>
        <SavingsCalculator />
      </section>

      {/* Renewable Sources */}
      <section className="container-custom">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div className="space-y-8">
            <h2 className="text-3xl md:text-4xl font-black">Diverse Renewable Energy Sources</h2>
            <p className="text-dark/60 text-lg leading-relaxed">
              We partner with leading Independent Power Producers to provide a balanced energy mix that suits your operational profile.
            </p>
            
            <div className="space-y-6">
              {[
                { icon: <Sun className="text-primary" />, title: "Utility-Scale Solar", desc: "High-yield generation during peak business hours." },
                { icon: <Wind className="text-primary" />, title: "Utility-Scale Wind", desc: "Consistent generation often peaking during evening hours." },
                { icon: <Battery className="text-primary" />, title: "Solar + BESS", desc: "Stored energy for dispatch during peak demand periods." }
              ].map((source, idx) => (
                <div key={idx} className="flex gap-4 p-6 rounded-2xl border border-gray-100 hover:bg-white transition-colors">
                  <div className="shrink-0 mt-1">{source.icon}</div>
                  <div>
                    <h4 className="font-bold mb-1">{source.title}</h4>
                    <p className="text-dark/60 text-sm">{source.desc}</p>
                  </div>
                </div>
              ))}
            </div>

            <Link to="/solutions" className="btn-primary inline-flex items-center gap-2">
              Explore Our Solutions <ArrowRight size={18} />
            </Link>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <img
              src="https://images.unsplash.com/photo-1509391366360-fe5bb58583bb?q=80&w=2070&auto=format&fit=crop"
              alt="Wind turbines"
              className="rounded-2xl h-80 w-full object-cover mt-12"
              referrerPolicy="no-referrer"
            />
            <SafeImage
              src="/images/solar-3.jpg"
              fallbackSrc="https://images.unsplash.com/photo-1508514177221-188b1cf16e9d?q=80&w=2072&auto=format&fit=crop"
              alt="Solar panels"
              className="rounded-2xl h-80 w-full object-cover"
            />
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="container-custom">
        <div className="bg-primary rounded-3xl p-12 md:p-20 text-white text-center relative overflow-hidden">
          <div className="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl" />
          <div className="absolute bottom-0 left-0 w-64 h-64 bg-dark/20 rounded-full translate-y-1/2 -translate-x-1/2 blur-3xl" />
          
          <div className="relative z-10 max-w-3xl mx-auto space-y-8">
            <h2 className="text-4xl md:text-5xl font-black">Ready to lower your energy costs?</h2>
            <p className="text-xl text-white/80">
              Join the growing number of South African businesses securing their energy future with Wiel Energy.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
              <Link to="/contact" className="bg-white text-primary px-8 py-4 rounded-xl font-bold text-lg hover:bg-gray-100 transition-colors">
                Request a Savings Estimate
              </Link>
              <Link to="/contact" className="bg-dark text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-dark/80 transition-colors">
                Book a Consultation
              </Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};