industries/components/Contact.tsx

"use client";

import { motion } from "framer-motion";
import { Mail, Phone, MapPin, Microscope, Building2 } from "lucide-react";
import { cn } from "@/lib/utils";

export default function Contact() {
  return (
    <section id="contact" className={cn(
      "py-24 relative overflow-hidden transition-colors duration-300",
      "bg-background"
    )}>
      {/* Background decoration */}
      <div className="absolute inset-0 pointer-events-none">
        <div className={cn(
          "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full blur-3xl",
          "bg-foreground/[0.02]"
        )} />
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="text-center mb-16">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className={cn(
              "inline-flex items-center gap-2 px-4 py-2 rounded-full border mb-6",
              "bg-foreground/5 border-border"
            )}
          >
            <Microscope className={cn("w-4 h-4", "text-muted-foreground")} />
            <span className={cn("text-sm font-medium", "text-muted-foreground")}>
              Research Collaboration
            </span>
          </motion.div>
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.05 }}
            className={cn(
              "text-4xl md:text-5xl font-bold mb-4",
              "text-foreground"
            )}
          >
            Let's Build Together
          </motion.h2>
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.1 }}
            className={cn(
              "text-lg max-w-3xl mx-auto",
              "text-muted-foreground"
            )}
          >
            From research collaborations to enterprise AI deployments,
            we partner with teams pushing the boundaries of what's possible
          </motion.p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
          {/* Research Division */}
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5 }}
            className={cn(
              "backdrop-blur-sm p-8 rounded-2xl border transition-colors",
              "bg-secondary/50 border-border hover:border-border"
            )}
          >
            <div className="flex items-center gap-3 mb-6">
              <div className={cn(
                "p-2 rounded-lg",
                "bg-foreground/5"
              )}>
                <Microscope className={cn("w-5 h-5", "text-foreground")} />
              </div>
              <h3 className={cn(
                "text-2xl font-semibold",
                "text-foreground"
              )}>
                Research Division
              </h3>
            </div>

            <div className="space-y-6">
              <div className="group">
                <h4 className={cn(
                  "font-semibold mb-1 transition-colors",
                  "text-foreground group-hover:text-foreground/80"
                )}>
                  Antje Karina Worring
                </h4>
                <p className={cn("text-sm mb-2", "text-muted-foreground")}>
                  Chief Executive Officer
                </p>
                <a
                  href="mailto:[email protected]"
                  className={cn(
                    "inline-flex items-center gap-2 transition-colors",
                    "text-muted-foreground hover:text-foreground"
                  )}
                >
                  <Mail className="w-4 h-4" />
                  <span className="text-sm">a@zoo.industries</span>
                </a>
              </div>

              <div className="group">
                <h4 className={cn(
                  "font-semibold mb-1 transition-colors",
                  "text-foreground group-hover:text-foreground/80"
                )}>
                  Research Partnerships
                </h4>
                <p className={cn("text-sm mb-2", "text-muted-foreground")}>
                  Academic & Industry Collaboration
                </p>
                <a
                  href="mailto:[email protected]"
                  className={cn(
                    "inline-flex items-center gap-2 transition-colors",
                    "text-muted-foreground hover:text-foreground"
                  )}
                >
                  <Mail className="w-4 h-4" />
                  <span className="text-sm">research@zoo.industries</span>
                </a>
              </div>
            </div>
          </motion.div>

          {/* Commercial Division */}
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5 }}
            className={cn(
              "backdrop-blur-sm p-8 rounded-2xl border transition-colors",
              "bg-secondary/50 border-border hover:border-border"
            )}
          >
            <div className="flex items-center gap-3 mb-6">
              <div className={cn(
                "p-2 rounded-lg",
                "bg-foreground/5"
              )}>
                <Building2 className={cn("w-5 h-5", "text-foreground")} />
              </div>
              <h3 className={cn(
                "text-2xl font-semibold",
                "text-foreground"
              )}>
                Commercial Division
              </h3>
            </div>

            <div className="space-y-6">
              <div className="group">
                <h4 className={cn(
                  "font-semibold mb-1 transition-colors",
                  "text-foreground group-hover:text-foreground/80"
                )}>
                  Zach Kelling
                </h4>
                <p className={cn("text-sm mb-2", "text-muted-foreground")}>
                  Founding CTO
                </p>
                <a
                  href="mailto:[email protected]"
                  className={cn(
                    "inline-flex items-center gap-2 transition-colors",
                    "text-muted-foreground hover:text-foreground"
                  )}
                >
                  <Mail className="w-4 h-4" />
                  <span className="text-sm">zach@zoo.industries</span>
                </a>
              </div>

              <div className="group">
                <h4 className={cn(
                  "font-semibold mb-1 transition-colors",
                  "text-foreground group-hover:text-foreground/80"
                )}>
                  Dave Lorenzini
                </h4>
                <p className={cn("text-sm mb-2", "text-muted-foreground")}>
                  Chief Strategy Officer
                </p>
                <a
                  href="mailto:[email protected]"
                  className={cn(
                    "inline-flex items-center gap-2 transition-colors",
                    "text-muted-foreground hover:text-foreground"
                  )}
                >
                  <Mail className="w-4 h-4" />
                  <span className="text-sm">dave@zoo.industries</span>
                </a>
              </div>
            </div>
          </motion.div>
        </div>

        {/* Contact Info Bar */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
          className={cn(
            "backdrop-blur-sm p-8 rounded-2xl border",
            "bg-foreground/5 border-border"
          )}
        >
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="text-center group">
              <div className={cn(
                "inline-flex items-center justify-center w-12 h-12 rounded-xl mb-4 transition-colors",
                "bg-foreground/5 group-hover:bg-accent"
              )}>
                <MapPin className={cn("w-6 h-6", "text-foreground")} />
              </div>
              <h4 className={cn("font-semibold mb-2", "text-foreground")}>
                Corporate Headquarters
              </h4>
              <p className={cn("text-sm", "text-muted-foreground")}>
                1824 S. Fairfax Ave<br />
                Los Angeles, CA 90019<br />
                United States
              </p>
            </div>
            <div className="text-center group">
              <div className={cn(
                "inline-flex items-center justify-center w-12 h-12 rounded-xl mb-4 transition-colors",
                "bg-foreground/5 group-hover:bg-accent"
              )}>
                <Phone className={cn("w-6 h-6", "text-foreground")} />
              </div>
              <h4 className={cn("font-semibold mb-2", "text-foreground")}>
                Secure Line
              </h4>
              <p className={cn("text-sm", "text-muted-foreground")}>
                +1 (913) 777-4443<br />
                Available 24/7
              </p>
            </div>
            <div className="text-center group">
              <div className={cn(
                "inline-flex items-center justify-center w-12 h-12 rounded-xl mb-4 transition-colors",
                "bg-foreground/5 group-hover:bg-accent"
              )}>
                <Mail className={cn("w-6 h-6", "text-foreground")} />
              </div>
              <h4 className={cn("font-semibold mb-2", "text-foreground")}>
                General Inquiries
              </h4>
              <p className={cn("text-sm", "text-muted-foreground")}>
                <a href="mailto:[email protected]" className={cn("transition-colors", "hover:text-foreground")}>info@zoo.industries</a><br />
                <a href="mailto:[email protected]" className={cn("transition-colors", "hover:text-foreground")}>contracts@zoo.industries</a><br />
                <a href="mailto:[email protected]" className={cn("transition-colors", "hover:text-foreground")}>security@zoo.industries</a>
              </p>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}