/* Mereka v2 — Homepage V2 (Figma-faithful rebuild) */

/* ---- Font shortcuts ---- */
const _pp = "'Poppins', sans-serif";
const _la = "'Lato', sans-serif";

/* ---- Gradient text helper ---- */
const _gradStyle = {
  background: 'linear-gradient(135deg, #7c3aed 0%, #a855f7 40%, #ec4899 100%)',
  WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
};

function AccentText({ children, italic = false, cyan = false, className = '' }) {
  if (cyan) return <span className={`text-cyan-600 ${className}`}>{children}</span>;
  return (
    <span className={className} style={{ ..._gradStyle, fontStyle: italic ? 'italic' : 'normal' }}>
      {children}
    </span>
  );
}

/* ---- Photo placeholder for experts ---- */
const _hues = [220, 340, 170, 25, 290, 275, 35, 200];
function PhotoPlaceholder({ seed = 0, aspect = '1/1', className = '', rounded = 'rounded-xl', person }) {
  const h = _hues[seed % _hues.length];
  return (
    <div className={`relative overflow-hidden ${rounded} ${className}`}
      style={{
        aspectRatio: aspect,
        background: `linear-gradient(145deg, oklch(0.85 0.08 ${h}), oklch(0.72 0.12 ${h + 40}))`,
      }}>
      <div className="absolute inset-0" style={{
        backgroundImage: `radial-gradient(circle at 40% 30%, oklch(0.95 0.04 ${h}) 0%, transparent 50%), radial-gradient(circle at 65% 75%, oklch(0.65 0.15 ${h + 60}) 0%, transparent 60%)`,
      }} />
      <img src={person ? personPhotoWH(person, 600, 800) : scenePhoto(seed, 640, 640)} alt="" loading="lazy" onError={e => { e.currentTarget.style.display = 'none'; }} className="absolute inset-0 w-full h-full object-cover" />
    </div>
  );
}

/* ---- Bookmark/heart button overlay ---- */
function HeartOverlay() {
  return (
    <button className="absolute top-3 right-3 p-1.5 bg-zinc-900/60 rounded-full flex items-center justify-center hover:bg-zinc-900/80 transition-colors">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 21-1.41-1.32C5.6 14.99 2 11.85 2 7.95 2 5.13 4.21 3 7 3c1.74 0 3.41.81 4.5 2.09C12.59 3.81 14.26 3 16 3c2.79 0 5 2.13 5 4.95 0 3.9-3.6 7.04-8.59 11.74L12 21Z" />
      </svg>
    </button>
  );
}

/* ======== HOMEPAGE DATA ======== */
const HOME_EXPERTS_DATA = [
  { name: 'Debra Chia', desc: 'Blockchain Innovator: Ensuring Secure Transactions for 100+ Fintech Clients, Decade at the Industry\'s Edge', skills: ['Project Management', 'Social Media Manager', 'Graphic Design', 'Video Production & Editing'] },
  { name: 'Razif Hashim', desc: 'Shaping Brighter Futures, 15+ Years Specializing in Adolescent Therapy with Compassionate Care', skills: ['Project Management', 'Social Media Manager', 'Graphic Design', 'Video Production & Editing'] },
  { name: 'Nur Deena Syahirah', desc: 'Successfully managed social media campaigns for diverse clients, driving engagement and growth for 7 years', skills: ['Project Management', 'Social Media Manager', 'Graphic Design', 'Video Production & Editing'] },
  { name: 'Tauqeer Rafique', desc: 'Pioneering Fusion Cuisine, Featured Chef in 20+ International Food Magazines, a Taste Revolution', skills: ['Project Management', 'Social Media Manager', 'Graphic Design', 'Video Production & Editing'] },
  { name: 'Arron Kim', desc: 'Award-winning UX strategist specializing in accessible design across platforms for over 12 years', skills: ['UX Strategy', 'User Research', 'Accessibility'] },
  { name: 'Verona A. Rivera', desc: 'Masterful Biochemistry Researcher bringing Nature\'s Elixir to modern skincare formulations', skills: ['Research', 'Product Dev', 'Bio-chemistry'] },
  { name: 'Cynthia Malohtra', desc: 'Senior strategist, steering e-commerce businesses to profitability and market expansion across APAC', skills: ['E-commerce', 'Strategy', 'Market Analysis'] },
];

const HOME_EXPERTISE_DATA = [
  { title: 'Sustainability, driving soil health in agricultural settings', desc: 'Expert-led consulting on sustainable farming practices, soil analysis and ESG compliance frameworks.', skills: ['ESG', 'Agriculture'], price: 'from RM 4,500', rating: 4.9 },
  { title: 'Automating campaigns and market insights with AI', desc: 'Full-service digital marketing automation setup including analytics dashboards and ROI tracking.', skills: ['Marketing', 'AI/ML'], price: 'from RM 6,200', rating: 4.8 },
  { title: 'Laser safety, navigating with Harrison Merrie standards', desc: 'Comprehensive safety consulting for laser equipment compliance, training certifications and audits.', skills: ['Safety', 'Compliance'], price: 'from RM 3,800', rating: 5.0 },
];

const HOME_EXPERIENCE_TABS = ['Boards', 'Play', 'Trips', 'Creative'];

/* ======== PUBLIC HEADER (logged-in, Figma navbar) ======== */
const NAV_EXPERTS_MENU = [
  { label: 'Browse experts', to: '/web/experts' },
  { label: 'View expertise', to: '/web/expertise' },
];
const NAV_UPSKILL_MENU = [
  { label: 'Discover programmes', to: '/web/learning-paths' },
  { label: 'View courses', to: '/web/courses' },
  { label: 'Browse experiences', to: '/web/experiences' },
];
const NAV_SEARCH_ITEMS = [
  { label: 'View all Learning Pathways', to: '/web/learning-paths', icon: 'book', color: '#16a34a', bg: '#dcfce7', desc: 'Discover structured programmes combining courses, experiences, and expertise.' },
  { label: 'View all Courses', to: '/web/courses', icon: 'layers', color: '#ec4899', bg: '#fce7f3', desc: 'Browse courses to build new skills and knowledge.' },
  { label: 'View all Experts', to: '/web/experts', icon: 'user', color: '#06b6d4', bg: '#cffafe', desc: 'Schedule 1-on-1 sessions with skilled professionals' },
  { label: 'View all Expertise', to: '/web/expertise', icon: 'chat', color: '#2563eb', bg: '#dbeafe', desc: 'Browse services provided by one of our Experts' },
  { label: 'View all Jobs', to: '/web/jobs', icon: 'briefcase', color: '#9333ea', bg: '#f3e8ff', desc: 'View available jobs' },
  { label: 'View all Experiences', to: '/web/experiences', icon: 'calendar', color: '#f59e0b', bg: '#fef3c7', desc: 'Browse unique activities hosted by one of our Hubs' },
  { label: 'View all Hubs', to: '/web/hubs', icon: 'hub', color: '#db2777', bg: '#fce7f3', desc: 'Browse resources on offer in your community' },
];
const NAV_PROFILE_GROUPS = [
  [{ label: 'My Profile', to: '/app/community/member/faiz-fadhillah' }, { label: 'Saved', to: '/app/dashboard/favorites' }, { label: 'Settings', to: '/app/hub/settings/account' }],
  [{ label: 'Resources', to: '#' }, { label: 'Help Center', to: '#' }],
];

function NavSimpleMenu({ items, onClose, className = '' }) {
  return (
    <div className={`absolute top-[calc(100%+12px)] bg-white rounded-2xl border border-neutral-100 py-3 px-2 z-50 min-w-[230px] ${className}`}
         style={{ boxShadow: '0 16px 44px rgba(0,0,0,0.13)' }}>
      {items.map(m => (
        <Link key={m.label} to={m.to} onClick={onClose}
          className="block px-4 py-3 rounded-xl text-[17px] text-neutral-800 hover:bg-neutral-50 transition-colors" style={{ fontFamily: _la }}>
          {m.label}
        </Link>
      ))}
    </div>
  );
}

function NavSearchPanel({ onClose }) {
  return (
    <div className="absolute top-[calc(100%+10px)] left-1/2 -translate-x-1/2 w-full max-w-[420px] max-w-[92vw] bg-white rounded-[22px] border border-neutral-100 p-3 z-50"
         style={{ boxShadow: '0 20px 50px rgba(0,0,0,0.16)' }}>
      <div className="max-h-[70vh] overflow-y-auto scrollbar-thin pr-1">
        {NAV_SEARCH_ITEMS.map(it => (
          <Link key={it.label} to={it.to} onClick={onClose}
            className="flex items-start gap-4 p-3 rounded-2xl hover:bg-neutral-50 transition-colors">
            <span className="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center" style={{ background: it.bg, color: it.color }}>
              <Icon name={it.icon} size={22} />
            </span>
            <span className="min-w-0 pt-0.5">
              <span className="block text-[18px] font-bold text-neutral-900 leading-tight" style={{ fontFamily: _pp }}>{it.label}</span>
              <span className="block mt-1 text-[15px] text-neutral-500 leading-snug" style={{ fontFamily: _la }}>{it.desc}</span>
            </span>
          </Link>
        ))}
        <p className="px-3 pt-4 pb-2 text-[13px] font-bold tracking-[0.12em] text-neutral-400 uppercase" style={{ fontFamily: _la }}>Recently Viewed</p>
        <Link to="/web/experiences" onClick={onClose} className="flex items-center gap-4 p-3 rounded-2xl hover:bg-neutral-50 transition-colors">
          <span className="flex-shrink-0 w-12 h-12 rounded-xl bg-neutral-100 text-neutral-700 flex items-center justify-center"><Icon name="refresh" size={20} /></span>
          <span className="text-[17px] text-neutral-800" style={{ fontFamily: _la }}>[Experience/Expert/Expertise/Job/Hub]</span>
        </Link>
      </div>
    </div>
  );
}

function NavProfileMenu({ onClose }) {
  return (
    <div className="absolute top-[calc(100%+12px)] right-0 w-[260px] bg-white rounded-2xl border border-neutral-100 py-4 z-50"
         style={{ boxShadow: '0 18px 48px rgba(0,0,0,0.16)' }}>
      <div className="flex items-center gap-3 px-5 pb-3">
        <Avatar name="Faiz Fadhillah" size={48} />
        <div className="min-w-0">
          <p className="text-[18px] font-bold text-neutral-900 leading-tight" style={{ fontFamily: _pp }}>Faiz Fadhillah</p>
          <p className="text-[14px] text-neutral-400" style={{ fontFamily: _la }}>Personal</p>
        </div>
      </div>
      {NAV_PROFILE_GROUPS.map((group, gi) => (
        <div key={gi} className="py-2 border-t border-neutral-100">
          {group.map(m => (
            <Link key={m.label} to={m.to} onClick={onClose}
              className="block px-5 py-2 text-[18px] font-semibold text-neutral-900 hover:bg-neutral-50 transition-colors" style={{ fontFamily: _pp }}>
              {m.label}
            </Link>
          ))}
        </div>
      ))}
      <div className="py-2 border-t border-neutral-100">
        <p className="px-5 pt-1 pb-1 text-[12px] font-bold tracking-[0.1em] text-neutral-400 uppercase" style={{ fontFamily: _la }}>Switch Accounts</p>
        <Link to="#" onClick={onClose} className="flex items-center gap-2 px-5 py-2 text-[16px] text-neutral-800 hover:bg-neutral-50 transition-colors" style={{ fontFamily: _la }}>
          <Icon name="plus" size={17} className="text-neutral-700" /> Add Business Account
        </Link>
      </div>
      <div className="pt-2 border-t border-neutral-100">
        <button onClick={() => { onClose && onClose(); setAuth(false); navigate('/web'); }} className="block w-full text-left px-5 py-2 text-[18px] font-bold text-neutral-900 hover:bg-neutral-50 transition-colors" style={{ fontFamily: _pp }}>
          Log Out
        </button>
      </div>
    </div>
  );
}

function LoggedOutActions() {
  return (
    <div className="flex items-center gap-3">
      <button onClick={() => navigate('/app/login')}
        className="h-11 px-5 rounded-full text-[16px] font-semibold text-neutral-900 hover:bg-neutral-100 transition-colors" style={{ fontFamily: _la }}>
        Log in
      </button>
      <button onClick={() => navigate('/app/login')}
        className="h-11 px-6 rounded-full text-[16px] font-bold text-white bg-[#1a1623] hover:bg-black transition-colors" style={{ fontFamily: _la }}>
        Sign up
      </button>
    </div>
  );
}

function HomeHeader() {
  const [mobileOpen, setMobileOpen] = useState(false);
  const [openMenu, setOpenMenu] = useState(null);
  const headerRef = useRef(null);
  const path = _currentPath();
  const onAppPage = path.startsWith('/app/') && !path.startsWith('/app/login');
  const authed = useAuth();
  const toggle = (k) => setOpenMenu(o => o === k ? null : k);
  const close = () => setOpenMenu(null);

  useEffect(() => {
    if (!openMenu) return;
    const handler = (e) => {
      if (headerRef.current && !headerRef.current.contains(e.target)) setOpenMenu(null);
    };
    document.addEventListener('click', handler);
    return () => document.removeEventListener('click', handler);
  }, [openMenu]);

  const navBtn = (k, label) => (
    <button onClick={() => toggle(k)}
      className={`flex items-center gap-1.5 px-3.5 py-2 rounded-[20px] text-[17px] font-medium text-neutral-900 transition-colors ${openMenu === k ? 'bg-neutral-100' : 'hover:bg-neutral-100'}`}
      style={{ fontFamily: _la }}>
      {label}
      <Icon name="chevronDown" size={16} className={`text-neutral-900 transition-transform ${openMenu === k ? 'rotate-180' : ''}`} />
    </button>
  );

  return (
    <header ref={headerRef} className="sticky top-0 z-50 bg-white" style={{ boxShadow: '0 6px 16px rgba(0,0,0,0.06)' }}>
      <div className="max-w-[min(2560px,95vw)] mx-auto px-5 lg:px-6">
        <div className="flex items-center gap-4 h-20">
          {/* Left: logo + nav */}
          <Link to="/web" className="flex-shrink-0">
            <div style={{ height: 34 }}><MerekaLogo /></div>
          </Link>
          <nav className="hidden xl:flex items-center gap-1 ml-2">
            <div className="relative">
              {navBtn('experts', 'Find experts')}
              {openMenu === 'experts' && <NavSimpleMenu items={NAV_EXPERTS_MENU} onClose={close} className="left-0" />}
            </div>
            <div className="relative">
              {navBtn('upskill', 'Upskill')}
              {openMenu === 'upskill' && <NavSimpleMenu items={NAV_UPSKILL_MENU} onClose={close} className="left-0" />}
            </div>
            <Link to="/web/jobs" className="px-3.5 py-2 rounded-[20px] text-[17px] font-medium text-neutral-900 hover:bg-neutral-100 transition-colors" style={{ fontFamily: _la }}>Find gigs</Link>
            <Link to="/web/programs" className="px-3.5 py-2 rounded-[20px] text-[17px] font-medium text-neutral-900 hover:bg-neutral-100 transition-colors" style={{ fontFamily: _la }}>About Us</Link>
            <Link to="#" className="ml-1 inline-flex items-center gap-1.5 px-5 py-2.5 rounded-full bg-[#1a1623] text-[16px] font-semibold text-white hover:bg-black transition-colors" style={{ fontFamily: _la }}>
              Corporate <Icon name="arrowUpRight" size={16} className="text-white" />
            </Link>
          </nav>

          {/* Right: search + actions */}
          <div className="hidden lg:flex items-center gap-3 ml-auto">
            <div className="relative">
              <button onClick={() => toggle('search')}
                className={`h-11 w-[320px] pl-4 pr-4 rounded-full border flex items-center gap-3 transition-colors ${openMenu === 'search' ? 'border-neutral-400' : 'border-neutral-200 hover:border-neutral-300'}`}>
                <Icon name="search" size={20} className="text-neutral-900 flex-shrink-0" />
                <span className="text-[16px] text-neutral-400 whitespace-nowrap" style={{ fontFamily: _la }}>What are you looking for?</span>
              </button>
              {openMenu === 'search' && <NavSearchPanel onClose={close} />}
            </div>

            {authed ? (<React.Fragment>
{onAppPage ? (
              <Link to="/web"
                className="h-11 px-6 rounded-full inline-flex items-center gap-2 text-[16px] font-bold text-white bg-[#1a1623] hover:bg-black transition-colors"
                style={{ fontFamily: _la }}>
                Switch to User
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <path d="M21 12a9 9 0 0 1-15 6.7L3 16" />
                  <path d="M3 12a9 9 0 0 1 15-6.7L21 8" />
                  <polyline points="21 3 21 8 16 8" />
                  <polyline points="3 21 3 16 8 16" />
                </svg>
              </Link>
            ) : (
              <Link to="/app/dashboard/overview"
                className="h-11 px-6 rounded-full inline-flex items-center text-[16px] font-bold text-white transition-opacity hover:opacity-90"
                style={{ fontFamily: _la, background: 'linear-gradient(100deg, #f43f8e 0%, #f9a8d4 100%)' }}>
                My Dashboard
              </Link>
            )}

            <Link to="/app/dashboard/notifications" className="relative w-10 h-10 flex items-center justify-center rounded-full hover:bg-neutral-100 transition-colors">
              <Icon name="bell" size={24} className="text-neutral-900" />
              <span className="absolute top-1.5 right-1.5 w-2.5 h-2.5 rounded-full bg-blue-500 border-2 border-white" />
            </Link>
            <Link to="/app/dashboard/chats" className="relative w-10 h-10 flex items-center justify-center rounded-full hover:bg-neutral-100 transition-colors">
              <Icon name="mail" size={23} className="text-neutral-900" />
              <span className="absolute top-1.5 right-1.5 w-2.5 h-2.5 rounded-full bg-blue-500 border-2 border-white" />
            </Link>

            <div className="relative">
              <button onClick={() => toggle('profile')} className={`rounded-full transition-shadow ${openMenu === 'profile' ? 'ring-2 ring-neutral-900 ring-offset-2' : ''}`}>
                <Avatar name="Faiz Fadhillah" size={44} />
              </button>
              {openMenu === 'profile' && <NavProfileMenu onClose={close} />}
            </div>
            </React.Fragment>) : (
              <LoggedOutActions />
            )}
          </div>

          <button onClick={() => setMobileOpen(!mobileOpen)} className="xl:hidden p-2 ml-auto">
            <Icon name={mobileOpen ? 'close' : 'menu'} size={24} />
          </button>
        </div>

        {mobileOpen && (
          <div className="xl:hidden pb-4 space-y-1 border-t border-neutral-100 pt-3">
            <div className="h-11 px-4 rounded-full border border-neutral-200 flex items-center gap-2 mb-2 lg:hidden">
              <Icon name="search" size={18} className="text-neutral-700" />
              <span className="text-[15px] text-neutral-400" style={{ fontFamily: _la }}>What are you looking for?</span>
            </div>
            <p className="px-3 pt-2 text-xs font-bold uppercase tracking-wide text-neutral-400">Find experts</p>
            {NAV_EXPERTS_MENU.map(m => (
              <Link key={m.label} to={m.to} className="block px-3 py-2 text-[15px] text-neutral-700 hover:bg-neutral-50 rounded-lg" style={{ fontFamily: _la }}>{m.label}</Link>
            ))}
            <p className="px-3 pt-2 text-xs font-bold uppercase tracking-wide text-neutral-400">Upskill</p>
            {NAV_UPSKILL_MENU.map(m => (
              <Link key={m.label} to={m.to} className="block px-3 py-2 text-[15px] text-neutral-700 hover:bg-neutral-50 rounded-lg" style={{ fontFamily: _la }}>{m.label}</Link>
            ))}
            <Link to="/web/jobs" className="block px-3 py-2.5 text-base font-medium text-neutral-900 hover:bg-neutral-50 rounded-lg" style={{ fontFamily: _la }}>Find gigs</Link>
            <Link to="/web/programs" className="block px-3 py-2.5 text-base font-medium text-neutral-900 hover:bg-neutral-50 rounded-lg" style={{ fontFamily: _la }}>About Us</Link>
            <Link to="#" className="block px-3 py-2.5 text-base font-medium text-neutral-900 hover:bg-neutral-50 rounded-lg" style={{ fontFamily: _la }}>Corporate ↗</Link>
            <div className="pt-3 lg:hidden space-y-2">
              {!authed ? (
                <React.Fragment>
                  <Link to="/app/login" className="block text-center py-2.5 rounded-full text-base font-semibold text-neutral-900 border border-neutral-200" style={{ fontFamily: _la }}>Log in</Link>
                  <Link to="/app/login" className="block text-center py-2.5 rounded-full text-base font-bold text-white bg-[#1a1623]" style={{ fontFamily: _la }}>Sign up</Link>
                </React.Fragment>
              ) : onAppPage ? (
                <Link to="/web" className="block text-center py-2.5 rounded-full text-base font-bold text-white bg-[#1a1623]" style={{ fontFamily: _la }}>Switch to User</Link>
              ) : (
                <Link to="/app/dashboard/overview" className="block text-center py-2.5 rounded-full text-base font-bold text-white" style={{ fontFamily: _la, background: 'linear-gradient(100deg, #f43f8e 0%, #f9a8d4 100%)' }}>My Dashboard</Link>
              )}
            </div>
          </div>
        )}
      </div>
    </header>
  );
}

/* ======== HERO SECTION ======== */
function HomeHeroSection() {
  return (
    <section className="bg-white">
      <div className="max-w-[min(2560px,95vw)] mx-auto px-5 lg:px-20 py-10 lg:py-14">
        <div className="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-10 lg:gap-12">
          {/* Left text */}
          <div className="lg:w-[500px] flex-shrink-0">
            <h1 className="text-5xl lg:text-7xl font-bold leading-[1.1] lg:leading-[80px]" style={{ fontFamily: _pp }}>
              Book Leading{' '}
              <span style={_gradStyle}>Experts &amp; Services</span>
            </h1>
            <p className="mt-5 text-lg lg:text-xl text-neutral-900 leading-8" style={{ fontFamily: _pp, fontWeight: 400 }}>
              Mereka connects you to leading experts and services to solve your most pressing challenges.
              Gain insights from vetted professionals and organisations to work on your business, career, or personal well-being.
            </p>
            <p className="mt-4 text-sm" style={{ fontFamily: _la }}>
              Are you an expert?{' '}
              <Link to="/web/jobs" className="text-purple-600 font-medium hover:underline">Explore Job Opportunities</Link>
            </p>
          </div>

          {/* Right photo grid */}
          <div className="hidden md:flex items-center gap-6">
            <div className="flex flex-col items-end gap-6">
              <PhotoPlaceholder person="Aisha Rahman" seed={0} className="w-48 lg:w-60 h-48 lg:h-60" rounded="rounded-2xl" />
              <PhotoPlaceholder person="Marcus Ooi" seed={1} className="w-48 lg:w-60 h-48 lg:h-60" rounded="rounded-2xl" />
            </div>
            <div className="flex flex-col items-start gap-6">
              <PhotoPlaceholder person="Priya Naidu" seed={2} className="w-48 lg:w-60 h-48 lg:h-60" rounded="rounded-2xl" />
              <PhotoPlaceholder person="Daniel Lee" seed={3} className="w-48 lg:w-60 h-48 lg:h-60" rounded="rounded-2xl" />
              <PhotoPlaceholder person="Rafael Tan" seed={4} className="w-48 lg:w-60 h-48 lg:h-60" rounded="rounded-2xl" />
            </div>
          </div>
        </div>

        {/* Trusted by strip */}
        <div className="mt-12 lg:mt-20 flex items-center gap-6 lg:gap-10 flex-wrap">
          <span className="text-base text-neutral-900" style={{ fontFamily: _la }}>Trusted by:</span>
          {[53, 70, 54, 33, 53, 82].map((w, i) => (
            <div key={i} className="h-4 rounded bg-neutral-200" style={{ width: w }} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ======== BROWSE FEATURED EXPERTS ======== */
function HomeFeaturedExperts() {
  return (
    <section className="bg-[#f5f5f5] py-10 lg:py-16">
      <div className="max-w-[min(2560px,95vw)] mx-auto px-5 lg:px-20">
        <div className="flex items-end justify-between mb-8">
          <h2 className="text-3xl font-bold" style={{ fontFamily: _la }}>
            Browse Featured <AccentText cyan>Experts</AccentText>
          </h2>
          <Link to="/web/experts" className="hidden md:flex">
            <Button variant="dark" size="md" rightIcon="arrowRight">Browse all experts</Button>
          </Link>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {HOME_EXPERTS_DATA.map((expert, i) => (
            <HomeExpertCard key={expert.name} expert={expert} seed={i} />
          ))}
        </div>

        <div className="mt-6 flex justify-center md:hidden">
          <Link to="/web/experts"><Button variant="dark" size="lg" rightIcon="arrowRight">Browse all experts</Button></Link>
        </div>
      </div>
    </section>
  );
}

function HomeExpertCard({ expert, seed }) {
  return (
    <div className="flex flex-col gap-3 group cursor-pointer">
      <div className="relative">
        <PhotoPlaceholder person={expert.name} seed={seed} className="w-full h-64 lg:h-80" rounded="rounded-xl" />
        <HeartOverlay />
      </div>
      <div className="flex flex-col gap-1">
        <h3 className="text-base font-bold text-zinc-900" style={{ fontFamily: _la }}>{expert.name}</h3>
        <p className="text-base text-neutral-500 leading-6 line-clamp-3" style={{ fontFamily: _la }}>{expert.desc}</p>
      </div>
      <div className="flex flex-wrap items-center gap-1">
        {expert.skills.slice(0, 4).map(s => (
          <span key={s} className="px-3 py-1 bg-gray-200 rounded-[20px] text-xs text-neutral-800" style={{ fontFamily: _la }}>{s}</span>
        ))}
        {expert.skills.length > 4 && (
          <span className="text-xs text-zinc-900" style={{ fontFamily: _la }}>+ more</span>
        )}
      </div>
    </div>
  );
}

/* ======== ...OR BOOK THEIR EXPERTISE ======== */
function HomeBookExpertise() {
  return (
    <section className="bg-white py-10 lg:py-16">
      <div className="max-w-[min(2560px,95vw)] mx-auto px-5 lg:px-20">
        <h2 className="text-3xl font-bold mb-8" style={{ fontFamily: _la }}>
          ...or book their <AccentText italic>Expertise</AccentText>
        </h2>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
          {HOME_EXPERTISE_DATA.map((item, i) => (
            <div key={i} className="flex flex-col gap-3 cursor-pointer group">
              <PhotoPlaceholder seed={i + 5} className="w-full h-48 lg:h-56" rounded="rounded-xl" />
              <div>
                <h3 className="text-base font-bold text-zinc-900 group-hover:underline" style={{ fontFamily: _la }}>{item.title}</h3>
                <p className="mt-1 text-sm text-neutral-500 leading-5 line-clamp-2" style={{ fontFamily: _la }}>{item.desc}</p>
              </div>
              <div className="flex items-center gap-2">
                {item.skills.map(s => (
                  <span key={s} className="px-3 py-1 bg-gray-200 rounded-[20px] text-xs text-neutral-800" style={{ fontFamily: _la }}>{s}</span>
                ))}
              </div>
              <div className="flex items-center justify-between text-sm" style={{ fontFamily: _la }}>
                <div className="flex items-center gap-1">
                  <Icon name="star" size={14} fill="#18181b" strokeWidth={0} />
                  <span className="font-bold">{item.rating}</span>
                </div>
                <span className="font-bold">{item.price}</span>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-8 flex justify-center">
          <Link to="/web/expertise">
            <button className="h-10 px-6 rounded-full border border-zinc-900 text-sm font-bold text-zinc-900 hover:bg-zinc-900 hover:text-white transition-colors" style={{ fontFamily: _la }}>
              View all Expertise
            </button>
          </Link>
        </div>
      </div>
    </section>
  );
}

/* ======== DISCOVER EXPERIENCES ======== */
function HomeDiscoverExperiences() {
  const [activeTab, setActiveTab] = useState(HOME_EXPERIENCE_TABS[0]);

  return (
    <section className="bg-[#f5f5f5] py-10 lg:py-16">
      <div className="max-w-[min(2560px,95vw)] mx-auto px-5 lg:px-20">
        <h2 className="text-3xl font-bold mb-6" style={{ fontFamily: _la }}>
          Discover <AccentText italic>Experiences</AccentText>
        </h2>

        {/* Tabs */}
        <div className="flex items-center gap-2 mb-8 overflow-x-auto">
          {HOME_EXPERIENCE_TABS.map(tab => (
            <button key={tab} onClick={() => setActiveTab(tab)}
              className={`px-5 py-2 rounded-full text-sm font-medium border transition-colors whitespace-nowrap ${
                activeTab === tab
                  ? 'bg-zinc-900 text-white border-zinc-900'
                  : 'bg-white text-zinc-900 border-neutral-300 hover:border-zinc-900'
              }`} style={{ fontFamily: _la }}>
              {tab}
            </button>
          ))}
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {EXPERIENCES.slice(0, 4).map((exp, i) => (
            <Link key={exp.id} to={`/web/experiences/${exp.slug}`} className="flex flex-col gap-2 group cursor-pointer">
              <PhotoPlaceholder seed={i + 2} className="w-full h-40 lg:h-48" rounded="rounded-xl" />
              <h3 className="text-sm font-bold text-zinc-900 line-clamp-2 group-hover:underline" style={{ fontFamily: _la }}>{exp.title}</h3>
              <p className="text-xs text-neutral-500" style={{ fontFamily: _la }}>{exp.host}</p>
              <div className="flex items-center justify-between">
                <span className="text-sm font-bold text-zinc-900" style={{ fontFamily: _la }}>{exp.price}</span>
                <div className="flex items-center gap-1">
                  <Icon name="star" size={12} fill="#18181b" strokeWidth={0} />
                  <span className="text-xs font-bold">{exp.rating}</span>
                </div>
              </div>
            </Link>
          ))}
        </div>

        <div className="mt-8 flex justify-center">
          <Link to="/web/experiences">
            <button className="h-10 px-6 rounded-full border border-zinc-900 text-sm font-bold text-zinc-900 hover:bg-zinc-900 hover:text-white transition-colors" style={{ fontFamily: _la }}>
              View all Experiences
            </button>
          </Link>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  HomeHeader, HomeHeroSection, HomeFeaturedExperts, HomeBookExpertise,
  HomeDiscoverExperiences, AccentText, PhotoPlaceholder, HeartOverlay,
  _pp, _la, _gradStyle,
});