'use client';

import Link from 'next/link';
import {
  Search,
  FileText,
  MessageCircle,
  Star,
  UserCheck,
  FolderOpen,
  Users,
  MapPin,
  Filter,
  Shield,
  BadgeCheck,
  Wrench,
  Clock,
  CircleHelp,
} 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 HowItWorksPage() {
  const { t } = useLanguage();

  const jobSteps = [
    {
      icon: Search,
      title: t('Sign up & post', 'Mag-sign up at mag-post'),
      desc: t(
        'Create a free customer account, then post a job describing what you need.',
        'Gumawa ng free customer account, tapos mag-post ng job na may detalye ng kailangan mo.'
      ),
      details: [
        t('Include the trade, location, timing, and budget if you have one.', 'Isama ang trabaho, lokasyon, oras, at budget kung mayroon.'),
        t('Clear details help workers send more accurate quotations.', 'Mas malinaw na detalye = mas tumpak na quotations mula sa workers.'),
      ],
    },
    {
      icon: FileText,
      title: t('Get quotes', 'Tumanggap ng quotes'),
      desc: t(
        'Receive quotations from verified workers in your area.',
        'Tumanggap ng quotations mula sa verified workers sa inyong lugar.'
      ),
      details: [
        t('Compare price, availability, and profile strength side by side.', 'Ikumpara ang presyo, availability, at lakas ng profile.'),
        t('Open each worker profile to check reviews and past work.', 'Buksan ang profile ng bawat worker para sa reviews at past work.'),
      ],
    },
    {
      icon: MessageCircle,
      title: t('Chat & hire', 'Mag-chat at mag-hire'),
      desc: t(
        'Message workers, compare quotes, and hire the best fit.',
        'Makipag-message sa workers, ikumpara ang quotes, at hire-in ang pinakaangkop.'
      ),
      details: [
        t('Ask about materials, timeline, and what’s included in the quote.', 'Itanong ang materials, timeline, at kung ano ang kasama sa quote.'),
        t('Agree on scope and payment terms before work starts.', 'Magkasundo sa scope at bayaran bago magsimula ang trabaho.'),
      ],
    },
    {
      icon: Star,
      title: t('Rate & review', 'Mag-rate at mag-review'),
      desc: t(
        'After completion, rate the worker to help the community.',
        'Pagkatapos ng trabaho, i-rate ang worker para makatulong sa community.'
      ),
      details: [
        t('Honest reviews help the next customer choose with confidence.', 'Tumutulong ang honest reviews sa susunod na customer.'),
        t('Good work deserves recognition — it also helps workers grow.', 'Kung maganda ang trabaho, bigyan ng recognition — tumutulong din ito sa workers.'),
      ],
    },
  ];

  const directorySteps = [
    {
      icon: Search,
      title: t('Browse workers', 'Mag-browse ng workers'),
      desc: t(
        'Search by trade, location, or name to find skilled professionals near you.',
        'Maghanap ayon sa trabaho, lokasyon, o pangalan para makita ang bihasang professionals malapit sa iyo.'
      ),
      details: [
        t('Start from Find workers, Trades, or the map view.', 'Magsimula sa Find workers, Trades, o map view.'),
        t('Filter by region, city, or trade so results stay relevant.', 'Mag-filter ayon sa region, lungsod, o trabaho para mas relevant ang results.'),
      ],
    },
    {
      icon: FolderOpen,
      title: t('Check profiles', 'Tingnan ang profiles'),
      desc: t(
        'Review ratings, portfolios, skills, and service areas before you reach out.',
        'Tingnan ang ratings, portfolios, skills, at service areas bago makipag-ugnayan.'
      ),
      details: [
        t('Look for verification badges, recent reviews, and portfolio photos.', 'Tingnan ang verification badges, recent reviews, at portfolio photos.'),
        t('Confirm the worker covers your area and offers the trade you need.', 'Siguraduhing sakop ang lugar mo at may offer ang trade na kailangan mo.'),
      ],
    },
    {
      icon: MessageCircle,
      title: t('Message & connect', 'Mag-message at kumonekta'),
      desc: t(
        'Contact workers directly to discuss your needs and availability.',
        'Makipag-ugnayan direkta sa workers para pag-usapan ang kailangan at availability.'
      ),
      details: [
        t('Share the job details, preferred schedule, and location upfront.', 'Ibahagi agad ang detalye ng trabaho, preferred schedule, at lokasyon.'),
        t('Ask clarifying questions before you agree on price or start date.', 'Magtanong muna bago magkasundo sa presyo o start date.'),
      ],
    },
    {
      icon: UserCheck,
      title: t('Hire with confidence', 'Mag-hire nang may tiwala'),
      desc: t(
        'Choose verified, reviewed workers you trust for the job.',
        'Pumili ng verified at may review na workers na mapagkakatiwalaan mo.'
      ),
      details: [
        t('Agree clearly on scope, materials, payment, and timeline.', 'Magkasundo nang malinaw sa scope, materials, bayad, at timeline.'),
        t('Remember: workers are independent — hiring is between you and them.', 'Tandaan: independent ang workers — ang pag-hire ay sa inyo nila.'),
      ],
    },
  ];

  const steps = JOBS_FEATURE_ENABLED ? jobSteps : directorySteps;

  const tips = [
    {
      icon: Filter,
      title: t('Be specific', 'Maging specific'),
      desc: t(
        'Mention the trade, problem, photos if useful, and your barangay or city. Better details lead to better matches.',
        'Banggitin ang trabaho, problema, photos kung makakatulong, at barangay o lungsod. Mas magandang detalye = mas magandang match.'
      ),
    },
    {
      icon: BadgeCheck,
      title: t('Check trust signals', 'Tingnan ang trust signals'),
      desc: t(
        'Verification, ratings, reviews, and portfolios are there to help you decide — use them before messaging.',
        'Nandiyan ang verification, ratings, reviews, at portfolios para tumulong sa desisyon — gamitin bago mag-message.'
      ),
    },
    {
      icon: Clock,
      title: t('Align on expectations', 'Magkasundo sa expectations'),
      desc: t(
        'Confirm what’s included, when work starts, and how payment works. Clear agreements prevent surprises.',
        'Kumpirmahin kung ano ang kasama, kailan magsisimula, at paano ang bayad. Maiiwasan ang sorpresa kung malinaw ang usapan.'
      ),
    },
    {
      icon: Shield,
      title: t('Stay safe', 'Manatiling ligtas'),
      desc: t(
        'Meet thoughtfully, verify identity when needed, and only proceed when you feel comfortable. Report serious concerns to us.',
        'Mag-ingat sa pagkikita, i-verify ang identity kung kailangan, at magpatuloy lang kung komportable ka. I-report sa amin ang seryosong concerns.'
      ),
    },
  ];

  const workerPath = [
    {
      icon: Wrench,
      title: t('Create your profile', 'Gumawa ng profile'),
      desc: t(
        'Add your skills, rates, service areas, and portfolio so customers can evaluate your work.',
        'Ilagay ang skills, rates, service areas, at portfolio para masuri ng customers ang trabaho mo.'
      ),
    },
    {
      icon: Shield,
      title: t('Get verified', 'Magpa-verify'),
      desc: t(
        'Complete verification to build trust and stand out in search results.',
        'Kumpletuhin ang verification para magkaroon ng tiwala at mas mapansin sa search.'
      ),
    },
    {
      icon: MessageCircle,
      title: t('Respond to inquiries', 'Sagutin ang mga inquiry'),
      desc: t(
        'Reply promptly, ask good questions, and be clear about availability and pricing.',
        'Sumagot agad, magtanong nang maayos, at maging malinaw sa availability at pricing.'
      ),
    },
    {
      icon: Star,
      title: t('Earn reviews', 'Kumita ng reviews'),
      desc: t(
        'Deliver solid work and collect reviews to grow your reputation over time.',
        'Maghatid ng magandang trabaho at mangalap ng reviews para palakihin ang reputasyon mo.'
      ),
    },
  ];

  const faqs = [
    {
      q: t('Do I need an account to browse?', 'Kailangan ba ng account para mag-browse?'),
      a: t(
        'You can browse workers and trades without signing up. You’ll need an account to message workers and manage conversations.',
        'Puwede kang mag-browse ng workers at trades nang walang sign up. Kailangan mo ng account para mag-message at mag-manage ng conversations.'
      ),
    },
    {
      q: t('Does eHandyHire hire the worker for me?', 'Hinahire ba ng eHandyHire ang worker para sa akin?'),
      a: t(
        'No. eHandyHire is a directory/marketplace. You choose the worker and arrange the work directly with them.',
        'Hindi. Directory/marketplace ang eHandyHire. Ikaw ang pumipili ng worker at direkta kayong nag-aayos ng trabaho.'
      ),
    },
    {
      q: t('How do I find workers near me?', 'Paano ako makakahanap ng workers malapit sa akin?'),
      a: t(
        'Use region filters on the workers list, browse by trade, or open the map to explore workers by location.',
        'Gamitin ang region filters sa workers list, mag-browse ayon sa trabaho, o buksan ang map para makita ang workers ayon sa lokasyon.'
      ),
    },
    {
      q: t('What if something goes wrong?', 'Paano kung may magkamali?'),
      a: t(
        'Disputes about work or payment are between you and the worker. For safety or platform concerns, contact us so we can review the account.',
        'Ang usapin tungkol sa trabaho o bayad ay sa inyo ng worker. Para sa safety o platform concerns, kontakin kami para mareview ang account.'
      ),
    },
  ];

  return (
    <div className="workers-directory">
      <BrowsePageHero
        variant="directory"
        eyebrow={t('Guide', 'Gabay')}
        title={t('How It Works', 'Paano Ito Gumagana')}
        description={
          JOBS_FEATURE_ENABLED
            ? t(
                'From posting a job to hiring and reviewing — here’s how customers and workers use eHandyHire.',
                'Mula sa pag-post ng job hanggang pag-hire at pag-review — ganito ginagamit ng customers at workers ang eHandyHire.'
              )
            : t(
                'From browsing trades to messaging a worker — here’s how to find skilled help on eHandyHire.',
                'Mula sa pag-browse ng trades hanggang pag-message sa worker — ganito makakahanap ng bihasang tulong sa eHandyHire.'
              )
        }
        actions={[
          {
            href: '/workers',
            label: t('Find workers', 'Hanapin ang workers'),
            icon: Users,
            variant: 'accent',
          },
          {
            href: '/map',
            label: t('Open map', 'Buksan ang mapa'),
            icon: MapPin,
            variant: 'heroOutline',
          },
        ]}
      />

      <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('A simple path to skilled help', 'Simpleng paraan para sa bihasang tulong')}
          </h2>
          <p className="text-sm text-slate-600 leading-relaxed">
            {JOBS_FEATURE_ENABLED
              ? t(
                  'eHandyHire connects people who need work done with independent blue-collar professionals. Post a job or browse profiles, talk directly, then hire the person who fits.',
                  'Ikinokonekta ng eHandyHire ang nangangailangan ng trabaho sa independent blue-collar professionals. Mag-post ng job o mag-browse ng profiles, mag-usap direkta, tapos hire-in ang bagay sa iyo.'
                )
              : t(
                  'eHandyHire is a workers directory. Browse skilled tradespeople by trade and location, review their profiles, then message them directly to discuss your needs.',
                  'Direktoryo ng workers ang eHandyHire. Mag-browse ng bihasang manggagawa ayon sa trabaho at lokasyon, tingnan ang profiles, tapos mag-message direkta para pag-usapan ang kailangan mo.'
                )}
          </p>
          <p className="text-sm text-muted leading-relaxed">
            {t(
              'Workers listed here are independent — not employed by eHandyHire.',
              'Independent ang mga worker dito — hindi empleyado ng eHandyHire.'
            )}{' '}
            <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>

        {/* Steps */}
        <section>
          <h2 className="home-display text-xl font-bold text-slate-900 mb-1">
            {JOBS_FEATURE_ENABLED
              ? t('For customers: 4 steps', 'Para sa customers: 4 na hakbang')
              : t('For customers: 4 steps', 'Para sa customers: 4 na hakbang')}
          </h2>
          <p className="text-sm text-muted mb-4 max-w-2xl">
            {t(
              'Follow these steps to go from “I need help” to a clear conversation with a worker.',
              'Sundin ang mga hakbang na ito mula sa “Kailangan ko ng tulong” hanggang sa malinaw na usapan sa worker.'
            )}
          </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 pt-0.5 flex-1">
                  <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>

        {/* Ways to discover */}
        <section>
          <h2 className="home-display text-xl font-bold text-slate-900 mb-1">
            {t('Ways to discover workers', 'Mga paraan para makahanap ng workers')}
          </h2>
          <p className="text-sm text-muted mb-4">
            {t(
              'Pick the path that fits how you like to search.',
              'Piliin ang paraan ng paghahanap na bagay sa iyo.'
            )}
          </p>
          <div className="grid gap-3 sm:grid-cols-3">
            <Link
              href="/workers"
              className="border border-[#e2ddd2] bg-[#fffdf9] p-4 transition-colors hover:bg-white hover:border-[#c4b89f]"
            >
              <Users className="h-5 w-5 text-[var(--home-amber)] mb-2" />
              <h3 className="home-display font-bold text-slate-900 text-sm">
                {t('Workers list', 'Listahan ng workers')}
              </h3>
              <p className="text-sm text-muted mt-1 leading-relaxed">
                {t(
                  'Search and filter profiles by trade, area, and more.',
                  'Maghanap at mag-filter ng profiles ayon sa trabaho, lugar, at iba pa.'
                )}
              </p>
            </Link>
            <Link
              href="/categories"
              className="border border-[#e2ddd2] bg-[#fffdf9] p-4 transition-colors hover:bg-white hover:border-[#c4b89f]"
            >
              <Search className="h-5 w-5 text-[var(--home-amber)] mb-2" />
              <h3 className="home-display font-bold text-slate-900 text-sm">
                {t('Browse by trade', 'Mag-browse ayon sa trabaho')}
              </h3>
              <p className="text-sm text-muted mt-1 leading-relaxed">
                {t(
                  'Start with plumbing, carpentry, electrical, cleaning, and other trades.',
                  'Magsimula sa plumbing, carpentry, electrical, cleaning, at iba pang trabaho.'
                )}
              </p>
            </Link>
            <Link
              href="/map"
              className="border border-[#e2ddd2] bg-[#fffdf9] p-4 transition-colors hover:bg-white hover:border-[#c4b89f]"
            >
              <MapPin className="h-5 w-5 text-[var(--home-amber)] mb-2" />
              <h3 className="home-display font-bold text-slate-900 text-sm">
                {t('Map view', 'Mapa')}
              </h3>
              <p className="text-sm text-muted mt-1 leading-relaxed">
                {t(
                  'Explore workers visually across your city or region.',
                  'Tingnan ang workers sa mapa sa lungsod o region mo.'
                )}
              </p>
            </Link>
          </div>
        </section>

        {/* Tips */}
        <section>
          <h2 className="home-display text-xl font-bold text-slate-900 mb-1">
            {t('Tips for a smoother hire', 'Mga tip para sa mas madaling pag-hire')}
          </h2>
          <p className="text-sm text-muted mb-4">
            {t(
              'A little preparation goes a long way before you message anyone.',
              'Malaking tulong ang kaunting preparasyon bago ka mag-message.'
            )}
          </p>
          <div className="grid gap-3 sm:grid-cols-2">
            {tips.map((tip) => (
              <div
                key={tip.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">
                  <tip.icon className="h-5 w-5" />
                </span>
                <div className="min-w-0">
                  <h3 className="home-display font-bold text-slate-900 text-base">{tip.title}</h3>
                  <p className="text-sm text-muted mt-1 leading-relaxed">{tip.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Worker path */}
        <section>
          <h2 className="home-display text-xl font-bold text-slate-900 mb-1">
            {t('For workers', 'Para sa workers')}
          </h2>
          <p className="text-sm text-muted mb-4 max-w-2xl">
            {t(
              'If you offer skilled services, here’s how to get discovered on eHandyHire.',
              'Kung may bihasang serbisyo ka, ganito ka matutuklasan sa eHandyHire.'
            )}
          </p>
          <div className="grid gap-3 sm:grid-cols-2">
            {workerPath.map((item, i) => (
              <div
                key={item.title}
                className="flex gap-3 border border-[#e2ddd2] bg-[#fffdf9] p-4 sm:p-5"
              >
                <div className="flex h-10 w-10 shrink-0 items-center justify-center bg-[var(--home-ink)] text-white home-display text-sm font-bold">
                  {i + 1}
                </div>
                <div className="min-w-0">
                  <h3 className="home-display font-bold text-slate-900 text-base flex items-center gap-2">
                    <item.icon className="h-4 w-4 text-[var(--home-amber)]" />
                    {item.title}
                  </h3>
                  <p className="text-sm text-muted mt-1 leading-relaxed">{item.desc}</p>
                </div>
              </div>
            ))}
          </div>
          <div className="mt-4">
            <Link href="/become-worker">
              <Button variant="outline" className="rounded-none border-[#d6d0c4]">
                {t('Learn about becoming a worker', 'Alamin ang tungkol sa pagiging worker')}
              </Button>
            </Link>
          </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 get started.',
              'Mabilisang sagot bago ka magsimula.'
            )}
          </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 try it?', 'Handa ka na bang subukan?')}
          </h2>
          <p className="text-sm text-slate-300 leading-relaxed mb-5 max-w-xl">
            {t(
              'Browse workers near you, explore trades, or create a worker profile.',
              'Mag-browse ng workers malapit sa iyo, tingnan ang trades, o gumawa ng worker profile.'
            )}
          </p>
          <div className="flex flex-wrap gap-3">
            {JOBS_FEATURE_ENABLED ? (
              <Link href={buildPostJobAuthUrl()}>
                <Button className="worker-cta-amber rounded-none">
                  {t('Get Started — Post a Job', 'Magsimula — 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>
          </div>
        </section>
      </div>
    </div>
  );
}