import React, { useState, useEffect, useRef, useCallback } from 'react';
import { Play, ChevronLeft, ChevronRight, CheckCircle2, Globe, ArrowRight, Menu, X, Linkedin, Youtube, Mail, Maximize, Award } from 'lucide-react';

// --- TRANSLATIONS DICTIONARY ---
const translations = {
  BM: {
    nav: {
      about: "Mengenai",
      trackRecord: "Rekod",
      hybridSystem: "Sistem Hybrid",
      impactSociety: "Impact Society",
      contact: "Konsultasi"
    },
    hero: {
      headline: "Membina Pertumbuhan Rangkaian Berstruktur Sejak 2006.",
      subhead: "90+ Pemimpin 5 Angka Dilahirkan. Sistem Pelaksanaan Hybrid Bertaraf Korporat.",
      subtext: "Meninggalkan pendekatan tradisional untuk kerjaya berasaskan integriti, dipacu data dan struktur korporat. Kami membina kerangka kerja yang boleh diduplikasi untuk profesional yang serius.",
      primaryBtn: "Jadualkan Sesi Strategi",
      secondaryBtn: "Tonton Kerangka Sistem"
    },
    video: {
      title: "Mesej Peribadi Daripada Faiz Noordin",
      subtext: "Menstruktur semula landskap pemasaran rangkaian melalui prinsip korporat, SOP yang ketat, dan pelaksanaan berasaskan data."
    },
    trackRecord: {
      title: "Rekod Pencapaian Industri",
      stats: [
        { value: "20+", label: "Tahun Pengalaman" },
        { value: "90+", label: "Penerima 5 Angka" },
        { value: "6 Angka", label: "Pendapatan Bulanan" },
        { value: "2021-24", label: "Pengurusan Tertinggi" }
      ],
      timeline: [
        { year: "2006", event: "Bermula dalam Industri" },
        { year: "2009", event: "Kelab Multi Millionaires" },
        { year: "2010", event: "Kediaman Bangi RM1.1 Juta" },
        { year: "2014", event: "Pencapaian RM32,000 Sehari" },
        { year: "2018", event: "Top No.1 Swisderm" },
        { year: "2024", event: "Restart / Reborn" },
        { year: "2026", event: "Arkitek Sistem Hybrid" }
      ]
    },
    problems: {
      title: "Dua Masalah Struktur Dalam Industri",
      prob1Title: "1. Prospecting Tidak Konsisten",
      prob1Desc: "Pendekatan tradisional sering bergantung kepada motivasi dan bukannya metrik, menyebabkan saluran prospek yang tidak menentu, penolakan tinggi dan keletihan pasaran.",
      prob2Title: "2. Duplikasi Tidak Berstruktur",
      prob2Desc: "Tanpa sistem operasi standard (SOP) yang jelas, pertumbuhan terhenti. Pasukan terlalu bergantung kepada karisma individu berbanding proses perniagaan yang direka dengan baik."
    },
    hybrid: {
      title: "Pendekatan Hybrid Networking System",
      cols: [
        { title: "Offline Closing Mastery", desc: "Strategi rundingan bersemuka tahap eksekutif, psikologi pembeli, dan pembinaan hubungan bernilai tinggi." },
        { title: "Online Prospecting Automation", desc: "Sistem penjanaan prospek digital berstruktur dan corong (funnel) untuk memastikan aliran saluran prospek tanpa henti." },
        { title: "Structured Duplication Framework", desc: "SOP langkah demi langkah berasaskan korporat yang membolehkan pasukan melaksanakan sistem dengan ralat yang minimum." }
      ]
    },
    leadership: {
      title: "Kepimpinan & Pembangunan Eksekutif"
    },
    impact: {
      title: "Membina Ekosistem Profesional",
      desc: "Impact Society adalah komuniti eksklusif yang direka untuk golongan profesional, usahawan, dan penggiat rangkaian yang serius. Kami mengutamakan pertumbuhan berstruktur, pembangunan kepimpinan, dan penciptaan kekayaan jangka panjang berbanding taktik promosi jangka pendek (hype).",
      btn: "Terokai Impact Society"
    },
    cta: {
      text: "Jika anda serius untuk membina pertumbuhan rangkaian yang berstruktur dan mampan, pastikan sistem anda disejajarkan.",
      btn: "Tempah Konsultasi Strategi Peribadi"
    }
  },
  EN: {
    nav: {
      about: "About",
      trackRecord: "Track Record",
      hybridSystem: "Hybrid System",
      impactSociety: "Impact Society",
      contact: "Consultation"
    },
    hero: {
      headline: "Building Structured Network Growth Since 2006.",
      subhead: "90+ Five-Figure Leaders Developed. Corporate-Level Hybrid Execution System.",
      subtext: "Leaving traditional hype behind for an integrity-driven, data-backed corporate structure. We engineer duplicable frameworks for serious professionals.",
      primaryBtn: "Schedule Strategy Session",
      secondaryBtn: "Watch System Framework"
    },
    video: {
      title: "A Personal Message From Faiz Noordin",
      subtext: "Restructuring the network marketing landscape through corporate principles, strict SOPs, and data-driven execution."
    },
    trackRecord: {
      title: "Industry Track Record",
      stats: [
        { value: "20+", label: "Years Experience" },
        { value: "90+", label: "5-Figure Earners" },
        { value: "6-Figure", label: "Monthly Income" },
        { value: "2021-24", label: "Top Management" }
      ],
      timeline: [
        { year: "2006", event: "Industry Inception" },
        { year: "2009", event: "Multi Millionaires Club" },
        { year: "2010", event: "RM1.1M Bangi Residence" },
        { year: "2014", event: "RM32,000/Day Milestone" },
        { year: "2018", event: "Top No.1 Swisderm" },
        { year: "2024", event: "Restart / Reborn" },
        { year: "2026", event: "Hybrid System Architect" }
      ]
    },
    problems: {
      title: "Two Major Structural Industry Flaws",
      prob1Title: "1. Inconsistent Prospecting",
      prob1Desc: "Traditional approaches often rely on motivation rather than metrics, leading to unpredictable pipelines, high rejection rates, and market burnout.",
      prob2Title: "2. Unstructured Duplication",
      prob2Desc: "Without clear standard operating procedures (SOPs), growth stagnates. Teams rely heavily on individual charisma rather than well-engineered business processes."
    },
    hybrid: {
      title: "The Hybrid Networking System Architecture",
      cols: [
        { title: "Offline Closing Mastery", desc: "Executive-level face-to-face negotiation strategies, buyer psychology, and high-value relationship building." },
        { title: "Online Prospecting Automation", desc: "Structured digital lead generation systems and funnels to ensure continuous pipeline flow without manual outreach." },
        { title: "Structured Duplication Framework", desc: "Corporate-grade, step-by-step SOPs that allow new members to execute the operational system with minimal error." }
      ]
    },
    leadership: {
      title: "Executive Leadership & Training"
    },
    impact: {
      title: "Building a Professional Ecosystem",
      desc: "Impact Society is an exclusive community designed for professionals, entrepreneurs, and serious networkers. We prioritize structured growth, operational leadership development, and long-term wealth creation over short-term hype.",
      btn: "Explore Impact Society"
    },
    cta: {
      text: "If you are serious about building structured and sustainable network growth, ensure your systems are aligned.",
      btn: "Book Private Strategy Consultation"
    }
  }
};

// --- ANIMATION HOOK ---
const useScrollReveal = () => {
  const ref = useRef(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.unobserve(entry.target);
        }
      },
      { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }
    );
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);

  return { ref, isVisible };
};

// --- MAIN APP COMPONENT ---
export default function App() {
  const [lang, setLang] = useState('BM');
  const [isScrolled, setIsScrolled] = useState(false);
  const [isFading, setIsFading] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  useEffect(() => {
    const savedLang = localStorage.getItem('faiz_lang');
    if (savedLang && (savedLang === 'BM' || savedLang === 'EN')) {
      setLang(savedLang);
    }
  }, []);

  const toggleLanguage = (selectedLang) => {
    if (selectedLang === lang) return;
    setIsFading(true);
    setTimeout(() => {
      setLang(selectedLang);
      localStorage.setItem('faiz_lang', selectedLang);
      setTimeout(() => {
        setIsFading(false);
      }, 50);
    }, 400); 
  };

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

  const t = translations[lang];

  return (
    <div className="min-h-screen bg-white font-sans text-slate-900 selection:bg-slate-200">
      
      {/* --- CSS STYLES --- */}
      <style dangerouslySetInnerHTML={{__html: `
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        html { scroll-behavior: smooth; }
        body { font-family: 'Inter', sans-serif; }
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        .content-fade { transition: opacity 0.4s ease-in-out; }
        .fade-out { opacity: 0; }
        .fade-in { opacity: 1; }
        .reveal { opacity: 0; transform: translateY(16px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        /* Smooth underline animation for headings */
        .animated-divider { position: relative; }
        .animated-divider::after {
          content: ''; position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);
          width: 0; height: 1px; background-color: rgba(255,255,255,0.2); transition: width 1s ease-out;
        }
        .reveal.active .animated-divider::after { width: 64px; }
      `}} />

      {/* --- NAVIGATION --- */}
      <header className={`fixed top-0 w-full z-50 transition-all duration-500 ${isScrolled ? 'bg-white/90 backdrop-blur-md shadow-[0_1px_3px_rgba(0,0,0,0.03)] py-4' : 'bg-white/70 backdrop-blur-sm py-6 border-b border-transparent'}`}>
        <div className="max-w-7xl mx-auto px-6 md:px-12 flex items-center justify-between">
          
          {/* Logo */}
          <div className="font-semibold tracking-widest text-sm text-slate-900 uppercase">
            FAIZ NOORDIN
          </div>

          {/* Desktop Menu */}
          <nav className="hidden md:flex items-center space-x-10 text-sm font-medium text-slate-500">
            <a href="#about" className="hover:text-slate-900 transition-colors">{t.nav.about}</a>
            <a href="#track-record" className="hover:text-slate-900 transition-colors">{t.nav.trackRecord}</a>
            <a href="#hybrid-system" className="hover:text-slate-900 transition-colors">{t.nav.hybridSystem}</a>
            <a href="#impact" className="hover:text-slate-900 transition-colors">{t.nav.impactSociety}</a>
            <a href="#contact" className="hover:text-slate-900 transition-colors">{t.nav.contact}</a>
          </nav>

          {/* Controls (Lang + Mobile Menu) */}
          <div className="flex items-center space-x-5">
            {/* Premium Lang Toggle Pill */}
            <div className="relative bg-slate-100 p-1 rounded-full flex items-center shadow-inner w-[84px] h-[34px]">
              <div 
                className={`absolute top-1 bottom-1 w-[38px] bg-white rounded-full shadow-[0_1px_2px_rgba(0,0,0,0.05)] transition-transform duration-400 ease-[cubic-bezier(0.16,1,0.3,1)] ${lang === 'EN' ? 'translate-x-[38px]' : 'translate-x-0'}`}
              ></div>
              <button 
                onClick={() => toggleLanguage('BM')}
                className={`relative w-1/2 text-[11px] font-bold tracking-wider transition-colors duration-300 z-10 ${lang === 'BM' ? 'text-slate-900' : 'text-slate-400 hover:text-slate-600'}`}
              >
                BM
              </button>
              <button 
                onClick={() => toggleLanguage('EN')}
                className={`relative w-1/2 text-[11px] font-bold tracking-wider transition-colors duration-300 z-10 ${lang === 'EN' ? 'text-slate-900' : 'text-slate-400 hover:text-slate-600'}`}
              >
                EN
              </button>
            </div>

            {/* Mobile Hamburger */}
            <button className="md:hidden text-slate-900" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
              {mobileMenuOpen ? <X size={24} strokeWidth={1.5} /> : <Menu size={24} strokeWidth={1.5} />}
            </button>
          </div>
        </div>

        {/* Mobile Menu Dropdown */}
        {mobileMenuOpen && (
          <div className="md:hidden absolute top-full left-0 w-full bg-white/95 backdrop-blur-xl border-b border-slate-100 shadow-lg py-6 px-8 flex flex-col space-y-6 text-sm font-medium text-slate-600">
             <a href="#about" onClick={()=>setMobileMenuOpen(false)}>{t.nav.about}</a>
             <a href="#track-record" onClick={()=>setMobileMenuOpen(false)}>{t.nav.trackRecord}</a>
             <a href="#hybrid-system" onClick={()=>setMobileMenuOpen(false)}>{t.nav.hybridSystem}</a>
             <a href="#impact" onClick={()=>setMobileMenuOpen(false)}>{t.nav.impactSociety}</a>
             <a href="#contact" onClick={()=>setMobileMenuOpen(false)} className="text-slate-900">{t.nav.contact}</a>
          </div>
        )}
      </header>

      {/* --- CONTENT WRAPPER FOR FADE TRANSITION --- */}
      <div className={`content-fade ${isFading ? 'fade-out' : 'fade-in'}`}>
        
        {/* --- 1. HERO SECTION --- */}
        <section id="about" className="pt-40 pb-24 md:pt-56 md:pb-40 px-6 md:px-12 max-w-7xl mx-auto flex flex-col-reverse md:flex-row items-center gap-16 md:gap-20">
          <div className="w-full md:w-[55%] flex flex-col items-start reveal active">
            <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold tracking-tighter leading-[1.05] text-slate-900 mb-6">
              {t.hero.headline}
            </h1>
            <h2 className="text-xl md:text-2xl font-medium text-slate-600 tracking-tight mb-6 leading-snug pr-4">
              {t.hero.subhead}
            </h2>
            <p className="text-base md:text-lg text-slate-500 font-light leading-relaxed mb-12 max-w-xl">
              {t.hero.subtext}
            </p>
            <div className="flex flex-col sm:flex-row gap-5 w-full sm:w-auto">
              <button className="bg-slate-900 text-white px-8 py-4 rounded-xl font-medium hover:bg-slate-800 transition-all shadow-[0_4px_14px_0_rgba(0,0,0,0.1)] hover:shadow-[0_6px_20px_rgba(0,0,0,0.15)] flex items-center justify-center gap-2 text-[15px]">
                {t.hero.primaryBtn}
                <ArrowRight size={18} />
              </button>
              <button className="border border-slate-200 bg-white text-slate-800 px-8 py-4 rounded-xl font-medium hover:bg-slate-50 hover:border-slate-300 transition-all flex items-center justify-center gap-3 text-[15px]">
                <Play size={16} fill="currentColor" className="text-slate-700" />
                {t.hero.secondaryBtn}
              </button>
            </div>
          </div>
          <div className="w-full md:w-[45%] reveal active relative">
            {/* Decorative background element */}
            <div className="absolute -inset-4 bg-slate-50 rounded-[2rem] -z-10 transform rotate-3"></div>
            
            {/* Corporate Portrait Placeholder */}
            <div className="aspect-[4/5] bg-white rounded-2xl overflow-hidden relative border border-slate-100 shadow-2xl shadow-slate-200/50 flex items-center justify-center group">
               <div className="text-center p-8 transform group-hover:scale-105 transition-transform duration-700">
                 <div className="w-20 h-20 bg-slate-50 rounded-full mx-auto mb-6 flex items-center justify-center text-slate-300 border border-slate-100">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                 </div>
                 <p className="text-sm font-medium text-slate-400 tracking-wide uppercase">Corporate Portrait</p>
                 <p className="text-xs text-slate-300 mt-2">Professional placeholder</p>
               </div>
               {/* Soft inner shadow */}
               <div className="absolute inset-0 ring-1 ring-inset ring-black/5 rounded-2xl"></div>
            </div>
          </div>
        </section>

        {/* --- 2. PERSONAL VIDEO SECTION --- */}
        <section className="bg-[#F8F8F9] py-32 md:py-40 px-6 border-y border-slate-100/50">
          <RevealWrapper className="max-w-5xl mx-auto flex flex-col items-center">
            <h2 className="text-2xl md:text-3xl font-semibold tracking-tight mb-16 text-center text-slate-900">
              {t.video.title}
            </h2>
            
            {/* Video Placeholder */}
            <div className="w-full max-w-4xl aspect-video bg-white rounded-2xl shadow-[0_20px_50px_-12px_rgba(0,0,0,0.05)] border border-slate-200/80 overflow-hidden relative flex items-center justify-center mb-12 group cursor-pointer hover:shadow-[0_30px_60px_-12px_rgba(0,0,0,0.08)] transition-all duration-500">
              <div className="absolute inset-0 bg-slate-50/50 flex items-center justify-center">
                
                {/* Play Button with Pulse */}
                <div className="relative flex items-center justify-center">
                  <div className="absolute w-24 h-24 bg-white/40 rounded-full animate-ping group-hover:animate-none"></div>
                  <div className="relative w-20 h-20 bg-white rounded-full shadow-lg border border-slate-100 flex items-center justify-center group-hover:scale-110 group-hover:bg-slate-900 transition-all duration-300">
                    <Play className="text-slate-900 ml-1 group-hover:text-white transition-colors" size={32} fill="currentColor" />
                  </div>
                </div>

              </div>
              
              <div className="absolute bottom-6 left-6 right-6 flex justify-between items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <p className="text-sm text-slate-500 font-medium px-4 py-2 bg-white/90 backdrop-blur rounded-lg shadow-sm">Executive System Overview</p>
                <div className="w-10 h-10 bg-white/90 backdrop-blur rounded-lg shadow-sm flex items-center justify-center text-slate-600">
                   <Maximize size={18} />
                </div>
              </div>
            </div>

            <p className="text-lg md:text-xl text-slate-500 font-light max-w-2xl text-center leading-relaxed">
              {t.video.subtext}
            </p>
          </RevealWrapper>
        </section>

        {/* --- 3. TRACK RECORD SECTION --- */}
        <section id="track-record" className="py-32 md:py-48 px-6 bg-white">
          <div className="max-w-7xl mx-auto">
            <RevealWrapper>
              <div className="flex flex-col md:flex-row md:items-end justify-between mb-20 md:mb-24 gap-6">
                <div>
                  <div className="flex items-center gap-3 mb-4 text-slate-400">
                     <Award size={20} strokeWidth={1.5} />
                     <span className="text-xs font-bold tracking-widest uppercase">Verified Authority</span>
                  </div>
                  <h2 className="text-3xl md:text-5xl font-bold tracking-tight text-slate-900">
                    {t.trackRecord.title}
                  </h2>
                </div>
              </div>
              
              {/* Premium Stats Grid */}
              <div className="grid grid-cols-2 md:grid-cols-4 gap-y-12 mb-32">
                {t.trackRecord.stats.map((stat, idx) => (
                  <div key={idx} className={`flex flex-col items-start ${idx !== 3 ? 'md:border-r border-slate-100' : ''} md:pr-12`}>
                    <span className="text-5xl md:text-6xl font-bold text-slate-900 tracking-tighter mb-3">{stat.value}</span>
                    <span className="text-xs md:text-sm font-semibold text-slate-400 uppercase tracking-widest leading-snug">{stat.label}</span>
                  </div>
                ))}
              </div>
            </RevealWrapper>

            {/* Premium Timeline Carousel */}
            <RevealWrapper delay={200}>
              <div className="relative">
                {/* Edge Fades */}
                <div className="absolute left-0 top-0 bottom-0 w-24 bg-gradient-to-r from-white to-transparent z-10 pointer-events-none hidden md:block"></div>
                <div className="absolute right-0 top-0 bottom-0 w-24 bg-gradient-to-l from-white to-transparent z-10 pointer-events-none hidden md:block"></div>
                
                <div className="flex overflow-x-auto hide-scrollbar snap-x snap-mandatory gap-8 pb-12 pt-6 scroll-smooth">
                  {t.trackRecord.timeline.map((item, idx) => (
                    <div key={idx} className="flex-none w-[280px] md:w-[320px] snap-start relative group">
                      {/* Continuous Line Background */}
                      <div className="absolute top-[5px] left-0 w-full h-[1px] bg-slate-100 -z-10"></div>
                      
                      {/* Timeline Dot */}
                      <div className="w-3 h-3 bg-white border-2 border-slate-300 rounded-full mb-6 group-hover:border-slate-900 group-hover:scale-125 transition-all duration-300"></div>
                      
                      <span className="block text-2xl font-bold text-slate-400 tracking-tight mb-3 group-hover:text-slate-900 transition-colors duration-300">{item.year}</span>
                      <p className="text-slate-600 text-[15px] leading-relaxed font-light">{item.event}</p>
                    </div>
                  ))}
                </div>
              </div>
            </RevealWrapper>
          </div>
        </section>

        {/* --- 4. INDUSTRY PROBLEM SECTION --- */}
        <section className="py-32 md:py-40 px-6 max-w-7xl mx-auto flex flex-col md:flex-row items-center gap-20">
          {/* Conceptual Infographic Placeholder */}
          <RevealWrapper className="w-full md:w-1/2">
            <div className="aspect-[4/3] w-full bg-[#FAFAFA] border border-slate-100 rounded-[2rem] p-10 flex flex-col items-center justify-center text-center relative overflow-hidden">
              <div className="absolute inset-0 bg-gradient-to-br from-white/40 to-transparent z-10 pointer-events-none"></div>
              <svg className="text-slate-200 mb-8" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
              <p className="text-sm text-slate-500 font-medium uppercase tracking-widest z-20">System Architecture</p>
              <p className="text-xs text-slate-400 mt-3 font-light z-20 max-w-[200px]">Structural comparison: Erratic vs. Engineered Growth</p>
            </div>
          </RevealWrapper>

          {/* Problem Text */}
          <RevealWrapper className="w-full md:w-1/2">
            <h2 className="text-3xl md:text-5xl font-bold tracking-tighter mb-16 text-slate-900 leading-[1.1]">
              {t.problems.title}
            </h2>
            
            <div className="space-y-12">
              <div className="group">
                <h3 className="text-xl md:text-2xl font-semibold text-slate-800 tracking-tight mb-4 group-hover:text-slate-900 transition-colors">{t.problems.prob1Title}</h3>
                <p className="text-slate-500 leading-relaxed font-light text-lg">{t.problems.prob1Desc}</p>
              </div>
              <div className="w-full h-px bg-slate-100"></div>
              <div className="group">
                <h3 className="text-xl md:text-2xl font-semibold text-slate-800 tracking-tight mb-4 group-hover:text-slate-900 transition-colors">{t.problems.prob2Title}</h3>
                <p className="text-slate-500 leading-relaxed font-light text-lg">{t.problems.prob2Desc}</p>
              </div>
            </div>
          </RevealWrapper>
        </section>

        {/* --- 5. HYBRID NETWORKING SYSTEM SECTION --- */}
        <section id="hybrid-system" className="bg-[#0A0A0C] text-white py-32 md:py-48 px-6 relative overflow-hidden">
          {/* Subtle tech background glow */}
          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-blue-900/10 blur-[120px] rounded-full pointer-events-none"></div>

          <div className="max-w-7xl mx-auto relative z-10">
            <RevealWrapper>
              <h2 className="text-3xl md:text-5xl font-bold tracking-tighter mb-20 text-center animated-divider pb-4">
                {t.hybrid.title}
              </h2>
            </RevealWrapper>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10 mt-12">
              {t.hybrid.cols.map((col, idx) => (
                <RevealWrapper key={idx} delay={idx * 150} className="bg-white/[0.03] backdrop-blur-xl border border-white/[0.08] p-10 md:p-12 rounded-3xl hover:bg-white/[0.06] hover:border-white/[0.12] hover:-translate-y-1 transition-all duration-500 group">
                  <div className="w-14 h-14 bg-white/5 border border-white/10 rounded-xl flex items-center justify-center mb-10 group-hover:bg-white/10 transition-colors">
                     <CheckCircle2 className="text-slate-300 group-hover:text-white transition-colors" size={24} strokeWidth={1.5} />
                  </div>
                  <h3 className="text-xl font-semibold mb-5 tracking-tight text-slate-100">{col.title}</h3>
                  <p className="text-slate-400 leading-relaxed font-light">{col.desc}</p>
                </RevealWrapper>
              ))}
            </div>
          </div>
        </section>

        {/* --- 6. LEADERSHIP IMAGE CAROUSEL --- */}
        <section className="py-32 md:py-40 bg-white overflow-hidden">
          <div className="max-w-[1400px] mx-auto px-6 mb-16 md:px-12">
            <RevealWrapper>
              <div className="flex items-center gap-4 mb-2">
                 <div className="w-8 h-px bg-slate-300"></div>
                 <span className="text-xs font-bold tracking-widest uppercase text-slate-400">Culture</span>
              </div>
              <h2 className="text-3xl md:text-5xl font-bold tracking-tighter text-slate-900">
                {t.leadership.title}
              </h2>
            </RevealWrapper>
          </div>
          
          <PremiumCarousel />
        </section>

        {/* --- 7. IMPACT SOCIETY SECTION --- */}
        <section id="impact" className="py-32 md:py-48 px-6 bg-slate-50 border-y border-slate-100">
          <RevealWrapper className="max-w-4xl mx-auto text-center">
            <div className="w-20 h-20 bg-white border border-slate-100 rounded-2xl shadow-sm flex items-center justify-center mx-auto mb-10">
               <Globe className="text-slate-400" size={36} strokeWidth={1.5} />
            </div>
            <h2 className="text-3xl md:text-5xl font-bold tracking-tighter text-slate-900 mb-8 leading-tight">
              {t.impact.title}
            </h2>
            <p className="text-lg md:text-xl text-slate-500 font-light leading-relaxed mb-12 max-w-3xl mx-auto">
              {t.impact.desc}
            </p>
            <button className="bg-white border border-slate-200 text-slate-800 px-10 py-4 rounded-xl font-medium hover:bg-slate-100 hover:border-slate-300 shadow-sm transition-all text-[15px]">
              {t.impact.btn}
            </button>
          </RevealWrapper>
        </section>

        {/* --- 8. FINAL CTA SECTION --- */}
        <section id="contact" className="py-40 md:py-56 px-6 bg-white text-center">
          <RevealWrapper className="max-w-4xl mx-auto">
            <h2 className="text-3xl md:text-5xl font-semibold tracking-tighter text-slate-900 mb-12 leading-[1.15]">
              {t.cta.text}
            </h2>
            <button className="bg-slate-900 text-white px-12 py-5 rounded-xl font-medium hover:bg-slate-800 transition-all shadow-[0_8px_20px_-6px_rgba(0,0,0,0.2)] hover:shadow-[0_12px_24px_-6px_rgba(0,0,0,0.3)] inline-flex items-center gap-3 text-lg md:text-xl">
              {t.cta.btn}
              <ArrowRight size={22} />
            </button>
          </RevealWrapper>
        </section>

        {/* --- 9. FOOTER --- */}
        <footer className="bg-white border-t border-slate-100 py-16 px-6 text-center md:text-left">
          <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-8">
            <div className="text-slate-900 font-bold tracking-widest text-sm uppercase">
              FAIZ NOORDIN
            </div>
            <div className="text-slate-400 text-sm font-light">
              &copy; {new Date().getFullYear()} Faiz Noordin. Hak Cipta Terpelihara.
            </div>
            <div className="flex gap-8 text-slate-400">
              <a href="#" className="hover:text-slate-900 transition-colors"><Linkedin size={20} strokeWidth={1.5} /></a>
              <a href="#" className="hover:text-slate-900 transition-colors"><Youtube size={20} strokeWidth={1.5} /></a>
              <a href="#" className="hover:text-slate-900 transition-colors"><Mail size={20} strokeWidth={1.5} /></a>
            </div>
          </div>
        </footer>

      </div>
    </div>
  );
}

// --- HELPER COMPONENTS ---

// Scroll Reveal Wrapper
const RevealWrapper = ({ children, className = "", delay = 0 }) => {
  const { ref, isVisible } = useScrollReveal();
  return (
    <div 
      ref={ref} 
      className={`reveal ${isVisible ? 'active' : ''} ${className}`}
      style={{ transitionDelay: `${delay}ms` }}
    >
      {children}
    </div>
  );
};

// Premium Pure-Fade Carousel with Ken Burns effect
const PremiumCarousel = () => {
  const [current, setCurrent] = useState(0);
  
  const images = [
    { label: "Executive Stage Speaking", bg: "bg-slate-200" },
    { label: "Corporate Training Room", bg: "bg-slate-300" },
    { label: "Boardroom Meeting", bg: "bg-slate-200" },
    { label: "Industry Recognition", bg: "bg-slate-300" },
    { label: "Leadership Core Group", bg: "bg-slate-200" }
  ];

  const nextSlide = useCallback(() => {
    setCurrent((prev) => (prev === images.length - 1 ? 0 : prev + 1));
  }, [images.length]);

  const prevSlide = () => {
    setCurrent((prev) => (prev === 0 ? images.length - 1 : prev - 1));
  };

  useEffect(() => {
    const timer = setInterval(nextSlide, 5000); // Slower, 5s slide
    return () => clearInterval(timer);
  }, [nextSlide]);

  return (
    <div className="relative max-w-[1400px] mx-auto px-6 md:px-12">
      <div className="relative aspect-[16/10] md:aspect-[21/9] bg-slate-50 rounded-[2rem] overflow-hidden border border-slate-100 shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)]">
        
        {images.map((img, idx) => (
          <div 
            key={idx}
            className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${idx === current ? 'opacity-100 z-10' : 'opacity-0 z-0'} ${img.bg}`}
          >
             {/* Simulating image wrapper for subtle scale effect */}
             <div className={`w-full h-full flex items-center justify-center transform transition-transform duration-[5000ms] ease-linear ${idx === current ? 'scale-105' : 'scale-100'}`}>
                <div className="text-center p-6">
                    <div className="w-16 h-16 bg-white/40 backdrop-blur rounded-2xl mx-auto mb-4 flex items-center justify-center text-slate-500 shadow-sm border border-white/20">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                    </div>
                </div>
             </div>

             {/* Dark overlay for text readability at bottom */}
             <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
             
             {/* Caption */}
             <div className="absolute bottom-8 left-8 md:bottom-12 md:left-12 z-20">
                <p className="text-white font-medium text-lg md:text-2xl tracking-tight">{img.label}</p>
                <p className="text-white/70 text-sm mt-1 font-light">Image Placeholder</p>
             </div>
          </div>
        ))}

        {/* Minimal Navigation Arrows */}
        <button 
          onClick={prevSlide}
          className="absolute left-6 top-1/2 -translate-y-1/2 z-20 w-12 h-12 bg-white/20 hover:bg-white/40 backdrop-blur-md rounded-full flex items-center justify-center text-white border border-white/20 transition-all opacity-0 group-hover:opacity-100 sm:opacity-100"
        >
          <ChevronLeft size={24} strokeWidth={1.5} />
        </button>
        <button 
          onClick={nextSlide}
          className="absolute right-6 top-1/2 -translate-y-1/2 z-20 w-12 h-12 bg-white/20 hover:bg-white/40 backdrop-blur-md rounded-full flex items-center justify-center text-white border border-white/20 transition-all opacity-0 group-hover:opacity-100 sm:opacity-100"
        >
          <ChevronRight size={24} strokeWidth={1.5} />
        </button>
      </div>

      {/* Premium Line Indicators */}
      <div className="flex justify-center mt-8 gap-3">
        {images.map((_, idx) => (
          <button 
            key={idx} 
            onClick={() => setCurrent(idx)}
            className="relative h-1 w-12 bg-slate-200 rounded-full overflow-hidden"
          >
             <div className={`absolute top-0 left-0 h-full bg-slate-800 transition-all duration-300 ${idx === current ? 'w-full' : 'w-0'}`}></div>
          </button>
        ))}
      </div>
    </div>
  );
};