import { useEffect, useRef, useState } from 'react';
import photoIdCard from '../imports/Container.png';
import photoHero from '../imports/Desain_tanpa_judul__2_.png';
import photoDekoruma from '../imports/Image__Dekoruma_Project_.png';
import photoReviAksesories from '../imports/Image__Revi_Aksesories_Project_.png';
import photoNginepajadiBatu from '../imports/Image__NginepajadiBatu_Project_.png';

import iconPalette from '../assets/icon/palette.svg';
import iconVideoCamera from '../assets/icon/video-camera.svg';
import iconCamera from '../assets/icon/camera.svg';
import iconCalendar from '../assets/icon/calendar.svg';
import iconMail from '../assets/icon/mail.svg';
import iconPhone from '../assets/icon/phone.svg';
import iconLinkedin from '../assets/icon/linkedin.svg';
import iconBriefcase from '../assets/icon/briefcase.svg';

const filterWhite  = { filter: 'brightness(0) invert(1)' } as const;
const filterOrange = { filter: 'brightness(0) saturate(100%) invert(39%) sepia(95%) saturate(2000%) hue-rotate(10deg) brightness(105%)' } as const;
const filterMuted  = { filter: 'brightness(0) opacity(0.4)' } as const;
const filterDark   = { filter: 'brightness(0) opacity(0.9)' } as const;

const NAV_LINKS = ['about', 'skills', 'experience', 'contact'] as const;

export default function App() {
  const [activeSection, setActiveSection] = useState('hero');
  const [menuOpen, setMenuOpen] = useState(false);
  const observerRef = useRef<IntersectionObserver | null>(null);

  useEffect(() => {
    observerRef.current = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setActiveSection(entry.target.id);
            entry.target.classList.add('fade-in-visible');
          }
        });
      },
      { threshold: 0.2 }
    );
    document.querySelectorAll('section').forEach((s) => observerRef.current?.observe(s));
    return () => observerRef.current?.disconnect();
  }, []);

  const scrollTo = (id: string) => {
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
    setMenuOpen(false);
  };

  return (
    <div className="bg-[#FAFAF8] text-[#1A1A1A] overflow-x-hidden" style={{ fontFamily: "'DM Sans', sans-serif" }}>

      {/* ── Navigation ─────────────────────────────── */}
      <nav className="fixed top-0 left-0 right-0 bg-[#FAFAF8]/95 backdrop-blur-sm border-b border-[#E8E8E4] z-50 shadow-sm">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between">
          <button onClick={() => scrollTo('hero')} className="font-bold text-xl hover:text-[#FF4D00] transition-colors" style={{ fontFamily: "'Outfit', sans-serif" }}>
            MARSHAL
          </button>

          {/* Desktop nav */}
          <div className="hidden md:flex gap-8">
            {NAV_LINKS.map((s) => (
              <button key={s} onClick={() => scrollTo(s)}
                className={`capitalize text-sm hover:text-[#FF4D00] transition-colors relative group ${activeSection === s ? 'text-[#FF4D00]' : ''}`}>
                {s}
                <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#FF4D00] group-hover:w-full transition-all duration-300" />
              </button>
            ))}
          </div>

          {/* Mobile hamburger */}
          <button className="md:hidden flex flex-col gap-1.5 p-1" onClick={() => setMenuOpen(!menuOpen)} aria-label="Menu">
            <span className={`block w-6 h-0.5 bg-[#1A1A1A] transition-all duration-300 ${menuOpen ? 'rotate-45 translate-y-2' : ''}`} />
            <span className={`block w-6 h-0.5 bg-[#1A1A1A] transition-all duration-300 ${menuOpen ? 'opacity-0' : ''}`} />
            <span className={`block w-6 h-0.5 bg-[#1A1A1A] transition-all duration-300 ${menuOpen ? '-rotate-45 -translate-y-2' : ''}`} />
          </button>
        </div>

        {/* Mobile dropdown */}
        {menuOpen && (
          <div className="md:hidden bg-[#FAFAF8] border-t border-[#E8E8E4] px-6 py-4 flex flex-col gap-4">
            {NAV_LINKS.map((s) => (
              <button key={s} onClick={() => scrollTo(s)}
                className={`capitalize text-left text-sm font-medium hover:text-[#FF4D00] transition-colors ${activeSection === s ? 'text-[#FF4D00]' : ''}`}>
                {s}
              </button>
            ))}
          </div>
        )}
      </nav>

      {/* ── Hero ────────────────────────────────────── */}
      <section id="hero" className="min-h-screen flex items-center relative overflow-hidden pt-20 pb-16 fade-in">
        <div className="absolute top-20 right-0 w-72 h-72 md:w-[500px] md:h-[500px] bg-gradient-to-br from-[#FF4D00] to-[#FF6B00] rounded-full opacity-20 blur-3xl pointer-events-none" />
        <div className="absolute bottom-20 left-0 w-60 h-60 md:w-[400px] md:h-[400px] bg-gradient-to-tr from-[#C8FF00] to-[#FF4D00] rounded-full opacity-10 blur-3xl pointer-events-none" />

        <div className="w-full relative z-10">
          <div className="max-w-6xl mx-auto px-4 sm:px-6">
            <div className="flex flex-col lg:flex-row items-center gap-10 lg:gap-16">

              {/* Left content */}
              <div className="flex-shrink-0 space-y-8 w-full lg:max-w-[520px] text-center lg:text-left">
                <div>
                  <div className="inline-block mb-4">
                    <span className="text-sm font-medium text-[#FF4D00] bg-[#FF4D00]/10 px-4 py-2 rounded-full">
                      Welcome to my portfolio
                    </span>
                  </div>
                  <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight mb-4" style={{ fontFamily: "'Outfit', sans-serif" }}>
                    Hi, I&apos;m<br />
                    <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#FF4D00] to-[#FF6B00]">Marshal</span>
                  </h1>
                  <p className="text-lg sm:text-xl md:text-2xl text-[#1A1A1A]/70 mb-2">
                    Graphic Designer · Video Editor · Photographer
                  </p>
                  <p className="text-sm sm:text-base text-[#1A1A1A]/60">
                    Crafting visual stories through creative multimedia
                  </p>
                </div>

                <div className="flex flex-wrap gap-4 justify-center lg:justify-start">
                  <button onClick={() => scrollTo('experience')}
                    className="bg-gradient-to-r from-[#FF4D00] to-[#FF6B00] text-white px-7 py-3.5 rounded-full font-medium hover:shadow-xl hover:shadow-[#FF4D00]/30 transition-all hover:scale-105 text-sm">
                    View My Work
                  </button>
                  <button onClick={() => scrollTo('contact')}
                    className="border-2 border-[#FF4D00] text-[#FF4D00] px-7 py-3.5 rounded-full font-medium hover:bg-[#FF4D00] hover:text-white transition-all text-sm">
                    Let&apos;s Talk
                  </button>
                </div>

                <div className="flex gap-8 justify-center lg:justify-start pt-2">
                  {[['150+', 'Videos'], ['100+', 'Photos'], ['2+', 'Years Exp']].map(([num, label]) => (
                    <div key={label}>
                      <div className="text-2xl sm:text-3xl font-bold text-[#FF4D00]" style={{ fontFamily: "'Outfit', sans-serif" }}>{num}</div>
                      <div className="text-xs sm:text-sm text-[#1A1A1A]/60">{label}</div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Right photo */}
              <div className="flex-1 flex items-end justify-center w-full lg:w-auto">
                <div className="relative w-[280px] h-[340px] sm:w-[360px] sm:h-[430px] lg:w-[460px] lg:h-[540px] rounded-[40px] lg:rounded-[48px] overflow-hidden">
                  <div className="absolute inset-0 bg-gradient-to-br from-[#FF4D00] to-[#FF6B00]" />
                  <div className="absolute -inset-2 rounded-[44px] lg:rounded-[52px] border-2 border-[#FF4D00]/30 z-20 pointer-events-none" />
                  <img src={photoHero} alt="Marshal"
                    className="absolute inset-0 w-full h-full object-cover z-10"
                    style={{ objectPosition: 'center 15%' }} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── Divider ─────────────────────────────────── */}
      <Divider />

      {/* ── About ───────────────────────────────────── */}
      <section id="about" className="py-16 sm:py-20 px-4 sm:px-6 fade-in">
        <div className="max-w-6xl mx-auto">
          <SectionHeader badge="Who I Am" title="About Me" />

          <div className="grid md:grid-cols-12 gap-8">
            {/* Lanyard ID Card */}
            <div className="md:col-span-4 flex justify-center items-start pt-4">
              <div className="lanyard-swing" style={{ transformOrigin: 'top center', width: '100%', maxWidth: '240px' }}>
                <div className="relative">
                  {/* Strap */}
                  <div className="absolute -top-12 left-1/2 -translate-x-1/2 w-5 h-12" style={{
                    background: 'linear-gradient(90deg,#2A2A2A 0%,#1A1A1A 50%,#2A2A2A 100%)',
                    boxShadow: 'inset 0 1px 2px rgba(255,255,255,0.1)'
                  }}>
                    {[0,1,2,3].map(i => <div key={i} className="absolute left-0 right-0 h-px bg-white/20" style={{ top: `${20 + i*20}%` }} />)}
                  </div>

                  {/* Clip */}
                  <div className="absolute -top-10 left-1/2 -translate-x-1/2 z-10">
                    <svg width="44" height="24" viewBox="0 0 44 24" fill="none">
                      <rect x="8" y="0" width="28" height="7" rx="3.5" fill="url(#mg)" stroke="#888" strokeWidth="0.5"/>
                      <circle cx="13" cy="3.5" r="1.5" fill="#666"/>
                      <circle cx="31" cy="3.5" r="1.5" fill="#666"/>
                      <defs>
                        <linearGradient id="mg" x1="0%" y1="0%" x2="100%" y2="100%">
                          <stop offset="0%" stopColor="#E0E0E0"/>
                          <stop offset="50%" stopColor="#C0C0C0"/>
                          <stop offset="100%" stopColor="#A8A8A8"/>
                        </linearGradient>
                      </defs>
                    </svg>
                  </div>

                  {/* Card */}
                  <div className="relative bg-white rounded-2xl shadow-2xl border-4 border-gray-200/50 p-4"
                    style={{ boxShadow: '0 20px 60px rgba(0,0,0,0.15)' }}>
                    {/* Geometric top */}
                    <div className="mb-3 flex gap-1.5 justify-center">
                      <div className="w-8 h-8 border-2 border-[#FF4D00] rounded" />
                      <div className="w-8 h-8 bg-[#FF4D00] rounded" />
                      <div className="w-8 h-8 border-2 border-[#FF4D00] rounded" />
                    </div>

                    {/* Photo */}
                    <div className="bg-[#FF4D00] p-2 rounded-xl mb-3">
                      <div className="overflow-hidden rounded-lg" style={{ height: '220px' }}>
                        <img src={photoIdCard} alt="Marshal" className="w-full h-full object-cover scale-110" style={{ objectPosition: 'center 30%' }} />
                      </div>
                    </div>

                    <div className="text-center mb-2">
                      <h3 className="font-bold text-base text-[#1A1A1A] uppercase leading-tight" style={{ fontFamily: "'Outfit', sans-serif" }}>
                        MUHAMMAD<br />MARSHAL
                      </h3>
                    </div>
                    <div className="w-full h-px bg-gray-200 mb-2" />
                    <div className="text-center">
                      <p className="text-[10px] text-[#1A1A1A]/60 mb-0.5">Multimedia Creative</p>
                      <p className="text-[10px] font-medium text-[#1A1A1A]">PENS Surabaya</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Bio + Stats */}
            <div className="md:col-span-8 flex flex-col gap-6">
              <div className="bg-white p-6 rounded-2xl border-2 border-[#E8E8E4]">
                <div className="space-y-4 text-[#1A1A1A]/80 leading-relaxed text-justify text-sm sm:text-base">
                  <p>Saya adalah mahasiswa Multimedia Broadcasting di Politeknik Elektronika Negeri Surabaya (PENS) semester 4 dengan IPS 3.70. Memiliki pengalaman lebih dari 2 tahun dalam bidang multimedia, khususnya video editing, graphic design, dan photography.</p>
                  <p>Berlatar belakang SMK Multimedia, saya telah mengerjakan berbagai proyek kreatif dari video dokumentasi, konten media sosial, hingga fotografi produk. Saat ini aktif sebagai freelance product photographer dan crew field di berbagai organisasi.</p>
                  <p>Berpengalaman menggunakan tools profesional seperti Adobe Premiere Pro, After Effects, Photoshop, Illustrator, dan Figma untuk menghasilkan karya berkualitas tinggi. Meraih <span className="font-bold">Juara 3 Lomba Video Reels Binamarga Kabupaten Malang tingkat Nasional 2025</span>.</p>
                </div>
              </div>

              <div className="grid grid-cols-3 gap-3 sm:gap-4">
                {[['150+', 'Videos Edited'], ['100+', 'Product Photos'], ['3.70', 'IPS']].map(([num, label]) => (
                  <div key={label} className="bg-gradient-to-br from-[#FF4D00]/5 to-[#FF6B00]/5 p-4 sm:p-5 rounded-xl border-2 border-[#E8E8E4] text-center hover:border-[#FF4D00] hover:shadow-lg hover:-translate-y-1 transition-all group">
                    <div className="text-2xl sm:text-3xl font-bold mb-1 group-hover:scale-110 transition-transform" style={{ fontFamily: "'Outfit', sans-serif", color: '#FF4D00' }}>{num}</div>
                    <div className="text-[10px] sm:text-xs font-medium text-[#1A1A1A]/70">{label}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── Divider ─────────────────────────────────── */}
      <Divider bg="bg-white" />

      {/* ── Skills ──────────────────────────────────── */}
      <section id="skills" className="py-16 sm:py-20 px-4 sm:px-6 bg-white fade-in">
        <div className="max-w-6xl mx-auto">
          <SectionHeader badge="What I Do" title="Skills & Expertise" />

          <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-6">
            {[
              { icon: iconPalette, title: 'Graphic Design', tools: ['Adobe Illustrator', 'Adobe Photoshop', 'Figma'] },
              { icon: iconVideoCamera, title: 'Video Editing', tools: ['Adobe Premiere Pro', 'After Effects', 'CapCut Pro'] },
              { icon: iconCamera, title: 'Photography', tools: ['Product Photography', 'Studio Lighting', 'Adobe Lightroom'] },
            ].map(({ icon, title, tools }) => (
              <div key={title} className="bg-[#FAFAF8] p-6 rounded-xl border-2 border-[#E8E8E4] hover:border-[#FF4D00] hover:shadow-lg transition-all hover:-translate-y-2 group">
                <div className="flex items-center gap-3 mb-4">
                  <div className="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-[#FF4D00] to-[#FF6B00] rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform shadow-lg">
                    <img src={icon} alt="" className="w-6 h-6 sm:w-7 sm:h-7" style={filterWhite} />
                  </div>
                  <h3 className="text-lg sm:text-xl font-bold" style={{ fontFamily: "'Outfit', sans-serif" }}>{title}</h3>
                </div>
                <div className="text-sm text-[#1A1A1A]/70 space-y-2">
                  {tools.map(t => <p key={t}>• {t}</p>)}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Divider ─────────────────────────────────── */}
      <Divider />

      {/* ── My Project ──────────────────────────────── */}
      <section id="portfolio" className="py-16 sm:py-20 px-4 sm:px-6 fade-in">
        <div className="max-w-6xl mx-auto">
          <SectionHeader badge="Selected Works" title="My Project"
            sub="Berikut beberapa proyek yang telah saya kerjakan untuk berbagai klien dan brand" />

          <div className="space-y-16">
            {/* Project 1 */}
            <div className="grid md:grid-cols-2 gap-8 items-stretch">
              <div className="order-2 md:order-1 flex flex-col justify-center">
                <ProjectBadge label="Graphic Design" />
                <h3 className="text-2xl sm:text-3xl font-bold mb-4" style={{ fontFamily: "'Outfit', sans-serif" }}>Dekoruma</h3>
                <p className="text-[#1A1A1A]/70 leading-relaxed mb-4 text-justify text-sm sm:text-base">Dekoruma merupakan perusahaan ritel dan layanan desain interior asal Indonesia yang berfokus pada kebutuhan furnitur dan perlengkapan rumah tangga modern. Didirikan pada tahun 2015, Dekoruma menghadirkan konsep one-stop solution untuk hunian, mulai dari penjualan furnitur, dekorasi rumah, hingga jasa desain interior dan renovasi.</p>
                <p className="text-[#1A1A1A]/70 leading-relaxed text-justify text-sm sm:text-base">Perusahaan ini menggabungkan platform digital (website dan aplikasi) dengan showroom fisik agar pelanggan dapat berbelanja secara online maupun offline dengan pengalaman yang terintegrasi.</p>
              </div>
              <div className="order-1 md:order-2 h-full flex items-center justify-center p-6" style={{ maxHeight: '340px' }}>
                <img src={photoDekoruma} alt="Dekoruma Project" className="w-[85%] h-auto object-contain block" />
              </div>
            </div>

            {/* Project 2 */}
            <div className="grid md:grid-cols-2 gap-8 items-stretch">
              <div className="h-full flex items-center justify-center p-6" style={{ maxHeight: '340px' }}>
                <img src={photoReviAksesories} alt="Revi Aksesories Project" className="w-[85%] h-auto object-contain block" />
              </div>
              <div className="flex flex-col justify-center">
                <ProjectBadge label="Product Photography" />
                <h3 className="text-2xl sm:text-3xl font-bold mb-4" style={{ fontFamily: "'Outfit', sans-serif" }}>Revi Aksesories</h3>
                <p className="text-[#1A1A1A]/70 leading-relaxed mb-4 text-justify text-sm sm:text-base">Revi Aksesories merupakan brand aksesoris yang menghadirkan perhiasan minimalis dengan desain elegan dan modern. Produk yang ditawarkan didominasi oleh kalung dan aksesoris leher dengan detail sederhana namun tetap memberikan kesan mewah dan feminin.</p>
                <p className="text-[#1A1A1A]/70 leading-relaxed text-justify text-sm sm:text-base">Setiap desain dirancang untuk menunjang penampilan sehari-hari maupun acara formal, sehingga cocok digunakan oleh berbagai kalangan wanita yang ingin tampil anggun tanpa terlihat berlebihan. Revi Aksesories mengutamakan estetika, kualitas bahan, serta kenyamanan saat digunakan.</p>
              </div>
            </div>

            {/* Project 3 */}
            <div className="grid md:grid-cols-2 gap-8 items-stretch">
              <div className="order-2 md:order-1 flex flex-col justify-center">
                <ProjectBadge label="Video Editing" />
                <h3 className="text-2xl sm:text-3xl font-bold mb-4" style={{ fontFamily: "'Outfit', sans-serif" }}>NginepajadiBatu</h3>
                <p className="text-[#1A1A1A]/70 leading-relaxed mb-4 text-justify text-sm sm:text-base">NginepajadiBatu merupakan perusahaan yang bergerak di bidang penyediaan dan rekomendasi villa di wilayah Batu dan sekitarnya. Perusahaan ini menawarkan berbagai pilihan villa dengan konsep yang beragam, mulai dari villa keluarga, villa untuk gathering, hingga penginapan dengan fasilitas premium seperti private pool.</p>
                <p className="text-[#1A1A1A]/70 leading-relaxed text-justify text-sm sm:text-base">NginepajadiBatu membantu pelanggan menemukan akomodasi yang sesuai dengan kebutuhan, kapasitas tamu, serta anggaran. Dengan fokus pada kualitas pelayanan dan kenyamanan properti, perusahaan ini menjadi solusi praktis bagi wisatawan yang ingin menikmati suasana Kota Batu dan sekitarnya.</p>
              </div>
              <div className="order-1 md:order-2 h-full flex items-center justify-center p-6" style={{ maxHeight: '340px' }}>
                <img src={photoNginepajadiBatu} alt="NginepajadiBatu Project" className="w-[85%] h-auto object-contain block" />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── Divider ─────────────────────────────────── */}
      <Divider />

      {/* ── Experience ──────────────────────────────── */}
      <section id="experience" className="py-16 sm:py-20 px-4 sm:px-6 fade-in">
        <div className="max-w-6xl mx-auto">
          <SectionHeader badge="My Journey" title="Experience" />

          <div className="grid sm:grid-cols-2 gap-5">
            {[
              { company: 'Revi Aksesories', role: 'Product Photographer', type: 'Freelance', date: 'Jan 2026 – Sekarang', desc: 'Fotografi produk aksesori fashion dengan studio lighting dan retouching profesional', active: true },
              { company: 'Khatulistiwa Organizer', role: 'Crew Field', type: 'Part-time', date: 'Ags 2025 – Sekarang', desc: 'Dokumentasi video dan foto event, koordinasi teknis lapangan multimedia', active: true },
              { company: 'HIMAKALA PENS', role: 'Graphic Designer', type: 'Volunteer', date: 'Ags 2025 – Sekarang', desc: 'Design konten media sosial, publikasi, dan brand identity event kampus', active: true },
              { company: 'Tim Media PENS Lamongan', role: 'Video Editor', type: 'Volunteer', date: 'Nov 2025 – Sekarang', desc: 'Editing video dokumentasi kegiatan kampus dan motion graphics promosi', active: true },
              { company: 'CV. Papa Jaya Nusantara', role: 'Video Editor', type: 'Freelance', date: 'Ags – Sep 2025', desc: 'Video promosi produk, company profile, color grading dan sound design', active: false },
              { company: 'Gatau Berita', role: 'Graphic Design Intern', type: 'Intern', date: 'Jun – Ags 2025', desc: 'Design infografis berita untuk media sosial dan layout artikel digital', active: false },
            ].map(({ company, role, type, date, desc, active }) => (
              <div key={company} className={`bg-white p-5 sm:p-6 rounded-xl border-2 border-[#E8E8E4] hover:shadow-lg transition-all hover:-translate-y-1 group ${active ? 'hover:border-[#FF4D00]' : 'opacity-80 hover:border-[#1A1A1A]/40'}`}>
                <div className="flex items-start justify-between mb-2 gap-2">
                  <h3 className={`font-bold text-base sm:text-lg group-hover:transition-colors ${active ? 'group-hover:text-[#FF4D00]' : ''}`} style={{ fontFamily: "'Outfit', sans-serif" }}>{company}</h3>
                  <span className={`text-white px-2.5 py-1 rounded-lg text-xs font-medium whitespace-nowrap ${active ? 'bg-[#FF4D00]' : 'bg-[#1A1A1A]/60'}`}>{type}</span>
                </div>
                <p className={`text-sm font-bold mb-1 ${active ? 'text-[#FF4D00]' : 'text-[#1A1A1A]/70'}`}>{role}</p>
                <p className="text-xs text-[#1A1A1A]/50 mb-3 flex items-center gap-1">
                  <img src={iconCalendar} alt="" className="w-3 h-3" style={filterMuted} />
                  {date}
                </p>
                <p className="text-sm text-[#1A1A1A]/70 leading-relaxed">{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Divider ─────────────────────────────────── */}
      <Divider />

      {/* ── Contact ─────────────────────────────────── */}
      <section id="contact" className="py-16 sm:py-20 px-4 sm:px-6 fade-in">
        <div className="max-w-4xl mx-auto">
          <SectionHeader badge="Get In Touch" title="Let's Work Together"
            sub="Tertarik untuk berkolaborasi? Hubungi saya untuk proyek kreatif Anda." />

          <div className="bg-white p-6 sm:p-10 md:p-12 rounded-2xl border-2 border-[#E8E8E4] shadow-lg">
            <div className="flex flex-wrap gap-4 justify-center mb-8">
              <a href="mailto:marshalputraalb@gmail.com"
                className="bg-gradient-to-r from-[#FF4D00] to-[#FF6B00] text-white px-7 py-3.5 rounded-full font-medium hover:shadow-xl hover:shadow-[#FF4D00]/30 transition-all hover:scale-105 inline-flex items-center gap-2 text-sm">
                <img src={iconMail} alt="" className="w-4 h-4" style={filterWhite} /> Email Me
              </a>
              <a href="https://linkedin.com/in/marshalputraalbarry" target="_blank" rel="noopener noreferrer"
                className="border-2 border-[#FF4D00] text-[#FF4D00] px-7 py-3.5 rounded-full font-medium hover:bg-[#FF4D00] hover:text-white transition-all inline-flex items-center gap-2 text-sm group/btn">
                <img src={iconLinkedin} alt="" className="w-4 h-4 group-hover/btn:brightness-0 group-hover/btn:invert transition-all" style={filterOrange} /> LinkedIn
              </a>
              <a href="https://bit.ly/4lAwy29" target="_blank" rel="noopener noreferrer"
                className="border-2 border-[#1A1A1A] text-[#1A1A1A] px-7 py-3.5 rounded-full font-medium hover:bg-[#1A1A1A] hover:text-white transition-all inline-flex items-center gap-2 text-sm">
                <img src={iconBriefcase} alt="" className="w-4 h-4" style={filterDark} /> Portfolio
              </a>
            </div>

            <div className="grid sm:grid-cols-2 gap-4 pt-6 border-t border-[#E8E8E4]">
              <div className="flex items-center gap-3 p-4 bg-[#FAFAF8] rounded-xl">
                <div className="w-10 h-10 bg-[#FF4D00]/10 rounded-lg flex items-center justify-center flex-shrink-0">
                  <img src={iconMail} alt="" className="w-5 h-5" style={filterOrange} />
                </div>
                <div>
                  <p className="text-xs text-[#1A1A1A]/50 mb-0.5">Email</p>
                  <p className="text-sm font-medium">marshalputraalb@gmail.com</p>
                </div>
              </div>
              <div className="flex items-center gap-3 p-4 bg-[#FAFAF8] rounded-xl">
                <div className="w-10 h-10 bg-[#FF4D00]/10 rounded-lg flex items-center justify-center flex-shrink-0">
                  <img src={iconPhone} alt="" className="w-5 h-5" style={filterOrange} />
                </div>
                <div>
                  <p className="text-xs text-[#1A1A1A]/50 mb-0.5">Phone</p>
                  <p className="text-sm font-medium">+62 823 3450 1275</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── Footer ──────────────────────────────────── */}
      <footer className="py-10 px-4 sm:px-6 bg-[#1A1A1A] text-white">
        <div className="max-w-6xl mx-auto">
          <div className="flex flex-col sm:flex-row justify-between items-center gap-6 mb-6">
            <div className="text-center sm:text-left">
              <h3 className="text-2xl font-bold mb-1" style={{ fontFamily: "'Outfit', sans-serif" }}>MARSHAL</h3>
              <p className="text-sm text-white/60">Multimedia Creative · PENS Surabaya</p>
            </div>
            <div className="flex gap-5">
              {[
                { href: 'https://linkedin.com/in/marshalputraalbarry', icon: iconLinkedin, label: 'LinkedIn' },
                { href: 'mailto:marshalputraalb@gmail.com', icon: iconMail, label: 'Email' },
                { href: 'https://bit.ly/4lAwy29', icon: iconBriefcase, label: 'Portfolio' },
              ].map(({ href, icon, label }) => (
                <a key={label} href={href} target="_blank" rel="noopener noreferrer" className="hover:opacity-60 transition-opacity">
                  <img src={icon} alt={label} className="w-6 h-6" style={filterWhite} />
                </a>
              ))}
            </div>
          </div>
          <div className="border-t border-white/10 pt-6 text-center">
            <p className="text-xs text-white/40">&copy; 2026 Muhammad Marshal Putra Al Barry. All rights reserved.</p>
          </div>
        </div>
      </footer>

      <style>{`
        .fade-in { opacity: 0; transform: translateY(28px); transition: opacity .8s ease-out, transform .8s ease-out; }
        .fade-in-visible { opacity: 1; transform: translateY(0); }
        html { scroll-behavior: smooth; }
        @keyframes lanyard-swing {
          0%,100% { transform: rotate(-2deg); }
          50%      { transform: rotate(2deg); }
        }
        .lanyard-swing { animation: lanyard-swing 3s ease-in-out infinite; }
        .lanyard-swing:hover { animation-play-state: paused; }
      `}</style>
    </div>
  );
}

/* ── Small reusable helpers ──────────────────── */
function Divider({ bg = 'bg-[#FAFAF8]' }: { bg?: string }) {
  return (
    <div className={`relative py-12 ${bg}`}>
      <div className="absolute inset-0 flex items-center"><div className="w-full border-t border-[#E8E8E4]" /></div>
      <div className="relative flex justify-center">
        <div className={`${bg} px-6`}>
          <div className="w-10 h-1 bg-gradient-to-r from-[#FF4D00] to-[#FF6B00] rounded-full" />
        </div>
      </div>
    </div>
  );
}

function SectionHeader({ badge, title, sub }: { badge: string; title: string; sub?: string }) {
  return (
    <div className="text-center mb-10 sm:mb-12">
      <span className="inline-block mb-3 text-sm font-medium text-[#FF4D00] bg-[#FF4D00]/10 px-4 py-1.5 rounded-full">{badge}</span>
      <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-3" style={{ fontFamily: "'Outfit', sans-serif" }}>{title}</h2>
      {sub && <p className="text-base sm:text-lg text-[#1A1A1A]/70 max-w-2xl mx-auto">{sub}</p>}
    </div>
  );
}

function ProjectBadge({ label }: { label: string }) {
  return (
    <div className="inline-block mb-3">
      <span className="text-xs font-medium text-white bg-gradient-to-r from-[#FF4D00] to-[#FF6B00] px-3 py-1 rounded-full">{label}</span>
    </div>
  );
}