/* Mereka v2 - Homepage V2 part 2: Jobs, CTAs, Testimonials, Corporate, Footer */

/* ======== EXPLORE JOB OPPORTUNITIES ======== */
const HOME_JOBS_DATA = [
  {
    client: 'Deloitte', posted: '1 week ago', type: 'Freelance',
    title: 'Regulatory Reporting Expert, Transaction Reporting (HKTR and DSOL)',
    desc: 'Assist in preparing and analyzing transaction reports to ensure HKTR and DSOL compliance. Ideal for juniors in regulatory compliance and data analysis…',
    details: [
      ['Experience Level', 'Junior'],
      ['Location', 'Virtual'],
      ['Timeline', 'More than 6 months'],
      ['Starts', 'ASAP'],
      ['Budget', 'Fixed: MYR 500 - MYR 700'],
    ],
  },
  {
    client: 'Deloitte', posted: '1 week ago', type: 'Freelance',
    title: 'Regulatory Reporting Expert, Transaction Reporting (HKTR and DSOL)',
    desc: 'Assist in preparing and analyzing transaction reports to ensure HKTR and DSOL compliance. Ideal for juniors in regulatory compliance and data analysis…',
    details: [
      ['Experience Level', 'Junior'],
      ['Location', 'Virtual'],
      ['Timeline', 'More than 6 months'],
      ['Starts', 'ASAP'],
      ['Budget', 'Fixed: MYR 500 - MYR 700'],
    ],
  },
  {
    client: 'Deloitte', posted: '1 week ago', type: 'Freelance',
    title: 'Regulatory Reporting Expert, Transaction Reporting (HKTR and DSOL)',
    desc: 'Assist in preparing and analyzing transaction reports to ensure HKTR and DSOL compliance. Ideal for juniors in regulatory compliance and data analysis…',
    details: [
      ['Experience Level', 'Junior'],
      ['Location', 'Virtual'],
      ['Timeline', 'More than 6 months'],
      ['Starts', 'ASAP'],
      ['Budget', 'Fixed: MYR 500 - MYR 700'],
    ],
  },
];

function HomeExploreJobs() {
  return (
    <section className="bg-white 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-6 flex-wrap gap-3">
          <h2 className="text-3xl font-bold"><AccentText>Gigs</AccentText> Recently Listed on Mereka</h2>
          <Link to="/web/jobs"><button className="h-10 px-5 rounded-full bg-neutral-900 text-white text-sm font-semibold hover:bg-black">Browse all gigs</button></Link>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {HOME_JOBS_DATA.map((job, i) => (
            <div key={i} className="p-5 bg-white rounded-xl border border-neutral-200 flex flex-col gap-5">
              {/* Header */}
              <div className="flex justify-between items-start">
                <p className="text-sm">
                  <span className="text-zinc-900">Client: </span>
                  <span className="text-neutral-900 font-medium">{job.client}</span>
                </p>
                <span className="text-xs text-neutral-500">Posted {job.posted}</span>
              </div>

              {/* Content area */}
              <div className="pb-5 border-b border-neutral-200 flex flex-col gap-2">
                <span className="inline-block self-start px-2 py-0.5 bg-purple-600 rounded-md text-xs font-bold text-white uppercase tracking-wide">
                  {job.type}
                </span>
                <h3 className="text-base font-bold text-neutral-900 leading-6">{job.title}</h3>
                <p className="text-sm text-neutral-900 leading-5">{job.desc}</p>
              </div>

              {/* Details */}
              <div className="flex flex-col gap-2">
                {job.details.map(([label, value]) => (
                  <div key={label} className="flex justify-between items-start">
                    <span className="text-sm text-neutral-500">{label}</span>
                    <span className="text-sm font-bold text-neutral-900 text-right">{value}</span>
                  </div>
                ))}
              </div>

              {/* CTA button */}
              <Link to={'/web/jobs/j' + (i + 1)} className="block"><button className="w-full py-3 rounded-[40px] text-base font-bold text-white transition-opacity hover:opacity-90"
                style={{ background: 'linear-gradient(to right, #9333ea, #f472b6)' }}>
                Learn More &amp; Apply
              </button></Link>
            </div>
          ))}
        </div>

        <div className="mt-8 flex justify-center">
          <Link to="/web/jobs">
            <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">
              View All Jobs
            </button>
          </Link>
        </div>
      </div>
    </section>
  );
}

/* ======== LOOKING FOR EXPERTISE? CTA ======== */
function HomeMatchCTA() {
  return (
    <section className="bg-[#f5f5f5] py-16 lg:py-24">
      <div className="max-w-[700px] mx-auto px-5 text-center">
        <h2 className="text-3xl lg:text-4xl font-semibold leading-tight">
          Looking for Expertise? List a job and get matched to an Expert.
        </h2>

        <div className="mt-8 max-w-[480px] mx-auto">
          <div className="flex items-center h-12 bg-white rounded-full border border-neutral-200 px-4 gap-3">
            <input type="text" placeholder="Tell us..."
              className="flex-1 bg-transparent text-sm outline-none placeholder:text-neutral-400" />
            <button className="w-8 h-8 rounded-full flex items-center justify-center hover:bg-neutral-100 transition-colors">
              <Icon name="send" size={16} className="text-neutral-400" />
            </button>
          </div>
        </div>

        <p className="mt-4 text-sm">
          <span className="text-purple-600">Are you an Expert? </span>
          <Link to="/web/jobs" className="text-purple-600 underline font-medium">Explore Job Opportunities</Link>
        </p>
      </div>
    </section>
  );
}

/* ======== WHAT USERS HAVE TO SAY ======== */
function HomeTestimonials() {
  return (
    <section className="bg-zinc-900 py-14 lg:py-20">
      <div className="max-w-[min(2560px,95vw)] mx-auto px-5 lg:px-20">
        <h2 className="text-center text-3xl lg:text-4xl font-bold text-white mb-10">
          Trusted by Freelancers &amp; Businesses
        </h2>

        <div className="max-w-[800px] mx-auto">
          {/* Stars */}
          <div className="flex justify-center gap-1 mb-6">
            {[...Array(5)].map((_, i) => (
              <svg key={i} width="24" height="24" viewBox="0 0 24 24" fill="#facc15" stroke="none">
                <path d="m12 17.27 5.18 3.13-1.37-5.89L20.39 9l-6.06-.51L12 3 9.67 8.49 3.61 9l4.58 4.51-1.37 5.89L12 17.27Z" />
              </svg>
            ))}
          </div>

          {/* Quote */}
          <blockquote className="text-center text-lg lg:text-xl text-white leading-8 mb-6">
            "Mereka's milestone contract and payment feature helps me better manage my freelance finances.
            The whole platform feels curated, not transactional, and the quality of clients I've worked with
            has been consistently high."
          </blockquote>

          {/* Author */}
          <div className="flex flex-col items-center gap-2">
            <div className="flex items-center gap-2">
              <Avatar name="Faiz Fadhillah" size={24} />
              <span className="text-base font-bold text-white">Faiz Fadhillah</span>
            </div>
            <span className="text-base font-medium text-white/80">UX Designer</span>
          </div>

          {/* Results */}
          <div className="mt-10 pt-6 border-t border-white/20">
            <p className="text-xs font-black text-white/60 uppercase tracking-wider mb-3 text-center">Results</p>
            <div className="flex justify-center gap-10">
              <div className="text-center">
                <div className="text-xl font-bold text-white">USD 1,500</div>
                <div className="text-xs text-white/60">Earned with Mereka</div>
              </div>
              <div className="text-center">
                <div className="text-xl font-bold text-white">5 Orders</div>
                <div className="text-xs text-white/60">Average per week</div>
              </div>
            </div>
          </div>

          {/* Carousel dots */}
          <div className="mt-8 flex justify-center gap-3">
            <div className="w-3 h-3 bg-white rounded-full"></div>
            <div className="w-3 h-3 bg-white/20 rounded-full"></div>
            <div className="w-3 h-3 bg-white/20 rounded-full"></div>
            <div className="w-3 h-3 bg-white/20 rounded-full"></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ======== DON'T MISS OUT CTA ======== */
function HomeDontMissOut() {
  return (
    <section className="bg-white py-10 lg:py-16">
      <div className="max-w-[min(2560px,95vw)] mx-auto px-5 lg:px-20">
        <div className="flex flex-col lg:flex-row items-center gap-10 lg:gap-16">
          {/* Left image area */}
          <div className="w-full lg:w-1/2">
            <div className="w-full h-64 lg:h-96 rounded-2xl overflow-hidden" style={{
              background: 'linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%)',
            }}>
              <div className="w-full h-full flex items-center justify-center">
                <div className="text-center">
                  <div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-white/10 flex items-center justify-center">
                    <Icon name="spark" size={28} className="text-white/60" />
                  </div>
                  <span className="text-sm text-white/40 font-mono uppercase tracking-wider">community image</span>
                </div>
              </div>
            </div>
          </div>

          {/* Right text */}
          <div className="w-full lg:w-1/2">
            <h2 className="text-3xl lg:text-4xl font-bold leading-tight text-zinc-900">
              Don't miss out!<br />
              Join our marketplace and earn more.
            </h2>
            <p className="mt-4 text-base text-neutral-600 leading-7">
              Sign up now to connect to our pool of local experts and start
              generating revenue for a fee. Start freely showcasing your services,
              discovering learning resources powered by leading edtech platforms,
              skills, and more.
            </p>
            <div className="mt-6">
              <Link to="/app/login">
                <button className="h-12 px-8 bg-zinc-900 text-white rounded-xl text-base font-bold hover:bg-zinc-800 transition-colors">
                  Sign up
                </button>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ======== CORPORATE SOLUTIONS ======== */
function HomeCorporate() {
  return (
    <section className="bg-zinc-900 py-10 lg:py-10">
      <div className="max-w-[min(2560px,95vw)] mx-auto px-5 lg:px-20">
        <div className="relative p-10 lg:p-20 rounded-[40px] overflow-hidden" style={{
          background: 'linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #1e1b4b 100%)',
        }}>
          {/* Gradient orbs */}
          <div className="absolute -top-32 -right-32 w-[400px] h-[400px] rounded-full blur-[250px] bg-blue-600/40"></div>
          <div className="absolute -bottom-48 -left-32 w-full max-w-[500px] h-[500px] rounded-full blur-[250px] bg-cyan-400/20"></div>
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-[600px] h-[600px] rounded-full blur-[250px] bg-indigo-900/50"></div>

          <div className="relative text-center max-w-[853px] mx-auto">
            <h2 className="text-3xl lg:text-5xl font-semibold text-white leading-tight">
              Corporate Solutions
            </h2>
            <p className="mt-5 text-lg lg:text-xl text-white/80 leading-8" style={{ fontWeight: 400 }}>
              Need expertise with creating online courses or co-hosting events? Looking to fund impact programs? We've got you covered.
            </p>
            <div className="mt-6">
              <a href="#" className="inline-block px-9 py-3.5 bg-zinc-900 text-white text-lg rounded-[40px] hover:bg-zinc-800 transition-colors">
                Visit corporate.mereka.io
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ======== FOOTER ======== */
const FOOTER_TO = {
  'About':'/web/programs','Pedagogy':'/web/programs','Portfolio':'/web/programs','Team':'/web/programs','Careers':'/web/programs','Ecosystem':'/web/programs','Blog':'/web/programs','Help Center':'/web/programs',
  'Accelerate Talent':'/web/programs','Create Online Course':'/app/program/create/basic','Build a Makerspace':'/web/hubs',
  'Experiences':'/web/experiences','Experts':'/web/experts','Expertise':'/web/expertise','Hubs':'/web/hubs','Spaces':'/web/hubs',
  'Pricing':'/web/programs','Solutions':'/web/programs',
  'Future of Work':'/web/learning-paths','Become a Digital Entrepreneur':'/web/learning-paths','All Courses':'/web/courses',
  'Mereka @ Publika':'/web/hubs','Our Labs':'/web/hubs','Bespoke Design Services':'/web/expertise','Co-host Creative Events/Talks/Workshops':'/web/experiences',
};
function ftTo(l){ return FOOTER_TO[l] || '/web/programs'; }

function HomeFooter() {
  const footerNav = ['About', 'Pedagogy', 'Portfolio', 'Team', 'Careers', 'Ecosystem', 'Blog', 'Help Center'];
  const socialIcons = [
    { label: 'TikTok', path: 'M9 12a3 3 0 1 0 3 3V3c1 2 3.5 4 6 4' },
    { label: 'Instagram', path: 'M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m7.7 3a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10m0 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6' },
    { label: 'Facebook', path: 'M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z' },
    { label: 'LinkedIn', path: 'M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2zM4 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4z' },
    { label: 'YouTube', path: 'M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19.1c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.35 29 29 0 0 0-.46-5.33zM9.75 15.02V8.48l5.75 3.27-5.75 3.27z' },
  ];

  return (
    <footer className="bg-zinc-900">
      <div className="max-w-[min(2560px,95vw)] mx-auto px-5 lg:px-20 py-10 lg:py-14">
        {/* Top: Logo + social */}
        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-5 mb-7">
          <div style={{ height: 36 }}><MerekaLogo dark /></div>
          <div className="flex items-center gap-5">
            {socialIcons.map(icon => (
              <a key={icon.label} href="#" className="text-white hover:text-white/70 transition-colors" aria-label={icon.label}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d={icon.path} />
                </svg>
              </a>
            ))}
          </div>
        </div>

        {/* Nav row */}
        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-7">
          <div className="flex flex-wrap items-center gap-6 lg:gap-10">
            {footerNav.map(item => (
              <Link key={item} to={ftTo(item)} className="text-white text-lg lg:text-xl hover:text-white/70 transition-colors" style={{ fontWeight: 400 }}>
                {item}
              </Link>
            ))}
          </div>
          <Link to="/web/programs"><button className="self-start lg:self-auto h-12 px-9 bg-white text-zinc-900 rounded-[30px] text-lg lg:text-xl font-bold hover:bg-white/90 transition-colors">
            Contact us
          </button></Link>
        </div>

        {/* Divider */}
        <div className="border-t border-white/10 mb-7"></div>

        {/* Columns */}
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 py-5">
          {/* Corporate */}
          <div>
            <h4 className="text-white text-lg lg:text-xl font-semibold mb-5">Corporate</h4>
            <ul className="space-y-4">
              {['Accelerate Talent', 'Create Online Course', 'Build a Makerspace'].map(item => (
                <li key={item}><Link to={ftTo(item)} className="text-white text-base lg:text-lg hover:text-white/70">{item}</Link></li>
              ))}
            </ul>
          </div>

          {/* Marketplace */}
          <div className="col-span-2">
            <h4 className="text-white text-lg lg:text-xl font-semibold mb-5">Marketplace</h4>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
              <div>
                <p className="text-neutral-500 text-sm font-semibold uppercase tracking-wide mb-4">Users</p>
                <ul className="space-y-4">
                  {['Experiences', 'Experts', 'Expertise', 'Hubs', 'Spaces'].map(item => (
                    <li key={item}><Link to={ftTo(item)} className="text-white text-base lg:text-lg hover:text-white/70">{item}</Link></li>
                  ))}
                </ul>
              </div>
              <div>
                <p className="text-neutral-500 text-sm font-semibold uppercase tracking-wide mb-4">Businesses</p>
                <ul className="space-y-4">
                  {['Pricing', 'Solutions'].map(item => (
                    <li key={item}><Link to={ftTo(item)} className="text-white text-base lg:text-lg hover:text-white/70">{item}</Link></li>
                  ))}
                  <li>
                    <Link to="/app/dashboard/overview" className="text-white text-base lg:text-lg hover:text-white/70">Manage your bookings</Link>
                    <div className="flex gap-2 mt-2">
                      <div className="w-28 h-10 bg-zinc-800 rounded-lg flex items-center justify-center">
                        <span className="text-[11px] text-white/60 font-mono">App Store</span>
                      </div>
                      <div className="w-32 h-10 bg-zinc-800 rounded-lg flex items-center justify-center">
                        <span className="text-[11px] text-white/60 font-mono">Google Play</span>
                      </div>
                    </div>
                  </li>
                  <li>
                    <p className="text-white text-sm mb-2">What are you waiting for? Get on this!</p>
                    <Link to="/app/login"><button className="h-12 px-9 rounded-[30px] border border-white/30 text-white text-lg lg:text-xl font-bold hover:bg-white/10 transition-colors">
                      List your service now
                    </button></Link>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          {/* Academy */}
          <div>
            <h4 className="text-white text-lg lg:text-xl font-semibold mb-5">Academy</h4>
            <ul className="space-y-4">
              {['Future of Work', 'Become a Digital Entrepreneur', 'All Courses'].map(item => (
                <li key={item}><Link to={ftTo(item)} className="text-white text-base lg:text-lg hover:text-white/70">{item}</Link></li>
              ))}
            </ul>
          </div>

          {/* Space */}
          <div>
            <h4 className="text-white text-lg lg:text-xl font-semibold mb-5">Space</h4>
            <ul className="space-y-4">
              {['Mereka @ Publika', 'Our Labs', 'Bespoke Design Services', 'Co-host Creative Events/Talks/Workshops'].map(item => (
                <li key={item}><Link to={ftTo(item)} className="text-white text-base lg:text-lg hover:text-white/70">{item}</Link></li>
              ))}
            </ul>
          </div>
        </div>

        {/* Divider */}
        <div className="border-t border-white/10 my-7"></div>

        {/* Bottom row */}
        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
          <div className="flex flex-wrap items-center gap-6 lg:gap-10">
            <span className="text-white text-sm font-semibold uppercase">© 2024 Mereka</span>
            <Link to="/web/programs" className="text-white text-sm font-semibold uppercase hover:text-white/70">Terms of Use</Link>
            <Link to="/web/programs" className="text-white text-sm font-semibold uppercase hover:text-white/70">Privacy Policy</Link>
            <Link to="/web/programs" className="text-white text-sm font-semibold uppercase hover:text-white/70">Cookies Policy</Link>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-white text-sm font-semibold uppercase">MYR - RM</span>
            <Icon name="chevronDown" size={16} className="text-white" />
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ======== MAIN HOMEPAGE COMPONENT ======== */
const HOME_SERVICES = [
  { t: 'Website Development', img: '/home/svc-1.jpg' },
  { t: 'Logo & Branding', img: '/home/svc-2.jpg' },
  { t: 'Content Writing', img: '/home/svc-3.jpg' },
  { t: 'Social Media Marketing', img: '/home/svc-4.jpg' },
  { t: 'Voice Over', img: '/home/svc-5.jpg' },
  { t: 'Interior Design & Architecture', img: '/home/svc-6.jpg' },
  { t: 'Data Science & ML', img: '/home/svc-7.jpg' },
];
function HomePopularServices() {
  return (
    <section className="bg-white py-8 lg:py-12">
      <div className="max-w-[min(1440px,95vw)] mx-auto px-5 lg:px-16">
        <h2 className="text-2xl lg:text-3xl font-bold text-neutral-900 mb-6" style={{ fontFamily: _pp }}>Popular Services</h2>
        <div className="flex gap-4 overflow-x-auto scrollbar-thin pb-2 -mx-1 px-1">
          {HOME_SERVICES.map(s => (
            <Link key={s.t} to="/web/experts" className="flex-shrink-0 w-[190px] bg-neutral-900 rounded-2xl p-4 hover:opacity-95 transition-opacity">
              <h3 className="text-white font-bold text-[15px] leading-snug mb-3 min-h-[42px]" style={{ fontFamily: _la }}>{s.t}</h3>
              <img src={s.img} alt="" loading="lazy" className="w-full aspect-square object-cover rounded-xl" />
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeForTalent() {
  const items = [
    ['Only pay us when you earn!', 'Create a FREE account and start listing your services.'],
    ['Browse and apply to open gigs', 'Find remote work and apply for short-term contract work.'],
    ['Create consultation slots', 'Setup workshops, mentorship programmes and online lessons.'],
  ];
  return (
    <section className="bg-white py-8 lg:py-12">
      <div className="max-w-[min(1440px,95vw)] mx-auto px-5 lg:px-16">
        <div className="rounded-3xl p-8 lg:p-14 grid lg:grid-cols-2 gap-10 items-center" style={{ background: 'linear-gradient(120deg, #e9e6ff, #eef1ff)' }}>
          <div>
            <p className="text-sm font-semibold text-teal-600 mb-3" style={{ fontFamily: _la }}>For Talent</p>
            <h2 className="text-4xl lg:text-5xl font-bold text-neutral-900 leading-tight" style={{ fontFamily: _pp }}>Looking to earn more from your expertise?</h2>
            <div className="mt-7 space-y-5">
              {items.map(([t, d]) => (
                <div key={t} className="flex items-start gap-3">
                  <span className="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center flex-shrink-0 mt-0.5"><Icon name="check" size={14} strokeWidth={3} className="text-white" /></span>
                  <div><p className="font-bold text-neutral-900" style={{ fontFamily: _la }}>{t}</p><p className="text-sm text-neutral-600 mt-0.5" style={{ fontFamily: _la }}>{d}</p></div>
                </div>
              ))}
            </div>
            <div className="mt-8 flex items-center gap-3 flex-wrap">
              <Link to="/app/login"><button className="h-11 px-6 rounded-full bg-neutral-900 text-white text-sm font-semibold hover:bg-black">Sign up for FREE</button></Link>
              <Link to="/web/experts"><button className="h-11 px-6 rounded-full border border-neutral-400 text-sm font-semibold text-neutral-800 hover:bg-white/50">Learn how to earn</button></Link>
            </div>
          </div>
          <div><img src="/home/fortalent.jpg" alt="" loading="lazy" className="w-full rounded-2xl" /></div>
        </div>
      </div>
    </section>
  );
}

function HomeUpskill() {
  return (
    <section className="bg-white py-8 lg:py-12">
      <div className="max-w-[min(1440px,95vw)] mx-auto px-5 lg:px-16">
        <div className="rounded-3xl p-8 lg:p-14 grid lg:grid-cols-2 gap-10 items-center" style={{ background: 'linear-gradient(120deg, #fdf1e3, #fbe8c8)' }}>
          <div className="flex items-end gap-5 justify-center">
            <img src="/home/upskill-a.jpg" alt="" loading="lazy" className="w-[46%] rounded-2xl shadow-xl" />
            <img src="/home/upskill-b.jpg" alt="" loading="lazy" className="w-[52%] rounded-2xl shadow-xl" />
          </div>
          <div>
            <div className="flex items-center gap-2 mb-4"><span className="text-sm font-semibold text-neutral-700" style={{ fontFamily: _la }}>Upskill with</span><div style={{ height: 22 }}><MerekaLogo /></div></div>
            <h2 className="text-4xl lg:text-5xl font-bold text-neutral-900 leading-tight" style={{ fontFamily: _pp }}>On-demand courses, &amp; experiences hosted by experts.</h2>
            <p className="mt-4 text-lg text-neutral-600" style={{ fontFamily: _la }}>Discover courses, certifications and experiences on in-demand skills for you and your team.</p>
            <div className="mt-6 flex items-center gap-3">
              <Link to="/web/courses"><button className="h-11 px-7 rounded-full border border-neutral-400 text-sm font-semibold text-neutral-800 hover:bg-white/50">Courses</button></Link>
              <Link to="/web/experiences"><button className="h-11 px-7 rounded-full border border-neutral-400 text-sm font-semibold text-neutral-800 hover:bg-white/50">Experiences</button></Link>
            </div>
            <div className="mt-8 flex items-center gap-4 flex-wrap"><span className="text-sm text-neutral-500" style={{ fontFamily: _la }}>Accredited by</span>{['Google', 'Microsoft', 'PayPal'].map(l => <span key={l} className="text-[15px] font-bold text-neutral-500" style={{ fontFamily: 'Georgia, serif' }}>{l}</span>)}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeForClients() {
  const cards = [
    { t: 'Post a gig and hire for your project', sub: 'REKA.ai', to: '/web/jobs', gradient: true },
    { t: 'Browse and buy Services', sub: 'Service Listings', to: '/web/expertise', gradient: false },
    { t: 'Get advice from Experts', sub: 'Advisory Services', to: '/web/experts', gradient: false },
  ];
  return (
    <section className="bg-white py-8 lg:py-12">
      <div className="max-w-[min(1440px,95vw)] mx-auto px-5 lg:px-16">
        <div className="rounded-3xl p-8 lg:p-14" style={{ background: 'linear-gradient(120deg, #f3ecff, #f7f0ff)' }}>
          <p className="text-sm font-semibold text-purple-600 mb-3" style={{ fontFamily: _la }}>For Clients</p>
          <h2 className="text-4xl lg:text-5xl font-bold text-neutral-900 leading-tight" style={{ fontFamily: _pp }}>Find experts your way!</h2>
          <p className="mt-4 text-lg text-neutral-600 max-w-md" style={{ fontFamily: _la }}>Work with our network of independent professionals and get work done—from quick turnarounds to big transformations.</p>
          <div className="mt-8 grid md:grid-cols-3 gap-5">
            {cards.map(c => (
              <Link key={c.t} to={c.to} className="rounded-2xl p-6 h-40 flex flex-col justify-between text-white hover:opacity-95 transition-opacity" style={c.gradient ? { background: 'linear-gradient(120deg, #a855f7, #ec4899)' } : { background: '#1a1623' }}>
                <h3 className="text-xl font-bold leading-snug" style={{ fontFamily: _pp }}>{c.t}</h3>
                <div className="flex items-center justify-between"><span className="text-sm font-semibold inline-flex items-center gap-1" style={{ fontFamily: _la }}>{c.sub}{c.gradient && <Icon name="spark" size={14} />}</span><Icon name="arrowRight" size={20} /></div>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function WebHomePage() {
  return (
    <div className="min-h-screen flex flex-col bg-white">
      <HomeHeader />
      <main className="flex-1">
        <HomeHeroSection />
        <HomePopularServices />
        <HomeForTalent />
        <HomeUpskill />
        <HomeFeaturedExperts />
        <HomeMatchCTA />
        <HomeForClients />
        <HomeTestimonials />
        <HomeExploreJobs />
        <HomeCorporate />
      </main>
      <HomeFooter />
    </div>
  );
}

Object.assign(window, {
  HomeExploreJobs, HomeMatchCTA, HomeTestimonials,
  HomeDontMissOut, HomeCorporate, HomeFooter, WebHomePage,
  HomePopularServices, HomeForTalent, HomeUpskill, HomeForClients,
});