import type { Metadata } from 'next';
import Link from 'next/link';
import { FileText, Mail, Shield } from 'lucide-react';
import { BrowsePageHero } from '@/components/layout/BrowsePageHero';
import { Button } from '@/components/ui/button';

export const metadata: Metadata = {
  title: 'Terms & Conditions',
  description:
    'Terms and conditions for creating and using an eHandyHire account, including how we use the information you submit.',
};

const sections = [
  {
    title: 'Agreement to these terms',
    body: [
      'By creating a customer or worker account on eHandyHire, you confirm that you have read, understood, and agree to these Terms & Conditions, our Disclaimer, and any related platform policies.',
      'If you do not agree, do not register or use eHandyHire.',
    ],
  },
  {
    title: 'Who may register',
    body: [
      'You must be at least 18 years old and legally able to use the platform in the Philippines.',
      'You confirm that the information you provide during registration and on your account is accurate, current, and yours to share.',
    ],
  },
  {
    title: 'Marketplace platform only',
    body: [
      'eHandyHire is an online marketplace and workers directory. Workers listed on eHandyHire are independent contractors or self-employed individuals — not employees, agents, partners, or representatives of eHandyHire.',
      'Any agreement, payment, schedule, or scope of work is between the customer and the worker. eHandyHire is not a party to those arrangements.',
    ],
  },
  {
    title: 'Information you submit',
    body: [
      'When you create and maintain an account, you may submit personal and related information, including but not limited to:',
    ],
    list: [
      'Name, email address, and mobile phone number',
      'Gender, profile photo, and other account details you choose to provide',
      'For workers: skills, trades, service areas, rates, headline, experience, and portfolio images',
      'Identity or verification documents (such as government ID and selfie), when you choose to verify',
      'Messages, hire invitations, reviews, and other content you send through the platform',
    ],
  },
  {
    title: 'How we use your submitted data',
    body: [
      'By registering, you authorize eHandyHire to collect, store, process, and use the information you submit for platform purposes, including to:',
    ],
    list: [
      'Create and manage your account and authenticate your identity',
      'For workers: display your public profile to customers searching for workers',
      'For customers: enable browsing, messaging, hiring, reviews, and related features',
      'Review verification documents for identity checks and trust features',
      'Send service-related notices such as OTPs, security alerts, hire updates, and important account messages',
      'Improve safety, prevent fraud or abuse, enforce our rules, and comply with legal obligations',
      'Analyze platform usage in aggregated or de-identified form to improve eHandyHire',
    ],
    footer:
      'We do not sell your personal information. We may share limited data with service providers that help us operate the platform (for example hosting, SMS/OTP delivery, or storage), only as needed to provide those services.',
  },
  {
    title: 'Public profile visibility (workers)',
    body: [
      'Information workers choose to show on a worker profile is visible to customers and may appear in search, browse, and map results.',
      'You are responsible for not uploading content you are not allowed to share, and for keeping sensitive details off your public profile when you do not want them shown.',
    ],
  },
  {
    title: 'Verification documents',
    body: [
      'If you upload IDs or other verification materials, they are used to assess identity and eligibility for verification status. They are not displayed publicly as part of a normal worker listing or customer profile card.',
      'Submitting documents does not guarantee approval. False or misleading documents may result in rejection or account action.',
    ],
  },
  {
    title: 'Your responsibilities',
    body: [
      'You agree to keep your login details secure, update your account when information changes, use the platform lawfully and respectfully, and communicate honestly with other users.',
      'Customers are responsible for evaluating workers and deciding who to hire. Workers are solely responsible for the services they offer, pricing, schedules, quality of work, and agreements with customers.',
    ],
  },
  {
    title: 'Account suspension or removal',
    body: [
      'We may suspend, restrict, or remove accounts that violate these terms, misuse the platform, submit false information, or create safety or integrity risks for other users.',
    ],
  },
  {
    title: 'Related notices',
    body: [
      'These Terms work together with our Disclaimer. For platform liability, independent-worker status, and assumption of risk, please also read the Disclaimer.',
    ],
  },
  {
    title: 'Changes',
    body: [
      'We may update these Terms from time to time. Continued use of eHandyHire after updates are posted means you accept the revised Terms.',
      'Last updated: July 20, 2026.',
    ],
  },
];

export default function TermsPage() {
  return (
    <div className="workers-directory">
      <BrowsePageHero
        variant="directory"
        leading={<FileText className="h-7 w-7" />}
        eyebrow="Legal notice"
        title="Terms & Conditions"
        description="Please read these terms before creating an account. They explain how eHandyHire works and how we use the information you submit."
        actions={[{ href: '/contact', label: 'Contact us', icon: Mail, variant: 'accent' }]}
      />

      <div className="page-container max-w-3xl">
        <div className="border border-[#e2ddd2] bg-[#fffdf9] px-4 py-4 flex gap-3 mb-8">
          <span className="flex h-10 w-10 shrink-0 items-center justify-center bg-[var(--home-ink)] text-white">
            <Shield className="h-5 w-5" />
          </span>
          <p className="text-sm text-slate-700 leading-relaxed pt-1">
            <strong className="font-semibold text-slate-900">Summary:</strong> By registering, you
            agree that eHandyHire may use your submitted account, profile, and verification data to
            operate the directory, enable messaging and hiring features, and keep the platform
            secure. Workers on eHandyHire are independent and not employed by us.
          </p>
        </div>

        <div className="space-y-8">
          {sections.map((section) => (
            <section key={section.title} className="border-b border-[#e2ddd2] pb-8 last:border-0">
              <h2 className="home-display text-lg font-bold text-slate-900 mb-3">{section.title}</h2>
              <div className="space-y-3 text-sm text-slate-600 leading-relaxed">
                {section.body.map((paragraph) => (
                  <p key={paragraph.slice(0, 48)}>{paragraph}</p>
                ))}
                {'list' in section && section.list && (
                  <ul className="list-disc pl-5 space-y-1.5">
                    {section.list.map((item) => (
                      <li key={item}>{item}</li>
                    ))}
                  </ul>
                )}
                {'footer' in section && section.footer && <p>{section.footer}</p>}
              </div>
            </section>
          ))}
        </div>

        <div className="mt-10 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 border border-[#e2ddd2] bg-[#fffdf9] p-5">
          <p className="text-sm text-muted">
            Also see our{' '}
            <Link
              href="/disclaimer"
              className="font-semibold text-[var(--home-amber)] hover:text-[var(--home-amber-soft)]"
            >
              Disclaimer
            </Link>
            . Questions?{' '}
            <Link
              href="/contact"
              className="font-semibold text-[var(--home-amber)] hover:text-[var(--home-amber-soft)]"
            >
              Contact us
            </Link>
          </p>
          <div className="flex flex-wrap gap-2">
            <Link href="/register">
              <Button variant="outline" className="rounded-none border-[#d6d0c4]">
                Create account
              </Button>
            </Link>
            <Link href="/register/customer">
              <Button variant="outline" className="rounded-none border-[#d6d0c4]">
                Customer registration
              </Button>
            </Link>
            <Link href="/register/worker">
              <Button variant="outline" className="rounded-none border-[#d6d0c4]">
                Worker registration
              </Button>
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}