import React from 'react';
import type { ReactElement } from 'react';
import NextHead from 'next/head';
import { 
  mdiShieldCheck, 
  mdiTools, 
  mdiFlash, 
  mdiInformationOutline,
  mdiBriefcaseAccountOutline,
  mdiAccountGroupOutline
} from '@mdi/js';
import BaseIcon from '../../components/BaseIcon';
import LayoutGuest from '../../layouts/Guest';
import { getPageTitle } from '../../config';

export default function AboutPage() {
  const projectName = 'Fix-It-Local';

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900">
      <NextHead>
        <title>{getPageTitle('About Us')}</title>
        <meta name="description" content={`Learn more about ${projectName} and how we help businesses and customers connect.`} />
      </NextHead>

      {/* Hero Section */}
      <section className="bg-slate-900 text-white py-20 lg:py-32 relative overflow-hidden">
        <div className="absolute inset-0 opacity-10">
          <div className="absolute top-0 -left-4 w-96 h-96 bg-emerald-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
          <div className="absolute bottom-0 -right-4 w-96 h-96 bg-blue-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000"></div>
        </div>
        <div className="container mx-auto px-6 relative z-10 text-center">
          <h1 className="text-4xl lg:text-6xl font-bold mb-6">Connecting Local Communities</h1>
          <p className="text-xl text-slate-400 max-w-3xl mx-auto leading-relaxed">
            {projectName} is a modern service directory built on trust, transparency, and AI-powered efficiency. We bridge the gap between quality service professionals and the customers who need them.
          </p>
        </div>
      </section>

      {/* Our Mission */}
      <section className="py-24 container mx-auto px-6 max-w-5xl">
        <div className="grid md:grid-cols-2 gap-16 items-center">
          <div>
            <div className="inline-flex items-center px-4 py-2 rounded-full bg-emerald-100 text-emerald-700 text-sm font-semibold mb-6">
              <BaseIcon path={mdiInformationOutline} size={18} className="mr-2" />
              Our Mission
            </div>
            <h2 className="text-3xl lg:text-4xl font-bold mb-6 text-slate-900 leading-tight">Empowering Quality Businesses & Serving Homeowners</h2>
            <p className="text-lg text-slate-600 mb-6 leading-relaxed">
              We started {projectName} because we saw how difficult it was for homeowners to find reliable, verified help, and how hard it was for skilled professionals to stand out in a sea of unverified listings.
            </p>
            <p className="text-lg text-slate-600 leading-relaxed">
              Our platform uses advanced verification evidence and AI-driven matching to ensure that every connection made is based on quality, reliability, and fair pricing.
            </p>
          </div>
          <div className="bg-white p-8 rounded-3xl shadow-xl border border-slate-100 relative">
             <div className="absolute -top-6 -right-6 w-24 h-24 bg-emerald-500 rounded-2xl flex items-center justify-center shadow-lg transform rotate-12">
                <BaseIcon path={mdiShieldCheck} size={48} className="text-white" />
             </div>
             <div className="space-y-6">
                <div className="flex items-start">
                   <div className="bg-emerald-50 p-3 rounded-xl mr-4">
                      <BaseIcon path={mdiShieldCheck} size={24} className="text-emerald-500" />
                   </div>
                   <div>
                      <h4 className="font-bold text-slate-900 mb-1">Trust First</h4>
                      <p className="text-slate-500 text-sm">Every business is verified with real evidence.</p>
                   </div>
                </div>
                <div className="flex items-start">
                   <div className="bg-blue-50 p-3 rounded-xl mr-4">
                      <BaseIcon path={mdiFlash} size={24} className="text-blue-500" />
                   </div>
                   <div>
                      <h4 className="font-bold text-slate-900 mb-1">AI Efficiency</h4>
                      <p className="text-slate-500 text-sm">Find the right pro in seconds, not hours.</p>
                   </div>
                </div>
                <div className="flex items-start">
                   <div className="bg-purple-50 p-3 rounded-xl mr-4">
                      <BaseIcon path={mdiTools} size={24} className="text-purple-500" />
                   </div>
                   <div>
                      <h4 className="font-bold text-slate-900 mb-1">Quality Guaranteed</h4>
                      <p className="text-slate-500 text-sm">Focusing on high-rated local professionals.</p>
                   </div>
                </div>
             </div>
          </div>
        </div>
      </section>

      {/* How We Help */}
      <section className="py-24 bg-slate-100">
         <div className="container mx-auto px-6">
            <h2 className="text-3xl lg:text-5xl font-bold text-center mb-16">How We Help</h2>
            <div className="grid md:grid-cols-2 gap-12 max-w-6xl mx-auto">
               {/* For Businesses */}
               <div className="bg-white p-12 rounded-[2rem] shadow-sm border border-slate-200">
                  <div className="w-16 h-16 bg-blue-500 rounded-2xl flex items-center justify-center mb-8 shadow-lg shadow-blue-500/20">
                     <BaseIcon path={mdiBriefcaseAccountOutline} size={32} className="text-white" />
                  </div>
                  <h3 className="text-3xl font-bold mb-6 text-slate-900">For Businesses</h3>
                  <ul className="space-y-4 mb-8">
                     <li className="flex items-center text-slate-600">
                        <BaseIcon path={mdiShieldCheck} size={20} className="text-blue-500 mr-3 shrink-0" />
                        Build trust with verified badges
                     </li>
                     <li className="flex items-center text-slate-600">
                        <BaseIcon path={mdiShieldCheck} size={20} className="text-blue-500 mr-3 shrink-0" />
                        Receive high-quality, matched leads
                     </li>
                     <li className="flex items-center text-slate-600">
                        <BaseIcon path={mdiShieldCheck} size={20} className="text-blue-500 mr-3 shrink-0" />
                        Showcase reviews and past work
                     </li>
                     <li className="flex items-center text-slate-600">
                        <BaseIcon path={mdiShieldCheck} size={20} className="text-blue-500 mr-3 shrink-0" />
                        No lead-spam or irrelevant requests
                     </li>
                  </ul>
                  <p className="text-slate-500 italic border-t border-slate-100 pt-6">
                    &quot;We help local professionals focus on what they do best, while we handle the discovery and matching.&quot;
                  </p>
               </div>

               {/* For Customers */}
               <div className="bg-white p-12 rounded-[2rem] shadow-sm border border-slate-200">
                  <div className="w-16 h-16 bg-emerald-500 rounded-2xl flex items-center justify-center mb-8 shadow-lg shadow-emerald-500/20">
                     <BaseIcon path={mdiAccountGroupOutline} size={32} className="text-white" />
                  </div>
                  <h3 className="text-3xl font-bold mb-6 text-slate-900">For Customers</h3>
                  <ul className="space-y-4 mb-8">
                     <li className="flex items-center text-slate-600">
                        <BaseIcon path={mdiShieldCheck} size={20} className="text-emerald-500 mr-3 shrink-0" />
                        Find verified, background-checked pros
                     </li>
                     <li className="flex items-center text-slate-600">
                        <BaseIcon path={mdiShieldCheck} size={20} className="text-emerald-500 mr-3 shrink-0" />
                        Transparent pricing and job histories
                     </li>
                     <li className="flex items-center text-slate-600">
                        <BaseIcon path={mdiShieldCheck} size={20} className="text-emerald-500 mr-3 shrink-0" />
                        Free and fast matching with AI
                     </li>
                     <li className="flex items-center text-slate-600">
                        <BaseIcon path={mdiShieldCheck} size={20} className="text-emerald-500 mr-3 shrink-0" />
                        Secure communication and history
                     </li>
                  </ul>
                  <p className="text-slate-500 italic border-t border-slate-100 pt-6">
                    &quot;Find the perfect help for your home without the stress of unverified listings or endless phone calls.&quot;
                  </p>
               </div>
            </div>
         </div>
      </section>

      {/* The Process */}
      <section className="py-24 container mx-auto px-6 max-w-5xl">
         <h2 className="text-3xl lg:text-5xl font-bold text-center mb-16">The Process</h2>
         <div className="grid md:grid-cols-4 gap-8">
            {[
               { title: 'Search', desc: 'Find categories or specific services.', icon: mdiTools },
               { title: 'Request', desc: 'Describe your job needs in detail.', icon: mdiInformationOutline },
               { title: 'Match', desc: 'AI finds the best pro for you.', icon: mdiFlash },
               { title: 'Resolve', desc: 'Job completed with transparency.', icon: mdiShieldCheck }
            ].map((step, i) => (
               <div key={i} className="text-center group">
                  <div className="w-16 h-16 bg-slate-900 text-white rounded-2xl flex items-center justify-center mb-6 mx-auto group-hover:bg-emerald-500 transition-colors duration-300">
                     <BaseIcon path={step.icon} size={32} />
                  </div>
                  <h4 className="font-bold text-xl mb-2">{i+1}. {step.title}</h4>
                  <p className="text-slate-500 text-sm leading-relaxed">{step.desc}</p>
               </div>
            ))}
         </div>
      </section>
    </div>
  );
}

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