import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence, useScroll, useTransform } from 'framer-motion';
import {
  ArrowUpRight,
  Github,
  Linkedin,
  Twitter,
  Mail,
  BarChart3,
  Zap,
  Globe,
  Menu,
  X,
  ChevronRight,
  Send
} from 'lucide-react';

// --- DATA KONTAK & PROFIL (Disesuaikan dengan request) ---
const PROFILE = {
  name: "Hakim",
  role: "Digital Business Strategist & Serial Entrepreneur",
  tagline: "Membangun ekosistem bisnis digital yang skalabel, estetis, dan berdampak tinggi.",
  about: "Berpengalaman dalam mengubah ide kompleks menjadi produk digital yang user-centric dan menguntungkan. Saya memadukan intuisi desain dengan strategi pertumbuhan berbasis data untuk menciptakan bisnis yang bertahan lama di era digital.",
  emailTarget: "hakim@storyseller.id",
  socials: {
    linkedin: "#",
    twitter: "#",
    github: "#"
  },
  // Menggunakan placeholder gambar berkualitas tinggi yang relevan
  heroImage: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", // Gambar tim/kerja kolaboratif gelap
  profileImage: "https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" // Foto profil profesional jas
};

const VENTURES = [
  {
    title: "FlowState Commerce",
    category: "E-commerce Ecosystem",
    description: "Platform *headless commerce* yang memungkinkan brand lokal berjualan global tanpa hambatan teknis.",
    year: "2023",
    icon: <Globe className="w-5 h-5" />
  },
  {
    title: "NeuroCreative Studio",
    category: "AI-Driven Agency",
    description: "Agensi kreatif yang memanfaatkan AI generatif untuk mempercepat produksi aset pemasaran startup.",
    year: "2022",
    icon: <Zap className="w-5 h-5" />
  },
  {
    title: "MetricsDAO",
    category: "Web3 Analytics",
    description: "Alat analitik terdesentralisasi untuk komunitas DAO dalam mengukur keterlibatan anggota.",
    year: "2021",
    icon: <BarChart3 className="w-5 h-5" />
  }
];

// --- KONFIGURASI ANIMASI (Cubic Bezier untuk "Smoothness") ---
const transitionSmooth = { duration: 0.8, ease: [0.25, 0.4, 0.25, 1] }; // Kurva inersia premium

const containerStagger = {
  animate: {
    transition: { staggerChildren: 0.15, delayChildren: 0.2 }
  }
};

const fadeInUp = {
  initial: { y: 40, opacity: 0 },
  animate: { y: 0, opacity: 1, transition: transitionSmooth }
};

const scaleIn = {
  initial: { scale: 0.95, opacity: 0 },
  animate: { scale: 1, opacity: 1, transition: transitionSmooth }
};


// --- KOMPONEN MODAL EMAIL ---
const ContactModal = ({ isOpen, onClose, targetEmail }) => {
  const [subject, setSubject] = useState('');
  const [body, setBody] = useState('');

  const handleSend = () => {
    const mailtoLink = `mailto:${targetEmail}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    window.open(mailtoLink, '_blank');
    onClose();
    setSubject('');
    setBody('');
  };

  return (
    <AnimatePresence>
      {isOpen && (
        <>
          <motion.div
            initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
            transition={transitionSmooth}
            className="fixed inset-0 bg-black/80 backdrop-blur-sm z-[60]"
            onClick={onClose}
          />
          <motion.div
            initial={{ opacity: 0, scale: 0.9, y: 20 }} animate={{ opacity: 1, scale: 1, y: 0 }} exit={{ opacity: 0, scale: 0.9, y: 20 }}
            transition={transitionSmooth}
            className="fixed inset-0 flex items-center justify-center z-[70] p-4 pointer-events-none"
          >
            <div className="bg-[#121212] border border-white/10 p-8 rounded-3xl w-full max-w-lg relative pointer-events-auto shadow-2xl shadow-blue-900/20">
              <button onClick={onClose} className="absolute top-6 right-6 text-zinc-400 hover:text-white transition-colors">
                <X size={24} />
              </button>
              <h3 className="text-2xl font-bold mb-6 bg-gradient-to-r from-white to-zinc-400 bg-clip-text text-transparent">Compose Email</h3>

              <div className="space-y-6">
                <div>
                  <label className="block text-sm font-medium text-zinc-400 mb-2">Subject</label>
                  <input
                    type="text"
                    value={subject}
                    onChange={(e) => setSubject(e.target.value)}
                    placeholder="Contoh: Kolaborasi Proyek SaaS"
                    className="w-full bg-black/50 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-blue-500 transition-colors placeholder:text-zinc-600"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-zinc-400 mb-2">Message Body</label>
                  <textarea
                    value={body}
                    onChange={(e) => setBody(e.target.value)}
                    placeholder="Jelaskan ide atau kebutuhan Anda secara singkat..."
                    rows={5}
                    className="w-full bg-black/50 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-blue-500 transition-colors resize-none placeholder:text-zinc-600"
                  />
                </div>
                <motion.button
                  whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}
                  onClick={handleSend}
                  disabled={!subject && !body}
                  className={`w-full py-4 rounded-xl font-bold flex items-center justify-center transition-all ${!subject && !body ? 'bg-zinc-800 text-zinc-500 cursor-not-allowed' : 'bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-500 hover:to-blue-400 text-white shadow-lg shadow-blue-900/30'}`}
                >
                  Kirim via Gmail <Send size={18} className="ml-2" />
                </motion.button>
              </div>
            </div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
};


// --- KOMPONEN UTAMA APP ---
const App = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isContactModalOpen, setIsContactModalOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const { scrollY } = useScroll();
  // Efek parallax halus untuk hero image
  const heroImageY = useTransform(scrollY, [0, 500], ['0%', '20%']);
  const heroTextY = useTransform(scrollY, [0, 300], ['0%', '10%']);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const openContact = () => setIsContactModalOpen(true);

  return (
    <div className="min-h-screen bg-[#0a0a0a] text-zinc-100 font-sans overflow-x-hidden selection:bg-blue-500/30 selection:text-white">
      <ContactModal
        isOpen={isContactModalOpen}
        onClose={() => setIsContactModalOpen(false)}
        targetEmail={PROFILE.emailTarget}
      />

      {/* Background Ambient Light */}
      <div className="fixed inset-0 pointer-events-none z-0">
         <div className="absolute top-[-20%] left-[-10%] w-[50%] h-[50%] bg-blue-600/10 blur-[150px] rounded-full mix-blend-screen" />
         <div className="absolute bottom-[-20%] right-[-10%] w-[50%] h-[50%] bg-indigo-600/10 blur-[150px] rounded-full mix-blend-screen" />
      </div>

      {/* Navbar */}
      <nav className={`fixed top-0 w-full z-50 transition-all duration-500 ${scrolled ? 'py-4 bg-[#0a0a0a]/90 backdrop-blur-lg border-b border-white/[0.05]' : 'py-8 bg-transparent'}`}>
        <div className="container mx-auto px-6 md:px-12 flex justify-between items-center">
          <motion.a
             href="#"
             initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={transitionSmooth}
             className="text-xl font-bold tracking-tighter relative z-10"
          >
            {PROFILE.name}<span className="text-blue-500">.</span>
          </motion.a>

          {/* Desktop Nav Links */}
          <div className="hidden md:flex space-x-10 items-center">
            {['Ventures', 'About', 'Contact'].map((item) => (
              <a key={item} href={`#${item.toLowerCase()}`} className="text-sm font-medium text-zinc-400 hover:text-white relative group transition-colors">
                {item}
                <span className="absolute -bottom-1 left-0 w-0 h-[2px] bg-blue-500 transition-all duration-300 group-hover:w-full"></span>
              </a>
            ))}
             <motion.button
              onClick={openContact}
              whileHover={{ scale: 1.05, backgroundColor: '#3b82f6' }}
              whileTap={{ scale: 0.95 }}
              transition={{ type: "spring", stiffness: 400, damping: 17 }}
              className="px-6 py-2.5 bg-white/10 text-white text-sm font-bold rounded-full border border-white/20 hover:border-transparent transition-all backdrop-blur-sm"
            >
              Let's Talk
            </motion.button>
          </div>

          {/* Mobile Menu Button */}
          <button className="md:hidden text-zinc-100 relative z-50" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>
      </nav>

      {/* Mobile Menu Overlay */}
      <AnimatePresence>
        {isMenuOpen && (
          <motion.div
            initial={{ opacity: 0, clipPath: "circle(0% at 100% 0)" }}
            animate={{ opacity: 1, clipPath: "circle(150% at 100% 0)" }}
            exit={{ opacity: 0, clipPath: "circle(0% at 100% 0)" }}
            transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
            className="fixed inset-0 z-40 bg-[#0a0a0a] flex items-center px-6 md:hidden"
          >
            <motion.div variants={containerStagger} initial="initial" animate="animate" className="flex flex-col space-y-8 text-4xl font-bold tracking-tight">
              {['Ventures', 'About', 'Contact'].map((item) => (
                <motion.a key={item} variants={fadeInUp} href={`#${item.toLowerCase()}`} onClick={() => setIsMenuOpen(false)} className="hover:text-blue-500 transition-colors">
                  {item}<span className="text-blue-500">.</span>
                </motion.a>
              ))}
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      <main>
        {/* Hero Section with Parallax Image Background */}
        <section className="relative min-h-[90vh] flex items-center pt-20 px-6 md:px-12 overflow-hidden">
          {/* Background Image */}
          <motion.div style={{ y: heroImageY }} className="absolute inset-0 z-0">
             <div className="absolute inset-0 bg-gradient-to-t from-[#0a0a0a] via-[#0a0a0a]/80 to-[#0a0a0a]/40 z-10" />
             <img src={PROFILE.heroImage} alt="Hero Background" className="w-full h-full object-cover opacity-50" />
          </motion.div>

          <div className="container mx-auto relative z-20">
            <motion.div
              variants={containerStagger}
              initial="initial"
              animate="animate"
              style={{ y: heroTextY }}
              className="max-w-4xl"
            >
              <motion.h1 variants={fadeInUp} className="text-5xl md:text-8xl font-extrabold tracking-tighter leading-[0.95] mb-8 bg-clip-text text-transparent bg-gradient-to-b from-white to-zinc-400">
                Architecting the <br />
                <span className="text-white relative inline-block">
                  Digital Business
                  <motion.span initial={{ width: 0 }} animate={{ width: '100%' }} transition={{ delay: 1, duration: 1, ease: [0.22, 1, 0.36, 1] }} className="absolute bottom-2 left-0 h-3 bg-blue-600 -z-10 opacity-50 mix-blend-screen"></motion.span>
                </span> <br />
                Landscape.
              </motion.h1>

              <motion.p variants={fadeInUp} className="text-lg md:text-2xl text-zinc-300 max-w-xl mb-10 leading-relaxed font-light">
                {PROFILE.tagline}
              </motion.p>

              <motion.div variants={fadeInUp} className="flex flex-wrap items-center gap-6">
                <motion.button
                  onClick={openContact}
                  whileHover={{ scale: 1.03 }}
                  whileTap={{ scale: 0.97 }}
                  transition={{ type: "spring", stiffness: 300, damping: 15 }}
                  className="group relative px-8 py-4 bg-blue-600 rounded-2xl font-bold text-white overflow-hidden shadow-lg shadow-blue-900/40"
                >
                  <span className="absolute inset-0 w-full h-full bg-gradient-to-r from-blue-400 to-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-xl"></span>
                  <span className="relative flex items-center">
                    Start Collaboration <ArrowUpRight className="ml-2 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform duration-300" />
                  </span>
                </motion.button>

                <div className="flex items-center space-x-4">
                  {[
                    { icon: Linkedin, href: PROFILE.socials.linkedin },
                    { icon: Twitter, href: PROFILE.socials.twitter },
                    { icon: Github, href: PROFILE.socials.github }
                  ].map((social, index) => (
                    <motion.a
                      key={index}
                      href={social.href}
                      whileHover={{ y: -3, backgroundColor: 'rgba(255,255,255,0.1)' }}
                      className="p-3 bg-white/5 border border-white/10 rounded-full text-zinc-400 hover:text-white hover:border-white/30 transition-all duration-300 backdrop-blur-sm"
                    >
                      <social.icon size={20} strokeWidth={1.5} />
                    </motion.a>
                  ))}
                </div>
              </motion.div>
            </motion.div>
          </div>
        </section>

        {/* Ventures Section - Estetik Kartu Ditingkatkan */}
        <section id="ventures" className="py-32 px-6 md:px-12 relative">
          <div className="container mx-auto">
             <motion.div initial={{opacity:0}} whileInView={{opacity:1}} transition={transitionSmooth} viewport={{once:true}} className="flex flex-col md:flex-row md:items-end justify-between mb-20 gap-6">
              <div>
                <h2 className="text-4xl md:text-5xl font-bold mb-4 tracking-tight">Selected <span className="text-blue-500">Ventures</span></h2>
                <p className="text-zinc-400 max-w-md">Inisiatif digital yang saat ini saya bangun dan skalakan.</p>
              </div>
            </motion.div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-10">
              {VENTURES.map((venture, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 40 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ ...transitionSmooth, delay: index * 0.15 }}
                  viewport={{ once: true, margin: "-100px" }}
                  className="group relative p-8 bg-[#121212] border border-white/10 rounded-[2rem] hover:border-blue-500/50 transition-all duration-500 overflow-hidden hover:shadow-2xl hover:shadow-blue-900/10"
                >
                  <div className="absolute inset-0 bg-gradient-to-br from-blue-600/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

                  <div className="flex justify-between items-start mb-10 relative z-10">
                    <div className="p-3 bg-white/5 rounded-2xl text-blue-400 group-hover:bg-blue-500/20 transition-colors duration-500">
                      {venture.icon}
                    </div>
                    <span className="text-xs font-mono text-zinc-500 px-3 py-1 bg-white/5 rounded-full">{venture.year}</span>
                  </div>

                  <span className="text-xs font-bold text-blue-400 mb-2 block uppercase tracking-widest relative z-10">{venture.category}</span>
                  <h3 className="text-2xl font-bold mb-4 text-white relative z-10">{venture.title}</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed mb-8 relative z-10 line-clamp-3 group-hover:text-zinc-300 transition-colors">
                    {venture.description}
                  </p>
                  <div className="flex items-center text-sm font-bold text-white group-hover:text-blue-400 transition-colors relative z-10">
                    Explore Case Study <ChevronRight size={16} className="ml-2 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300" />
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </section>

        {/* About Section with Profile Image */}
        <section id="about" className="py-32 px-6 md:px-12 bg-white/[0.02]">
          <div className="container mx-auto">
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                whileInView={{ opacity: 1, scale: 1 }}
                transition={transitionSmooth}
                viewport={{ once: true }}
                className="lg:col-span-5 relative pl-8 pt-8"
              >
                {/* Decorative Elements for Image */}
                <div className="absolute top-0 left-0 w-full h-full border-2 border-blue-500/30 rounded-3xl -z-10 transform -translate-x-4 -translate-y-4 lg:-translate-x-8 lg:-translate-y-8"></div>
                <div className="aspect-[4/5] rounded-3xl overflow-hidden relative bg-zinc-800">
                  <img src={PROFILE.profileImage} alt={PROFILE.name} className="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-700 scale-105 hover:scale-100" />
                  <div className="absolute inset-0 bg-gradient-to-t from-[#0a0a0a] via-transparent to-transparent opacity-60"></div>
                </div>
              </motion.div>

              <motion.div
                 variants={containerStagger} initial="initial" whileInView="animate" viewport={{ once: true }}
                 className="lg:col-span-7"
              >
                <motion.h2 variants={fadeInUp} className="text-sm font-mono text-blue-500 uppercase tracking-[0.3em] mb-6">The Approach</motion.h2>
                <motion.h3 variants={fadeInUp} className="text-3xl md:text-5xl font-bold mb-8 tracking-tight leading-tight">
                  Bridging technical innovation with <span className="text-zinc-500 italic">real-world</span> market demands.
                </motion.h3>
                <motion.p variants={fadeInUp} className="text-zinc-400 leading-relaxed mb-10 text-lg max-w-2xl">
                  {PROFILE.about}
                </motion.p>

                <motion.div variants={fadeInUp} className="grid grid-cols-2 md:grid-cols-3 gap-y-6 gap-x-4">
                  {['Data-Driven Strategy', 'Lean Startup', 'Productize Service', 'Scalable Systems', 'UI/UX Obsessed'].map((skill, i) => (
                    <div key={i} className="flex items-center space-x-3 text-sm font-medium text-zinc-300">
                      <div className="w-2 h-2 rounded-full bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.5)]" />
                      <span>{skill}</span>
                    </div>
                  ))}
                </motion.div>
              </motion.div>
            </div>
          </div>
        </section>

        {/* Contact Section - Aesthetic & CTA Refined */}
        <section id="contact" className="py-40 px-6 md:px-12 relative overflow-hidden">
          <div className="container mx-auto text-center max-w-4xl relative z-10">
            <motion.div
              variants={scaleIn}
              initial="initial"
              whileInView="animate"
              viewport={{ once: true }}
            >
              <h2 className="text-5xl md:text-8xl font-black mb-8 tracking-tighter text-white">
                Ready to <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-500 animate-gradient-x">disrupt</span>?
              </h2>
              <p className="text-zinc-400 mb-12 text-xl max-w-2xl mx-auto leading-relaxed">
                Apakah Anda memiliki visi untuk produk digital berikutnya atau membutuhkan strategi go-to-market? Mari diskusikan potensinya.
              </p>

              <motion.button
                onClick={openContact}
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                transition={{ type: "spring", stiffness: 300, damping: 15 }}
                className="group relative inline-flex items-center px-12 py-6 bg-white text-black font-black rounded-full overflow-hidden transition-all shadow-xl shadow-white/10 hover:shadow-white/20"
              >
                <span className="absolute inset-0 bg-gradient-to-r from-blue-100 to-white opacity-0 group-hover:opacity-100 transition-opacity duration-500"></span>
                <span className="relative flex items-center text-xl">
                  Initiate Partnership <Mail className="ml-4 group-hover:rotate-12 transition-transform duration-300" strokeWidth={2} />
                </span>
              </motion.button>
            </motion.div>
          </div>

          {/* Abstract Background Elements for Contact */}
          <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-full h-1/2 bg-gradient-to-t from-blue-900/20 to-transparent blur-[100px] pointer-events-none" />
        </section>
      </main>

      <footer className="py-12 border-t border-white/5 px-6 md:px-12 bg-[#0a0a0a] relative z-10">
        <div className="container mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
          <div className="flex items-center space-x-2">
            <span className="text-xl font-bold tracking-tighter">{PROFILE.name}<span className="text-blue-500">.</span></span>
            <span className="text-zinc-500 text-sm">© {new Date().getFullYear()}</span>
          </div>
          <p className="text-zinc-600 text-sm font-mono">Crafted for impact in the digital realm.</p>
        </div>
      </footer>
    </div>
  );
};

export default App;