import React from 'react';
import { motion } from 'framer-motion';
import { Mail, MessageSquare } from 'lucide-react';

const CTASection = () => {
  return (
    <section id="contact" className="py-24 relative overflow-hidden">
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-px bg-gradient-to-r from-transparent via-primary/30 to-transparent" />
      
      <div className="container mx-auto px-6">
        <div className="max-w-5xl mx-auto glass-card p-12 relative overflow-hidden">
          <div className="absolute top-0 right-0 p-12 opacity-10 pointer-events-none">
            <MessageSquare size={200} className="text-primary" />
          </div>

          <div className="grid md:grid-cols-2 gap-12 relative z-10">
            <div>
              <h2 className="text-4xl font-bold mb-6">
                Masz proces, który powinien już pracować sam?
              </h2>
              <p className="text-xl text-muted mb-8">
                Opowiedz, co robisz ręcznie, powtarzalnie albo zbyt wolno. Sprawdzimy, czy AI może to uprościć.
              </p>
              <div className="space-y-4">
                <div className="flex items-center gap-3 text-primary">
                  <Mail size={20} />
                  <a href="mailto:hello@gethumanai.com" className="font-semibold hover:underline">
                    hello@gethumanai.com
                  </a>
                </div>
                <p className="text-sm text-muted italic">
                  “Na start wystarczy jeden proces, jeden problem albo jeden pomysł.”
                </p>
              </div>
            </div>

            <form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <label className="text-sm font-medium">Imię</label>
                  <input 
                    type="text" 
                    placeholder="Twoje imię" 
                    className="w-full bg-background border border-white/10 rounded-lg px-4 py-3 focus:outline-none focus:border-primary/50 transition-colors"
                  />
                </div>
                <div className="space-y-2">
                  <label className="text-sm font-medium">Email</label>
                  <input 
                    type="email" 
                    placeholder="email@firma.pl" 
                    className="w-full bg-background border border-white/10 rounded-lg px-4 py-3 focus:outline-none focus:border-primary/50 transition-colors"
                  />
                </div>
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">W czym możemy pomóc?</label>
                <textarea 
                  rows={4} 
                  placeholder="Opisz krótko swój proces lub wyzwanie..." 
                  className="w-full bg-background border border-white/10 rounded-lg px-4 py-3 focus:outline-none focus:border-primary/50 transition-colors resize-none"
                ></textarea>
              </div>
              <button className="btn-primary w-full py-4 text-lg">
                Umów rozmowę
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
};

export default CTASection;