'use client';

import { useState } from 'react';
import Link from 'next/link';
import {
  Heart,
  Server,
  Shield,
  Smartphone,
  MapPin,
  Users,
  CircleHelp,
  Copy,
  Check,
  Mail,
  Building2,
  Wallet,
  ArrowRight,
} from 'lucide-react';
import { BrowsePageHero } from '@/components/layout/BrowsePageHero';
import { Button } from '@/components/ui/button';
import { useLanguage } from '@/contexts/LanguageContext';

/** Update these with your live payment details */
const SUPPORT_EMAIL = 'support@ehandyhire.com';
const GCASH_NUMBER = '0917 123 4567';
const GCASH_NAME = 'eHandyHire';
const MAYA_NUMBER = '0917 123 4567';
const MAYA_NAME = 'eHandyHire';
const BANK_NAME = 'BDO / BPI / UnionBank';
const BANK_ACCOUNT_NAME = 'eHandyHire';
const BANK_ACCOUNT_NUMBER = 'Contact us for account number';

function CopyRow({
  label,
  value,
  t,
}: {
  label: string;
  value: string;
  t: (en: string, tl: string) => string;
}) {
  const [copied, setCopied] = useState(false);

  const copy = async () => {
    try {
      await navigator.clipboard.writeText(value.replace(/\s/g, ''));
      setCopied(true);
      window.setTimeout(() => setCopied(false), 1800);
    } catch {
      // Fallback: leave value selectable
    }
  };

  return (
    <div className="flex items-center justify-between gap-3 border-b border-[#e2ddd2] py-3 last:border-0">
      <div className="min-w-0">
        <p className="text-[10px] font-semibold uppercase tracking-wide text-muted">{label}</p>
        <p className="mt-0.5 truncate text-sm font-semibold text-slate-900">{value}</p>
      </div>
      <Button
        type="button"
        variant="outline"
        size="sm"
        onClick={copy}
        className="shrink-0 gap-1.5 rounded-none border-[#d6d0c4]"
      >
        {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
        {copied ? t('Copied', 'Nakopya') : t('Copy', 'Kopyahin')}
      </Button>
    </div>
  );
}

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

  const mailtoSponsor = () => {
    const subject = encodeURIComponent('Sponsorship / donation — eHandyHire');
    const body = encodeURIComponent(
      [
        'Hi eHandyHire team,',
        '',
        'I’d like to sponsor the platform.',
        '',
        'Amount I sent / plan to send:',
        'Payment method I used / plan to use:',
        'Reference / receipt (if any):',
        'Name (optional):',
        '',
        'Thank you for building eHandyHire.',
      ].join('\n')
    );
    window.location.href = `mailto:${SUPPORT_EMAIL}?subject=${subject}&body=${body}`;
  };

  const fundsHelp = [
    {
      icon: Server,
      title: t('Hosting & infrastructure', 'Hosting at infrastructure'),
      desc: t(
        'Servers, database, file storage for portfolio photos, and uptime so workers and customers can rely on the directory.',
        'Servers, database, file storage para sa portfolio photos, at uptime para maaasahan ng workers at customers ang directory.'
      ),
    },
    {
      icon: MapPin,
      title: t('Maps & location tools', 'Maps at location tools'),
      desc: t(
        'Map browsing and area filters help people find workers nearby — those services have ongoing costs.',
        'Tumutulong ang map browsing at area filters para makahanap ng workers malapit — may ongoing costs ang mga serbisyong iyon.'
      ),
    },
    {
      icon: Smartphone,
      title: t('SMS verification', 'SMS verification'),
      desc: t(
        'Phone verification protects accounts and keeps fake sign-ups down. Each OTP has a small cost.',
        'Pinoprotektahan ng phone verification ang accounts at nababawasan ang fake sign-ups. May maliit na gastos ang bawat OTP.'
      ),
    },
    {
      icon: Shield,
      title: t('Security & maintenance', 'Security at maintenance'),
      desc: t(
        'Updates, monitoring, and fixes so the platform stays safe and useful for independent workers nationwide.',
        'Updates, monitoring, at fixes para manatiling ligtas at kapaki-pakinabang ang platform para sa independent workers sa buong bansa.'
      ),
    },
  ];

  const whoSponsors = [
    {
      title: t('Customers who found help', 'Customers na nakahanap ng tulong'),
      desc: t(
        'If eHandyHire helped you hire a trusted tradesperson, a small contribution keeps that discovery free for others.',
        'Kung nakatulong ang eHandyHire para makahanap ng mapagkakatiwalaang manggagawa, maliit na contribution ang nagpapanatiling libre nito para sa iba.'
      ),
    },
    {
      title: t('Workers growing their reach', 'Workers na lumalawak ang reach'),
      desc: t(
        'Sponsoring helps us keep listings, profiles, and messaging available without middleman fees.',
        'Tumutulong ang sponsorship para manatiling available ang listings, profiles, at messaging nang walang middleman fees.'
      ),
    },
    {
      title: t('Community & partners', 'Community at partners'),
      desc: t(
        'Local businesses, LGUs, and supporters who want skilled work in the Philippines to be easier to find.',
        'Local businesses, LGUs, at supporters na gustong gawing mas madaling hanapin ang bihasang trabaho sa Pilipinas.'
      ),
    },
  ];

  const faqs = [
    {
      q: t('Is there a minimum amount?', 'May minimum ba?'),
      a: t(
        'No. Any amount helps — even ₱50 or ₱100 covers real platform costs over time. Choose what feels right for you.',
        'Wala. Kahit anong amount ay tumutulong — kahit ₱50 o ₱100 ay may saysay sa platform costs. Piliin ang bagay sa iyo.'
      ),
    },
    {
      q: t('Is sponsorship the same as hiring a worker?', 'Pareho ba ang sponsorship sa pag-hire ng worker?'),
      a: t(
        'No. Sponsorship supports the eHandyHire platform itself. Hiring and payment for work stay between you and the worker.',
        'Hindi. Sinusuportahan ng sponsorship ang eHandyHire platform. Ang bayad sa trabaho ay sa iyo at sa worker pa rin.'
      ),
    },
    {
      q: t('Will I get a receipt?', 'Makakakuha ba ako ng receipt?'),
      a: t(
        `After you send payment, email us at ${SUPPORT_EMAIL} with the amount and reference. We can confirm and thank you.`,
        `Pagkatapos magpadala, i-email kami sa ${SUPPORT_EMAIL} kasama ang amount at reference. Makakapag-confirm at magpapasalamat kami.`
      ),
    },
    {
      q: t('Can I sponsor monthly?', 'Puwede bang monthly?'),
      a: t(
        'Yes. Recurring support is welcome. Mention “monthly sponsor” in your email so we can note it.',
        'Oo. Welcome ang tuloy-tuloy na support. Banggitin ang “monthly sponsor” sa email para marecord namin.'
      ),
    },
    {
      q: t('Are workers employed by eHandyHire?', 'Empleyado ba ng eHandyHire ang workers?'),
      a: t(
        'No. Workers are independent. Your sponsorship funds the directory — not wages paid by us to workers.',
        'Hindi. Independent ang workers. Ang sponsorship ay para sa directory — hindi sahod mula sa amin para sa workers.'
      ),
    },
  ];

  const paymentMethods = [
    {
      icon: Wallet,
      title: 'GCash',
      rows: [
        { label: t('Account name', 'Account name'), value: GCASH_NAME },
        { label: t('Mobile number', 'Mobile number'), value: GCASH_NUMBER },
      ],
    },
    {
      icon: Smartphone,
      title: 'Maya',
      rows: [
        { label: t('Account name', 'Account name'), value: MAYA_NAME },
        { label: t('Mobile number', 'Mobile number'), value: MAYA_NUMBER },
      ],
    },
    {
      icon: Building2,
      title: t('Bank transfer', 'Bank transfer'),
      rows: [
        { label: t('Bank', 'Bangko'), value: BANK_NAME },
        { label: t('Account name', 'Account name'), value: BANK_ACCOUNT_NAME },
        { label: t('Account number', 'Account number'), value: BANK_ACCOUNT_NUMBER },
      ],
    },
  ];

  return (
    <div className="workers-directory">
      <BrowsePageHero
        variant="directory"
        leading={<Heart className="h-7 w-7" />}
        eyebrow={t('Support the platform', 'Suportahan ang platform')}
        title={t('Sponsor eHandyHire', 'I-sponsor ang eHandyHire')}
        description={t(
          'Help keep this workers directory running for skilled tradespeople and the communities who need them. Any amount makes a difference.',
          'Tulungan kaming panatilihing gumagana ang workers directory para sa bihasang manggagawa at sa mga komunidad na nangangailangan sa kanila. May saysay ang kahit anong amount.'
        )}
        actions={[
          {
            href: '#ways-to-give',
            label: t('Ways to give', 'Paano magbigay'),
            icon: ArrowRight,
            variant: 'accent',
          },
        ]}
      />

      <div className="page-container max-w-4xl space-y-10">
        {/* Why */}
        <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('Why we need sponsors', 'Bakit kailangan namin ang sponsors')}
          </h2>
          <p className="text-sm text-slate-600 leading-relaxed">
            {t(
              'eHandyHire connects households and businesses with independent blue-collar professionals across the Philippines — without charging middleman fees to get listed or discovered. Keeping search, profiles, messaging, maps, and verification online has real monthly costs.',
              'Ikinokonekta ng eHandyHire ang households at businesses sa independent blue-collar professionals sa buong Pilipinas — nang walang middleman fees para mailista o matuklasan. May tunay na buwanang gastos ang pagpapanatiling online ng search, profiles, messaging, maps, at verification.'
            )}
          </p>
          <p className="text-sm text-slate-600 leading-relaxed">
            {t(
              'Sponsorship is voluntary support for the platform. It is not payment for a worker’s job, and it does not make anyone an employee of eHandyHire.',
              'Boluntaryong support sa platform ang sponsorship. Hindi ito bayad sa trabaho ng worker, at hindi nito ginagawang empleyado ng eHandyHire ang sinuman.'
            )}{' '}
            <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>

        {/* Where funds go */}
        <section>
          <h2 className="home-display text-xl font-bold text-slate-900 mb-1">
            {t('Where your support goes', 'Saan napupunta ang support mo')}
          </h2>
          <p className="text-sm text-muted mb-4 max-w-2xl">
            {t(
              'Transparent priorities — keeping the directory fast, available, and useful.',
              'Malinaw ang prayoridad — panatilihing mabilis, available, at kapaki-pakinabang ang directory.'
            )}
          </p>
          <div className="grid gap-3 sm:grid-cols-2">
            {fundsHelp.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 text-base font-bold text-slate-900">{item.title}</h3>
                  <p className="mt-1 text-sm leading-relaxed text-muted">{item.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Who */}
        <section>
          <h2 className="home-display text-xl font-bold text-slate-900 mb-1">
            {t('Who sponsors us', 'Sino ang nag-sponsor')}
          </h2>
          <p className="text-sm text-muted mb-4">
            {t(
              'Anyone who believes skilled work should be easier to find.',
              'Sinumang naniniwalang dapat madaling hanapin ang bihasang trabaho.'
            )}
          </p>
          <div className="space-y-3">
            {whoSponsors.map((item) => (
              <div key={item.title} className="border border-[#e2ddd2] bg-[#fffdf9] p-4 sm:p-5">
                <h3 className="font-semibold text-slate-900 text-sm sm:text-base">{item.title}</h3>
                <p className="mt-1.5 text-sm leading-relaxed text-muted">{item.desc}</p>
              </div>
            ))}
          </div>
        </section>

        {/* Payment methods */}
        <section id="ways-to-give" className="scroll-mt-24 space-y-4">
          <div>
            <h2 className="home-display text-xl font-bold text-slate-900 mb-1">
              {t('How to send support', 'Paano magpadala')}
            </h2>
            <p className="text-sm text-muted mb-4 max-w-2xl">
              {t(
                'Use GCash, Maya, or bank transfer. Then email us so we can thank you and confirm.',
                'Gamitin ang GCash, Maya, o bank transfer. Pagkatapos, i-email kami para makapagpasalamat at mag-confirm.'
              )}
            </p>
          </div>

          <div className="grid gap-3 lg:grid-cols-3">
            {paymentMethods.map((method) => (
              <div key={method.title} className="border border-[#e2ddd2] bg-[#fffdf9] p-4">
                <div className="mb-2 flex items-center gap-2">
                  <span className="flex h-9 w-9 items-center justify-center bg-[var(--home-ink)] text-white">
                    <method.icon className="h-4 w-4" />
                  </span>
                  <h4 className="home-display font-bold text-slate-900">{method.title}</h4>
                </div>
                {method.rows.map((row) => (
                  <CopyRow key={row.label} label={row.label} value={row.value} t={t} />
                ))}
              </div>
            ))}
          </div>

          <div className="flex flex-col gap-3 border border-[#e2ddd2] bg-white p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
            <div className="flex gap-3 min-w-0">
              <span className="flex h-10 w-10 shrink-0 items-center justify-center bg-[var(--home-amber)] text-white">
                <Mail className="h-5 w-5" />
              </span>
              <div className="min-w-0">
                <p className="text-sm font-semibold text-slate-900">
                  {t('Tell us after you send', 'Sabihan kami pagkatapos magpadala')}
                </p>
                <p className="mt-0.5 text-xs text-muted leading-relaxed sm:text-sm">
                  {t(
                    `Email ${SUPPORT_EMAIL} with your amount and reference number. Optional: include your name if you’d like to be thanked publicly later.`,
                    `I-email ang ${SUPPORT_EMAIL} kasama ang amount at reference number. Opsyonal: ilagay ang pangalan mo kung gusto mong pasalamatan nang publiko mamaya.`
                  )}
                </p>
              </div>
            </div>
            <Button
              type="button"
              onClick={mailtoSponsor}
              className="worker-cta-amber shrink-0 rounded-none gap-2"
            >
              <Mail className="h-4 w-4" />
              {t('Email us', 'I-email kami')}
            </Button>
          </div>
        </section>

        {/* Impact */}
        <section className="border border-[#e2ddd2] bg-[#fffdf9] p-5 sm:p-7">
          <div className="flex gap-3">
            <span className="flex h-10 w-10 shrink-0 items-center justify-center bg-[var(--home-ink)] text-white">
              <Users className="h-5 w-5" />
            </span>
            <div>
              <h2 className="home-display text-lg font-bold text-slate-900">
                {t('What sponsorship keeps free', 'Ano ang pinapanatiling libre ng sponsorship')}
              </h2>
              <ul className="mt-3 space-y-2">
                {[
                  t(
                    'Browsing workers by trade, area, and map',
                    'Pag-browse ng workers ayon sa trabaho, lugar, at mapa'
                  ),
                  t(
                    'Worker profiles, portfolios, and reviews',
                    'Worker profiles, portfolios, at reviews'
                  ),
                  t(
                    'Direct messaging between customers and workers',
                    'Direktang messaging sa customers at workers'
                  ),
                  t(
                    'Worker registration and discovery without listing fees',
                    'Worker registration at discovery nang walang listing fees'
                  ),
                ].map((item) => (
                  <li key={item} className="flex gap-2 text-sm text-slate-600 leading-relaxed">
                    <span className="mt-2 h-1.5 w-1.5 shrink-0 bg-[var(--home-amber)]" />
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </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('Before you send support.', 'Bago ka magpadala ng support.')}
          </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="mt-1.5 text-sm leading-relaxed text-muted">{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('Thank you for considering a sponsorship', 'Salamat sa pagsasaalang-alang na mag-sponsor')}
          </h2>
          <p className="mb-5 max-w-xl text-sm leading-relaxed text-slate-300">
            {t(
              'Every contribution helps skilled workers stay discoverable and helps customers find trusted help nearby.',
              'Tumutulong ang bawat contribution para manatiling matuklasan ang bihasang workers at makahanap ang customers ng maaasahang tulong malapit sa kanila.'
            )}
          </p>
          <div className="flex flex-wrap gap-3">
            <Button type="button" onClick={mailtoSponsor} className="worker-cta-amber rounded-none gap-2">
              <Heart className="h-4 w-4" />
              {t('Sponsor now', 'Mag-sponsor ngayon')}
            </Button>
            <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="/about">
              <Button
                variant="outline"
                className="rounded-none border-white/25 bg-transparent text-white hover:bg-white/10 hover:text-white"
              >
                {t('About eHandyHire', 'Tungkol sa eHandyHire')}
              </Button>
            </Link>
          </div>
        </section>
      </div>
    </div>
  );
}