'use client';

import Link from 'next/link';
import {
  Users,
  MapPin,
  Shield,
  Star,
  MessageCircle,
  Wrench,
  Search,
  BadgeCheck,
  Handshake,
  Building2,
} from 'lucide-react';
import { BrowsePageHero } from '@/components/layout/BrowsePageHero';
import { Button } from '@/components/ui/button';
import { JOBS_FEATURE_ENABLED } from '@/lib/features';
import { buildPostJobAuthUrl } from '@/lib/createJob';
import { useLanguage } from '@/contexts/LanguageContext';

export default function AboutPage() {
  const { t } = useLanguage();

  const values = [
    {
      icon: Handshake,
      title: t('Direct connections', 'Direktang koneksyon'),
      desc: t(
        'Customers message workers directly — no middleman markup, no opaque matching fees.',
        'Direktang nagme-message ang customers sa workers — walang middleman markup o hidden matching fees.'
      ),
    },
    {
      icon: BadgeCheck,
      title: t('Trust signals', 'Mga senyales ng tiwala'),
      desc: t(
        'Profiles can show verification status, ratings, portfolios, skills, and service areas so you can decide with more confidence.',
        'Makikita sa profiles ang verification, ratings, portfolios, skills, at service areas para mas madaling magdesisyon.'
      ),
    },
    {
      icon: MapPin,
      title: t('Local first', 'Lokal muna'),
      desc: t(
        'Browse nationwide or focus on your region, city, and nearby tradespeople who actually serve your area.',
        'Mag-browse nationwide o tumutok sa inyong region, lungsod, at nearby tradespeople na talagang nagseserbisyo sa lugar ninyo.'
      ),
    },
    {
      icon: Building2,
      title: t('Built for skilled work', 'Para sa bihasang trabaho'),
      desc: t(
        'eHandyHire is designed around blue-collar trades — from home repairs to specialized craftsmanship.',
        'Dinisenyo ang eHandyHire para sa blue-collar trades — mula home repairs hanggang specialized craftsmanship.'
      ),
    },
  ];

  const forCustomers = [
    {
      icon: Search,
      title: t('Find by trade', 'Hanapin ayon sa trabaho'),
      desc: t(
        'Browse categories like plumbing, carpentry, electrical, cleaning, and more.',
        'Mag-browse ng categories gaya ng plumbing, carpentry, electrical, cleaning, at iba pa.'
      ),
    },
    {
      icon: Users,
      title: t('Compare workers', 'Ikumpara ang workers'),
      desc: t(
        'Review profiles, rates, reviews, and portfolios before you reach out.',
        'Tingnan ang profiles, rates, reviews, at portfolios bago makipag-ugnayan.'
      ),
    },
    {
      icon: MessageCircle,
      title: t('Message directly', 'Mag-message direkta'),
      desc: t(
        'Discuss scope, schedule, and pricing with the worker yourself.',
        'Pag-usapan ninyo mismo ang scope, schedule, at pricing.'
      ),
    },
  ];

  const forWorkers = [
    {
      icon: Wrench,
      title: t('Show your craft', 'Ipakita ang galing mo'),
      desc: t(
        'Create a public profile with skills, rates, service areas, and portfolio photos.',
        'Gumawa ng public profile na may skills, rates, service areas, at portfolio photos.'
      ),
    },
    {
      icon: Shield,
      title: t('Get verified', 'Magpa-verify'),
      desc: t(
        'Complete verification to help customers trust your listing.',
        'Kumpletuhin ang verification para mas magtiwala ang customers sa listing mo.'
      ),
    },
    {
      icon: Star,
      title: t('Build reputation', 'Palakasin ang reputasyon'),
      desc: t(
        'Earn reviews and stand out as customers search for skilled help nearby.',
        'Kumita ng reviews at maging kakaiba habang naghahanap ang customers ng tulong malapit sa kanila.'
      ),
    },
  ];

  return (
    <div className="workers-directory">
      <BrowsePageHero
        variant="directory"
        eyebrow={t('Company', 'Kumpanya')}
        title={t('About eHandyHire', 'Tungkol sa eHandyHire')}
        description={t(
          'A workers directory connecting households and businesses with independent blue-collar professionals across the Philippines.',
          'Direktoryo ng workers na nag-uugnay sa households at businesses sa independent blue-collar professionals sa buong Pilipinas.'
        )}
        actions={[
          {
            href: '/workers',
            label: t('Find workers', 'Hanapin ang workers'),
            icon: Users,
            variant: 'accent',
          },
          {
            href: '/map',
            label: t('Workers map', 'Mapa ng workers'),
            icon: MapPin,
            variant: 'heroOutline',
          },
        ]}
      />

      <div className="page-container max-w-4xl space-y-10">
        {/* Who we are */}
        <section className="border border-[#e2ddd2] bg-[#fffdf9] p-5 sm:p-7 space-y-4">
          <h2 className="home-display text-xl font-bold text-slate-900">
            {t('Who we are', 'Sino kami')}
          </h2>
          <p className="text-sm text-slate-600 leading-relaxed">
            {t(
              'eHandyHire is a Philippines-focused workers directory. We help people discover carpenters, plumbers, electricians, cleaners, and other skilled tradespeople — then contact them directly to discuss the work.',
              'Ang eHandyHire ay workers directory para sa Pilipinas. Tinutulungan naming matuklasan ang mga karpintero, tubero, elektrisyan, cleaner, at iba pang bihasang manggagawa — tapos makipag-ugnayan direkta para pag-usapan ang trabaho.'
            )}
          </p>
          <p className="text-sm text-slate-600 leading-relaxed">
            {t(
              'Instead of relying only on word of mouth or scattered social media posts, customers can browse structured profiles, filter by trade and location, and see ratings and portfolios in one place. Workers get a professional listing they can share and grow over time.',
              'Imbes na umasa lang sa word of mouth o nakakalat na social media posts, puwedeng mag-browse ang customers ng structured profiles, mag-filter ayon sa trabaho at lokasyon, at makita ang ratings at portfolios sa iisang lugar. May professional listing naman ang workers na puwedeng i-share at palakihin sa paglipas ng panahon.'
            )}
          </p>
        </section>

        {/* Mission */}
        <section className="grid gap-3 sm:grid-cols-2">
          <div className="border border-[#e2ddd2] bg-[#fffdf9] p-5 sm:p-6">
            <p className="text-[11px] font-semibold uppercase tracking-widest text-[var(--home-amber)] mb-2">
              {t('Mission', 'Misyon')}
            </p>
            <h2 className="home-display text-lg font-bold text-slate-900 mb-2">
              {t('Make skilled work easier to find', 'Gawing mas madaling hanapin ang bihasang trabaho')}
            </h2>
            <p className="text-sm text-slate-600 leading-relaxed">
              {t(
                'We exist to shorten the gap between people who need reliable help and the independent workers ready to provide it — with clearer information and less guesswork.',
                'Layunin naming paikliin ang agwat sa pagitan ng mga taong nangangailangan ng maaasahang tulong at ng independent workers na handang magserbisyo — na may mas malinaw na impormasyon at mas kaunting hula-hula.'
              )}
            </p>
          </div>
          <div className="border border-[#e2ddd2] bg-[#fffdf9] p-5 sm:p-6">
            <p className="text-[11px] font-semibold uppercase tracking-widest text-[var(--home-amber)] mb-2">
              {t('Vision', 'Bisyon')}
            </p>
            <h2 className="home-display text-lg font-bold text-slate-900 mb-2">
              {t('A trusted home for PH trades', 'Isang pinagkakatiwalaang tahanan para sa trades sa PH')}
            </h2>
            <p className="text-sm text-slate-600 leading-relaxed">
              {t(
                'We want every region in the Philippines to have an easy way to discover local skilled workers — and for those workers to build visibility, reputation, and steady opportunities online.',
                'Nais naming madaling matuklasan ang lokal na bihasang workers sa bawat region ng Pilipinas — at makapagtayo ang mga worker na iyon ng visibility, reputasyon, at tuloy-tuloy na oportunidad online.'
              )}
            </p>
          </div>
        </section>

        {/* What we believe */}
        <section>
          <h2 className="home-display text-xl font-bold text-slate-900 mb-1">
            {t('What guides us', 'Ano ang gumagabay sa amin')}
          </h2>
          <p className="text-sm text-muted mb-4 max-w-2xl">
            {t(
              'A few principles shape how we build the directory.',
              'Ilang prinsipyo ang humuhubog sa kung paano namin binubuo ang directory.'
            )}
          </p>
          <div className="grid gap-3 sm:grid-cols-2">
            {values.map((item) => (
              <div
                key={item.title}
                className="flex gap-3 border border-[#e2ddd2] bg-[#fffdf9] p-4 sm:p-5"
              >
                <span className="flex h-10 w-10 shrink-0 items-center justify-center bg-[var(--home-ink)] text-white">
                  <item.icon className="h-5 w-5" />
                </span>
                <div className="min-w-0">
                  <h3 className="home-display font-bold text-slate-900 text-base">{item.title}</h3>
                  <p className="text-sm text-muted mt-1 leading-relaxed">{item.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* For customers / workers */}
        <section className="grid gap-6 lg:grid-cols-2">
          <div>
            <h2 className="home-display text-lg font-bold text-slate-900 mb-3">
              {t('For customers', 'Para sa customers')}
            </h2>
            <div className="space-y-3">
              {forCustomers.map((item) => (
                <div
                  key={item.title}
                  className="flex gap-3 border border-[#e2ddd2] bg-[#fffdf9] p-4"
                >
                  <item.icon className="h-5 w-5 shrink-0 text-[var(--home-amber)] mt-0.5" />
                  <div>
                    <h3 className="font-semibold text-slate-900 text-sm">{item.title}</h3>
                    <p className="text-sm text-muted mt-0.5 leading-relaxed">{item.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div>
            <h2 className="home-display text-lg font-bold text-slate-900 mb-3">
              {t('For workers', 'Para sa workers')}
            </h2>
            <div className="space-y-3">
              {forWorkers.map((item) => (
                <div
                  key={item.title}
                  className="flex gap-3 border border-[#e2ddd2] bg-[#fffdf9] p-4"
                >
                  <item.icon className="h-5 w-5 shrink-0 text-[var(--home-amber)] mt-0.5" />
                  <div>
                    <h3 className="font-semibold text-slate-900 text-sm">{item.title}</h3>
                    <p className="text-sm text-muted mt-0.5 leading-relaxed">{item.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* How it works briefly */}
        <section className="border border-[#e2ddd2] bg-[#fffdf9] p-5 sm:p-7">
          <h2 className="home-display text-xl font-bold text-slate-900 mb-2">
            {t('How eHandyHire works', 'Paano gumagana ang eHandyHire')}
          </h2>
          <p className="text-sm text-slate-600 leading-relaxed mb-4">
            {JOBS_FEATURE_ENABLED
              ? t(
                  'Customers can browse worker profiles or post jobs. Workers respond with quotations, chat about the details, and get hired. After the work is done, reviews help the next customer choose with more confidence.',
                  'Puwedeng mag-browse ng worker profiles o mag-post ng jobs ang customers. Sumasagot ang workers gamit ang quotations, mag-chat tungkol sa detalye, at ma-hire. Pagkatapos ng trabaho, tumutulong ang reviews sa susunod na customer.'
                )
              : t(
                  'Search or browse by trade, open a worker’s profile, review their skills and feedback, then message them to discuss your needs. Hiring decisions stay between you and the worker.',
                  'Maghanap o mag-browse ayon sa trabaho, buksan ang profile ng worker, tingnan ang skills at feedback, tapos mag-message para pag-usapan ang kailangan mo. Ang desisyon sa pag-hire ay sa inyo ng worker.'
                )}
          </p>
          <div className="flex flex-wrap gap-3">
            <Link href="/how-it-works">
              <Button variant="outline" className="rounded-none border-[#d6d0c4]">
                {t('See how it works', 'Tingnan kung paano gumagana')}
              </Button>
            </Link>
            <Link href="/categories">
              <Button variant="outline" className="rounded-none border-[#d6d0c4]">
                {t('Browse trades', 'Tingnan ang mga trabaho')}
              </Button>
            </Link>
          </div>
        </section>

        {/* Coverage & independence */}
        <section className="grid gap-3 sm:grid-cols-2">
          <div className="border border-[#e2ddd2] bg-[#fffdf9] p-5 sm:p-6">
            <h2 className="home-display text-lg font-bold text-slate-900 mb-2">
              {t('Where we serve', 'Saan kami nagseserbisyo')}
            </h2>
            <p className="text-sm text-slate-600 leading-relaxed">
              {t(
                'eHandyHire supports browsing across the Philippines, with regional and local filters so you can focus on workers near you — including major areas across Luzon, Visayas, and Mindanao.',
                'Sinusuportahan ng eHandyHire ang browsing sa buong Pilipinas, na may regional at local filters para tumutok sa workers malapit sa iyo — kabilang ang malalaking lugar sa Luzon, Visayas, at Mindanao.'
              )}
            </p>
          </div>
          <div className="border border-[#e2ddd2] bg-[#fffdf9] p-5 sm:p-6">
            <h2 className="home-display text-lg font-bold text-slate-900 mb-2">
              {t('Independent workers', 'Independent workers')}
            </h2>
            <p className="text-sm text-slate-600 leading-relaxed">
              {t(
                'Workers listed on eHandyHire are independent professionals — not employees, agents, or partners of our company. Agreements, payments, and work quality are between the customer and the worker.',
                'Ang mga worker sa eHandyHire ay independent professionals — hindi empleyado, agent, o partner ng kumpanya namin. Ang kasunduan, bayad, at kalidad ng trabaho ay sa customer at worker.'
              )}{' '}
              <Link
                href="/disclaimer"
                className="font-semibold text-[var(--home-amber)] hover:text-[var(--home-amber-soft)]"
              >
                {t('Read our disclaimer', 'Basahin ang disclaimer')}
              </Link>
            </p>
          </div>
        </section>

        {/* CTA */}
        <section className="border border-[#e2ddd2] bg-[var(--home-ink)] p-5 sm:p-7 text-white">
          <h2 className="home-display text-xl font-bold mb-2">
            {t('Ready to get started?', 'Handa ka na bang magsimula?')}
          </h2>
          <p className="text-sm text-slate-300 leading-relaxed mb-5 max-w-xl">
            {t(
              'Browse skilled workers near you, or create a worker profile and join the directory.',
              'Mag-browse ng bihasang workers malapit sa iyo, o gumawa ng worker profile at sumali sa directory.'
            )}
          </p>
          <div className="flex flex-wrap gap-3">
            {JOBS_FEATURE_ENABLED ? (
              <Link href={buildPostJobAuthUrl()}>
                <Button className="worker-cta-amber rounded-none">
                  {t('Post a Job', 'Mag-post ng Job')}
                </Button>
              </Link>
            ) : (
              <Link href="/workers">
                <Button className="worker-cta-amber rounded-none">
                  {t('Browse Workers', 'Tingnan ang Workers')}
                </Button>
              </Link>
            )}
            <Link href="/become-worker">
              <Button
                variant="outline"
                className="rounded-none border-white/25 bg-transparent text-white hover:bg-white/10 hover:text-white"
              >
                {t('Become a worker', 'Maging worker')}
              </Button>
            </Link>
            <Link href="/contact">
              <Button
                variant="outline"
                className="rounded-none border-white/25 bg-transparent text-white hover:bg-white/10 hover:text-white"
              >
                {t('Contact us', 'Makipag-ugnayan')}
              </Button>
            </Link>
            <Link href="/sponsor">
              <Button
                variant="outline"
                className="rounded-none border-white/25 bg-transparent text-white hover:bg-white/10 hover:text-white"
              >
                {t('Sponsor us', 'I-sponsor kami')}
              </Button>
            </Link>
          </div>
        </section>
      </div>
    </div>
  );
}