/* 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">
        <h2 className="text-3xl font-bold mb-6" style={{ fontFamily: _la }}>
          Explore <AccentText italic>Job Opportunities</AccentText>
        </h2>

        <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" style={{ fontFamily: _la }}>
                  <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" style={{ fontFamily: _la }}>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" style={{ fontFamily: _la }}>
                  {job.type}
                </span>
                <h3 className="text-base font-bold text-neutral-900 leading-6" style={{ fontFamily: _la }}>{job.title}</h3>
                <p className="text-sm text-neutral-900 leading-5" style={{ fontFamily: _la }}>{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" style={{ fontFamily: _la }}>{label}</span>
                    <span className="text-sm font-bold text-neutral-900 text-right" style={{ fontFamily: _la }}>{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={{ fontFamily: _la, 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" style={{ fontFamily: _la }}>
              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" style={{ fontFamily: _pp }}>
          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"
              style={{ fontFamily: _la }} />
            <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" style={{ fontFamily: _la }}>
          <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" style={{ fontFamily: _la }}>
          What users have to say
        </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" style={{ fontFamily: _la }}>
            "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" style={{ fontFamily: _la }}>Faiz Fadhillah</span>
            </div>
            <span className="text-base font-medium text-white/80" style={{ fontFamily: _la }}>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" style={{ fontFamily: _la }}>Results</p>
            <div className="flex justify-center gap-10">
              <div className="text-center">
                <div className="text-xl font-bold text-white" style={{ fontFamily: _la }}>USD 1,500</div>
                <div className="text-xs text-white/60" style={{ fontFamily: _la }}>Earned with Mereka</div>
              </div>
              <div className="text-center">
                <div className="text-xl font-bold text-white" style={{ fontFamily: _la }}>5 Orders</div>
                <div className="text-xs text-white/60" style={{ fontFamily: _la }}>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" style={{ fontFamily: _la }}>
              Don't miss out!<br />
              Join our marketplace and earn more.
            </h2>
            <p className="mt-4 text-base text-neutral-600 leading-7" style={{ fontFamily: _la }}>
              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" style={{ fontFamily: _la }}>
                  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" style={{ fontFamily: _pp }}>
              Corporate Solutions
            </h2>
            <p className="mt-5 text-lg lg:text-xl text-white/80 leading-8" style={{ fontFamily: _pp, 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" style={{ fontFamily: _pp }}>
                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={{ fontFamily: _la, 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" style={{ fontFamily: _la }}>
            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" style={{ fontFamily: _pp }}>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" style={{ fontFamily: _la }}>{item}</Link></li>
              ))}
            </ul>
          </div>

          {/* Marketplace */}
          <div className="col-span-2">
            <h4 className="text-white text-lg lg:text-xl font-semibold mb-5" style={{ fontFamily: _pp }}>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" style={{ fontFamily: _pp }}>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" style={{ fontFamily: _la }}>{item}</Link></li>
                  ))}
                </ul>
              </div>
              <div>
                <p className="text-neutral-500 text-sm font-semibold uppercase tracking-wide mb-4" style={{ fontFamily: _pp }}>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" style={{ fontFamily: _la }}>{item}</Link></li>
                  ))}
                  <li>
                    <Link to="/app/dashboard/overview" className="text-white text-base lg:text-lg hover:text-white/70" style={{ fontFamily: _la }}>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" style={{ fontFamily: _la }}>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" style={{ fontFamily: _la }}>
                      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" style={{ fontFamily: _pp }}>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" style={{ fontFamily: _la }}>{item}</Link></li>
              ))}
            </ul>
          </div>

          {/* Space */}
          <div>
            <h4 className="text-white text-lg lg:text-xl font-semibold mb-5" style={{ fontFamily: _pp }}>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" style={{ fontFamily: _la }}>{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" style={{ fontFamily: _pp }}>© 2024 Mereka</span>
            <Link to="/web/programs" className="text-white text-sm font-semibold uppercase hover:text-white/70" style={{ fontFamily: _pp }}>Terms of Use</Link>
            <Link to="/web/programs" className="text-white text-sm font-semibold uppercase hover:text-white/70" style={{ fontFamily: _pp }}>Privacy Policy</Link>
            <Link to="/web/programs" className="text-white text-sm font-semibold uppercase hover:text-white/70" style={{ fontFamily: _pp }}>Cookies Policy</Link>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-white text-sm font-semibold uppercase" style={{ fontFamily: _pp }}>MYR - RM</span>
            <Icon name="chevronDown" size={16} className="text-white" />
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ======== MAIN HOMEPAGE COMPONENT ======== */
function WebHomePage() {
  return (
    <div className="min-h-screen flex flex-col bg-white" style={{ fontFamily: _la }}>
      <HomeHeader />
      <main className="flex-1">
        <HomeHeroSection />
        <HomeFeaturedExperts />
        <HomeBookExpertise />
        <HomeDiscoverExperiences />
        <HomeExploreJobs />
        <HomeMatchCTA />
        <HomeTestimonials />
        <HomeDontMissOut />
        <HomeCorporate />
      </main>
      <HomeFooter />
    </div>
  );
}

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