import Image from 'next/image';
import Link from 'next/link';
import React from 'react';

export const Footer: React.FC = () => {
  return (
    <footer className="bg-background border-t border-ui-border py-20 relative overflow-hidden">
      <div className="absolute inset-0 blueprint-grid opacity-5"></div>
      
      <div className="container mx-auto px-4 relative z-10">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
          <div className="col-span-1 md:col-span-2">
            <Link href="/" className="flex items-center gap-3 mb-6 group">
              <div className="relative w-24 h-12 group-hover:scale-110 transition-transform">
                <Image 
                  src="/img/logo-white.svg" 
                  alt="Cable Creations Logo" 
                  fill
                  className="object-contain"
                />
              </div>
            </Link>
            <p className="text-neutral-gray max-w-sm leading-relaxed mb-6">
              Jaw-dropping 3D visuals for the energy sector. We turn boring cables into pure visual art.
            </p>
            <div className="flex gap-4">
              <a href="https://www.linkedin.com/company/101094754" target="_blank" rel="noopener noreferrer" className="w-10 h-10 rounded-full bg-ui-dark border border-ui-border flex items-center justify-center hover:border-primary transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
              </a>
              <a href="https://instagram.com/cablecreations.de" target="_blank" rel="noopener noreferrer" className="w-10 h-10 rounded-full bg-ui-dark border border-ui-border flex items-center justify-center hover:border-primary transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
              </a>
            </div>
          </div>
        </div>
        
        <div className="pt-8 border-t border-ui-border flex flex-col md:flex-row justify-between items-center gap-4">
          <p className="text-neutral-gray text-sm">
            © 2024 Cable Creations. All rights reserved.
          </p>
          <p className="text-neutral-gray text-sm flex items-center gap-1">
            Designed with <span className="text-accent-pink">♥</span> for creative professionals
          </p>
        </div>
      </div>
    </footer>
  );
};
