import React from 'react';

const Contact: React.FC = () => {
  return (
    <div className="pt-24 min-h-screen">
      <div className="max-w-7xl mx-auto md:px-6 py-8 md:py-16">
        <div className="flex flex-col lg:flex-row bg-white dark:bg-slate-900 shape-squircle overflow-hidden shadow-xl shadow-slate-200/50 dark:shadow-none min-h-[700px]">
          <div className="lg:w-5/12 relative flex flex-col justify-between p-8 md:p-12 text-white overflow-hidden">
            <div className="absolute inset-0 z-0">
              <img alt="Serene landscape of Southern Italy" className="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC0QQonTpS5B2xofjy_UUfUwywim4_g4y3q7gRj_jr_FZ_ijReCYyf0uxf_O86Ka9Jtx7ljpMN1ZRMrwK9ILhP6QRfhNtUGF3WE1_C3zbeBULyysif9vmshSnUkZ5F1PQK19u32l0g0R3pG5FXs44VTz4vK_2Lqu9EoiPXXKGuiwEcWOzCmvUQNEABSYcEmh46SwRxR-ORcgXLHvcvZOD1KV_CNDCWOgUbAYpGwrVVt_4Xa91aC19e5ncmtVcxxHxnBBvZaVfE00lI" />
              <div className="absolute inset-0 bg-primary/40 backdrop-blur-[2px] mix-blend-multiply"></div>
              <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/60"></div>
            </div>
            <div className="relative z-10">
              <h1 className="text-4xl md:text-5xl font-light leading-tight mb-6">
                Bereit für den <br />
                <span className="font-bold">ersten Schritt?</span>
              </h1>
              <p className="text-lg text-slate-100/90 font-light max-w-sm">
                Entdecken Sie die Revolution Ihres Bewusstseins. Gerne begleite ich Sie auf Ihrem persönlichen Weg zu neuer Lebensqualität.
              </p>
            </div>
            <div className="relative z-10 space-y-8 mt-12 lg:mt-0">
              <div className="flex items-start space-x-4">
                <div className="bg-white/10 p-2 rounded-lg backdrop-blur-md">
                  <span className="material-icons-outlined text-white">location_on</span>
                </div>
                <div>
                  <h3 className="font-semibold text-sm uppercase tracking-widest mb-1">Büro Süditalien</h3>
                  <p className="text-slate-200 font-light leading-relaxed">
                    Via del Benessere 12<br />
                    84121 Salerno, Italien
                  </p>
                </div>
              </div>
              <div className="flex items-start space-x-4">
                <div className="bg-white/10 p-2 rounded-lg backdrop-blur-md">
                  <span className="material-icons-outlined text-white">alternate_email</span>
                </div>
                <div>
                  <h3 className="font-semibold text-sm uppercase tracking-widest mb-1">E-Mail</h3>
                  <p className="text-slate-200 font-light">info@robertodemarco.com</p>
                </div>
              </div>
              <div className="pt-8 border-t border-white/20">
                <p className="text-xs uppercase tracking-[0.2em] font-medium opacity-70">Folgen Sie mir</p>
                <div className="flex space-x-6 mt-4">
                    <button className="hover:scale-110 transition-transform">
                        <img alt="Instagram" className="w-8 h-8 invert opacity-80" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB8B8eGQV-1pjt-NsSzv9rhFKJVjRk5QD74LpyUzNbU8kPTt-Qt8-hWJ0dbNMAmh0kXmoTY1fu8miYz5t0tdaFz4PNQU8RmhfGeLXnsTlEfiNMbYq22MGD0PEjy1xASE-_KwHht2wRB7Y1cGDAAFxxba9bauNPDvP-y-5mfhz8GV6g7Ci3iQkQqxnrtwGnG6ouFaJleoMpntdVnkW9w5pPkUnMCW9Oe13XU_R87kg_k3LTWG2eOGS6VAM1ZkPHaxLFEBAdAOXeI0Nw" />
                    </button>
                    <button className="hover:scale-110 transition-transform">
                        <img alt="LinkedIn" className="w-8 h-8 invert opacity-80" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDcLjQfWV5jbvgP3BFN2x9TONNxSICBCUiBRS75U-OFTa0Kq25kfv1PE_BES6MC1RkDq0De1RnaES3RBlHAGEUR7iVi2y8YBrGDV_ykXU6h_GVAA_TdEUv_Fh2svrZvs_fiyeGGjQd8FuJF07JaifN4NxQzQH55la-mA0rzGS5ycvFCrG9-YLrqAt293Ykg8b3kf_csec9LxLb18dTjzyL-yD8z3J7PBCmY3cZZ8ybsskEGBITf_MgdmSY0VddnoLnmp2ME5e-FbLo" />
                    </button>
                    <button className="hover:scale-110 transition-transform">
                         <img alt="Facebook" className="w-8 h-8 invert opacity-80" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAaXkQkfyVWJPQZQpKLSx9_Lcq_jp5iAi6Qd-rxa-aeFZxfsr8P7aIQ7E0tRpdEOqW70sD7Mmta28uFO0qkZFd-LtJ3oTknvkWOtp3tO5TLU0g8ybv1xkar9DUBmbpzsKDspOtp167QJYSoZoLQj_Obw2w_gMk-CCFmEdmdgJMicHAXwW__D4aXLV7vNROAyQa8SXpPqE9lrWEmcVEIHHhiRpFabZZWDRT43BbmfXG8IzlyYsYqOTzGKkL3r5MxGUL9YCNF_az3w_Q" />
                    </button>
                </div>
              </div>
            </div>
          </div>
          <div className="lg:w-7/12 p-8 md:p-16 flex flex-col justify-center">
            <form className="space-y-8 max-w-xl">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="space-y-2">
                  <label htmlFor="name" className="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-widest">Name</label>
                  <input type="text" id="name" placeholder="Ihr voller Name" className="w-full bg-transparent border-b border-slate-200 dark:border-slate-700 focus:border-primary py-3 px-0 transition-all text-lg font-light placeholder-slate-300 dark:placeholder-slate-600 focus:ring-0" />
                </div>
                <div className="space-y-2">
                  <label htmlFor="email" className="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-widest">E-Mail Adresse</label>
                  <input type="email" id="email" placeholder="email@beispiel.de" className="w-full bg-transparent border-b border-slate-200 dark:border-slate-700 focus:border-primary py-3 px-0 transition-all text-lg font-light placeholder-slate-300 dark:placeholder-slate-600 focus:ring-0" />
                </div>
              </div>
              <div className="space-y-2">
                <label htmlFor="subject" className="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-widest">Betreff</label>
                <input type="text" id="subject" placeholder="Wie kann ich Ihnen helfen?" className="w-full bg-transparent border-b border-slate-200 dark:border-slate-700 focus:border-primary py-3 px-0 transition-all text-lg font-light placeholder-slate-300 dark:placeholder-slate-600 focus:ring-0" />
              </div>
              <div className="space-y-2">
                <label htmlFor="message" className="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-widest">Ihre Nachricht</label>
                <textarea id="message" rows={5} placeholder="Schreiben Sie hier Ihr Anliegen..." className="w-full bg-transparent border-b border-slate-200 dark:border-slate-700 focus:border-primary py-3 px-0 transition-all text-lg font-light placeholder-slate-300 dark:placeholder-slate-600 focus:ring-0 resize-none"></textarea>
              </div>
              <div className="flex items-center space-x-3 pt-4">
                <input type="checkbox" id="privacy" className="rounded text-primary focus:ring-primary border-slate-300 dark:bg-slate-800 dark:border-slate-700" />
                <label htmlFor="privacy" className="text-sm text-slate-500 dark:text-slate-400">
                    Ich akzeptiere die <a href="#" className="text-primary hover:underline underline-offset-4">Datenschutzbestimmungen</a>.
                </label>
              </div>
              <div className="pt-6">
                <button type="submit" className="group relative flex items-center justify-center bg-primary text-white px-10 py-5 shape-squircle font-semibold tracking-widest uppercase text-xs overflow-hidden transition-all hover:bg-primary/90 hover:scale-[1.02] active:scale-95 drop-shadow-lg shadow-primary/30">
                    Nachricht Senden
                    <span className="material-icons-outlined ml-2 text-sm group-hover:translate-x-1 transition-transform">send</span>
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Contact;