import React from 'react';
import { ShieldCheck, FileText, ArrowRight } from 'lucide-react';
import { Breadcrumbs } from '../components/Breadcrumbs';

interface LegalPageProps {
  type: 'privacy' | 'terms';
  onNavigate: (path: string) => void;
}

export function LegalPage({ type, onNavigate }: LegalPageProps) {
  const isPrivacy = type === 'privacy';
  const breadcrumbs = [{ label: isPrivacy ? 'Privacy Notice' : 'Terms of Service' }];

  return (
    <div className="bg-[#F6F7F2] min-h-screen">
      <Breadcrumbs items={breadcrumbs} onNavigate={onNavigate} />

      <section className="bg-white border-b border-[#E5E7DC] py-14 px-4 sm:px-6 lg:px-8">
        <div className="max-w-4xl mx-auto space-y-3">
          <div className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-[#0B4035] bg-[#F3F8D3] px-3 py-1 rounded-full">
            <span>Governance & Compliance</span>
          </div>

          <h1 className="text-3xl sm:text-4xl font-serif font-bold text-[#0B4035]">
            {isPrivacy ? 'PANIA Privacy Notice' : 'Terms of Service & Operational Policies'}
          </h1>

          <p className="text-xs text-stone-500 font-mono">
            Version 2.0 · Effective October 2026 · Nairobi, Kenya
          </p>
        </div>
      </section>

      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="bg-white rounded-2xl p-8 sm:p-12 border border-[#E5E7DC] shadow-xs space-y-8 text-stone-800 text-sm leading-relaxed">
          {isPrivacy ? (
            <>
              <div>
                <h2 className="font-serif font-bold text-lg text-[#0B4035] mb-2">
                  1. Information We Collect
                </h2>
                <p>
                  PANIA Digital Academy collects contact details (such as your name, email address, telephone/WhatsApp number, and expressed course interest) exclusively when voluntarily submitted through our enquiry and course guidance forms.
                </p>
              </div>

              <div>
                <h2 className="font-serif font-bold text-lg text-[#0B4035] mb-2">
                  2. Purpose of Processing
                </h2>
                <p>
                  We process this information strictly to respond to your specific enquiry, confirm intake schedules, share syllabus outlines, and coordinate joining arrangements for our live online sessions. We do not sell, rent, or distribute contact lists to third-party commercial marketing entities.
                </p>
              </div>

              <div>
                <h2 className="font-serif font-bold text-lg text-[#0B4035] mb-2">
                  3. Online Class Security & Learner Privacy
                </h2>
                <p>
                  Cohort sessions conducted via Zoom and Google Meet are restricted to enrolled learners. Meeting passwords and access tokens are never published on the public website. Recordings made for educational revision are accessible only to registered participants within the cohort.
                </p>
              </div>

              <div>
                <h2 className="font-serif font-bold text-lg text-[#0B4035] mb-2">
                  4. Data Retention and Rights
                </h2>
                <p>
                  You have the right to request access, correction, or deletion of your enquiry records at any time by contacting our privacy coordinator at <a href="mailto:contact@pania.com" className="text-[#0B4035] underline font-semibold">contact@pania.com</a>.
                </p>
              </div>
            </>
          ) : (
            <>
              <div>
                <h2 className="font-serif font-bold text-lg text-[#0B4035] mb-2">
                  1. Scope of Online Training Services
                </h2>
                <p>
                  PANIA Digital Academy provides digital skills training, executive upskilling, and career development programmes. All training is delivered 100% online through Zoom, Google Meet, and coordinated communication via WhatsApp.
                </p>
              </div>

              <div>
                <h2 className="font-serif font-bold text-lg text-[#0B4035] mb-2">
                  2. External Certification Awards
                </h2>
                <p>
                  PANIA prepares learners for vendor examinations (including Amazon Web Services, Google Cloud, and Cisco). PANIA does not issue these external credentials; formal credentials and certifications are awarded solely by the respective independent credentialing bodies upon meeting their examination requirements.
                </p>
              </div>

              <div>
                <h2 className="font-serif font-bold text-lg text-[#0B4035] mb-2">
                  3. Employment and Placement Disclaimer
                </h2>
                <p>
                  PANIA connects training with career guidance, resume reviews, mentorship, and employer job linkages. However, PANIA does not guarantee employment, freelance contracts, or specific income outcomes. Placement opportunities depend on individual performance, portfolio quality, and employer hiring criteria.
                </p>
              </div>

              <div>
                <h2 className="font-serif font-bold text-lg text-[#0B4035] mb-2">
                  4. Enrolment and Commercial Arrangements
                </h2>
                <p>
                  All programme fees, schedules, and duration arrangements are verified and confirmed during the direct enrolment process prior to class commencement.
                </p>
              </div>
            </>
          )}

          <div className="pt-6 border-t border-stone-100 flex items-center justify-between text-xs text-stone-500">
            <span>Questions regarding policies? Email contact@pania.com</span>
            <button
              onClick={() => onNavigate('/')}
              className="text-[#0B4035] font-bold hover:underline inline-flex items-center gap-1"
            >
              <span>Return to Home</span>
              <ArrowRight className="w-3.5 h-3.5" />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}