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

// Optimized constants to prevent object recreation on renders
const HARDWARE_ACCELERATION_STYLE = {
  transform: 'translateZ(0)',
  willChange: 'transform, opacity'
} as const;

const Contact = () => {

  return (
    <section id="contact" className="py-24 relative overflow-hidden min-h-screen" role="region" aria-label="Contact information and form">

      {/* Diagonal background split */}
      <div className="absolute inset-0 bg-gradient-to-br from-white/2 via-transparent to-[#2D80FF]/5 transform -skew-y-3 z-10" />

      <div className="max-w-7xl mx-auto px-6 lg:px-32 relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, ease: "easeOut" }}
          viewport={{ once: true }}
          className="text-center mb-20"
          style={HARDWARE_ACCELERATION_STYLE}
        >
          <h3 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extralight text-white mb-6 leading-tight">
            Let's Start
            <br />
            <span className="text-[#2D80FF] font-light">The Conversation</span>
          </h3>
          <p className="text-lg sm:text-xl font-light text-white/60 max-w-3xl mx-auto px-4">
            Ready to bring your ideas to life? Schedule a free consultation
            or get in touch with us directly.
          </p>
        </motion.div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12 items-start">
          {/* Contact Information */}
          <div className="lg:col-span-1 space-y-8">
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: 0.3, ease: "easeOut" }}
              viewport={{ once: true }}
              className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-3xl p-8"
              style={HARDWARE_ACCELERATION_STYLE}
            >
              <h3 className="text-2xl font-light text-white mb-6">Get in Touch</h3>

              <div className="space-y-6">
                {/* Email */}
                <div className="flex items-start space-x-4">
                  <div className="flex-shrink-0 w-12 h-12 bg-[#2D80FF]/10 rounded-2xl flex items-center justify-center">
                    <Mail className="text-[#2D80FF]" size={20} />
                  </div>
                  <div>
                    <h4 className="font-light text-white mb-1">Email</h4>
                    <p className="text-white/70 text-sm mb-2">Send us a message anytime</p>
                    <a
                      href="mailto:hello@daedastream.com"
                      className="text-[#2D80FF] hover:text-[#2D80FF]/80 transition-colors font-light hover:underline"
                    >
                      hello@daedastream.com
                    </a>
                  </div>
                </div>

                {/* Phone */}
                <div className="flex items-start space-x-4">
                  <div className="flex-shrink-0 w-12 h-12 bg-[#2D80FF]/10 rounded-2xl flex items-center justify-center">
                    <Phone className="text-[#2D80FF]" size={20} />
                  </div>
                  <div>
                    <h4 className="font-light text-white mb-1">Phone</h4>
                    <p className="text-white/70 text-sm mb-2">Call for immediate assistance</p>
                    <a
                      href="tel:+18582243046"
                      className="text-[#2D80FF] hover:text-[#2D80FF]/80 transition-colors font-light hover:underline"
                    >
                      +1 (858) 224-3046
                    </a>
                  </div>
                </div>

                {/* Office Hours */}
                <div className="flex items-start space-x-4">
                  <div className="flex-shrink-0 w-12 h-12 bg-[#2D80FF]/10 rounded-2xl flex items-center justify-center">
                    <MapPin className="text-[#2D80FF]" size={20} />
                  </div>
                  <div>
                    <h4 className="font-light text-white mb-1">Office Hours</h4>
                    <p className="text-white/70 text-sm">Monday - Friday: 9AM - 6PM PST</p>
                  </div>
                </div>
              </div>
            </motion.div>
          </div>

          {/* Calendly Widget */}
          <div className="lg:col-span-2">
            <motion.div
              initial={{ opacity: 0, x: 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: 0.4, ease: "easeOut" }}
              viewport={{ once: true }}
              className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-3xl overflow-hidden"
              style={HARDWARE_ACCELERATION_STYLE}
            >
              <iframe
                src="https://calendly.com/leobraga-daedastream/30min?embed_domain=boltstarwarslanding-production.up.railway.app&embed_type=Inline&hide_event_type_details=1&hide_gdpr_banner=1&text_color=ffffff&primary_color=2d80ff&background_color=000000"
                width="100%"
                height="700"
                frameBorder="0"
                title="Schedule a meeting"
                className="min-h-[700px] w-full"
                style={{
                  background: 'transparent',
                  filter: 'brightness(0.9) contrast(1.1)'
                }}
              />
            </motion.div>
          </div>
        </div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.6, ease: "easeOut" }}
          viewport={{ once: true }}
          className="text-center mt-20 pt-12 border-t border-white/10"
          style={HARDWARE_ACCELERATION_STYLE}
        >
          <p className="text-white/40 font-light text-sm">
            © 2025 Daedastream LLC. Creating meaningful digital experiences.
          </p>
        </motion.div>
      </div>
    </section>
  );
};

export default Contact;