import React, { useState, useEffect } from 'react';
import { 
  Menu, X, ChevronRight, Phone, MessageCircle, 
  ShieldCheck, FileText, TrendingUp, Briefcase, 
  CheckCircle2, User, MapPin, AlertCircle, ArrowRight
} from 'lucide-react';

// --- CONSTANTS ---
const CONSULTANT_NAME = "[Nama Consultant]";
const PHONE_NUMBER = "+60 18-987 6973";
const WA_MESSAGE = "Assalamualaikum, saya berminat untuk tahu lebih lanjut tentang servis puan.";
const WA_LINK = `https://wa.me/60189876973?text=${encodeURIComponent(WA_MESSAGE)}`;

const NAV_LINKS = [
  { id: 'home', label: 'Home' },
  { id: 'about', label: 'Tentang Saya' },
  { id: 'takaful', label: 'Takaful' },
  { id: 'hibah', label: 'Hibah & Wasiat' },
  { id: 'unit-trust', label: 'Unit Trust' },
  { id: 'astute', label: 'Astute FM' },
  { id: 'contact', label: 'Hubungi' },
];

// --- REUSABLE COMPONENTS ---
const Button = ({ children, variant = 'primary', className = '', onClick, href }) => {
  const baseStyle = "inline-flex items-center justify-center px-6 py-3 rounded-full font-medium transition-all duration-300";
  const variants = {
    primary: "bg-amber-500 text-white hover:bg-amber-600 shadow-lg shadow-amber-500/30",
    secondary: "bg-slate-900 text-white hover:bg-slate-800 shadow-lg shadow-slate-900/30",
    outline: "border-2 border-slate-900 text-slate-900 hover:bg-slate-900 hover:text-white",
    goldOutline: "border-2 border-amber-500 text-amber-600 hover:bg-amber-500 hover:text-white"
  };

  const Component = href ? 'a' : 'button';
  const props = href ? { href, target: "_blank", rel: "noopener noreferrer" } : { onClick };

  return (
    <Component className={`${baseStyle} ${variants[variant]} ${className}`} {...props}>
      {children}
    </Component>
  );
};

const Card = ({ children, className = '' }) => (
  <div className={`bg-white rounded-2xl p-8 shadow-sm border border-slate-100 hover:shadow-md transition-shadow ${className}`}>
    {children}
  </div>
);

const SectionTitle = ({ title, subtitle, centered = false }) => (
  <div className={`mb-12 ${centered ? 'text-center' : ''}`}>
    {subtitle && <span className="text-amber-600 font-semibold tracking-wider text-sm uppercase mb-2 block">{subtitle}</span>}
    <h2 className="text-3xl md:text-4xl font-bold text-slate-900 tracking-tight">{title}</h2>
  </div>
);

const PageHeader = ({ title, description }) => (
  <div className="bg-slate-900 pt-32 pb-20 px-6">
    <div className="max-w-4xl mx-auto text-center">
      <h1 className="text-4xl md:text-5xl font-bold text-white mb-6 tracking-tight">{title}</h1>
      {description && <p className="text-lg text-slate-300 leading-relaxed max-w-2xl mx-auto">{description}</p>}
    </div>
  </div>
);

const CTASection = ({ title, buttonText, buttonHref = WA_LINK }) => (
  <section className="py-20 bg-amber-500 px-6">
    <div className="max-w-4xl mx-auto text-center">
      <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">{title}</h2>
      <Button variant="secondary" href={buttonHref} className="text-lg px-8 py-4">
        <MessageCircle className="w-5 h-5 mr-2" />
        {buttonText}
      </Button>
    </div>
  </section>
);

// --- LAYOUT COMPONENTS ---
const Navbar = ({ currentPage, navigateTo }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

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

  const handleNav = (id) => {
    navigateTo(id);
    setIsOpen(false);
  };

  return (
    <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-white/95 backdrop-blur-md shadow-sm py-4' : 'bg-transparent py-6'}`}>
      <div className="max-w-7xl mx-auto px-6 flex justify-between items-center">
        <div 
          className="cursor-pointer group flex items-center gap-2" 
          onClick={() => handleNav('home')}
        >
          <div className="w-10 h-10 rounded-full bg-slate-900 flex items-center justify-center text-amber-500 font-bold text-xl group-hover:scale-105 transition-transform">
            FL
          </div>
          <span className={`font-bold text-xl tracking-tight ${scrolled || currentPage !== 'home' ? 'text-slate-900' : 'text-slate-900 lg:text-slate-900'}`}>
            Financial Legacy Consultant
          </span>
        </div>

        {/* Desktop Nav */}
        <div className="hidden lg:flex items-center gap-8">
          {NAV_LINKS.map(link => (
            <button
              key={link.id}
              onClick={() => handleNav(link.id)}
              className={`text-sm font-medium transition-colors hover:text-amber-600 ${
                currentPage === link.id 
                  ? 'text-amber-600' 
                  : (scrolled || currentPage !== 'home' ? 'text-slate-600' : 'text-slate-800')
              }`}
            >
              {link.label}
            </button>
          ))}
          <Button variant="primary" href={WA_LINK} className="!py-2 !px-5 text-sm">
            WhatsApp
          </Button>
        </div>

        {/* Mobile Toggle */}
        <button 
          className={`lg:hidden p-2 rounded-lg ${scrolled || currentPage !== 'home' ? 'text-slate-900' : 'text-slate-900'}`}
          onClick={() => setIsOpen(!isOpen)}
        >
          {isOpen ? <X size={24} /> : <Menu size={24} />}
        </button>
      </div>

      {/* Mobile Menu */}
      {isOpen && (
        <div className="lg:hidden absolute top-full left-0 w-full bg-white shadow-xl border-t border-slate-100">
          <div className="flex flex-col py-4 px-6 gap-4">
            {NAV_LINKS.map(link => (
              <button
                key={link.id}
                onClick={() => handleNav(link.id)}
                className={`text-left py-2 text-lg font-medium ${currentPage === link.id ? 'text-amber-600' : 'text-slate-700'}`}
              >
                {link.label}
              </button>
            ))}
            <Button variant="primary" href={WA_LINK} className="w-full mt-4">
              <MessageCircle className="w-5 h-5 mr-2" /> WhatsApp Sekarang
            </Button>
          </div>
        </div>
      )}
    </nav>
  );
};

const Footer = ({ navigateTo }) => (
  <footer className="bg-slate-900 text-slate-400 py-16 px-6 border-t border-slate-800">
    <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-12">
      <div className="md:col-span-2">
        <div className="flex items-center gap-2 mb-6">
          <div className="w-10 h-10 rounded-full bg-amber-500 flex items-center justify-center text-slate-900 font-bold text-xl">
            FL
          </div>
          <span className="font-bold text-xl text-white tracking-tight">
            Financial Legacy Consultant
          </span>
        </div>
        <p className="mb-6 max-w-sm">
          Membantu individu, keluarga dan pemilik bisnes merancang kewangan dan perlindungan masa depan dengan lebih tersusun.
        </p>
        <p className="flex items-center gap-2 text-white">
          <Phone className="w-4 h-4 text-amber-500" />
          {PHONE_NUMBER}
        </p>
      </div>
      
      <div>
        <h4 className="text-white font-semibold mb-6">Pautan Pantas</h4>
        <ul className="space-y-3">
          {NAV_LINKS.slice(1, -1).map(link => (
            <li key={link.id}>
              <button onClick={() => navigateTo(link.id)} className="hover:text-amber-500 transition-colors text-left">
                {link.label}
              </button>
            </li>
          ))}
        </ul>
      </div>

      <div>
        <h4 className="text-white font-semibold mb-6">Sedia Membantu</h4>
        <p className="mb-6 text-sm">Ada soalan? Hubungi saya untuk sesi penerangan percuma.</p>
        <Button variant="primary" href={WA_LINK} className="w-full text-sm">
          <MessageCircle className="w-4 h-4 mr-2" /> WhatsApp Saya
        </Button>
      </div>
    </div>
    <div className="max-w-7xl mx-auto mt-16 pt-8 border-t border-slate-800 text-sm text-center md:text-left flex flex-col md:flex-row justify-between items-center gap-4">
      <p>&copy; {new Date().getFullYear()} {CONSULTANT_NAME}. Hak Cipta Terpelihara.</p>
      <div className="flex gap-4 text-xs">
        <span>Takaful</span>
        <span className="text-slate-600">|</span>
        <span>Hibah & Wasiat</span>
        <span className="text-slate-600">|</span>
        <span>Unit Trust</span>
        <span className="text-slate-600">|</span>
        <span>Astute FM</span>
      </div>
    </div>
  </footer>
);

const FloatingWhatsApp = () => (
  <a
    href={WA_LINK}
    target="_blank"
    rel="noopener noreferrer"
    className="fixed bottom-6 right-6 bg-green-500 text-white p-4 rounded-full shadow-2xl hover:bg-green-600 hover:scale-110 transition-all duration-300 z-50 flex items-center justify-center group"
    aria-label="WhatsApp Us"
  >
    <MessageCircle size={28} />
    <span className="absolute right-full mr-4 bg-white text-slate-900 text-sm px-3 py-1.5 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none font-medium">
      Boleh saya bantu?
    </span>
  </a>
);

// --- PAGES ---

const Home = ({ navigateTo }) => (
  <div className="min-h-screen">
    {/* Hero Section */}
    <section className="pt-32 pb-20 lg:pt-40 lg:pb-32 px-6 bg-gradient-to-br from-slate-50 via-white to-amber-50">
      <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center">
        <div>
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-100 text-amber-800 text-sm font-semibold mb-6">
            <span className="w-2 h-2 rounded-full bg-amber-500"></span>
            Perunding Profesional Berdaftar
          </div>
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-900 leading-[1.1] tracking-tight mb-6">
            Perunding Kewangan & Perancangan Harta Untuk Keluarga dan Bisnes Anda
          </h1>
          <p className="text-lg text-slate-600 mb-8 leading-relaxed max-w-xl">
            Membantu individu, keluarga dan pemilik bisnes memahami pilihan takaful, hibah, wasiat, unit trust dan peluang pemasaran dengan lebih tersusun.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 mb-12">
            <Button variant="primary" href={WA_LINK}>
              <MessageCircle className="w-5 h-5 mr-2" />
              Dapatkan Konsultasi
            </Button>
            <Button variant="outline" onClick={() => {
              document.getElementById('services').scrollIntoView({ behavior: 'smooth' });
            }}>
              Lihat Servis
            </Button>
          </div>
          
          <div className="flex flex-wrap gap-4 pt-8 border-t border-slate-200">
            {['Takaful Agent', 'Hibah & Wasiat', 'Unit Trust Kenanga', 'Astute FM'].map((badge, idx) => (
              <span key={idx} className="flex items-center text-sm font-medium text-slate-700 bg-white px-3 py-1.5 rounded-md shadow-sm border border-slate-100">
                <CheckCircle2 className="w-4 h-4 text-amber-500 mr-2" />
                {badge}
              </span>
            ))}
          </div>
        </div>
        
        <div className="relative mx-auto w-full max-w-md lg:max-w-none lg:ml-auto">
          <div className="absolute inset-0 bg-amber-500 rounded-3xl transform rotate-3 scale-105 opacity-20"></div>
          <div className="absolute inset-0 bg-slate-900 rounded-3xl transform -rotate-3 scale-105 opacity-10"></div>
          <div className="relative bg-white rounded-3xl p-4 shadow-2xl border border-slate-100 aspect-[4/5] flex flex-col overflow-hidden group">
            <div className="flex-1 bg-slate-100 rounded-2xl flex items-center justify-center relative overflow-hidden">
               {/* Placeholder for Photo */}
               <div className="absolute inset-0 bg-gradient-to-t from-slate-900/40 to-transparent z-10"></div>
               <User className="w-32 h-32 text-slate-300" />
               <div className="absolute bottom-6 left-6 right-6 z-20 text-white">
                 <p className="font-bold text-xl">{CONSULTANT_NAME}</p>
                 <p className="text-sm text-slate-200">Financial Legacy Consultant</p>
               </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    {/* Services Section */}
    <section id="services" className="py-24 bg-white px-6">
      <div className="max-w-7xl mx-auto">
        <SectionTitle 
          title="Servis Utama" 
          subtitle="Kepakaran Saya"
          centered 
        />
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {[
            {
              id: 'takaful',
              icon: <ShieldCheck className="w-8 h-8 text-amber-500" />,
              title: "Takaful",
              desc: "Membantu pelanggan mendapatkan perlindungan kewangan yang sesuai untuk diri, keluarga dan bisnes."
            },
            {
              id: 'hibah',
              icon: <FileText className="w-8 h-8 text-amber-500" />,
              title: "Hibah & Wasiat",
              desc: "Membantu pelanggan merancang pengurusan harta supaya urusan waris lebih jelas dan tersusun."
            },
            {
              id: 'unit-trust',
              icon: <TrendingUp className="w-8 h-8 text-amber-500" />,
              title: "Unit Trust",
              desc: "Membantu pelanggan memahami pelaburan unit trust sebagai pilihan membina portfolio jangka sederhana dan panjang."
            },
            {
              id: 'astute',
              icon: <Briefcase className="w-8 h-8 text-amber-500" />,
              title: "Astute FM",
              desc: "Memperkenalkan solusi dan peluang berkaitan Astute FM kepada pelanggan yang berminat."
            }
          ].map((service, idx) => (
            <Card key={idx} className="flex flex-col h-full group hover:-translate-y-1 transition-transform duration-300">
              <div className="w-14 h-14 rounded-xl bg-amber-50 flex items-center justify-center mb-6 group-hover:bg-amber-100 transition-colors">
                {service.icon}
              </div>
              <h3 className="text-xl font-bold text-slate-900 mb-3">{service.title}</h3>
              <p className="text-slate-600 mb-6 flex-1">{service.desc}</p>
              <button 
                onClick={() => navigateTo(service.id)}
                className="inline-flex items-center text-amber-600 font-semibold group-hover:text-amber-700 mt-auto"
              >
                Lihat Lanjut <ChevronRight className="w-4 h-4 ml-1" />
              </button>
            </Card>
          ))}
        </div>
      </div>
    </section>

    {/* Why Me Section */}
    <section className="py-24 bg-slate-50 px-6">
      <div className="max-w-4xl mx-auto text-center">
        <SectionTitle title="Kenapa Website Ini Berbeza?" />
        <p className="text-lg md:text-xl text-slate-600 leading-relaxed bg-white p-8 md:p-12 rounded-3xl shadow-sm border border-slate-100">
          Website ini menghimpunkan beberapa servis kewangan dan perancangan harta dalam satu profil profesional. Pelanggan boleh faham siapa consultant, apa servis yang ditawarkan dan terus hubungi melalui WhatsApp dengan mudah tanpa perlu mencari di tempat berasingan.
        </p>
      </div>
    </section>

    {/* Home CTA */}
    <CTASection 
      title="Jom Mulakan Perbincangan Awal" 
      buttonText="Klik Untuk Bertanya (Tiada Paksaan)" 
    />
  </div>
);

const About = ({ navigateTo }) => (
  <div className="min-h-screen bg-slate-50">
    <PageHeader 
      title="Tentang Saya" 
      description="Kenali siapa saya dan bagaimana saya boleh membantu anda merancang masa depan."
    />
    
    <section className="py-20 px-6">
      <div className="max-w-5xl mx-auto grid md:grid-cols-5 gap-12 items-start">
        <div className="md:col-span-2">
          <Card className="sticky top-32 text-center p-8">
            <div className="w-32 h-32 bg-slate-100 rounded-full mx-auto mb-6 flex items-center justify-center border-4 border-amber-50">
              <User className="w-16 h-16 text-slate-300" />
            </div>
            <h3 className="text-2xl font-bold text-slate-900 mb-2">{CONSULTANT_NAME}</h3>
            <p className="text-amber-600 font-medium mb-6">Financial Legacy Consultant</p>
            
            <div className="space-y-4 text-left mb-8">
              <div className="flex items-start gap-3">
                <Briefcase className="w-5 h-5 text-slate-400 shrink-0 mt-1" />
                <span className="text-sm text-slate-600">Takaful, Hibah & Wasiat, Unit Trust, Astute FM</span>
              </div>
              <div className="flex items-center gap-3">
                <MapPin className="w-5 h-5 text-slate-400 shrink-0" />
                <span className="text-sm text-slate-600">Malaysia</span>
              </div>
            </div>
            
            <Button variant="primary" href={WA_LINK} className="w-full">
              <MessageCircle className="w-5 h-5 mr-2" /> Hubungi Saya
            </Button>
          </Card>
        </div>
        
        <div className="md:col-span-3 space-y-12">
          <div>
            <h2 className="text-3xl font-bold text-slate-900 mb-6">Pengenalan</h2>
            <p className="text-lg text-slate-600 leading-relaxed">
              Saya membantu pelanggan memahami pilihan kewangan yang sesuai mengikut keperluan mereka — daripada perlindungan takaful, perancangan hibah dan wasiat, pelaburan unit trust, sehingga peluang pemasaran bersama Astute FM.
            </p>
          </div>

          <div>
            <h2 className="text-2xl font-bold text-slate-900 mb-6">Pendekatan Saya</h2>
            <div className="grid sm:grid-cols-2 gap-4">
              {[
                "Penerangan mudah faham",
                "Fokus kepada keperluan pelanggan",
                "Tidak memaksa",
                "Boleh bantu susun beberapa keperluan dalam satu tempat",
                "Sesuai untuk individu, keluarga dan pemilik bisnes"
              ].map((point, idx) => (
                <div key={idx} className="flex items-start gap-3 bg-white p-4 rounded-xl border border-slate-100">
                  <CheckCircle2 className="w-6 h-6 text-amber-500 shrink-0" />
                  <span className="text-slate-700 font-medium">{point}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="bg-slate-900 text-white p-8 md:p-10 rounded-3xl relative overflow-hidden">
            <div className="absolute -right-10 -top-10 w-40 h-40 bg-amber-500 rounded-full opacity-20 blur-3xl"></div>
            <h2 className="text-2xl font-bold mb-4 relative z-10">Fokus Saya</h2>
            <p className="text-lg text-slate-300 leading-relaxed relative z-10 text-justify">
              "Fokus saya adalah membantu pelanggan membuat keputusan dengan lebih yakin melalui penerangan yang jelas, tersusun dan praktikal."
            </p>
          </div>
        </div>
      </div>
    </section>
  </div>
);

const Takaful = () => (
  <div className="min-h-screen bg-white">
    <PageHeader 
      title="Perlindungan Takaful" 
      description="Takaful membantu menyediakan perlindungan kewangan sekiranya berlaku perkara yang tidak dijangka seperti sakit, kemalangan, hilang pendapatan atau kematian."
    />

    <section className="py-20 px-6 bg-slate-50">
      <div className="max-w-7xl mx-auto">
        <SectionTitle title="Jenis Perlindungan Utama" centered />
        <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
          {[
            { title: "Medical Card", desc: "Perlindungan kos rawatan hospital mengikut plan yang sesuai." },
            { title: "Hibah Takaful", desc: "Manfaat takaful yang boleh membantu waris jika berlaku kematian." },
            { title: "Critical Illness", desc: "Perlindungan kewangan jika disahkan menghidap penyakit kritikal." },
            { title: "Income Protection", desc: "Membantu melindungi pendapatan jika tidak mampu bekerja akibat sakit atau kemalangan." }
          ].map((item, idx) => (
            <Card key={idx} className="border-l-4 border-l-amber-500">
              <h3 className="text-xl font-bold text-slate-900 mb-3">{item.title}</h3>
              <p className="text-slate-600">{item.desc}</p>
            </Card>
          ))}
        </div>
      </div>
    </section>

    <section className="py-20 px-6">
      <div className="max-w-4xl mx-auto">
        <SectionTitle title="Sesuai Untuk Siapa?" />
        <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-4">
          {[
            "Individu yang baru mula bekerja",
            "Pasangan muda",
            "Ibu bapa yang ada anak kecil",
            "Pemilik bisnes",
            "Mahu perlindungan medical card",
            "Mahu perlindungan penyakit kritikal"
          ].map((item, idx) => (
            <div key={idx} className="bg-slate-50 rounded-xl p-4 flex items-center gap-3 border border-slate-100">
              <User className="w-5 h-5 text-amber-500" />
              <span className="text-slate-700 font-medium text-sm">{item}</span>
            </div>
          ))}
        </div>
      </div>
    </section>

    <CTASection 
      title="Nak Semak Plan Takaful Yang Sesuai?" 
      buttonText="WhatsApp Untuk Semakan" 
    />
  </div>
);

const HibahWasiat = () => (
  <div className="min-h-screen bg-white">
    <PageHeader 
      title="Hibah Harta & Wasiat" 
      description="Hibah dan wasiat membantu memastikan pengurusan harta lebih jelas, tersusun dan mengurangkan risiko pertikaian keluarga pada masa hadapan."
    />

    <section className="py-20 px-6">
      <div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-16 items-center">
        <div>
          <SectionTitle title="Kenapa Perlu Rancang Harta?" />
          <ul className="space-y-4">
            {[
              "Supaya waris tahu apa yang perlu dibuat",
              "Mengurangkan risiko konflik keluarga",
              "Memudahkan urusan selepas kematian",
              "Melantik pihak yang sesuai untuk mengurus harta",
              "Melindungi kepentingan pasangan dan anak-anak"
            ].map((point, idx) => (
              <li key={idx} className="flex items-start gap-4 p-4 bg-slate-50 rounded-xl">
                <CheckCircle2 className="w-6 h-6 text-amber-500 shrink-0 mt-0.5" />
                <span className="text-slate-700 text-lg">{point}</span>
              </li>
            ))}
          </ul>
          
          <div className="mt-8 p-6 bg-blue-50 border border-blue-100 rounded-xl flex gap-4">
            <AlertCircle className="w-6 h-6 text-blue-600 shrink-0" />
            <p className="text-sm text-blue-800 leading-relaxed">
              <strong>Nota Penting:</strong> Servis hibah dan wasiat ini adalah berkaitan perancangan harta melalui rakan strategik kami, <strong>MyAngkasa Amanah Berhad</strong>.
            </p>
          </div>
        </div>
        
        <div className="grid gap-6">
          {[
            { title: "Hibah Harta", desc: "Perancangan pemberian harta semasa hidup kepada penerima yang dikehendaki." },
            { title: "Wasiat", desc: "Dokumen arahan pengurusan harta selepas kematian mengikut keperluan pelanggan." },
            { title: "Pentadbiran Harta", desc: "Membantu pelanggan faham proses asas pengurusan harta dan waris." },
            { title: "Perancangan Waris", desc: "Membantu keluarga lebih bersedia dengan dokumen dan arahan yang jelas." }
          ].map((item, idx) => (
            <Card key={idx} className="hover:border-amber-200 transition-colors">
              <h3 className="text-xl font-bold text-slate-900 mb-2">{item.title}</h3>
              <p className="text-slate-600">{item.desc}</p>
            </Card>
          ))}
        </div>
      </div>
    </section>

    <CTASection 
      title="Nak Tahu Hibah Atau Wasiat Mana Yang Sesuai?" 
      buttonText="Tanya Melalui WhatsApp" 
    />
  </div>
);

const UnitTrust = () => (
  <div className="min-h-screen bg-white">
    <PageHeader 
      title="Unit Trust Kenanga" 
      description="Unit trust adalah salah satu pilihan pelaburan yang boleh membantu pelanggan membina portfolio kewangan untuk matlamat jangka sederhana dan panjang."
    />

    <section className="py-20 px-6">
      <div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-16">
        <div>
          <SectionTitle title="Sesuai Untuk Matlamat Apa?" />
          <div className="grid gap-4">
            {[
              "Simpanan pendidikan anak",
              "Perancangan persaraan",
              "Diversifikasi pelaburan",
              "Matlamat kewangan jangka panjang",
              "Pelabur baru yang mahu penerangan asas"
            ].map((item, idx) => (
              <div key={idx} className="bg-slate-50 p-5 rounded-xl border border-slate-100 flex items-center gap-4">
                <div className="w-10 h-10 rounded-full bg-white flex items-center justify-center shadow-sm text-amber-500 font-bold">
                  {idx + 1}
                </div>
                <span className="text-slate-800 font-medium text-lg">{item}</span>
              </div>
            ))}
          </div>
        </div>

        <div>
          <SectionTitle title="Apa Yang Akan Dibantu?" />
          <Card className="h-full bg-slate-900 text-white border-none">
            <ul className="space-y-6">
              {[
                "Fahamkan objektif pelaburan anda",
                "Kenal pasti tahap risiko yang sanggup diambil",
                "Terangkan pilihan fund yang sesuai dengan profil anda",
                "Bantu pelanggan faham konsep pelaburan secara mudah",
                "Susun strategi pelaburan mengikut matlamat"
              ].map((point, idx) => (
                <li key={idx} className="flex items-start gap-4">
                  <ArrowRight className="w-6 h-6 text-amber-500 shrink-0 mt-0.5" />
                  <span className="text-slate-300 text-lg">{point}</span>
                </li>
              ))}
            </ul>
          </Card>
        </div>
      </div>
    </section>

    <section className="py-12 bg-slate-100 px-6 text-center">
      <div className="max-w-3xl mx-auto text-sm text-slate-500 leading-relaxed">
        <p><strong>Penafian Risiko:</strong> Pelaburan unit trust mempunyai risiko dan prestasi masa lalu tidak menjamin pulangan masa hadapan. Sesi penerangan awal bertujuan membantu pelanggan memahami pilihan yang ada sebelum membuat keputusan pelaburan.</p>
      </div>
    </section>

    <CTASection 
      title="Nak Faham Pilihan Unit Trust?" 
      buttonText="WhatsApp Untuk Penerangan" 
    />
  </div>
);

const AstuteFM = () => (
  <div className="min-h-screen bg-white">
    <PageHeader 
      title="Astute FM" 
      description="Sebagai Marketing Representative untuk Astute FM, saya membantu memperkenalkan solusi dan peluang berkaitan Astute FM kepada mereka yang berminat."
    />

    <section className="py-20 px-6">
      <div className="max-w-3xl mx-auto text-center mb-16">
        <h2 className="text-3xl font-bold text-slate-900 mb-6">Apa Itu Peranan Ini?</h2>
        <p className="text-xl text-slate-600 leading-relaxed">
          Peranan ini adalah untuk membantu pelanggan mendapatkan maklumat awal, memahami peluang yang ditawarkan dan seterusnya membuat keputusan berdasarkan penerangan yang jelas dan terperinci.
        </p>
      </div>

      <div className="max-w-5xl mx-auto">
        <SectionTitle title="Sesuai Untuk Siapa?" centered />
        <div className="grid sm:grid-cols-2 gap-6 mt-10">
          {[
            { title: "Peluang Pemasaran", desc: "Individu yang ingin tahu tentang peluang pemasaran yang ada." },
            { title: "Solusi Astute", desc: "Mereka yang berminat dengan solusi yang disediakan oleh Astute FM." },
            { title: "Maklumat Lanjut", desc: "Pelanggan yang mahu penerangan lebih lanjut sebelum bermula." },
            { title: "Rakan Niaga", desc: "Rakan niaga atau prospek yang ingin bertanya dahulu." }
          ].map((item, idx) => (
            <Card key={idx} className="text-center p-10">
              <h3 className="text-xl font-bold text-slate-900 mb-3">{item.title}</h3>
              <p className="text-slate-600">{item.desc}</p>
            </Card>
          ))}
        </div>
      </div>
    </section>

    <CTASection 
      title="Berminat Nak Tahu Tentang Astute FM?" 
      buttonText="Hubungi Saya" 
    />
  </div>
);

const Contact = () => {
  const handleSubmit = (e) => {
    e.preventDefault();
    window.open(WA_LINK, '_blank');
  };

  return (
    <div className="min-h-screen bg-slate-50">
      <PageHeader 
        title="Hubungi Saya" 
        description="Ada soalan tentang takaful, hibah, wasiat, unit trust atau Astute FM? Boleh hubungi saya melalui WhatsApp untuk sesi penerangan awal."
      />

      <section className="py-20 px-6 relative -mt-20">
        <div className="max-w-5xl mx-auto grid md:grid-cols-5 gap-8">
          
          <div className="md:col-span-2">
            <Card className="h-full bg-slate-900 text-white shadow-xl">
              <h3 className="text-2xl font-bold mb-8">Maklumat Hubungan</h3>
              <div className="space-y-8">
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 rounded-full bg-slate-800 flex items-center justify-center shrink-0">
                    <User className="w-6 h-6 text-amber-500" />
                  </div>
                  <div>
                    <p className="text-sm text-slate-400 mb-1">Nama</p>
                    <p className="text-lg font-medium">{CONSULTANT_NAME}</p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 rounded-full bg-slate-800 flex items-center justify-center shrink-0">
                    <Phone className="w-6 h-6 text-amber-500" />
                  </div>
                  <div>
                    <p className="text-sm text-slate-400 mb-1">Telefon / WhatsApp</p>
                    <p className="text-lg font-medium">{PHONE_NUMBER}</p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 rounded-full bg-slate-800 flex items-center justify-center shrink-0">
                    <Briefcase className="w-6 h-6 text-amber-500" />
                  </div>
                  <div>
                    <p className="text-sm text-slate-400 mb-1">Servis Ditawarkan</p>
                    <p className="leading-relaxed">Takaful, Hibah & Wasiat, Unit Trust Kenanga, Astute FM</p>
                  </div>
                </div>
              </div>

              <div className="mt-12 pt-8 border-t border-slate-800">
                <Button variant="primary" href={WA_LINK} className="w-full">
                  <MessageCircle className="w-5 h-5 mr-2" /> WhatsApp Sekarang
                </Button>
              </div>
            </Card>
          </div>

          <div className="md:col-span-3">
            <Card className="shadow-xl">
              <h3 className="text-2xl font-bold text-slate-900 mb-6">Hantar Pertanyaan</h3>
              <p className="text-slate-600 mb-8">Isi borang ringkas di bawah. Anda akan dibawa ke aplikasi WhatsApp untuk menghantar mesej ini.</p>
              
              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="grid md:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-2">Nama</label>
                    <input type="text" required className="w-full px-4 py-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-amber-500 focus:border-amber-500 outline-none transition-all" placeholder="Nama anda" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-2">Nombor Telefon</label>
                    <input type="tel" className="w-full px-4 py-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-amber-500 focus:border-amber-500 outline-none transition-all" placeholder="Cth: 0123456789" />
                  </div>
                </div>
                
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Servis Berminat</label>
                  <select className="w-full px-4 py-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-amber-500 focus:border-amber-500 outline-none transition-all bg-white">
                    <option>Pilih servis...</option>
                    <option>Takaful</option>
                    <option>Hibah & Wasiat</option>
                    <option>Unit Trust</option>
                    <option>Astute FM</option>
                    <option>Lain-lain / Tanya Dulu</option>
                  </select>
                </div>

                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Mesej Ringkas</label>
                  <textarea rows="4" className="w-full px-4 py-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-amber-500 focus:border-amber-500 outline-none transition-all resize-none" placeholder="Tuliskan soalan anda di sini..."></textarea>
                </div>

                <Button variant="secondary" className="w-full" type="submit">
                  Hantar ke WhatsApp <ArrowRight className="w-4 h-4 ml-2" />
                </Button>
              </form>
            </Card>
          </div>

        </div>
      </section>
    </div>
  );
};

// --- MAIN APP COMPONENT ---
export default function App() {
  const [currentPage, setCurrentPage] = useState('home');

  const navigateTo = (pageId) => {
    setCurrentPage(pageId);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const renderPage = () => {
    switch (currentPage) {
      case 'home': return <Home navigateTo={navigateTo} />;
      case 'about': return <About navigateTo={navigateTo} />;
      case 'takaful': return <Takaful />;
      case 'hibah': return <HibahWasiat />;
      case 'unit-trust': return <UnitTrust />;
      case 'astute': return <AstuteFM />;
      case 'contact': return <Contact />;
      default: return <Home navigateTo={navigateTo} />;
    }
  };

  return (
    <div className="font-sans text-slate-900 antialiased overflow-x-hidden selection:bg-amber-200 selection:text-slate-900">
      <Navbar currentPage={currentPage} navigateTo={navigateTo} />
      
      <main className="min-h-screen">
        {renderPage()}
      </main>
      
      <Footer navigateTo={navigateTo} />
      <FloatingWhatsApp />
    </div>
  );
}