"use client";

import { useState } from "react";
import { motion, useScroll, useTransform } from "framer-motion";
import { companyInfo } from "@/data/siteData";

// ── Shared Constants ──────────────────────────────────────────
const G = "#C9A84C";
const DARK = "#07070A";
const DARK2 = "#0D0D0D";

const goldText: React.CSSProperties = {
  background: `linear-gradient(135deg, ${G} 0%, #FFF 45%, ${G} 100%)`,
  WebkitBackgroundClip: "text",
  WebkitTextFillColor: "transparent",
  backgroundClip: "text",
};

const INQUIRY_TYPES = [
  "General inquiry",
  "Investor relations",
  "Strategic partnerships",
  "Media inquiry",
  "Careers",
];

interface FormState {
  fullName: string;
  email: string;
  phone: string;
  company: string;
  inquiryType: string;
  message: string;
}

export default function ContactContent() {
  const [form, setForm] = useState<FormState>({
    fullName: "",
    email: "",
    phone: "",
    company: "",
    inquiryType: "General inquiry",
    message: "",
  });
  const [submitted, setSubmitted] = useState(false);
  const [loading, setLoading] = useState(false);

  const { scrollYProgress } = useScroll();
  const y = useTransform(scrollYProgress, [0, 0.4], [0, 100]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setForm((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    await new Promise((res) => setTimeout(res, 1200));
    setLoading(false);
    setSubmitted(true);
  };

  const inputStyle: React.CSSProperties = {
    width: "100%",
    background: "transparent",
    border: "none",
    borderBottom: "1px solid rgba(255,255,255,0.1)",
    padding: "16px 0",
    color: "#FFF",
    fontSize: 16,
    outline: "none",
    transition: "all 0.3s cubic-bezier(0.23, 1, 0.32, 1)",
    fontFamily: "inherit",
  };

  const labelStyle: React.CSSProperties = {
    display: "block",
    fontSize: 10,
    textTransform: "uppercase",
    letterSpacing: "0.4em",
    color: G,
    fontWeight: 700,
    marginBottom: 12,
    opacity: 0.8,
  };

  return (
    <div style={{ background: DARK, color: "#FFF", minHeight: "100vh" }}>
      {/* ─── HERO ─────────────────────────────────────── */}
      <section style={{ position: "relative", minHeight: "80vh", display: "flex", alignItems: "center", background: "#000", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, opacity: 0.5 }}>
          <img 
            src="/images/hero_bg.png" 
            alt="Contact Hero"
            style={{ width: "100%", height: "100%", objectFit: "cover", filter: "brightness(0.6) contrast(1.1)" }}
          />
          <div style={{ position: "absolute", inset: 0, background: `linear-gradient(to right, #000 0%, transparent 50%, #000 100%)` }} />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to bottom, #000 0%, transparent 40%, #07070A 100%)" }} />
        </div>

        <motion.div style={{ y, position: "relative", zIndex: 10, width: "100%", maxWidth: 1200, margin: "0 auto", padding: "0 64px" }}>
          <motion.div
            initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }}
            style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 40 }}
          >
            <span style={{ width: 32, height: 1, background: G }} />
            <span style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.22em", fontWeight: 700, color: G }}>Institutional Dialogue</span>
          </motion.div>

          <motion.h1
            initial={{ opacity: 0, y: 48 }} animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 1.1, delay: 0.1 }}
            style={{
              fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(42px, 7vw, 90px)",
              fontWeight: 700, lineHeight: 0.9, letterSpacing: "-0.04em",
              margin: "0 0 32px", textTransform: "uppercase", color: "#FFF"
            }}
          >
            LET&apos;S<br />
            <span style={goldText}>CONNECT.</span>
          </motion.h1>

          <motion.p
            initial={{ opacity: 0, y: 28 }} animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.9, delay: 0.3 }}
            style={{ fontSize: 18, lineHeight: 1.8, maxWidth: 540, color: "rgba(255,255,255,0.6)", fontWeight: 300, margin: 0 }}
          >
            We welcome inquiries from global partners, institutional investors, and strategic stakeholders across all jurisdictions.
          </motion.p>
        </motion.div>
      </section>

      {/* ─── STATS BAR ────────────────────────────────── */}
      <div style={{ background: "#0A0A0B", borderTop: "1px solid rgba(255,255,255,0.05)", borderBottom: "1px solid rgba(255,255,255,0.05)" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 64px", display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))" }}>
          {[
            { val: "< 24h", label: "Response Protocol" },
            { val: "100%", label: "Strict Confidentiality" },
            { val: "Support", label: "Global Presence" }
          ].map((stat, i) => (
            <div key={i} style={{ padding: "50px 0", borderRight: i < 2 ? "1px solid rgba(255,255,255,0.05)" : "none", textAlign: "center" }}>
              <div style={{ fontSize: 32, fontWeight: 700, color: "#FFF", marginBottom: 8 }}>{stat.val}</div>
              <div style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.2em", color: G, fontWeight: 700 }}>{stat.label}</div>
            </div>
          ))}
        </div>
      </div>

      {/* ─── INFO CARDS ───────────────────────────────── */}
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "120px 64px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 24 }}>
          {[
            { label: "Phone", val: companyInfo.phone, icon: "📞" },
            { label: "Corporate Email", val: companyInfo.email, icon: "✉️" },
            { label: "Global HQ", val: "Istanbul, Turkey", icon: "📍" },
            { label: "Entity Registry", val: "Crown Rock Minerals Ltd.", icon: "🏛️" }
          ].map((info, i) => (
            <motion.div
              key={i}
              whileHover={{ borderColor: G, y: -5, backgroundColor: "rgba(255,255,255,0.03)" }}
              style={{ padding: "40px 32px", background: "rgba(255,255,255,0.01)", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 4, transition: "0.4s cubic-bezier(0.23, 1, 0.32, 1)" }}
            >
              <div style={{ fontSize: 24, marginBottom: 20, opacity: 0.8 }}>{info.icon}</div>
              <div style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.3em", color: G, fontWeight: 700, marginBottom: 12 }}>{info.label}</div>
              <div style={{ fontSize: 15, color: "rgba(255,255,255,0.6)", lineHeight: 1.5, wordBreak: "break-word" }}>{info.val}</div>
            </motion.div>
          ))}
        </div>
      </div>

      {/* ─── CONTACT GRID ─────────────── */}
      <section style={{ maxWidth: 1200, margin: "0 auto", padding: "0 64px 160px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 100 }} className="contact-main-grid">
          <style>{`@media(max-width: 1024px) { .contact-main-grid { grid-template-columns: 1fr !important; gap: 80px !important; } }`}</style>

          {/* FORM */}
          <div>
            <div style={{ marginBottom: 64 }}>
              <span style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.4em", color: G, fontWeight: 700, display: "block", marginBottom: 20 }}>Secure Submission</span>
              <h2 style={{ fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(32px, 4vw, 54px)", textTransform: "uppercase", color: "#FFF", margin: 0 }}>
                SEND A <span style={goldText}>MESSAGE</span>
              </h2>
            </div>

            <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 48 }}>
              {/* Row 1 */}
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40 }} className="form-row">
                <style>{`@media(max-width: 640px) { .form-row { grid-template-columns: 1fr !important; } }`}</style>
                <div>
                  <label style={labelStyle}>Full Name</label>
                  <input
                    required type="text" name="fullName" placeholder="Authorized sender name"
                    style={inputStyle}
                    value={form.fullName} onChange={handleChange}
                    onFocus={(e) => e.currentTarget.style.borderBottomColor = G}
                    onBlur={(e) => e.currentTarget.style.borderBottomColor = "rgba(255,255,255,0.1)"}
                  />
                </div>
                <div>
                  <label style={labelStyle}>Email Address</label>
                  <input
                    required type="email" name="email" placeholder="corporate@domain.com"
                    style={inputStyle}
                    value={form.email} onChange={handleChange}
                    onFocus={(e) => e.currentTarget.style.borderBottomColor = G}
                    onBlur={(e) => e.currentTarget.style.borderBottomColor = "rgba(255,255,255,0.1)"}
                  />
                </div>
              </div>

              {/* Row 2 */}
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40 }} className="form-row">
                <div>
                  <label style={labelStyle}>Phone (Optional)</label>
                  <input
                    type="tel" name="phone" placeholder="+1..."
                    style={inputStyle}
                    value={form.phone} onChange={handleChange}
                    onFocus={(e) => e.currentTarget.style.borderBottomColor = G}
                    onBlur={(e) => e.currentTarget.style.borderBottomColor = "rgba(255,255,255,0.1)"}
                  />
                </div>
                <div>
                  <label style={labelStyle}>Organization</label>
                  <input
                    type="text" name="company" placeholder="Entity name"
                    style={inputStyle}
                    value={form.company} onChange={handleChange}
                    onFocus={(e) => e.currentTarget.style.borderBottomColor = G}
                    onBlur={(e) => e.currentTarget.style.borderBottomColor = "rgba(255,255,255,0.1)"}
                  />
                </div>
              </div>

              {/* Inquiry Type */}
              <div>
                <label style={labelStyle}>Inquiry Classification</label>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
                  {INQUIRY_TYPES.map(type => (
                    <button
                      key={type} type="button"
                      onClick={() => setForm(p => ({ ...p, inquiryType: type }))}
                      style={{
                        padding: "12px 24px",
                        fontSize: 10,
                        textTransform: "uppercase",
                        letterSpacing: "0.2em",
                        fontWeight: 700,
                        border: `1px solid ${form.inquiryType === type ? G : "rgba(255,255,255,0.1)"}`,
                        background: form.inquiryType === type ? G : "transparent",
                        color: form.inquiryType === type ? "#000" : "rgba(255,255,255,0.4)",
                        cursor: "pointer",
                        borderRadius: 2,
                        transition: "all 0.4s cubic-bezier(0.23, 1, 0.32, 1)",
                      }}
                    >
                      {type}
                    </button>
                  ))}
                </div>
              </div>

              {/* Message */}
              <div>
                <label style={labelStyle}>Inquiry Details</label>
                <textarea
                  required name="message" placeholder="Provide professional context for your inquiry..."
                  style={{ ...inputStyle, minHeight: 140, resize: "none" } as React.CSSProperties}
                  value={form.message} onChange={handleChange}
                  onFocus={(e) => e.currentTarget.style.borderBottomColor = G}
                  onBlur={(e) => e.currentTarget.style.borderBottomColor = "rgba(255,255,255,0.1)"}
                />
              </div>

              {/* Submit */}
              <motion.button
                whileHover={{ scale: 1.02, boxShadow: `0 10px 40px ${G}20` }} whileTap={{ scale: 0.98 }}
                disabled={loading}
                style={{
                  width: "100%",
                  padding: "24px 0",
                  background: G,
                  color: "#000",
                  border: "none",
                  fontSize: 12,
                  textTransform: "uppercase",
                  letterSpacing: "0.3em",
                  fontWeight: 800,
                  cursor: loading ? "wait" : "pointer",
                  borderRadius: 4,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  gap: 12,
                  opacity: loading ? 0.6 : 1,
                  transition: "0.4s cubic-bezier(0.23, 1, 0.32, 1)",
                }}
              >
                {loading ? "PROCESSING..." : "SUBMIT INQUIRY"}
                {!loading && <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>}
              </motion.button>

              {/* Success */}
              {submitted && (
                <motion.div
                  initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }}
                  style={{ padding: "32px", background: `${G}10`, border: `1px solid ${G}30`, borderRadius: 4, textAlign: "center" }}
                >
                  <div style={{ color: G, fontSize: 11, fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.2em", marginBottom: 8 }}>
                    ✓ Message Sent Successfully
                  </div>
                  <div style={{ color: "rgba(255,255,255,0.45)", fontSize: 14, fontWeight: 300 }}>An officer from the corporate desk will respond shortly.</div>
                </motion.div>
              )}
            </form>
          </div>

          {/* SIDEBAR */}
          <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
            <div style={{ padding: "48px 40px", background: "rgba(255,255,255,0.02)", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 4, position: "relative", overflow: "hidden" }}>
              <div style={{ position: "absolute", top: 0, right: 0, width: 100, height: 100, background: `${G}05`, borderBottomLeftRadius: 100 }} />
              <div style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "8px 16px", background: `${G}10`, border: `1px solid ${G}30`, borderRadius: 2, marginBottom: 32 }}>
                <div style={{ width: 6, height: 6, borderRadius: "50%", background: G }} />
                <span style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.2em", color: G, fontWeight: 700 }}>Corporate Desk</span>
              </div>
              <h3 style={{ fontFamily: "'Syncopate', sans-serif", fontSize: 20, fontWeight: 700, color: "#FFF", marginBottom: 16, textTransform: "uppercase" }}>DIRECT CHANNEL</h3>
              <p style={{ fontSize: 15, color: "rgba(255,255,255,0.4)", lineHeight: 1.8, marginBottom: 32, fontWeight: 300 }}>For urgent institutional inquiries or high-level partnerships, reach our corporate team directly.</p>
              <a
                href={`mailto:${companyInfo.email}`}
                style={{ display: "inline-flex", alignItems: "center", gap: 12, fontSize: 11, textTransform: "uppercase", letterSpacing: "0.2em", color: G, fontWeight: 800, textDecoration: "none" }}
                className="hover:translate-x-2 transition-transform"
              >
                CONTACT CORPORATE DESK
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>
              </a>
            </div>

            <div style={{ padding: "48px 40px", background: "rgba(255,255,255,0.02)", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 4 }}>
              <div style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.4em", color: "rgba(255,255,255,0.2)", fontWeight: 700, marginBottom: 40 }}>Engagement Protocol</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
                {[
                  { n: "01", t: "Validation & Routing", d: "Inquiry assessment and internal department assignment." },
                  { n: "02", t: "Technical Review", d: "Deep evaluation of strategic or technical proposals." },
                  { n: "03", t: "Executive Outreach", d: "Direct communication from group leadership." }
                ].map((step, i) => (
                  <div key={i} style={{ display: "flex", gap: 24 }}>
                    <div style={{ fontSize: 20, fontWeight: 800, color: `${G}40`, flexShrink: 0, lineHeight: 1, fontFamily: "'Syncopate', sans-serif" }}>{step.n}</div>
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 800, color: "rgba(255,255,255,0.9)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 8 }}>{step.t}</div>
                      <div style={{ fontSize: 13, color: "rgba(255,255,255,0.4)", lineHeight: 1.6, fontWeight: 300 }}>{step.d}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ─── HQ SECTION ────────────────────────────────── */}
      <section style={{ background: "#0A0A0B", padding: "160px 0", borderTop: "1px solid rgba(255,255,255,0.05)", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, opacity: 0.05, backgroundImage: `radial-gradient(circle, ${G} 1px, transparent 1px)`, backgroundSize: "40px 40px" }} />
        
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 64px", position: "relative", zIndex: 1 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }} className="hq-grid">
            <style>{`@media(max-width: 768px) { .hq-grid { grid-template-columns: 1fr !important; } }`}</style>
            
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 32 }}>
                <span style={{ width: 32, height: 1, background: G }} />
                <span style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.3em", fontWeight: 700, color: G }}>Global Presence</span>
              </div>
              <h2 style={{ fontFamily: "'Syncopate', sans-serif", fontSize: "clamp(32px, 4vw, 54px)", textTransform: "uppercase", lineHeight: 1.0, marginBottom: 32 }}>
                CORPORATE<br /><span style={goldText}>OPERATIONS</span>
              </h2>
              <div style={{ marginBottom: 16 }}>
                <div style={{ fontSize: 18, color: "rgba(255,255,255,0.6)", lineHeight: 1.6, fontWeight: 300 }}>Capital Tower, No 9, Basın Expres,</div>
                <div style={{ fontSize: 13, textTransform: "uppercase", letterSpacing: "0.2em", color: G, fontWeight: 800, marginTop: 12 }}>Istanbul, Turkey</div>
              </div>
            </div>

            <div style={{ height: 400, background: "rgba(0,0,0,0.6)", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", position: "relative" }}>
              <div style={{ position: "absolute", inset: 0, opacity: 0.1, backgroundImage: `linear-gradient(${G}15 1px, transparent 1px), linear-gradient(90deg, ${G}15 1px, transparent 1px)`, backgroundSize: "20px 20px", borderRadius: 4 }} />
              
              <motion.div
                animate={{ scale: [1, 1.2, 1], opacity: [0.2, 0.4, 0.2] }}
                transition={{ duration: 5, repeat: Infinity, ease: "easeInOut" }}
                style={{ position: "absolute", width: 160, height: 160, background: `${G}20`, borderRadius: "50%", filter: "blur(40px)" }}
              />
              
              <div style={{ width: 72, height: 72, background: G, borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", position: "relative", boxShadow: `0 0 50px ${G}50` }}>
                <svg width="32" height="32" fill="none" stroke="#000" viewBox="0 0 24 24" strokeWidth="2.5">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                  <path strokeLinecap="round" strokeLinejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
              </div>
              
              <div style={{ marginTop: 32, textAlign: "center", position: "relative" }}>
                <div style={{ fontSize: 16, fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.2em", color: "#FFF", marginBottom: 6 }}>Basın Expres District</div>
                <div style={{ fontSize: 11, color: "rgba(255,255,255,0.3)", textTransform: "uppercase", letterSpacing: "0.2em", fontWeight: 700 }}>Istanbul Metropolitan Area</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Decorative Ornament */}
      <div style={{ padding: "80px 0", textAlign: "center", background: DARK, opacity: 0.3 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 16 }}>
          <div style={{ width: 80, height: 1, background: `linear-gradient(90deg, transparent, ${G})` }} />
          <div style={{ width: 8, height: 8, background: G, transform: "rotate(45deg)" }} />
          <div style={{ width: 80, height: 1, background: `linear-gradient(90deg, ${G}, transparent)` }} />
        </div>
      </div>
    </div>
  );
}