import React, { ReactElement } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import {
  mdiVideo,
  mdiRocketLaunch,
  mdiWeb,
  mdiApplicationBraces,
  mdiPalette,
  mdiBrush,
  mdiAccountGroup,
  mdiCheckCircle
} from '@mdi/js';
import BaseIcon from '../components/BaseIcon';
import BaseButton from '../components/BaseButton';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle, appTitle } from '../config';

const services = [
  { name: 'Video Editing', icon: mdiVideo, desc: 'Professional editing for your vlogs, ads, and social media.' },
  { name: 'App Deployment', icon: mdiApplicationBraces, desc: 'Launching your mobile apps to iOS and Android stores.' },
  { name: 'Algorithm Deployment', icon: mdiRocketLaunch, desc: 'Deploying complex ML models and algorithms to production.' },
  { name: 'Website Deployment', icon: mdiWeb, desc: 'Modern hosting and deployment for your web applications.' },
  { name: 'Logo Design', icon: mdiBrush, desc: 'Unique branding and visual identity for your business.' },
  { name: 'Photo Editing', icon: mdiPalette, desc: 'High-end retouching and graphic design services.' },
  { name: 'Account Management', icon: mdiAccountGroup, desc: 'Handling your social media and business accounts professionally.' },
];

export default function LandingPage() {
  return (
    <div className="bg-slate-50 min-h-screen font-sans text-slate-900">
      <Head>
        <title>{getPageTitle('Home')}</title>
      </Head>

      {/* Hero Section */}
      <section className="relative overflow-hidden bg-white py-20 px-6 sm:py-32 lg:px-8">
        <div className="mx-auto max-w-7xl">
          <div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20 items-center">
            <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6">
              <h1 className="text-4xl font-bold tracking-tight text-slate-900 sm:text-6xl mb-6">
                Where Student Talent Meets <span className="text-indigo-600">Freelance Fusion</span>.
              </h1>
              <p className="mt-6 text-lg leading-8 text-slate-600">
                The ultimate workspace for students to find part-time jobs and for customers to hire top-tier, affordable talent. From video editing to app deployment, we bridge the gap.
              </p>
              <div className="mt-10 flex flex-wrap items-center gap-x-6 gap-y-4">
                <BaseButton
                  href="/register"
                  label="Join as a Student"
                  color="info"
                  className="px-8 py-3 rounded-full text-lg shadow-lg hover:shadow-indigo-200"
                />
                <BaseButton
                  href="/register"
                  label="Hire a Freelancer"
                  color="white"
                  className="px-8 py-3 rounded-full border-2 border-slate-200 text-lg hover:bg-slate-50"
                />
              </div>
            </div>
            <div className="mt-20 lg:mt-0 lg:col-span-5 hidden lg:block">
              <div className="relative h-96 w-full rounded-2xl bg-indigo-50 flex items-center justify-center p-12 overflow-hidden">
                <div className="absolute top-0 right-0 w-64 h-64 bg-indigo-100 rounded-full -mr-20 -mt-20 blur-3xl opacity-60"></div>
                <div className="absolute bottom-0 left-0 w-48 h-48 bg-pink-100 rounded-full -ml-10 -mb-10 blur-3xl opacity-60"></div>
                <div className="relative grid grid-cols-2 gap-4">
                   {services.slice(0, 4).map((s, i) => (
                     <div key={i} className="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex flex-col items-center">
                       <BaseIcon path={s.icon} size={32} className="text-indigo-600 mb-2" />
                       <span className="text-xs font-semibold text-slate-500 uppercase tracking-wider">{s.name}</span>
                     </div>
                   ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section className="py-24 bg-slate-50 px-6">
        <div className="mx-auto max-w-7xl">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold text-slate-900 sm:text-4xl mb-4">Top Freelance Services</h2>
            <p className="text-slate-600 max-w-2xl mx-auto">Specialized talent for modern projects. Delivered by students, optimized for quality and cost.</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {services.map((service, idx) => (
              <div key={idx} className="bg-white p-8 rounded-2xl border border-slate-100 shadow-sm transition-all hover:shadow-md hover:-translate-y-1">
                <div className="inline-flex items-center justify-center w-12 h-12 rounded-lg bg-indigo-50 text-indigo-600 mb-6">
                  <BaseIcon path={service.icon} size={24} />
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-3">{service.name}</h3>
                <p className="text-slate-600 leading-relaxed">{service.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Bridge/How it Works Section */}
      <section className="py-24 bg-white px-6">
        <div className="mx-auto max-w-7xl">
          <div className="lg:grid lg:grid-cols-2 lg:gap-16 items-center">
            <div>
              <h2 className="text-3xl font-bold text-slate-900 mb-8 leading-tight">Bridging the Gap Between Skill and Demand.</h2>
              <div className="space-y-8">
                <div className="flex gap-4">
                  <div className="flex-shrink-0 mt-1">
                    <BaseIcon path={mdiCheckCircle} size={24} className="text-green-500" />
                  </div>
                  <div>
                    <h4 className="text-lg font-bold text-slate-900 mb-1">Empowering Students</h4>
                    <p className="text-slate-600 italic">&quot;Charge for your talent and become self-independent.&quot;</p>
                    <p className="text-slate-600 mt-2">Find part-time work that fits your school or college schedule.</p>
                  </div>
                </div>
                <div className="flex gap-4">
                  <div className="flex-shrink-0 mt-1">
                    <BaseIcon path={mdiCheckCircle} size={24} className="text-green-500" />
                  </div>
                  <div>
                    <h4 className="text-lg font-bold text-slate-900 mb-1">Value for Customers</h4>
                    <p className="text-slate-600 mt-2">Get high-quality work done at a competitive rate by motivated student professionals.</p>
                  </div>
                </div>
                <div className="flex gap-4">
                  <div className="flex-shrink-0 mt-1">
                    <BaseIcon path={mdiCheckCircle} size={24} className="text-green-500" />
                  </div>
                  <div>
                    <h4 className="text-lg font-bold text-slate-900 mb-1">Sustainable Growth</h4>
                    <p className="text-slate-600 mt-2">Modest fees of 1% for customers and 0.5% for freelancers ensure continuous app improvements.</p>
                  </div>
                </div>
              </div>
            </div>
            <div className="mt-12 lg:mt-0 p-8 bg-indigo-600 rounded-3xl text-white">
              <h3 className="text-2xl font-bold mb-6">Ready to join {appTitle}?</h3>
              <p className="mb-8 text-indigo-100">Sign in now and start your journey towards financial independence or find the talent you&apos;ve been looking for.</p>
              <div className="space-y-4">
                <BaseButton
                  href="/register"
                  label="Create Account"
                  color="white"
                  className="w-full py-4 text-indigo-600 font-bold"
                />
                <Link href="/login" className="block text-center text-sm font-semibold hover:text-indigo-200 transition-colors">
                  Already have an account? Login here.
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-900 text-slate-400 py-12 px-6">
        <div className="mx-auto max-w-7xl flex flex-col md:flex-row justify-between items-center gap-6 border-t border-slate-800 pt-12">
          <div className="text-xl font-bold text-white tracking-tight">{appTitle}</div>
          <div className="flex gap-8 text-sm font-semibold">
            <Link href="/privacy-policy/" className="hover:text-white transition-colors">Privacy Policy</Link>
            <Link href="/terms-of-use/" className="hover:text-white transition-colors">Terms of Use</Link>
            <Link href="/login" className="hover:text-white transition-colors">Admin Login</Link>
          </div>
          <div className="text-sm">
            © 2026 {appTitle}. Empowering the next generation of professionals.
          </div>
        </div>
      </footer>
    </div>
  );
}

LandingPage.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};
