"use client";

import SafeImage from "./SafeImage";

interface ContactInfo {
  email: string;
  phone: string;
  linkedin: string;
  github: string;
  Address: string;
}

interface ContactProps {
  contact: ContactInfo;
  fullName: string;
  image?: string;
}

export default function Contact({ contact, fullName, image }: ContactProps) {
  const links = [
    {
      label: "Email",
      value: contact.email,
      href: `mailto:${contact.email}`,
      icon: (
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
          <rect x="2" y="4" width="20" height="16" rx="2" />
          <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
        </svg>
      ),
    },
    {
      label: "Phone",
      value: contact.phone,
      href: `tel:${contact.phone}`,
      icon: (
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
          <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.36 2 2 0 0 1 3.6 1h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.6a16 16 0 0 0 6 6l.91-.9a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z" />
        </svg>
      ),
    },
    {
      label: "LinkedIn",
      value: "achraf-achkari",
      href: contact.linkedin,
      icon: (
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
          <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" />
          <rect x="2" y="9" width="4" height="12" />
          <circle cx="4" cy="4" r="2" />
        </svg>
      ),
    },
    {
      label: "GitHub",
      value: "achachraf",
      href: contact.github,
      icon: (
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
          <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
        </svg>
      ),
    },
  ];

  return (
    <section id="contact" style={{ padding: "8rem 2rem" }}>
      <div style={{ maxWidth: "1200px", margin: "0 auto" }}>
        <div>
          <div className="section-label" style={{ marginBottom: "0.75rem" }}>Let&apos;s Connect</div>
          <h2
            className="font-display"
            style={{
              fontFamily: "var(--font-bebas), sans-serif",
              fontSize: "clamp(2.5rem, 6vw, 5rem)",
              letterSpacing: "0.04em",
              color: "#e2e4e9",
              lineHeight: 1,
              marginBottom: "1rem",
            }}
          >
            Contact
          </h2>
          <div style={{ width: "48px", height: "1px", background: "#c8a96e", marginBottom: "4rem" }} />

          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 360px), 1fr))",
              gap: "3rem",
              alignItems: "start",
            }}
          >
            {/* Left: profile */}
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: "1.5rem", marginBottom: "2rem" }}>
                {image && (
                  <SafeImage
                    src={image}
                    alt={fullName}
                    width={72}
                    height={72}
                    fallbackLabel={fullName.split(" ").map((n) => n[0]).join("")}
                    style={{ width: "72px", height: "72px", objectFit: "cover", filter: "grayscale(0.3)" }}
                    containerStyle={{
                      border: "1px solid #1c1f26",
                      fontSize: "1.2rem",
                    }}
                  />
                )}
                <div>
                  <h3
                    className="font-display"
                    style={{
                      fontFamily: "var(--font-bebas), sans-serif",
                      fontSize: "1.8rem",
                      letterSpacing: "0.04em",
                      color: "#e2e4e9",
                      lineHeight: 1,
                    }}
                  >
                    {fullName}
                  </h3>
                  <div
                    className="font-mono section-label"
                    style={{ fontSize: "0.6rem", marginTop: "0.25rem" }}
                  >
                    Technical Lead · Kereval
                  </div>
                </div>
              </div>

              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: "0.5rem",
                  marginBottom: "2rem",
                  paddingBottom: "2rem",
                  borderBottom: "1px solid #1c1f26",
                }}
              >
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#4a5060" strokeWidth="2">
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
                  <circle cx="12" cy="10" r="3" />
                </svg>
                <span
                  className="font-mono"
                  style={{
                    fontFamily: "var(--font-jetbrains), monospace",
                    fontSize: "0.65rem",
                    letterSpacing: "0.1em",
                    color: "#4a5060",
                  }}
                >
                  {contact.Address}
                </span>
              </div>

              <p
                style={{
                  fontFamily: "var(--font-lora), serif",
                  fontSize: "0.9rem",
                  lineHeight: 1.8,
                  color: "#6b7280",
                }}
              >
                Open to new opportunities, collaborations, and interesting
                conversations. Drop a line — I&apos;d love to hear from you.
              </p>
            </div>

            {/* Right: links */}
            <div style={{ display: "flex", flexDirection: "column", gap: "0" }}>
              {links.map((link, i) => (
                <a
                  key={link.label}
                  href={link.href}
                  target={link.label !== "Email" && link.label !== "Phone" ? "_blank" : undefined}
                  rel="noopener noreferrer"
                  style={{
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                    padding: "1.25rem 1.5rem",
                    borderTop: i === 0 ? "1px solid #1c1f26" : "none",
                    borderLeft: "1px solid #1c1f26",
                    borderRight: "1px solid #1c1f26",
                    borderBottom: "1px solid #1c1f26",
                    textDecoration: "none",
                    color: "#6b7280",
                    background: "#0e1014",
                    transition: "background 0.2s, color 0.2s, border-color 0.2s",
                    gap: "1rem",
                  }}
                  onMouseEnter={(e) => {
                    const el = e.currentTarget as HTMLElement;
                    el.style.background = "rgba(200,169,110,0.04)";
                    el.style.color = "#c8a96e";
                    el.style.borderLeftColor = "#c8a96e";
                  }}
                  onMouseLeave={(e) => {
                    const el = e.currentTarget as HTMLElement;
                    el.style.background = "#0e1014";
                    el.style.color = "#6b7280";
                    el.style.borderLeftColor = "#1c1f26";
                  }}
                >
                  <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
                    {link.icon}
                    <div>
                      <div
                        className="font-mono"
                        style={{
                          fontFamily: "var(--font-jetbrains), monospace",
                          fontSize: "0.58rem",
                          letterSpacing: "0.14em",
                          textTransform: "uppercase",
                          marginBottom: "0.15rem",
                          color: "inherit",
                          opacity: 0.6,
                        }}
                      >
                        {link.label}
                      </div>
                      <div
                        style={{
                          fontFamily: "var(--font-lora), serif",
                          fontSize: "0.9rem",
                          color: "inherit",
                        }}
                      >
                        {link.value}
                      </div>
                    </div>
                  </div>
                  <span style={{ fontSize: "1rem", opacity: 0.5 }}>↗</span>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Footer */}
      <div
        style={{
          maxWidth: "1200px",
          margin: "6rem auto 0",
          paddingTop: "2rem",
          borderTop: "1px solid #1c1f26",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          flexWrap: "wrap",
          gap: "1rem",
        }}
      >
        <div
          className="font-mono"
          suppressHydrationWarning
          style={{
            fontFamily: "var(--font-jetbrains), monospace",
            fontSize: "0.62rem",
            letterSpacing: "0.1em",
            color: "#4a5060",
          }}
        >
          © {new Date().getFullYear()} {fullName}. All rights reserved.
        </div>
        <div
          className="font-display"
          style={{
            fontFamily: "var(--font-bebas), sans-serif",
            fontSize: "1.2rem",
            letterSpacing: "0.12em",
            color: "#1c1f26",
          }}
        >
          ACHRAF ACHKARI
        </div>
      </div>
    </section>
  );
}