import React from 'react';
import { motion } from 'framer-motion';
import { Sun, Users, Leaf, PiggyBank, ChevronDown, Phone, MapPin, Zap, Building2, Home as HomeIcon, TrendingUp, Calendar, ArrowRight, CheckCircle2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';

export default function Home() {
  const scrollToSection = (id) => {
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
  };

  const stats = [
    { value: '1708', label: 'Módulos Fotovoltaicos', icon: Sun },
    { value: '1754', label: 'MWh/ano', icon: Zap },
    { value: '324', label: 'Toneladas CO₂ evitadas/ano', icon: Leaf },
    { value: '40%', label: 'Poupança mínima', icon: PiggyBank },
  ];

  const steps = [
    { step: 1, title: 'Manifeste Interesse', desc: 'Cidadãos e empresas manifestam interesse em participar da comunidade' },
    { step: 2, title: 'Validação DGEG', desc: 'A comunidade é apresentada à DGEG para validação de viabilidade' },
    { step: 3, title: 'Investimento', desc: 'Os custos são definidos e os membros fazem o seu investimento' },
    { step: 4, title: 'Construção', desc: 'A central fotovoltaica é construída e licenciada' },
    { step: 5, title: 'Poupança!', desc: 'Os membros começam a consumir energia renovável local e a poupar!' },
  ];

  const benefits = [
    { icon: PiggyBank, title: 'Poupar pelo menos 40%', desc: 'Nos custos de energia, em comparação com a tarifa regulada' },
    { icon: Users, title: 'Comunidade Local', desc: 'Construir uma comunidade 100% independente a médio prazo' },
    { icon: Leaf, title: 'Energia Limpa', desc: 'Central fotovoltaica local, sem dependência de entidades externas' },
  ];

  const investmentExamples = [
    { type: 'Família Pequena', investment: '366€', savings1: '50€', savingsTotal: '780€', energy: '340 kWh/ano' },
    { type: 'Família Média', investment: '672€', savings1: '100€', savingsTotal: '1.560€', energy: '680 kWh/ano' },
    { type: 'Empresa', investment: '3.121€', savings1: '500€', savingsTotal: '7.802€', energy: '3.401 kWh/ano' },
  ];

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white">
      {/* Hero Section */}
      <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-green-900 via-green-800 to-emerald-900" />
        <div className="absolute inset-0 opacity-20">
          <div className="absolute top-20 left-10 w-72 h-72 bg-yellow-400 rounded-full blur-3xl" />
          <div className="absolute bottom-20 right-10 w-96 h-96 bg-orange-400 rounded-full blur-3xl" />
        </div>
        
        <div className="relative z-10 max-w-6xl mx-auto px-6 text-center">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
          >
            <div className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full mb-8">
              <Sun className="w-5 h-5 text-yellow-400" />
              <span className="text-white/90 text-sm font-medium">Energia Acessível para Todos</span>
            </div>
            
            <div className="mb-8">
              <img 
                src="https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/695d34ab4c63d50202b00a2a/0ba0b91e9_LogoCERFFtransparente.png" 
                alt="CER Figueira da Foz"
                className="w-full max-w-2xl mx-auto"
              />
            </div>
            
            <p className="text-xl md:text-2xl text-white/80 max-w-3xl mx-auto mb-12 font-light leading-relaxed">
              Comunidade de Energia da Figueira da Foz
            </p>
            
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button
                size="lg"
                className="bg-orange-500 hover:bg-orange-600 text-white px-8 py-6 text-lg rounded-full shadow-xl shadow-orange-500/30"
                onClick={() => scrollToSection('participar')}
              >
                Quero Participar
                <ArrowRight className="ml-2 w-5 h-5" />
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="border-white/30 text-white hover:bg-white/10 px-8 py-6 text-lg rounded-full backdrop-blur-sm"
                onClick={() => scrollToSection('como-funciona')}
              >
                Saber Mais
              </Button>
            </div>
          </motion.div>
        </div>

        <motion.div 
          className="absolute bottom-8 left-1/2 -translate-x-1/2 cursor-pointer"
          animate={{ y: [0, 10, 0] }}
          transition={{ repeat: Infinity, duration: 2 }}
          onClick={() => scrollToSection('stats')}
        >
          <ChevronDown className="w-8 h-8 text-white/60" />
        </motion.div>
      </section>

      {/* Stats Section */}
      <section id="stats" className="py-20 bg-white">
        <div className="max-w-6xl mx-auto px-6">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            {stats.map((stat, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1 }}
                className="text-center"
              >
                <div className="inline-flex items-center justify-center w-14 h-14 bg-gradient-to-br from-green-100 to-emerald-100 rounded-2xl mb-4">
                  <stat.icon className="w-7 h-7 text-green-600" />
                </div>
                <div className="text-4xl md:text-5xl font-bold text-slate-900 mb-2">{stat.value}</div>
                <div className="text-slate-500 text-sm">{stat.label}</div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section className="py-24 bg-gradient-to-b from-white to-slate-50">
        <div className="max-w-6xl mx-auto px-6">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
              Pontos Chave
            </h2>
            <p className="text-slate-600 text-lg max-w-2xl mx-auto">
              Uma comunidade de energia que coloca os cidadãos no centro da transição energética
            </p>
          </motion.div>

          <div className="grid md:grid-cols-3 gap-8">
            {benefits.map((benefit, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.15 }}
              >
                <Card className="h-full border-0 shadow-lg shadow-slate-200/50 hover:shadow-xl transition-shadow duration-300 bg-white">
                  <CardContent className="p-8">
                    <div className="w-16 h-16 bg-gradient-to-br from-orange-400 to-orange-500 rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-orange-200">
                      <benefit.icon className="w-8 h-8 text-white" />
                    </div>
                    <h3 className="text-xl font-bold text-slate-900 mb-3">{benefit.title}</h3>
                    <p className="text-slate-600 leading-relaxed">{benefit.desc}</p>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Actors Section */}
      <section className="py-24 bg-white">
        <div className="max-w-6xl mx-auto px-6">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
              Atores Principais
            </h2>
          </motion.div>

          <div className="grid md:grid-cols-3 gap-8">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0 }}
              className="text-center"
            >
              <div className="w-20 h-20 bg-gradient-to-br from-emerald-400 to-green-500 rounded-3xl flex items-center justify-center mx-auto mb-6 shadow-xl">
                <HomeIcon className="w-10 h-10 text-white" />
              </div>
              <h3 className="text-xl font-bold text-slate-900 mb-3">Munícipes</h3>
              <p className="text-slate-600">Cidadãos e empresas locais – investem e consomem energia renovável local</p>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.15 }}
              className="text-center"
            >
              <div className="flex items-center justify-center mx-auto mb-6 h-20">
                <img 
                  src="https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/695d34ab4c63d50202b00a2a/fd5afcd12_logoCMFigFoz.png"
                  alt="Câmara Municipal da Figueira da Foz"
                  className="h-16 object-contain"
                />
              </div>
              <h3 className="text-xl font-bold text-slate-900 mb-3">Município</h3>
              <p className="text-slate-600">Câmara Municipal da Figueira da Foz – cede o terreno e apoia institucionalmente</p>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.3 }}
              className="text-center"
            >
              <div className="flex items-center justify-center mx-auto mb-6 h-20">
                <img 
                  src="https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/695d34ab4c63d50202b00a2a/f32dc4cc7_logocoopernico.png"
                  alt="Coopérnico"
                  className="h-14 object-contain"
                />
              </div>
              <h3 className="text-xl font-bold text-slate-900 mb-3">Coopérnico</h3>
              <p className="text-slate-600">Promove o projeto, implementa a central fotovoltaica e gere a comunidade de energia</p>
            </motion.div>
          </div>
        </div>
      </section>

      {/* How it Works Section */}
      <section id="como-funciona" className="py-24 bg-gradient-to-b from-slate-50 to-white">
        <div className="max-w-6xl mx-auto px-6">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
              Etapas do Projeto
            </h2>
            <p className="text-slate-600 text-lg max-w-2xl mx-auto">
              Um processo simples e transparente para todos os participantes
            </p>
          </motion.div>

          <div className="relative">
            <div className="hidden md:block absolute top-24 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-green-200 to-transparent" />
            
            <div className="grid md:grid-cols-5 gap-6">
              {steps.map((step, i) => (
                <motion.div
                  key={i}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: i * 0.1 }}
                  className="relative text-center"
                >
                  <div className="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4 text-white font-bold text-lg shadow-lg shadow-green-200 relative z-10">
                    {step.step}
                  </div>
                  <h3 className="font-bold text-slate-900 mb-2">{step.title}</h3>
                  <p className="text-sm text-slate-600">{step.desc}</p>
                </motion.div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Investment Examples */}
      <section className="py-24 bg-white">
        <div className="max-w-6xl mx-auto px-6">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
              Investimento e Poupança
            </h2>
            <p className="text-slate-600 text-lg max-w-2xl mx-auto">
              Exemplos de poupança para pontos de consumo em BTN Simples (15 anos)
            </p>
          </motion.div>

          <div className="grid md:grid-cols-3 gap-8">
            {investmentExamples.map((example, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.15 }}
              >
                <Card className={`h-full border-0 shadow-xl overflow-hidden ${i === 1 ? 'ring-2 ring-orange-400' : ''}`}>
                  <div className={`h-2 ${i === 0 ? 'bg-green-400' : i === 1 ? 'bg-orange-400' : 'bg-blue-400'}`} />
                  <CardContent className="p-8">
                    <h3 className="text-xl font-bold text-slate-900 mb-6">{example.type}</h3>
                    
                    <div className="space-y-4">
                      <div className="flex justify-between items-center pb-4 border-b border-slate-100">
                        <span className="text-slate-600">Investimento</span>
                        <span className="text-2xl font-bold text-slate-900">{example.investment}</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-slate-600">Poupança 1º ano</span>
                        <span className="font-semibold text-green-600">{example.savings1}</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-slate-600">Poupança total</span>
                        <span className="font-semibold text-green-600">{example.savingsTotal}</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-slate-600">Energia anual</span>
                        <span className="font-semibold text-slate-700">{example.energy}</span>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>

          <motion.p
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            className="text-center mt-8 text-slate-500 text-sm"
          >
            Custo previsto para energia da comunidade: <strong>0,06 €/kWh</strong> + tarifa de acesso às redes
          </motion.p>
        </div>
      </section>

      {/* Pricing Details */}
      <section className="py-24 bg-gradient-to-b from-slate-50 to-white">
        <div className="max-w-5xl mx-auto px-6">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
              Quanto Custa?
            </h2>
            <p className="text-slate-600 text-lg max-w-3xl mx-auto mb-4">
              O custo previsto para a energia consumida da comunidade é de <strong className="text-green-600">0,06 €/kWh</strong>
            </p>
            <p className="text-slate-500 text-sm max-w-2xl mx-auto">
              A este custo acresce a tarifa de acesso às redes para partilha de energia (TAR), que é um custo alheio ao projeto, definido pelo regulador em cada ano.
            </p>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="overflow-x-auto"
          >
            <Card className="border-0 shadow-xl">
              <CardContent className="p-0">
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead>
                      <tr className="bg-gradient-to-r from-green-600 to-emerald-600 text-white">
                        <th className="px-6 py-4 text-left font-semibold">Tarifa</th>
                        <th className="px-6 py-4 text-center font-semibold">BTN Simples</th>
                        <th className="px-6 py-4 text-center font-semibold">BTN Bi-horária<br/><span className="text-sm font-normal">Fora Vazio</span></th>
                        <th className="px-6 py-4 text-center font-semibold">BTE<br/><span className="text-sm font-normal">Cheias</span></th>
                        <th className="px-6 py-4 text-center font-semibold">MT<br/><span className="text-sm font-normal">Cheias</span></th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr className="border-b border-slate-100 bg-white hover:bg-slate-50 transition-colors">
                        <td className="px-6 py-4 font-medium text-slate-700">TAR</td>
                        <td className="px-6 py-4 text-center text-slate-600">0,0188 €/kWh</td>
                        <td className="px-6 py-4 text-center text-slate-600">0,0255 €/kWh</td>
                        <td className="px-6 py-4 text-center text-slate-600">0,0079 €/kWh</td>
                        <td className="px-6 py-4 text-center text-slate-600">0,0032 €/kWh</td>
                      </tr>
                      <tr className="bg-green-50 border-b border-green-100">
                        <td className="px-6 py-4 font-bold text-green-900">Total CER</td>
                        <td className="px-6 py-4 text-center font-bold text-green-700">0,0788 €/kWh</td>
                        <td className="px-6 py-4 text-center font-bold text-green-700">0,0855 €/kWh</td>
                        <td className="px-6 py-4 text-center font-bold text-green-700">0,0679 €/kWh</td>
                        <td className="px-6 py-4 text-center font-bold text-green-700">0,0632 €/kWh</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </CardContent>
            </Card>
          </motion.div>

          <motion.div
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            className="mt-8 flex flex-wrap gap-3 justify-center"
          >
            <div className="bg-blue-50 border border-blue-200 rounded-lg px-4 py-2">
              <span className="text-xs text-blue-600 font-medium">BTN - Baixa Tensão Normal</span>
            </div>
            <div className="bg-purple-50 border border-purple-200 rounded-lg px-4 py-2">
              <span className="text-xs text-purple-600 font-medium">BTE - Baixa Tensão Especial</span>
            </div>
            <div className="bg-orange-50 border border-orange-200 rounded-lg px-4 py-2">
              <span className="text-xs text-orange-600 font-medium">MT - Média Tensão</span>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Community Benefit */}
      <section className="py-24 bg-gradient-to-br from-green-900 via-green-800 to-emerald-900 text-white">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
          >
            <Sun className="w-16 h-16 text-yellow-400 mx-auto mb-8" />
            <h2 className="text-3xl md:text-4xl font-bold mb-6">
              A Vantagem da Comunidade de Energia
            </h2>
            <p className="text-xl text-white/80 mb-8 leading-relaxed">
              O investimento é repartido e o proveito é otimizado!<br />
              <span className="text-yellow-400 font-semibold">Há menos desperdício!</span>
            </p>
            <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 text-left max-w-2xl mx-auto">
              <p className="text-white/90 mb-4">
                Se um membro for de férias e não consumir energia, os vizinhos podem aproveitar essa energia. Quando voltar, o mesmo acontece ao contrário!
              </p>
              <p className="text-white/90">
                Empresas fecham ao fim de semana? A energia não se perde - as famílias consomem mais quando estão em casa!
              </p>
            </div>
          </motion.div>
        </div>
      </section>

      {/* How it Works in Practice */}
      <section className="py-24 bg-white">
        <div className="max-w-6xl mx-auto px-6">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
              Como Funciona na Prática?
            </h2>
            <p className="text-slate-600 text-lg max-w-2xl mx-auto">
              Veja exemplos práticos de como o consumo funciona na comunidade
            </p>
          </motion.div>

          {/* Example 1: Sr. Figueira */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="mb-12"
          >
            <Card className="border-0 shadow-xl bg-gradient-to-br from-blue-50 to-indigo-50">
              <CardContent className="p-8 md:p-12">
                <div className="flex items-start gap-4 mb-6">
                  <div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0">
                    <Users className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <h3 className="text-2xl font-bold text-slate-900 mb-2">Exemplo: Sr. Figueira</h3>
                    <p className="text-slate-600">Um consumidor residencial típico</p>
                  </div>
                </div>

                <div className="space-y-4">
                  <div className="flex items-start gap-3">
                    <CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                    <p className="text-slate-700">O Sr. Figueira investe <strong className="text-blue-700">717 €</strong> e fica com direito de consumir <strong className="text-blue-700">10 950 kWh</strong></p>
                  </div>
                  <div className="flex items-start gap-3">
                    <CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                    <p className="text-slate-700">Pode consumir os 10 950 kWh ao longo de <strong className="text-blue-700">15 anos</strong></p>
                  </div>
                  <div className="flex items-start gap-3">
                    <CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                    <p className="text-slate-700">Só pode consumir energia da comunidade quando a <strong className="text-blue-700">central solar estiver a produzir</strong></p>
                  </div>
                  <div className="flex items-start gap-3">
                    <CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                    <p className="text-slate-700">Se todos os membros investirem e consumirem o mesmo, o Sr. Figueira vai poder consumir <strong className="text-blue-700">730 kWh em cada ano</strong></p>
                  </div>
                  <div className="flex items-start gap-3">
                    <CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                    <p className="text-slate-700">Se todos consumirem o mesmo diariamente, o Sr. Figueira pode consumir <strong className="text-blue-700">2 kWh por dia</strong></p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </motion.div>

          {/* Example 2: Vacation Scenario */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="mb-12"
          >
            <div className="grid md:grid-cols-2 gap-6">
              <Card className="border-0 shadow-xl bg-gradient-to-br from-orange-50 to-amber-50">
                <CardContent className="p-8">
                  <div className="w-12 h-12 bg-orange-500 rounded-full flex items-center justify-center mb-4">
                    <Calendar className="w-6 h-6 text-white" />
                  </div>
                  <h3 className="text-xl font-bold text-slate-900 mb-4">Cenário: Férias</h3>
                  <div className="space-y-3 text-slate-700">
                    <p>
                      ✈️ Se o Sr. Figueira for de <strong>férias durante 1 semana</strong> e não consumir...
                    </p>
                    <p className="text-green-700 font-semibold">
                      → O seu vizinho vai poder consumir <strong>4 kWh em vez de 2 kWh</strong> durante essa semana!
                    </p>
                  </div>
                </CardContent>
              </Card>

              <Card className="border-0 shadow-xl bg-gradient-to-br from-green-50 to-emerald-50">
                <CardContent className="p-8">
                  <div className="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mb-4">
                    <TrendingUp className="w-6 h-6 text-white" />
                  </div>
                  <h3 className="text-xl font-bold text-slate-900 mb-4">Reciprocidade</h3>
                  <div className="space-y-3 text-slate-700">
                    <p>
                      Se na semana seguinte for <strong>o vizinho de férias</strong>...
                    </p>
                    <p className="text-green-700 font-semibold">
                      → O Sr. Figueira pode consumir <strong>4 kWh em vez de 2 kWh</strong> por sua vez!
                    </p>
                  </div>
                </CardContent>
              </Card>
            </div>
          </motion.div>

          {/* Example 3: Company */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
          >
            <Card className="border-0 shadow-xl bg-gradient-to-br from-purple-50 to-pink-50">
              <CardContent className="p-8 md:p-12">
                <div className="flex items-start gap-4 mb-6">
                  <div className="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center flex-shrink-0">
                    <Building2 className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <h3 className="text-2xl font-bold text-slate-900 mb-2">Exemplo: Empresa Figueirense, Lda</h3>
                    <p className="text-slate-600">Colaboração entre empresas e famílias</p>
                  </div>
                </div>

                <div className="space-y-4">
                  <div className="flex items-start gap-3">
                    <CheckCircle2 className="w-5 h-5 text-purple-600 flex-shrink-0 mt-0.5" />
                    <p className="text-slate-700">A empresa investiu <strong className="text-purple-700">7 170 €</strong> porque consome <strong>10x mais energia</strong> que o Sr. Figueira</p>
                  </div>
                  <div className="flex items-start gap-3">
                    <CheckCircle2 className="w-5 h-5 text-purple-600 flex-shrink-0 mt-0.5" />
                    <p className="text-slate-700">Tem direito a consumir <strong className="text-purple-700">40 kWh por dia</strong></p>
                  </div>
                  
                  <div className="mt-6 p-6 bg-white/60 rounded-xl">
                    <p className="text-slate-700 mb-3 font-medium">💼 Durante o fim de semana a empresa está fechada!</p>
                    <p className="text-slate-600 mb-2">Mas a energia <strong>não se perde!</strong></p>
                    <p className="text-green-700 font-semibold">
                      → O Sr. Figueira e outros 9 vizinhos vão poder consumir <strong>o dobro da energia</strong>!
                    </p>
                    <p className="text-slate-600 mt-3 text-sm">
                      O que vem mesmo calhar porque ao fim de semana estão mais tempo em casa e usam mais energia!
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </motion.div>

          {/* Summary */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="mt-12 text-center"
          >
            <div className="inline-flex items-center gap-3 bg-gradient-to-r from-green-600 to-emerald-600 text-white px-8 py-4 rounded-2xl shadow-xl">
              <Leaf className="w-8 h-8" />
              <div className="text-left">
                <p className="font-bold text-lg">Energia partilhada, zero desperdício!</p>
                <p className="text-sm text-white/80">A comunidade otimiza o consumo de todos os membros</p>
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Social Investment */}
      <section className="py-24 bg-white">
        <div className="max-w-4xl mx-auto px-6">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center"
          >
            <div className="inline-flex items-center gap-2 bg-orange-100 px-4 py-2 rounded-full mb-6">
              <Users className="w-5 h-5 text-orange-600" />
              <span className="text-orange-600 font-medium">Investimento Social</span>
            </div>
            
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-6">
              E se não tiver como investir?
            </h2>
            
            <p className="text-slate-600 text-lg mb-8 max-w-2xl mx-auto">
              Empresas podem incluir um montante destinado a um fundo social da comunidade e receber o distintivo de <strong>"Empresa socialmente responsável"</strong>.
            </p>
            
            <Card className="border-0 shadow-xl bg-gradient-to-br from-orange-50 to-yellow-50">
              <CardContent className="p-8">
                <CheckCircle2 className="w-12 h-12 text-green-500 mx-auto mb-4" />
                <p className="text-slate-700 text-lg">
                  Com o fundo social, famílias mais carenciadas podem integrar a comunidade <strong>sem necessidade de investimento inicial</strong>, pagando apenas a energia ao custo reduzido!
                </p>
              </CardContent>
            </Card>
          </motion.div>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="py-24 bg-slate-50">
        <div className="max-w-4xl mx-auto px-6">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
              Outras Questões
            </h2>
          </motion.div>

          <div className="space-y-6">
            {[
              {
                q: 'E no final dos 15 anos?',
                a: 'A comunidade será gerida por uma entidade independente local que poderá gerir a produção da central fotovoltaica para o total benefício da comunidade, uma vez que o custo inicial já está completamente liquidado!'
              },
              {
                q: 'A energia vai chegar para todos os interessados?',
                a: 'Esta comunidade é um projeto em crescimento e com disponibilidade para expansão. Ninguém ficará de fora!'
              }
            ].map((faq, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 10 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1 }}
              >
                <Card className="border-0 shadow-lg">
                  <CardContent className="p-6">
                    <h3 className="text-lg font-bold text-slate-900 mb-3">{faq.q}</h3>
                    <p className="text-slate-600">{faq.a}</p>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section id="participar" className="py-24 bg-white">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
          >
            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
              Como Participar?
            </h2>
            <p className="text-slate-600 text-lg mb-12 max-w-2xl mx-auto">
              Se está interessado em participar nesta comunidade de energia e estar na linha da frente da transição energética...
            </p>

            <div className="grid md:grid-cols-2 gap-6 max-w-xl mx-auto">
              <Card className="border-0 shadow-xl hover:shadow-2xl transition-shadow duration-300">
                <CardContent className="p-8">
                  <Phone className="w-12 h-12 text-green-600 mx-auto mb-4" />
                  <h3 className="font-bold text-slate-900 mb-2">Ligue-nos</h3>
                  <a href="tel:213461803" className="text-2xl font-bold text-green-600 hover:text-green-700">
                    213 461 803
                  </a>
                </CardContent>
              </Card>
              
              <Card className="border-0 shadow-xl hover:shadow-2xl transition-shadow duration-300">
                <CardContent className="p-8">
                  <MapPin className="w-12 h-12 text-orange-500 mx-auto mb-4" />
                  <h3 className="font-bold text-slate-900 mb-2">Visite-nos</h3>
                  <p className="text-slate-600">
                    Dirija-se à sua<br />
                    <strong>Junta de Freguesia</strong>
                  </p>
                </CardContent>
              </Card>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-900 text-white py-12">
        <div className="max-w-6xl mx-auto px-6">
          <div className="flex flex-col md:flex-row justify-between items-center gap-6">
            <div className="text-center md:text-left">
              <img 
                src="https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/695d34ab4c63d50202b00a2a/0ba0b91e9_LogoCERFFtransparente.png" 
                alt="CER Figueira da Foz"
                className="w-48 mx-auto md:mx-0 mb-2"
              />
              <p className="text-slate-400">Energia Acessível para Todos</p>
            </div>
            <a 
              href="https://www.coopernico.org" 
              target="_blank" 
              rel="noopener noreferrer"
              className="flex items-center gap-4 hover:opacity-80 transition-opacity"
            >
              <div className="text-right">
                <p className="text-sm text-slate-400">Promovido por</p>
                <img 
                  src="https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/695d34ab4c63d50202b00a2a/f32dc4cc7_logocoopernico.png"
                  alt="Coopérnico"
                  className="h-12 ml-auto"
                />
                <p className="text-xs text-slate-500">Energia verde, Sustentabilidade, Cidadania</p>
              </div>
            </a>
          </div>
          <div className="border-t border-slate-800 mt-8 pt-8 text-center text-slate-500 text-sm">
            © {new Date().getFullYear()} Comunidade de Energia da Figueira da Foz. Todos os direitos reservados.
          </div>
        </div>
      </footer>
    </div>
  );
}