'use client';

import Link from 'next/link';
import {
  DollarSign,
  Star,
  ArrowRight,
  UserPlus,
  Users,
  Wrench,
  MapPin,
  BadgeCheck,
  MessageCircle,
  Images,
  CircleHelp,
  Clock,
  Handshake,
  Smartphone,
} from 'lucide-react';
import { BrowsePageHero } from '@/components/layout/BrowsePageHero';
import { Button } from '@/components/ui/button';
import { useLanguage } from '@/contexts/LanguageContext';

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

  const benefits = [
    {
      icon: DollarSign,
      title: t('Set your own rates', 'Ikaw ang magtatakda ng bayad'),
      desc: t(
        'Decide how you charge — hourly, daily, or per job. Discuss pricing directly with customers.',
        'Ikaw ang magdedesisyon kung paano magcha-charge — oras, araw, o per job. Direktang pag-usapan ang pricing sa customer.'
      ),
    },
    {
      icon: Users,
      title: t('Get discovered nationwide', 'Matuklasan sa buong bansa'),
      desc: t(
        'Appear in search, trades, and map results across Luzon, Visayas, and Mindanao — especially near the areas you serve.',
        'Lalabas ka sa search, trades, at mapa sa Luzon, Visayas, at Mindanao — lalo na sa mga lugar na siniserbisyuhan mo.'
      ),
    },
    {
      icon: BadgeCheck,
      title: t('Build trust with verification', 'Magkaroon ng tiwala sa verification'),
      desc: t(
        'Complete verification so customers can see you as a more reliable option when comparing workers.',
        'Kumpletuhin ang verification para makita ka ng customers bilang mas maaasahang pagpipilian.'
      ),
    },
    {
      icon: Star,
      title: t('Grow through reviews', 'Lumaki sa reviews'),
      desc: t(
        'Good work earns ratings and written reviews that help you stand out the next time someone searches your trade.',
        'Kung maganda ang trabaho, makakakuha ka ng ratings at reviews na makakatulong sa susunod na maghanap ng trade mo.'
      ),
    },
    {
      icon: MessageCircle,
      title: t('Talk to customers directly', 'Direktang makipag-usap sa customers'),
      desc: t(
        'No middleman. Message customers yourself to clarify scope, schedule, materials, and payment.',
        'Walang middleman. Ikaw mismo ang magme-message para linawin ang scope, schedule, materials, at bayad.'
      ),
    },
    {
      icon: Images,
      title: t('Show your craft', 'Ipakita ang galing mo'),
      desc: t(
        'Upload portfolio photos so customers can see real examples of your work before they reach out.',
        'Mag-upload ng portfolio photos para makita ng customers ang mga sample ng trabaho mo bago makipag-ugnayan.'
      ),
    },
  ];

  const steps = [
    {
      icon: UserPlus,
      title: t('Create your account', 'Gumawa ng account'),
      desc: t(
        'Register with Google or manually. Add your name, photo, and sign-in details.',
        'Mag-register gamit ang Google o manual. Ilagay ang pangalan, litrato, at sign-in details.'
      ),
      details: [
        t('Takes a few minutes on mobile or desktop.', 'Ilang minuto lang sa mobile o desktop.'),
        t('You’ll verify your phone before the account is created.', 'Ive-verify ang cellphone mo bago magawa ang account.'),
      ],
    },
    {
      icon: Wrench,
      title: t('Add your skills', 'Ilagay ang skills mo'),
      desc: t(
        'Choose the trades you offer — plumbing, carpentry, electrical, cleaning, and more.',
        'Piliin ang mga trabaho na kaya mo — plumbing, carpentry, electrical, cleaning, at iba pa.'
      ),
      details: [
        t('You can select more than one skill.', 'Puwede kang pumili ng higit sa isang skill.'),
        t('Describe a skill that isn’t listed if needed.', 'Ilarawan ang skill na wala sa listahan kung kailangan.'),
      ],
    },
    {
      icon: MapPin,
      title: t('Set your service areas', 'Itakda ang service areas'),
      desc: t(
        'Tell customers where you work so people nearby can find you first.',
        'Sabihin kung saan ka nagtatrabaho para mas mauna kang makita ng mga malapit sa iyo.'
      ),
      details: [
        t('Add every city or area where you take jobs.', 'Idagdag ang bawat lungsod o lugar kung saan ka tumatanggap ng trabaho.'),
        t('You can update areas later from your worker portal.', 'Puwede mong i-update ang areas mamaya sa worker portal.'),
      ],
    },
    {
      icon: Handshake,
      title: t('Get found & start connecting', 'Matuklasan at magsimulang kumonekta'),
      desc: t(
        'Once live, customers can browse your profile, message you, and discuss work directly.',
        'Kapag live na, puwedeng tingnan ng customers ang profile mo, mag-message, at direktang pag-usapan ang trabaho.'
      ),
      details: [
        t('Keep your profile updated with rates, bio, and photos.', 'Panatilihing updated ang profile — rates, bio, at photos.'),
        t('Respond promptly — fast replies win more work.', 'Sumagot agad — mas madalas makakuha ng trabaho ang mabilis tumugon.'),
      ],
    },
  ];

  const youllNeed = [
    {
      icon: Smartphone,
      title: t('A Philippine mobile number', 'Philippine mobile number'),
      desc: t(
        'Used to verify your account with a one-time code.',
        'Gagamitin para i-verify ang account gamit ang one-time code.'
      ),
    },
    {
      icon: Wrench,
      title: t('Your trades / skills', 'Mga trabaho / skills mo'),
      desc: t(
        'Know which services you offer so customers can find the right match.',
        'Alamin kung anong serbisyo ang kaya mo para mahanap ka ng tamang customer.'
      ),
    },
    {
      icon: MapPin,
      title: t('Where you work', 'Saan ka nagtatrabaho'),
      desc: t(
        'Cities or areas where you’re available to take jobs.',
        'Mga lungsod o lugar kung saan ka available tumanggap ng trabaho.'
      ),
    },
    {
      icon: Clock,
      title: t('A few minutes', 'Ilang minuto'),
      desc: t(
        'Registration is short. You can finish your profile details after signing up.',
        'Maikli ang registration. Puwede mong tapusin ang iba pang detalye pagkatapos mag-sign up.'
      ),
    },
  ];

  const faqs = [
    {
      q: t('Is it free to join?', 'Libre ba ang pagsali?'),
      a: t(
        'Creating a worker profile on eHandyHire is free. You connect with customers directly — there is no middleman fee for listing yourself.',
        'Libre ang paggawa ng worker profile sa eHandyHire. Direktang kumokonekta ka sa customers — walang middleman fee para ilista ang sarili mo.'
      ),
    },
    {
      q: t('Am I an employee of eHandyHire?', 'Empleyado ba ako ng eHandyHire?'),
      a: t(
        'No. Workers on eHandyHire are independent. Agreements, payments, and work quality are between you and the customer.',
        'Hindi. Independent ang workers sa eHandyHire. Ang kasunduan, bayad, at kalidad ng trabaho ay sa iyo at sa customer.'
      ),
    },
    {
      q: t('What happens after I register?', 'Ano ang susunod pagkatapos mag-register?'),
      a: t(
        'You’ll land in your worker portal where you can finish your profile, add rates, upload portfolio photos, and manage availability.',
        'Mapupunta ka sa worker portal kung saan mo matatapos ang profile, maglalagay ng rates, mag-a-upload ng portfolio, at magse-set ng availability.'
      ),
    },
    {
      q: t('How do customers find me?', 'Paano ako mahahanap ng customers?'),
      a: t(
        'Customers browse by trade, search by name or skill, filter by area, or use the map. A complete, verified profile with photos and reviews helps you rank better.',
        'Nagbo-browse ang customers ayon sa trabaho, naghahanap ayon sa pangalan o skill, nagfi-filter ayon sa lugar, o gumagamit ng mapa. Mas malakas ang profile na kompletong verified at may photos at reviews.'
      ),
    },
  ];

  return (
    <div className="workers-directory">
      <BrowsePageHero
        variant="directory"
        eyebrow={t('For workers', 'Para sa workers')}
        title={t('Become a Worker', 'Maging Worker')}
        description={t(
          'List your skills, get discovered by customers nearby, and grow your work — as an independent professional on eHandyHire.',
          'Ilista ang skills mo, matuklasan ng customers malapit sa iyo, at palakihin ang trabaho mo — bilang independent professional sa eHandyHire.'
        )}
        actions={[
          {
            href: '/register/worker',
            label: t('Register as Worker', 'Mag-register bilang Worker'),
            icon: ArrowRight,
            variant: 'accent',
          },
        ]}
      />

      <div className="page-container max-w-4xl space-y-10">
        {/* Intro */}
        <section className="border border-[#e2ddd2] bg-[#fffdf9] p-5 sm:p-7 space-y-3">
          <h2 className="home-display text-xl font-bold text-slate-900">
            {t('Built for skilled tradespeople', 'Para sa bihasang manggagawa')}
          </h2>
          <p className="text-sm text-slate-600 leading-relaxed">
            {t(
              'eHandyHire is a workers directory for blue-collar professionals across the Philippines — carpenters, plumbers, electricians, cleaners, and more. Create a public profile so households and businesses can find you, review your work, and message you directly.',
              'Direktoryo ng workers ang eHandyHire para sa blue-collar professionals sa buong Pilipinas — karpintero, tubero, elektrisyan, cleaner, at iba pa. Gumawa ng public profile para mahanap ka ng households at businesses, makita ang trabaho mo, at direktang makipag-message.'
            )}
          </p>
          <p className="text-sm text-muted leading-relaxed">
            {t(
              'You stay independent. eHandyHire is not your employer — we help customers discover you.',
              'Independent ka pa rin. Hindi employer ang eHandyHire — tinutulungan naming matuklasan ka ng customers.'
            )}{' '}
            <Link
              href="/disclaimer"
              className="font-semibold text-[var(--home-amber)] hover:text-[var(--home-amber-soft)]"
            >
              {t('Read disclaimer', 'Basahin ang disclaimer')}
            </Link>
          </p>
        </section>

        {/* Benefits */}
        <section>
          <h2 className="home-display text-xl font-bold text-slate-900 mb-1">
            {t('Why join eHandyHire', 'Bakit sumali sa eHandyHire')}
          </h2>
          <p className="text-sm text-muted mb-4 max-w-2xl">
            {t(
              'More than a listing — tools to help customers trust and choose you.',
              'Higit pa sa listing — may tools para magtiwala at pumili ang customers sa iyo.'
            )}
          </p>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
            {benefits.map((b) => (
              <div
                key={b.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">
                  <b.icon className="h-5 w-5" />
                </span>
                <div className="min-w-0">
                  <h3 className="home-display font-bold text-slate-900 text-base">{b.title}</h3>
                  <p className="text-sm text-muted mt-1 leading-relaxed">{b.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Steps */}
        <section>
          <h2 className="home-display text-xl font-bold text-slate-900 mb-1">
            {t('How to join in 4 steps', 'Paano sumali sa 4 na hakbang')}
          </h2>
          <p className="text-sm text-muted mb-4 max-w-2xl">
            {t(
              'Same path as registration — here’s what to expect along the way.',
              'Pareho sa registration — ganito ang aasahan mo sa bawat hakbang.'
            )}
          </p>
          <div className="space-y-3">
            {steps.map((step, i) => (
              <div
                key={step.title}
                className="flex gap-4 items-start border border-[#e2ddd2] bg-[#fffdf9] p-4 sm:p-5"
              >
                <div className="flex h-11 w-11 shrink-0 items-center justify-center bg-[var(--home-ink)] text-white home-display text-lg font-bold">
                  {i + 1}
                </div>
                <div className="min-w-0 flex-1 pt-0.5">
                  <h3 className="home-display font-bold text-slate-900 flex items-center gap-2 text-base">
                    <step.icon className="h-4 w-4 shrink-0 text-[var(--home-amber)]" />
                    {step.title}
                  </h3>
                  <p className="text-sm text-slate-600 mt-1.5 leading-relaxed">{step.desc}</p>
                  <ul className="mt-3 space-y-1.5">
                    {step.details.map((detail) => (
                      <li key={detail} className="flex gap-2 text-sm text-muted leading-relaxed">
                        <span className="mt-2 h-1.5 w-1.5 shrink-0 bg-[var(--home-amber)]" />
                        <span>{detail}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* What you'll need */}
        <section>
          <h2 className="home-display text-xl font-bold text-slate-900 mb-1">
            {t('What you’ll need', 'Ano ang kakailanganin mo')}
          </h2>
          <p className="text-sm text-muted mb-4">
            {t(
              'Have these ready before you start registration.',
              'Ihanda ang mga ito bago magsimula ang registration.'
            )}
          </p>
          <div className="grid gap-3 sm:grid-cols-2">
            {youllNeed.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>
        </section>

        {/* FAQ */}
        <section>
          <h2 className="home-display text-xl font-bold text-slate-900 mb-1 flex items-center gap-2">
            <CircleHelp className="h-5 w-5 text-[var(--home-amber)]" />
            {t('Common questions', 'Mga karaniwang tanong')}
          </h2>
          <p className="text-sm text-muted mb-4">
            {t('Quick answers before you register.', 'Mabilisang sagot bago ka mag-register.')}
          </p>
          <div className="space-y-3">
            {faqs.map((faq) => (
              <div key={faq.q} className="border border-[#e2ddd2] bg-[#fffdf9] p-4 sm:p-5">
                <h3 className="font-semibold text-slate-900 text-sm">{faq.q}</h3>
                <p className="text-sm text-muted mt-1.5 leading-relaxed">{faq.a}</p>
              </div>
            ))}
          </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 listed?', 'Handa ka na bang magpa-lista?')}
          </h2>
          <p className="text-sm text-slate-300 leading-relaxed mb-5 max-w-xl">
            {t(
              'Create your worker profile now. Customers looking for your trade can start finding you.',
              'Gumawa na ng worker profile. Magsisimula kang mahanap ng customers na naghahanap ng trade mo.'
            )}
          </p>
          <div className="flex flex-wrap gap-3">
            <Link href="/register/worker">
              <Button size="lg" className="worker-cta-amber rounded-none">
                {t('Register as Worker', 'Mag-register bilang Worker')}
              </Button>
            </Link>
            <Link href="/how-it-works">
              <Button
                variant="outline"
                size="lg"
                className="rounded-none border-white/25 bg-transparent text-white hover:bg-white/10 hover:text-white"
              >
                {t('How it works', 'Paano ito gumagana')}
              </Button>
            </Link>
            <Link href="/contact">
              <Button
                variant="outline"
                size="lg"
                className="rounded-none border-white/25 bg-transparent text-white hover:bg-white/10 hover:text-white"
              >
                {t('Contact us', 'Makipag-ugnayan')}
              </Button>
            </Link>
          </div>
        </section>
      </div>
    </div>
  );
}