import { useSeoMeta } from '@unhead/react';
import { Link } from 'react-router-dom';
import { Package, ShieldAlert, Handshake, Scale, Users, Ban } from 'lucide-react';

import { useTranslation } from '@/contexts/language';

function Section({
  icon: Icon,
  color,
  title,
  children,
}: {
  icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
  color: string;
  title: string;
  children: React.ReactNode;
}) {
  return (
    <section className="rounded-2xl border border-white/8 bg-white/3 p-5">
      <div className="mb-3 flex items-center gap-3">
        <div
          className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl"
          style={{ background: `${color}1a`, border: `1px solid ${color}40` }}
        >
          <Icon className="h-5 w-5" style={{ color }} />
        </div>
        <h2 className="text-lg font-black uppercase tracking-wide text-white">{title}</h2>
      </div>
      <div className="space-y-3 text-sm leading-relaxed text-gray-400">{children}</div>
    </section>
  );
}

/**
 * Marketplace guidelines. Peer-to-peer, buyer-beware, no checkout, no central
 * dispute handling — expectations stated up front, alongside the trust signals
 * the app now shows.
 */
export default function MarketplaceGuidelinesPage() {
  const { t } = useTranslation();
  useSeoMeta({
    title: t('marketTerms.seoTitle'),
    description: t('marketTerms.seoDescription'),
  });

  return (
    <div className="container max-w-3xl space-y-5 py-10">
      <header className="space-y-3">
        <div className="flex items-center gap-3">
          <Package className="h-8 w-8 text-[#ccff00]" />
          <h1 className="text-3xl font-black uppercase tracking-wide text-white">
            {t('marketTerms.title')}
          </h1>
        </div>
        <p className="text-gray-400">{t('marketTerms.intro')}</p>
      </header>

      <Section icon={Handshake} color="#13d2e5" title={t('marketTerms.howTitle')}>
        <p>{t('marketTerms.howBody')}</p>
      </Section>

      <Section icon={Ban} color="#ef4444" title={t('marketTerms.rulesTitle')}>
        <p>{t('marketTerms.rulesBody')}</p>
      </Section>

      <Section icon={Users} color="#6366f1" title={t('marketTerms.respectTitle')}>
        <p>{t('marketTerms.respectBody')}</p>
      </Section>

      <Section icon={Scale} color="#22c55e" title={t('marketTerms.trustTitle')}>
        <p>{t('marketTerms.trustBody')}</p>
        <p className="space-x-3">
          <Link to="/trust" className="text-xs text-[#ccff00] underline">
            {t('marketTerms.trustLink')}
          </Link>
          <Link to="/privacy" className="text-xs text-[#ccff00] underline">
            {t('marketTerms.privacyLink')}
          </Link>
        </p>
      </Section>

      <Section icon={ShieldAlert} color="#f59e0b" title={t('marketTerms.safetyTitle')}>
        <p>{t('marketTerms.safetyBody')}</p>
      </Section>

      <Section icon={ShieldAlert} color="#8c929e" title={t('marketTerms.moderationTitle')}>
        <p>{t('marketTerms.moderationBody')}</p>
      </Section>
    </div>
  );
}