// =================================================================
// NAV
// =================================================================
const NAV = [
  ['About', '#about'],
  ['Programs', '#programs'],
  ['Coaches', '#coaches'],
  ['Method', '#method'],
  ['Schedule', '#schedule'],
  ['Gallery', '#gallery'],
  ['Register', '#register']
];

const TopBar = () => (
  <div className="hidden md:block bg-akaar-navy text-white/80 text-xs">
    <div className="max-w-7xl mx-auto px-6 h-9 flex items-center justify-between">
      <div className="flex items-center gap-5">
        <span className="flex items-center gap-2"><IconPin size={14}/> Lapangan Akaar, Jakarta Selatan</span>
        <span className="flex items-center gap-2"><IconClock size={14}/> Mon – Sat · 15:00 – 21:00</span>
      </div>
      <div className="flex items-center gap-4">
        <a className="hover:text-akaar-gold flex items-center gap-2" href="#"><IconPhone size={14}/> +62 812-0000-0000</a>
        <span className="opacity-30">|</span>
        <a className="hover:text-akaar-gold" href="#"><IconIG size={14}/></a>
        <a className="hover:text-akaar-gold" href="#"><IconTikTok size={14}/></a>
        <a className="hover:text-akaar-gold" href="#"><IconYT size={14}/></a>
      </div>
    </div>
  </div>
);

const Nav = () => {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className="sticky top-0 z-50">
      <TopBar />
      <div className={`transition-all ${scrolled ? 'bg-white shadow-md' : 'bg-white/95 backdrop-blur'} border-b border-akaar-slate`}>
        <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
          <a href="#top" className="flex items-center gap-3">
            <img src="public/akaar-logo.png" alt="Akaar Futsal Academy" className="h-14 w-14 object-contain"/>
            <div className="leading-tight">
              <div className="h-display text-2xl text-akaar-navy">AKAAR</div>
              <div className="h-cond uppercase tracking-wider text-[10px] text-akaar-blue">Futsal Academy</div>
            </div>
          </a>
          <nav className="hidden lg:flex items-center gap-1">
            {NAV.map(([label, href]) => (
              <a key={href} href={href} className="px-4 py-2 text-sm font-semibold text-akaar-ink/80 hover:text-akaar-navy hover:bg-akaar-slate/60 rounded-lg transition">
                {label}
              </a>
            ))}
          </nav>
          <div className="flex items-center gap-3">
            <a href="#register" className="hidden sm:inline-flex items-center gap-2 bg-akaar-gold text-akaar-navy font-bold text-sm px-5 py-2.5 rounded-lg hover:bg-akaar-sun transition shadow-sm">
              Join Trial <IconArrow size={16}/>
            </a>
            <button onClick={() => setOpen(!open)} className="lg:hidden p-2 text-akaar-navy">
              {open ? <IconX/> : <IconMenu/>}
            </button>
          </div>
        </div>
        {open && (
          <div className="lg:hidden border-t border-akaar-slate bg-white">
            <div className="px-6 py-3 flex flex-col">
              {NAV.map(([label, href]) => (
                <a key={href} href={href} onClick={() => setOpen(false)} className="py-3 border-b border-akaar-slate/60 text-akaar-ink font-semibold">{label}</a>
              ))}
            </div>
          </div>
        )}
      </div>
    </header>
  );
};

// =================================================================
// HERO
// =================================================================
const Hero = () => (
  <section id="top" className="relative bg-akaar-navy text-white overflow-hidden clip-slant">
    <div className="absolute inset-0 grid-court opacity-50"></div>
    <div className="absolute -top-32 -right-32 w-[520px] h-[520px] rounded-full"
         style={{ background: 'radial-gradient(circle, rgba(255,199,44,0.18), transparent 60%)' }}></div>
    <div className="absolute bottom-0 left-0 w-1/2 h-2 stripes-y opacity-60"></div>

    <div className="relative max-w-7xl mx-auto px-6 pt-16 pb-32 lg:pt-24 lg:pb-40 grid lg:grid-cols-12 gap-10 items-center">
      <div className="lg:col-span-7">
        <div className="inline-flex items-center gap-2 bg-white/10 backdrop-blur border border-white/20 px-3 py-1.5 rounded-full text-xs font-semibold uppercase tracking-wider">
          <span className="w-2 h-2 rounded-full bg-akaar-gold animate-pulse"></span>
          Open Trial 2026 · Now Recruiting
        </div>
        <h1 className="h-display mt-6 text-6xl sm:text-7xl lg:text-[7.5rem] leading-[0.92]">
          From <span className="text-akaar-gold">Zero</span><br/>
          To Be <span className="relative inline-block">
            Hero
            <svg className="absolute -bottom-3 left-0 w-full" height="14" viewBox="0 0 200 14" fill="none">
              <path d="M2 9 C 50 2, 150 2, 198 9" stroke="#FFC72C" strokeWidth="4" strokeLinecap="round"/>
            </svg>
          </span>.
        </h1>
        <p className="mt-8 text-lg text-white/80 max-w-xl leading-relaxed">
          Akaar Futsal Academy adalah rumah pengembangan pemain futsal usia muda — dari fundamental, taktik, hingga karakter. Kami melatih anak menjadi atlet, dan atlet menjadi pemimpin.
        </p>
        <div className="mt-10 flex flex-wrap gap-4">
          <a href="#register" className="inline-flex items-center gap-2 bg-akaar-gold text-akaar-navy font-bold px-7 py-4 rounded-lg hover:bg-akaar-sun transition">
            Daftar Trial Gratis <IconArrow size={18}/>
          </a>
          <a href="#programs" className="inline-flex items-center gap-2 bg-white/10 border border-white/30 text-white font-bold px-7 py-4 rounded-lg hover:bg-white/15 transition">
            Lihat Program
          </a>
        </div>

        <div className="mt-14 flex flex-wrap items-center gap-x-10 gap-y-4 text-sm">
          <div className="flex items-center gap-3">
            <div className="flex -space-x-2">
              {[0,1,2,3].map(i => (
                <div key={i} className="w-9 h-9 rounded-full border-2 border-akaar-navy ph-img"></div>
              ))}
            </div>
            <div className="text-white/80"><span className="font-bold text-white">200+</span> pemain aktif</div>
          </div>
          <div className="flex items-center gap-2 text-white/80">
            <div className="flex text-akaar-gold">{[...Array(5)].map((_,i) => <IconStar key={i} size={16} fill="currentColor"/>)}</div>
            <span className="font-bold text-white">4.9</span> rating orang tua
          </div>
        </div>
      </div>

      <div className="lg:col-span-5 relative">
        <div className="relative">
          <div className="absolute -inset-6 bg-akaar-gold/20 rounded-[2rem] rotate-3"></div>
          <div className="relative bg-gradient-to-br from-akaar-blue to-akaar-navy rounded-[2rem] p-8 border border-white/10 shadow-2xl">
            <div className="flex items-center justify-between mb-6">
              <div>
                <div className="text-[10px] uppercase tracking-[0.3em] text-akaar-gold">Next Trial</div>
                <div className="h-display text-3xl mt-1">SAB · 09 MAY</div>
              </div>
              <div className="w-14 h-14 bg-akaar-gold text-akaar-navy rounded-2xl flex items-center justify-center">
                <IconBall size={28}/>
              </div>
            </div>
            <img src="public/akaar-logo.png" alt="" className="w-48 mx-auto my-2 drop-shadow-2xl"/>
            <div className="grid grid-cols-3 gap-3 mt-6 text-center">
              {[
                ['U-10', '15:00'],
                ['U-13', '16:30'],
                ['U-16', '18:00']
              ].map(([g, t]) => (
                <div key={g} className="bg-white/10 backdrop-blur rounded-xl p-3 border border-white/10">
                  <div className="h-display text-2xl text-akaar-gold">{g}</div>
                  <div className="text-xs text-white/70 mt-1">{t} WIB</div>
                </div>
              ))}
            </div>
            <a href="#register" className="mt-6 flex items-center justify-center gap-2 w-full bg-akaar-gold text-akaar-navy font-bold py-3 rounded-xl hover:bg-akaar-sun transition">
              Reserve a slot <IconArrow size={16}/>
            </a>
          </div>
        </div>
      </div>
    </div>

    {/* Marquee */}
    <div className="absolute bottom-0 inset-x-0 bg-akaar-gold text-akaar-navy py-3 overflow-hidden border-y-4 border-akaar-navy">
      <div className="marquee h-display text-2xl">
        {[...Array(2)].map((_, k) => (
          <div key={k} className="flex gap-12 items-center">
            {['DISCIPLINE', '★', 'TEAMWORK', '★', 'TECHNIQUE', '★', 'CHARACTER', '★', 'ZERO TO BE HERO', '★', 'AKAAR FUTSAL ACADEMY', '★'].map((w, i) => (
              <span key={i} className="flex items-center gap-12">{w}</span>
            ))}
          </div>
        ))}
      </div>
    </div>
  </section>
);

// =================================================================
// ABOUT
// =================================================================
const About = () => (
  <section id="about" className="relative bg-white py-24 lg:py-32">
    <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-12 gap-12 items-center">
      <div className="lg:col-span-5">
        <div className="relative">
          <div className="aspect-[4/5] rounded-3xl ph-img overflow-hidden relative">
            <div className="absolute inset-0 flex items-center justify-center">
              <span className="font-mono text-xs text-akaar-navy/40 uppercase tracking-widest">[ team training photo ]</span>
            </div>
          </div>
          <div className="absolute -bottom-8 -right-6 bg-akaar-navy text-white rounded-2xl p-6 w-56 shadow-xl">
            <div className="h-display text-5xl text-akaar-gold leading-none">7+</div>
            <div className="h-cond uppercase tracking-wider text-xs mt-2 text-white/80">Years Building Young Heroes</div>
          </div>
          <div className="absolute -top-6 -left-6 bg-akaar-gold text-akaar-navy rounded-2xl px-5 py-3 shadow-xl rotate-[-4deg]">
            <div className="h-display text-2xl">EST. 2019</div>
          </div>
        </div>
      </div>

      <div className="lg:col-span-7">
        <div className="flex items-center gap-3 text-akaar-blue uppercase tracking-[0.3em] text-xs font-bold">
          <span className="w-10 h-px bg-akaar-blue"></span> About the Academy
        </div>
        <h2 className="h-display mt-4 text-5xl lg:text-6xl text-akaar-navy leading-tight">
          We don't just train players.<br/>
          <span className="text-akaar-blue">We build </span>
          <span className="relative inline-block text-akaar-navy">
            heroes.
            <span className="absolute left-0 -bottom-1 w-full h-2 bg-akaar-gold/70"></span>
          </span>
        </h2>
        <p className="mt-6 text-akaar-ink/75 leading-relaxed text-lg">
          Akaar Futsal Academy hadir untuk membentuk pemain futsal muda Indonesia melalui pendekatan menyeluruh: <strong>fundamental teknik</strong>, <strong>kecerdasan taktik</strong>, <strong>kondisi fisik</strong>, dan <strong>karakter</strong>.
          Filosofi kami sederhana — setiap anak punya potensi pahlawan di dalam dirinya. Tugas kami membuka jalannya.
        </p>

        <div className="mt-10 grid sm:grid-cols-2 gap-4">
          {[
            ['Licensed Coaches', 'Pelatih bersertifikasi nasional & lisensi AFC.'],
            ['Player Pathway', 'Jalur jelas: Foundation → Development → Elite.'],
            ['Holistic Method', 'Teknik, taktik, fisik, karakter — satu sistem.'],
            ['Family-First', 'Komunikasi rutin & laporan progres bulanan.']
          ].map(([t, d], i) => (
            <div key={i} className="flex gap-3 p-4 rounded-xl border border-akaar-slate hover:border-akaar-gold hover:bg-akaar-cream/40 transition">
              <div className="shrink-0 w-10 h-10 rounded-lg bg-akaar-navy text-akaar-gold flex items-center justify-center">
                <IconCheck size={20} sw={3}/>
              </div>
              <div>
                <div className="font-bold text-akaar-navy">{t}</div>
                <div className="text-sm text-akaar-ink/70 mt-0.5">{d}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-10 flex flex-wrap gap-4">
          <a href="#method" className="inline-flex items-center gap-2 bg-akaar-navy text-white font-bold px-6 py-3.5 rounded-lg hover:bg-akaar-blue transition">
            Our Method <IconArrow size={16}/>
          </a>
          <a href="#coaches" className="inline-flex items-center gap-2 text-akaar-navy font-bold px-6 py-3.5 rounded-lg border-2 border-akaar-navy hover:bg-akaar-navy hover:text-white transition">
            Meet the Coaches
          </a>
        </div>
      </div>
    </div>
  </section>
);

// =================================================================
// STATS RIBBON
// =================================================================
const Stats = () => {
  const stats = [
    ['200+', 'Active Players'],
    ['12', 'Coaches'],
    ['25+', 'Tournaments'],
    ['7', 'Age Groups'],
    ['98%', 'Parent Satisfaction']
  ];
  return (
    <section className="bg-akaar-navy text-white relative overflow-hidden">
      <div className="absolute inset-0 grid-court opacity-30"></div>
      <div className="relative max-w-7xl mx-auto px-6 py-14 grid grid-cols-2 md:grid-cols-5 gap-8">
        {stats.map(([n, l], i) => (
          <div key={i} className="text-center">
            <div className="h-display num text-5xl lg:text-6xl text-akaar-gold leading-none">{n}</div>
            <div className="h-cond uppercase tracking-wider text-xs mt-2 text-white/70">{l}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

// =================================================================
// PROGRAMS / AGE GROUPS
// =================================================================
const PROGRAMS = [
  {
    id: 'foundation',
    age: 'U-8 / U-10',
    name: 'Foundation',
    tag: 'Fun & Fundamental',
    color: 'bg-akaar-cream border-akaar-gold',
    accent: 'text-akaar-navy',
    desc: 'Mengenalkan futsal dengan pendekatan menyenangkan. Fokus pada koordinasi dasar, kontrol bola, dan kecintaan terhadap olahraga.',
    bullets: ['Ball mastery & coordination', 'Game-based learning', 'Movement & motor skills'],
    schedule: '2x / week · 60 min',
    fee: 'Rp 450K / bulan'
  },
  {
    id: 'development',
    age: 'U-12 / U-14',
    name: 'Development',
    tag: 'Technique & Tactics',
    color: 'bg-akaar-navy border-akaar-blue text-white',
    accent: 'text-akaar-gold',
    desc: 'Pengembangan teknik individu, posisi (anchor, flank, pivot, GK), dan pemahaman taktik dasar futsal modern.',
    bullets: ['Position-specific training', 'Small-sided games', 'Strength & conditioning'],
    schedule: '3x / week · 90 min',
    fee: 'Rp 600K / bulan'
  },
  {
    id: 'elite',
    age: 'U-16 / U-18',
    name: 'Elite',
    tag: 'Compete & Lead',
    color: 'bg-white border-akaar-navy',
    accent: 'text-akaar-navy',
    desc: 'Persiapan kompetisi nasional. Taktik tingkat lanjut, leadership, dan jalur menuju liga profesional.',
    bullets: ['Tournament-ready squad', 'Advanced tactical periodization', 'Mental & leadership training'],
    schedule: '4x / week · 120 min',
    fee: 'Rp 850K / bulan'
  }
];

const Programs = () => (
  <section id="programs" className="bg-akaar-cream/40 py-24 lg:py-32 relative">
    <div className="absolute inset-0 ring-dotted opacity-30"></div>
    <div className="relative max-w-7xl mx-auto px-6">
      <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-14">
        <div>
          <div className="flex items-center gap-3 text-akaar-blue uppercase tracking-[0.3em] text-xs font-bold">
            <span className="w-10 h-px bg-akaar-blue"></span> Programs
          </div>
          <h2 className="h-display mt-4 text-5xl lg:text-6xl text-akaar-navy">
            Pathway From <span className="text-akaar-blue">Zero</span> To <span className="text-akaar-gold drop-shadow">Hero</span>
          </h2>
        </div>
        <p className="max-w-md text-akaar-ink/70">
          Tiga jenjang program yang dirancang sesuai usia & perkembangan pemain — dari pertama menendang bola sampai siap kompetisi nasional.
        </p>
      </div>

      <div className="grid md:grid-cols-3 gap-6">
        {PROGRAMS.map((p, i) => (
          <div key={p.id} className={`relative rounded-3xl border-2 p-8 ${p.color} flex flex-col group hover:-translate-y-2 transition-transform duration-300 shadow-sm hover:shadow-2xl`}>
            <div className={`inline-flex self-start h-cond text-sm font-bold px-3 py-1 rounded-lg ${i === 1 ? 'bg-akaar-gold text-akaar-navy' : 'bg-black/5 ' + p.accent}`}>
              {p.age}
            </div>
            <div className={`h-cond uppercase tracking-widest text-xs ${p.accent} opacity-80 mt-4`}>{p.tag}</div>
            <div className="h-display text-5xl mt-1">{p.name}</div>
            <p className={`mt-5 text-sm leading-relaxed ${i===1 ? 'text-white/80' : 'text-akaar-ink/75'}`}>
              {p.desc}
            </p>
            <ul className="mt-6 space-y-2">
              {p.bullets.map((b, j) => (
                <li key={j} className="flex gap-2 text-sm">
                  <IconCheck size={18} sw={3} stroke={i===1 ? '#FFC72C' : '#1747B5'}/>
                  <span className={i===1 ? 'text-white/90' : ''}>{b}</span>
                </li>
              ))}
            </ul>
            <div className={`mt-8 pt-6 border-t ${i===1 ? 'border-white/20' : 'border-black/10'} flex items-end justify-between`}>
              <div>
                <div className={`text-xs uppercase tracking-wider ${i===1 ? 'text-white/60' : 'text-akaar-ink/60'}`}>{p.schedule}</div>
                <div className={`h-display text-2xl mt-1 ${p.accent}`}>{p.fee}</div>
              </div>
              <a href="#register" className={`w-12 h-12 rounded-full flex items-center justify-center ${i===1 ? 'bg-akaar-gold text-akaar-navy' : 'bg-akaar-navy text-white'} group-hover:scale-110 transition`}>
                <IconArrow size={20}/>
              </a>
            </div>
            {i === 1 && (
              <div className="absolute -top-3 right-8 bg-akaar-gold text-akaar-navy h-cond uppercase tracking-wider text-xs font-bold px-3 py-1 rounded-full shadow-md">
                Most Popular
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  </section>
);

// =================================================================
// METHOD / 4 PILLARS
// =================================================================
const Method = () => {
  const pillars = [
    { icon: IconBall,    title: 'Technique',  desc: 'Ball mastery, passing, shooting, 1v1 — dilatih dengan repetisi sadar dan game realistis.' },
    { icon: IconWhistle, title: 'Tactics',    desc: 'Pemahaman ruang, transisi, set-piece dan peran taktis di setiap posisi modern.' },
    { icon: IconSpark,   title: 'Physical',   desc: 'Speed, agility, strength yang sesuai usia perkembangan dan beban pertumbuhan.' },
    { icon: IconShield,  title: 'Character',  desc: 'Disiplin, tanggung jawab, kerja tim, dan mental kompetisi yang tangguh.' }
  ];
  return (
    <section id="method" className="py-24 lg:py-32 bg-white">
      <div className="max-w-7xl mx-auto px-6">
        <div className="text-center max-w-2xl mx-auto">
          <div className="flex items-center justify-center gap-3 text-akaar-blue uppercase tracking-[0.3em] text-xs font-bold">
            <span className="w-10 h-px bg-akaar-blue"></span> Method <span className="w-10 h-px bg-akaar-blue"></span>
          </div>
          <h2 className="h-display mt-4 text-5xl lg:text-6xl text-akaar-navy">The Akaar Four</h2>
          <p className="mt-4 text-akaar-ink/70">Empat pilar yang menjadi DNA setiap sesi latihan kami.</p>
        </div>

        <div className="mt-14 grid md:grid-cols-2 lg:grid-cols-4 gap-5">
          {pillars.map((p, i) => {
            const I = p.icon;
            return (
              <div key={i} className="relative bg-white border-2 border-akaar-slate rounded-2xl p-7 hover:border-akaar-navy hover:shadow-xl transition group overflow-hidden">
                <div className="absolute -right-6 -top-6 h-display text-[8rem] text-akaar-cream leading-none select-none">0{i+1}</div>
                <div className="relative">
                  <div className="w-14 h-14 rounded-xl bg-akaar-navy text-akaar-gold flex items-center justify-center group-hover:bg-akaar-gold group-hover:text-akaar-navy transition">
                    <I size={26}/>
                  </div>
                  <div className="h-display text-3xl mt-5 text-akaar-navy">{p.title}</div>
                  <p className="mt-3 text-sm text-akaar-ink/70 leading-relaxed">{p.desc}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// =================================================================
// COACHES
// =================================================================
const COACHES = [
  { name: 'Coach Rizki Pratama', role: 'Head Coach', license: 'AFC Level B · 12y exp', color: 'navy' },
  { name: 'Coach Bagas Saputra', role: 'Technical Director', license: 'PSSI A License', color: 'gold' },
  { name: 'Coach Dimas Wijaya',  role: 'Goalkeeper Coach',   license: 'Specialist · 8y exp', color: 'blue' },
  { name: 'Coach Ayu Lestari',   role: 'Strength & Conditioning', license: 'NSCA Certified', color: 'navy' }
];

const Coaches = () => (
  <section id="coaches" className="bg-akaar-navy text-white py-24 lg:py-32 relative overflow-hidden">
    <div className="absolute inset-0 grid-court opacity-30"></div>
    <div className="absolute top-10 right-10 w-72 h-72 rounded-full bg-akaar-gold/10 blur-3xl"></div>
    <div className="relative max-w-7xl mx-auto px-6">
      <div className="grid lg:grid-cols-12 gap-10 items-end mb-14">
        <div className="lg:col-span-7">
          <div className="flex items-center gap-3 text-akaar-gold uppercase tracking-[0.3em] text-xs font-bold">
            <span className="w-10 h-px bg-akaar-gold"></span> Coaching Staff
          </div>
          <h2 className="h-display mt-4 text-5xl lg:text-6xl">
            Dilatih oleh<br/>
            <span className="text-akaar-gold">tangan-tangan terbaik.</span>
          </h2>
        </div>
        <p className="lg:col-span-5 text-white/70">
          Tim pelatih kami adalah perpaduan mantan pemain profesional, instruktur bersertifikat, dan praktisi sport science yang berkomitmen pada perkembangan jangka panjang.
        </p>
      </div>

      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
        {COACHES.map((c, i) => (
          <div key={i} className="group relative">
            <div className="aspect-[3/4] rounded-2xl overflow-hidden relative ph-dark border border-white/10">
              <div className="absolute inset-0 flex items-end justify-center pb-3">
                <span className="font-mono text-[10px] text-white/30 uppercase tracking-widest">[ portrait ]</span>
              </div>
              <div className="absolute top-3 left-3 bg-akaar-gold text-akaar-navy h-cond uppercase tracking-wider text-[10px] font-bold px-2 py-1 rounded">
                #{String(i+1).padStart(2,'0')}
              </div>
              <div className="absolute bottom-0 inset-x-0 h-2/5 bg-gradient-to-t from-akaar-navy to-transparent"></div>
            </div>
            <div className="mt-4">
              <div className="h-display text-2xl text-white leading-tight">{c.name}</div>
              <div className="text-akaar-gold text-sm font-semibold mt-1">{c.role}</div>
              <div className="text-xs text-white/60 mt-0.5">{c.license}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// =================================================================
// SCHEDULE
// =================================================================
const SCHEDULE = [
  ['Senin',  '15:00', '17:00', 'U-10 Foundation', 'Lap. A'],
  ['Senin',  '17:30', '19:30', 'U-14 Development', 'Lap. A'],
  ['Selasa', '18:00', '20:00', 'U-16 / U-18 Elite', 'Lap. B'],
  ['Rabu',   '15:00', '17:00', 'U-12 Development', 'Lap. A'],
  ['Kamis',  '16:00', '18:00', 'U-10 Foundation', 'Lap. A'],
  ['Kamis',  '18:30', '20:30', 'U-16 Elite',      'Lap. B'],
  ['Jumat',  '17:00', '19:00', 'U-14 Development', 'Lap. A'],
  ['Sabtu',  '08:00', '11:00', 'Open Trial · All Ages', 'Lap. A & B']
];

const Schedule = () => (
  <section id="schedule" className="py-24 lg:py-32 bg-white">
    <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-12 gap-12">
      <div className="lg:col-span-4">
        <div className="flex items-center gap-3 text-akaar-blue uppercase tracking-[0.3em] text-xs font-bold">
          <span className="w-10 h-px bg-akaar-blue"></span> Weekly Schedule
        </div>
        <h2 className="h-display mt-4 text-5xl text-akaar-navy">When We<br/>Train.</h2>
        <p className="mt-4 text-akaar-ink/70">Jadwal mingguan latihan untuk seluruh kelompok usia. Trial gratis dibuka setiap Sabtu pagi.</p>
        <div className="mt-8 p-5 rounded-2xl bg-akaar-cream border border-akaar-gold/40">
          <div className="flex items-center gap-2 text-akaar-navy">
            <IconPin size={18}/> <span className="font-bold">Lapangan Akaar</span>
          </div>
          <div className="text-sm text-akaar-ink/70 mt-1">Jl. Contoh Raya No. 88, Jakarta Selatan</div>
        </div>
      </div>

      <div className="lg:col-span-8">
        <div className="rounded-2xl border-2 border-akaar-slate overflow-hidden">
          <div className="grid grid-cols-12 bg-akaar-navy text-white h-cond uppercase tracking-wider text-xs">
            <div className="col-span-2 px-4 py-3">Day</div>
            <div className="col-span-3 px-4 py-3">Time</div>
            <div className="col-span-5 px-4 py-3">Group</div>
            <div className="col-span-2 px-4 py-3">Court</div>
          </div>
          {SCHEDULE.map((row, i) => (
            <div key={i} className={`grid grid-cols-12 items-center border-t border-akaar-slate ${i % 2 === 0 ? 'bg-white' : 'bg-akaar-cream/30'} ${row[3].includes('Open Trial') ? 'bg-akaar-gold/20 font-bold' : ''}`}>
              <div className="col-span-2 px-4 py-4 font-bold text-akaar-navy">{row[0]}</div>
              <div className="col-span-3 px-4 py-4 num text-akaar-ink/80">{row[1]} – {row[2]}</div>
              <div className="col-span-5 px-4 py-4 text-akaar-navy">
                {row[3]}
                {row[3].includes('Open Trial') && (
                  <span className="ml-2 text-[10px] uppercase bg-akaar-navy text-akaar-gold px-2 py-0.5 rounded">Free</span>
                )}
              </div>
              <div className="col-span-2 px-4 py-4 text-akaar-ink/70">{row[4]}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// =================================================================
// TESTIMONIALS
// =================================================================
const TESTIS = [
  {
    quote: 'Anak saya berubah drastis sejak gabung Akaar — bukan cuma skill futsalnya, tapi disiplin dan rasa percaya dirinya.',
    name: 'Ibu Santi', role: 'Orang tua, U-12'
  },
  {
    quote: 'Coaching staff-nya peduli betul ke perkembangan tiap pemain. Komunikasinya rutin dan jelas.',
    name: 'Pak Andre', role: 'Orang tua, U-16'
  },
  {
    quote: 'Awalnya nggak berani main bola, sekarang kapten tim sekolah. Akaar tempat yang tepat buat mulai.',
    name: 'Daffa, 13', role: 'Pemain U-14'
  }
];

const Testimonials = () => (
  <section className="py-24 bg-akaar-cream/40">
    <div className="max-w-7xl mx-auto px-6">
      <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-12">
        <div>
          <div className="flex items-center gap-3 text-akaar-blue uppercase tracking-[0.3em] text-xs font-bold">
            <span className="w-10 h-px bg-akaar-blue"></span> Family Stories
          </div>
          <h2 className="h-display mt-4 text-5xl text-akaar-navy">What parents & players say.</h2>
        </div>
      </div>
      <div className="grid md:grid-cols-3 gap-5">
        {TESTIS.map((t, i) => (
          <div key={i} className="bg-white p-7 rounded-2xl border border-akaar-slate relative">
            <div className="absolute -top-4 left-7 w-8 h-8 bg-akaar-gold text-akaar-navy rounded-lg flex items-center justify-center font-display text-2xl">"</div>
            <div className="flex text-akaar-gold mb-3">{[...Array(5)].map((_,j) => <IconStar key={j} size={16} fill="currentColor" stroke="none"/>)}</div>
            <p className="text-akaar-ink/80 leading-relaxed">{t.quote}</p>
            <div className="mt-5 pt-5 border-t border-akaar-slate flex items-center gap-3">
              <div className="w-10 h-10 rounded-full ph-img"></div>
              <div>
                <div className="font-bold text-akaar-navy">{t.name}</div>
                <div className="text-xs text-akaar-ink/60">{t.role}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// =================================================================
// GALLERY
// =================================================================
const Gallery = () => {
  const labels = [
    'training session', 'tournament', 'team photo', 'gk drills',
    'tactical board', 'celebration', 'small-sided game', 'awards'
  ];
  return (
    <section id="gallery" className="py-24 bg-white">
      <div className="max-w-7xl mx-auto px-6">
        <div className="flex items-end justify-between gap-4 mb-12">
          <div>
            <div className="flex items-center gap-3 text-akaar-blue uppercase tracking-[0.3em] text-xs font-bold">
              <span className="w-10 h-px bg-akaar-blue"></span> Gallery
            </div>
            <h2 className="h-display mt-4 text-5xl text-akaar-navy">Moments from the court.</h2>
          </div>
          <a href="#" className="hidden md:inline-flex items-center gap-2 text-akaar-navy font-bold hover:text-akaar-blue">
            View all <IconArrow size={16}/>
          </a>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
          {labels.map((l, i) => (
            <div key={i} className={`ph-img rounded-2xl flex items-end p-4 ${i === 0 || i === 5 ? 'row-span-2 aspect-[3/5]' : 'aspect-square'}`}>
              <span className="font-mono text-[10px] text-akaar-navy/40 uppercase tracking-widest">[ {l} ]</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// =================================================================
// CTA + FOOTER
// =================================================================
const CTA = () => (
  <section className="relative py-20 bg-akaar-gold overflow-hidden">
    <div className="absolute -left-20 -top-20 w-72 h-72 rounded-full border-[24px] border-akaar-navy/10"></div>
    <div className="absolute -right-20 -bottom-20 w-96 h-96 rounded-full border-[36px] border-akaar-navy/10"></div>
    <div className="relative max-w-7xl mx-auto px-6 grid lg:grid-cols-12 gap-8 items-center">
      <div className="lg:col-span-8">
        <h2 className="h-display text-5xl lg:text-7xl text-akaar-navy leading-[0.95]">
          Ready to begin the journey?<br/>
          <span className="italic">Book your free trial today.</span>
        </h2>
      </div>
      <div className="lg:col-span-4 flex lg:justify-end">
        <a href="#register" className="inline-flex items-center gap-2 bg-akaar-navy text-white font-bold px-8 py-5 rounded-xl hover:bg-akaar-blue transition text-lg">
          Daftar Sekarang <IconArrow size={20}/>
        </a>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="bg-akaar-ink text-white pt-20 pb-8 relative overflow-hidden">
    <div className="absolute top-0 inset-x-0 h-1 stripes-y"></div>
    <div className="max-w-7xl mx-auto px-6 grid md:grid-cols-12 gap-10">
      <div className="md:col-span-5">
        <div className="flex items-center gap-3">
          <img src="public/akaar-logo.png" alt="" className="h-16 w-16 object-contain"/>
          <div className="leading-tight">
            <div className="h-display text-3xl">AKAAR</div>
            <div className="h-cond uppercase tracking-wider text-xs text-akaar-gold">Futsal Academy</div>
          </div>
        </div>
        <p className="mt-5 text-white/70 max-w-sm leading-relaxed">
          Membentuk pemain futsal muda Indonesia melalui teknik, taktik, fisik, dan karakter.
        </p>
        <div className="mt-6 flex gap-3">
          {[IconIG, IconTikTok, IconYT, IconWA].map((I, i) => (
            <a key={i} href="#" className="w-10 h-10 rounded-lg bg-white/10 hover:bg-akaar-gold hover:text-akaar-navy flex items-center justify-center transition">
              <I size={18}/>
            </a>
          ))}
        </div>
      </div>
      <div className="md:col-span-3">
        <div className="h-cond uppercase tracking-wider text-akaar-gold text-xs">Navigate</div>
        <ul className="mt-4 space-y-2 text-white/70">
          {NAV.map(([l, h]) => (
            <li key={h}><a href={h} className="hover:text-akaar-gold">{l}</a></li>
          ))}
        </ul>
      </div>
      <div className="md:col-span-4">
        <div className="h-cond uppercase tracking-wider text-akaar-gold text-xs">Contact</div>
        <ul className="mt-4 space-y-3 text-white/80">
          <li className="flex gap-3"><IconPin size={18} stroke="#FFC72C"/> Jl. Contoh Raya No. 88, Jakarta Selatan</li>
          <li className="flex gap-3"><IconPhone size={18} stroke="#FFC72C"/> +62 812-0000-0000</li>
          <li className="flex gap-3"><IconMail size={18} stroke="#FFC72C"/> hello@akaarfutsal.id</li>
          <li className="flex gap-3"><IconClock size={18} stroke="#FFC72C"/> Mon – Sat · 15:00 – 21:00</li>
        </ul>
      </div>
    </div>
    <div className="max-w-7xl mx-auto px-6 mt-14 pt-6 border-t border-white/10 flex flex-col sm:flex-row justify-between gap-3 text-xs text-white/50">
      <div>© 2026 Akaar Futsal Academy. Zero To Be Hero.</div>
      <div className="flex gap-5">
        <a href="#" className="hover:text-white">Privacy</a>
        <a href="#" className="hover:text-white">Terms</a>
        <a href="#" className="hover:text-white">Code of Conduct</a>
      </div>
    </div>
  </footer>
);

Object.assign(window, {
  Nav, Hero, About, Stats, Programs, Method, Coaches, Schedule,
  Testimonials, Gallery, CTA, Footer
});