'use client';

import { useEffect, useRef } from 'react';
import Navigation from '../../../components/Navigation';
import FloatingLanguageSwitcher from '../../../components/FloatingLanguageSwitcher';
import Footer from '../../../components/Footer';
import { Locale } from '../../../lib/i18n';
import { getTranslations } from '../../../lib/translations';
import { updateDocumentMeta } from '../../../lib/seo-utils';

// Enhanced Particle Background Component for Products
function ProductParticleBackground() {
    const canvasRef = useRef<HTMLCanvasElement>(null);

    useEffect(() => {
        const canvas = canvasRef.current;
        if (!canvas) return;

        const ctx = canvas.getContext('2d');
        if (!ctx) return;

        // Set canvas size
        const resizeCanvas = () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        };
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);

        // Enhanced particle system with different types
        const particles: Array<{
            x: number;
            y: number;
            vx: number;
            vy: number;
            size: number;
            opacity: number;
            type: 'circle' | 'square' | 'triangle';
            color: string;
            rotation: number;
            rotationSpeed: number;
        }> = [];

        const colors = ['#22c55e', '#3b82f6', '#f59e0b', '#ef4444', '#8b5cf6'];

        // Create particles
        for (let i = 0; i < 80; i++) {
            particles.push({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                vx: (Math.random() - 0.5) * 0.8,
                vy: (Math.random() - 0.5) * 0.8,
                size: Math.random() * 4 + 2,
                opacity: Math.random() * 0.6 + 0.2,
                type: ['circle', 'square', 'triangle'][Math.floor(Math.random() * 3)] as
                    | 'circle'
                    | 'square'
                    | 'triangle',
                color: colors[Math.floor(Math.random() * colors.length)],
                rotation: Math.random() * Math.PI * 2,
                rotationSpeed: (Math.random() - 0.5) * 0.02,
            });
        }

        // Animation loop
        const animate = () => {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            particles.forEach((particle) => {
                // Update position
                particle.x += particle.vx;
                particle.y += particle.vy;
                particle.rotation += particle.rotationSpeed;

                // Wrap around edges
                if (particle.x < -particle.size) particle.x = canvas.width + particle.size;
                if (particle.x > canvas.width + particle.size) particle.x = -particle.size;
                if (particle.y < -particle.size) particle.y = canvas.height + particle.size;
                if (particle.y > canvas.height + particle.size) particle.y = -particle.size;

                // Set style
                ctx.fillStyle = particle.color;
                ctx.globalAlpha = particle.opacity;
                ctx.save();
                ctx.translate(particle.x, particle.y);
                ctx.rotate(particle.rotation);

                // Draw different shapes
                ctx.beginPath();
                switch (particle.type) {
                    case 'circle':
                        ctx.arc(0, 0, particle.size, 0, Math.PI * 2);
                        break;
                    case 'square':
                        ctx.rect(
                            -particle.size,
                            -particle.size,
                            particle.size * 2,
                            particle.size * 2,
                        );
                        break;
                    case 'triangle':
                        ctx.moveTo(0, -particle.size);
                        ctx.lineTo(-particle.size, particle.size);
                        ctx.lineTo(particle.size, particle.size);
                        ctx.closePath();
                        break;
                }
                ctx.fill();
                ctx.restore();
            });

            // Draw connections with different colors
            particles.forEach((particle, i) => {
                particles.slice(i + 1).forEach((otherParticle) => {
                    const dx = particle.x - otherParticle.x;
                    const dy = particle.y - otherParticle.y;
                    const distance = Math.sqrt(dx * dx + dy * dy);

                    if (distance < 120) {
                        ctx.beginPath();
                        ctx.moveTo(particle.x, particle.y);
                        ctx.lineTo(otherParticle.x, otherParticle.y);
                        const gradient = ctx.createLinearGradient(
                            particle.x,
                            particle.y,
                            otherParticle.x,
                            otherParticle.y,
                        );
                        gradient.addColorStop(0, particle.color);
                        gradient.addColorStop(1, otherParticle.color);
                        ctx.strokeStyle = gradient;
                        ctx.globalAlpha = 0.1 * (1 - distance / 120);
                        ctx.lineWidth = 1;
                        ctx.stroke();
                    }
                });
            });

            ctx.globalAlpha = 1;
            requestAnimationFrame(animate);
        };

        animate();

        return () => {
            window.removeEventListener('resize', resizeCanvas);
        };
    }, []);

    return (
        <canvas
            ref={canvasRef}
            className="absolute inset-0 w-full h-full"
            style={{ pointerEvents: 'none' }}
            data-oid="j7rncr6"
        />
    );
}

export default function ProductsPage({ params }: { params: { locale: Locale } }) {
    const t = getTranslations(params.locale);

    // Update meta tags when locale changes
    useEffect(() => {
        updateDocumentMeta(params.locale);
    }, [params.locale]);

    return (
        <div
            className="min-h-screen relative overflow-hidden bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900"
            data-oid="cvpywwb"
        >
            {/* Enhanced Particle Background */}
            <ProductParticleBackground data-oid="uc9k0a8" />

            {/* Navigation */}
            <Navigation locale={params.locale} data-oid="531iitl" />

            {/* Floating Language Switcher */}
            <FloatingLanguageSwitcher locale={params.locale} data-oid="kpdg95h" />

            {/* Hero Section */}
            <section className="relative z-10 pt-20 pb-16 px-4" data-oid="lm2ytxy">
                <div className="max-w-7xl mx-auto text-center" data-oid="j5e12u3">
                    <h1
                        className="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight"
                        data-oid="5baiugk"
                    >
                        {t.products?.title || 'Our Products'}
                    </h1>
                    <p
                        className="text-xl md:text-2xl text-white/80 mb-12 max-w-3xl mx-auto"
                        data-oid=":evsigy"
                    >
                        {t.products?.subtitle ||
                            'Discover innovative solutions for a sustainable future'}
                    </p>
                </div>
            </section>

            {/* Featured Product */}
            <section className="relative z-10 py-16 px-4" data-oid="3djucnf">
                <div className="max-w-7xl mx-auto" data-oid="jffsbbq">
                    <div
                        className="bg-white/10 backdrop-blur-md rounded-3xl p-8 md:p-12 border border-white/20"
                        data-oid="5j0vqo-"
                    >
                        <div
                            className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
                            data-oid="w:qoogs"
                        >
                            <div data-oid="jp:93sh">
                                <div
                                    className="inline-block bg-green-500 text-white px-4 py-2 rounded-full text-sm font-medium mb-6"
                                    data-oid="_2jwbsf"
                                >
                                    Featured Product
                                </div>
                                <h2
                                    className="text-4xl md:text-5xl font-bold text-white mb-6"
                                    data-oid="42kynsq"
                                >
                                    {t.products?.featured?.title || 'Eco-Life Simulator'}
                                </h2>
                                <p className="text-xl text-white/80 mb-8" data-oid=":6k38y3">
                                    {t.products?.featured?.description ||
                                        'Experience the ultimate environmental simulation game'}
                                </p>
                                <div className="space-y-4 mb-8" data-oid="gakgmck">
                                    {(t.products?.featured?.features || []).map(
                                        (feature, index) => (
                                            <div
                                                key={index}
                                                className="flex items-center space-x-3"
                                                data-oid="f4az8h0"
                                            >
                                                <div
                                                    className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center"
                                                    data-oid="nwia:z7"
                                                >
                                                    <svg
                                                        className="w-4 h-4 text-white"
                                                        fill="none"
                                                        stroke="currentColor"
                                                        viewBox="0 0 24 24"
                                                        data-oid="to48jui"
                                                    >
                                                        <path
                                                            strokeLinecap="round"
                                                            strokeLinejoin="round"
                                                            strokeWidth={2}
                                                            d="M5 13l4 4L19 7"
                                                            data-oid="hqp78tt"
                                                        />
                                                    </svg>
                                                </div>
                                                <span className="text-white/90" data-oid="a.d5.o0">
                                                    {feature}
                                                </span>
                                            </div>
                                        ),
                                    )}
                                </div>
                                <div className="flex items-center space-x-6" data-oid="ciy3l:k">
                                    <span
                                        className="text-3xl font-bold text-green-400"
                                        data-oid="j3m:k.g"
                                    >
                                        {t.products?.featured?.price || '$29.99'}
                                    </span>
                                    <button
                                        className="bg-green-500 hover:bg-green-600 text-white px-8 py-4 rounded-full font-semibold text-lg transform hover:scale-105 transition-all duration-200 shadow-lg"
                                        data-oid="3vyrpk7"
                                    >
                                        {t.products?.featured?.cta || 'Get Started Now'}
                                    </button>
                                </div>
                            </div>
                            <div className="relative" data-oid="2frqox_">
                                <div
                                    className="aspect-square bg-gradient-to-br from-green-400 to-blue-500 rounded-3xl p-8 relative overflow-hidden"
                                    data-oid="sv04vkp"
                                >
                                    {/* Product mockup with particles */}
                                    <div
                                        className="absolute inset-0 bg-black/20 rounded-3xl"
                                        data-oid="7mphq74"
                                    ></div>
                                    <div
                                        className="relative z-10 h-full flex items-center justify-center"
                                        data-oid="::y3wwb"
                                    >
                                        <div className="text-center text-white" data-oid="_a3bv_z">
                                            <div
                                                className="w-24 h-24 bg-white/20 rounded-full mx-auto mb-4 flex items-center justify-center"
                                                data-oid="xoz1gv-"
                                            >
                                                <svg
                                                    className="w-12 h-12"
                                                    fill="none"
                                                    stroke="currentColor"
                                                    viewBox="0 0 24 24"
                                                    data-oid="htmw:.5"
                                                >
                                                    <path
                                                        strokeLinecap="round"
                                                        strokeLinejoin="round"
                                                        strokeWidth={2}
                                                        d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                                                        data-oid="qm_gi7x"
                                                    />
                                                </svg>
                                            </div>
                                            <h3
                                                className="text-2xl font-bold mb-2"
                                                data-oid="._-sk9i"
                                            >
                                                Interactive Demo
                                            </h3>
                                            <p className="text-white/80" data-oid="_yx_77f">
                                                Experience the simulation
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Product Categories */}
            <section className="relative z-10 py-16 px-4" data-oid="dth.vfh">
                <div className="max-w-7xl mx-auto" data-oid="b_yrju2">
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8" data-oid="deq5x:y">
                        <div
                            className="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 hover:bg-white/15 transition-all duration-300"
                            data-oid="vrhxdx5"
                        >
                            <div
                                className="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mb-6"
                                data-oid="fbph6.s"
                            >
                                <svg
                                    className="w-8 h-8 text-white"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                    data-oid="i-5t_6a"
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        strokeWidth={2}
                                        d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1a3 3 0 000-6h-1m0 6V4m0 6h6m-7 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                                        data-oid="21l8sg_"
                                    />
                                </svg>
                            </div>
                            <h3 className="text-2xl font-bold text-white mb-4" data-oid="zh43ndf">
                                {t.products.categories.games.title}
                            </h3>
                            <p className="text-white/70" data-oid=".xj-6y.">
                                {t.products.categories.games.description}
                            </p>
                        </div>

                        <div
                            className="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 hover:bg-white/15 transition-all duration-300"
                            data-oid="_r4xti3"
                        >
                            <div
                                className="w-16 h-16 bg-blue-500 rounded-2xl flex items-center justify-center mb-6"
                                data-oid="2xc--or"
                            >
                                <svg
                                    className="w-8 h-8 text-white"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                    data-oid="xr0zrf:"
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        strokeWidth={2}
                                        d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
                                        data-oid="e6ly5m_"
                                    />
                                </svg>
                            </div>
                            <h3 className="text-2xl font-bold text-white mb-4" data-oid="7vi9m0h">
                                {t.products.categories.tools.title}
                            </h3>
                            <p className="text-white/70" data-oid="f1:5c.n">
                                {t.products.categories.tools.description}
                            </p>
                        </div>

                        <div
                            className="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20 hover:bg-white/15 transition-all duration-300"
                            data-oid="tc7x7dh"
                        >
                            <div
                                className="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-6"
                                data-oid="q2r2se9"
                            >
                                <svg
                                    className="w-8 h-8 text-white"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                    data-oid="ahfdmqs"
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        strokeWidth={2}
                                        d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
                                        data-oid="w05eav4"
                                    />
                                </svg>
                            </div>
                            <h3 className="text-2xl font-bold text-white mb-4" data-oid="b8tkf9z">
                                {t.products.categories.education.title}
                            </h3>
                            <p className="text-white/70" data-oid="ac0dw_k">
                                {t.products.categories.education.description}
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            {/* Product Grid */}
            <section className="relative z-10 py-16 px-4" data-oid=":df3vby">
                <div className="max-w-7xl mx-auto" data-oid="1fm-ile">
                    <div
                        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
                        data-oid="mq9zk93"
                    >
                        {/* Product 1 */}
                        <div
                            className="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/20 hover:bg-white/15 transition-all duration-300 group"
                            data-oid="4m47ygl"
                        >
                            <div
                                className="aspect-square bg-gradient-to-br from-green-400 to-green-600 rounded-xl mb-6 relative overflow-hidden"
                                data-oid="ni7-0vh"
                            >
                                <div
                                    className="absolute inset-0 bg-black/20"
                                    data-oid="qqzr2r2"
                                ></div>
                                <div
                                    className="absolute inset-0 flex items-center justify-center"
                                    data-oid="kg2s6ba"
                                >
                                    <svg
                                        className="w-12 h-12 text-white"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                        data-oid=".exeex5"
                                    >
                                        <path
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                            strokeWidth={2}
                                            d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                                            data-oid="6vhjg1_"
                                        />
                                    </svg>
                                </div>
                            </div>
                            <h3 className="text-xl font-bold text-white mb-2" data-oid="27_ijij">
                                {t.products.productList.ecoSimulator.title}
                            </h3>
                            <p className="text-white/70 mb-4 text-sm" data-oid="5x:wp2_">
                                {t.products.productList.ecoSimulator.description}
                            </p>
                            <div className="flex items-center justify-between" data-oid="ad00jbx">
                                <span className="text-green-400 font-bold" data-oid="6q1_97d">
                                    {t.products.productList.ecoSimulator.price}
                                </span>
                                <button
                                    className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-200"
                                    data-oid="e.r9qu-"
                                >
                                    View Details
                                </button>
                            </div>
                        </div>

                        {/* Product 2 */}
                        <div
                            className="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/20 hover:bg-white/15 transition-all duration-300 group"
                            data-oid="5rbr4p8"
                        >
                            <div
                                className="aspect-square bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl mb-6 relative overflow-hidden"
                                data-oid="m1w2yx2"
                            >
                                <div
                                    className="absolute inset-0 bg-black/20"
                                    data-oid="w8uva_n"
                                ></div>
                                <div
                                    className="absolute inset-0 flex items-center justify-center"
                                    data-oid="igj8g:d"
                                >
                                    <svg
                                        className="w-12 h-12 text-white"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                        data-oid="zsd1xns"
                                    >
                                        <path
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                            strokeWidth={2}
                                            d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
                                            data-oid="c7izslw"
                                        />
                                    </svg>
                                </div>
                            </div>
                            <h3 className="text-xl font-bold text-white mb-2" data-oid="16315pd">
                                {t.products.productList.carbonTracker.title}
                            </h3>
                            <p className="text-white/70 mb-4 text-sm" data-oid="fxx3xzs">
                                {t.products.productList.carbonTracker.description}
                            </p>
                            <div className="flex items-center justify-between" data-oid="3iqh5.-">
                                <span className="text-blue-400 font-bold" data-oid="afep:s-">
                                    {t.products.productList.carbonTracker.price}
                                </span>
                                <button
                                    className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-200"
                                    data-oid="v:84d.f"
                                >
                                    View Details
                                </button>
                            </div>
                        </div>

                        {/* Product 3 */}
                        <div
                            className="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/20 hover:bg-white/15 transition-all duration-300 group"
                            data-oid="ylps7.f"
                        >
                            <div
                                className="aspect-square bg-gradient-to-br from-purple-400 to-purple-600 rounded-xl mb-6 relative overflow-hidden"
                                data-oid="sgmy4a-"
                            >
                                <div
                                    className="absolute inset-0 bg-black/20"
                                    data-oid="1jrvfuf"
                                ></div>
                                <div
                                    className="absolute inset-0 flex items-center justify-center"
                                    data-oid="giashnw"
                                >
                                    <svg
                                        className="w-12 h-12 text-white"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                        data-oid=":haulu-"
                                    >
                                        <path
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                            strokeWidth={2}
                                            d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
                                            data-oid="gg2vvsi"
                                        />
                                    </svg>
                                </div>
                            </div>
                            <h3 className="text-xl font-bold text-white mb-2" data-oid="6itbonk">
                                {t.products.productList.greenGuide.title}
                            </h3>
                            <p className="text-white/70 mb-4 text-sm" data-oid="94_u:5r">
                                {t.products.productList.greenGuide.description}
                            </p>
                            <div className="flex items-center justify-between" data-oid="im08pp2">
                                <span className="text-purple-400 font-bold" data-oid="hxtwl9f">
                                    {t.products.productList.greenGuide.price}
                                </span>
                                <button
                                    className="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-200"
                                    data-oid="3e9u9t0"
                                >
                                    View Details
                                </button>
                            </div>
                        </div>

                        {/* Product 4 */}
                        <div
                            className="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/20 hover:bg-white/15 transition-all duration-300 group"
                            data-oid="od:zoot"
                        >
                            <div
                                className="aspect-square bg-gradient-to-br from-orange-400 to-orange-600 rounded-xl mb-6 relative overflow-hidden"
                                data-oid=".09wskk"
                            >
                                <div
                                    className="absolute inset-0 bg-black/20"
                                    data-oid="xb_lxfj"
                                ></div>
                                <div
                                    className="absolute inset-0 flex items-center justify-center"
                                    data-oid="gbvwymw"
                                >
                                    <svg
                                        className="w-12 h-12 text-white"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                        data-oid="1m6hjyl"
                                    >
                                        <path
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                            strokeWidth={2}
                                            d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
                                            data-oid=".sikv1l"
                                        />
                                    </svg>
                                </div>
                            </div>
                            <h3 className="text-xl font-bold text-white mb-2" data-oid="gfqu2:k">
                                {t.products.productList.ecoChallenge.title}
                            </h3>
                            <p className="text-white/70 mb-4 text-sm" data-oid="rrsnl8c">
                                {t.products.productList.ecoChallenge.description}
                            </p>
                            <div className="flex items-center justify-between" data-oid="s5jbagy">
                                <span className="text-orange-400 font-bold" data-oid="rmdip20">
                                    {t.products.productList.ecoChallenge.price}
                                </span>
                                <button
                                    className="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-200"
                                    data-oid="gjhr-2m"
                                >
                                    View Details
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* CTA Section */}
            <section className="relative z-10 py-20 px-4" data-oid="9d:srtj">
                <div className="max-w-4xl mx-auto text-center" data-oid="ehinuqy">
                    <div
                        className="bg-white/10 backdrop-blur-md rounded-3xl p-12 border border-white/20"
                        data-oid="bszxslt"
                    >
                        <h2
                            className="text-4xl md:text-5xl font-bold text-white mb-6"
                            data-oid="y3mxv4e"
                        >
                            Ready to Make a Difference?
                        </h2>
                        <p className="text-xl text-white/80 mb-8" data-oid="4rdacti">
                            Join thousands of users already making sustainable choices with our
                            products.
                        </p>
                        <div
                            className="flex flex-col sm:flex-row gap-4 justify-center"
                            data-oid="d-iudla"
                        >
                            <button
                                className="bg-green-500 hover:bg-green-600 text-white px-8 py-4 rounded-full font-semibold text-lg transform hover:scale-105 transition-all duration-200 shadow-lg"
                                data-oid="wn7ixwn"
                            >
                                Explore All Products
                            </button>
                            <button
                                className="border-2 border-white text-white hover:bg-white hover:text-gray-900 px-8 py-4 rounded-full font-semibold text-lg transform hover:scale-105 transition-all duration-200"
                                data-oid="1iho.r8"
                            >
                                Contact Sales
                            </button>
                        </div>
                    </div>
                </div>
            </section>

            {/* Footer */}
            <Footer locale={params.locale} data-oid="0vh4cx:" />
        </div>
    );
}