import type { Metadata } from "next";
import { Download, ShieldCheck } from "lucide-react";
import SectionHeading from "@/components/SectionHeading";
import FadeIn from "@/components/animations/FadeIn";

export const metadata: Metadata = {
  title: "IMS Policy | Petro-Base Group",
  description:
    "Integrated Management Systems Policy (Quality, Health & Safety, Environmental Management Systems Policy) for Petro-Base Group and its subsidiaries.",
};

const commitments = [
  "Customer satisfaction through the provision of our full range of services.",
  "Effective implementation of QHSE MS requirements to prevent work-related injury and ill-health to our employees and all people within its workplace through systematic identification and control of workplace hazards.",
  "Effective management of our organization's environmental aspects and impacts (such as the release of pollutants to land, air and water) and through the efficient use of resources like energy, water, raw materials / natural resources to protect the environment.",
  "Fulfilment of all relevant compliance obligations, legal and other requirements to which Petro-Base subscribes that relate to its QHSE issues and are relevant to its context.",
  "Consultation and participation of workers in OH&S-related activities and where applicable workers' representatives.",
  "Compliance with all relevant interested parties' requirements (such as customers, regulatory/statutory bodies, external providers among others) including its continual improvement in QHSE Management and performance as well as all other business-related processes in line with requirements of ISO 9001, ISO 14001 & ISO 45001 to achieve its strategic direction, enhance its environmental performance as well as overall organizational performance and maintenance of safe and health workplace.",
  "Establishment and implementation of measurable quality, health & safety and environment objectives at relevant levels and functions to achieve the intended results of its QHSE Management Systems.",
  "Effective management of all identified QHSE risks and opportunities related to its Organizational context to ensure organizational continuity and growth.",
];

const entities = [
  {
    name: "Petro-Base Group Limited",
    abbr: "PBGL",
    docNo: "PBGL/QHSE/POL/01",
    issueDate: "02/10/2025",
    revNo: "0",
    services:
      "Onshore/Offshore Facility Integrity and Inspection, Lifting Inspection and Rope Access, Drilling Equipment and Tubular Inspection, Above and Underground Storage Tank Services, Oil and Gas Training and Certification, Sludge Profiling of Oil Tanks (S.P.O.T), QA/QC Third Party Surveillance, Natural Gas Processing and Distribution, Drilling Rig Support Services, Petroleum Product Marketing, Engineering, Fabrication & Construction, Facility Upgrade, Erection and Installation & Maintenance Services, Fabric Maintenance Services (Blasting & Painting), Logistics and Procurement.",
  },
  {
    name: "Petro-Base Limited",
    abbr: "PBL",
    docNo: "PBL/QHSE/POL/01",
    issueDate: "02/10/2025",
    revNo: "03",
    services:
      "Onshore/Offshore Facility Integrity and Inspection, Lifting Inspection and Rope Access, Drilling Equipment and Tubular Inspection, Above and Underground Storage Tank Services, Oil and Gas Training and Certification, Sludge Profiling of Oil Tanks (S.P.O.T), and QA/QC Third Party Surveillance.",
  },
  {
    name: "Petro-Base Exploration and Production Ltd",
    abbr: "PBEP",
    docNo: "PBEP/QHSE/POL/01",
    issueDate: "02/10/2025",
    revNo: "0",
    services:
      "Natural Gas Processing and Distribution, Drilling Rig Support Services, and Petroleum Product Marketing.",
  },
  {
    name: "Petro-Base Offshore Limited",
    abbr: "PBOL",
    docNo: "PBOL/QHSE/POL/01",
    issueDate: "02/10/2025",
    revNo: "0",
    services:
      "Engineering, Fabrication & Construction, Facility Upgrade, Erection & Installation, Fabric Maintenance Services (Blasting & Painting), Pipeline Construction, Repair & Maintenance Services, and Wastes Management Services.",
  },
  {
    name: "Trans-Orbit Petroleum Services Ltd",
    abbr: "TOPSL",
    docNo: "TOPSL/QHSE/POL/01",
    issueDate: "02/10/2025",
    revNo: "0",
    services: "Logistics and Procurement, and Facility Maintenance Services.",
  },
];

export default function IMSPolicyPage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Hero Banner */}
      <section className="relative bg-primary h-[50vh] min-h-[500px] flex items-center overflow-hidden">
        <div className="absolute inset-0 opacity-10">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.15),transparent_60%)]" />
        </div>
        <div className="container mx-auto px-4 relative z-10">
          <FadeIn>
            <div className="flex items-center gap-4 mb-4">
              <div className="w-12 h-[2px] bg-accent" />
              <span className="petro-section-label-light">Official Policy Document</span>
            </div>
            <h1 className="text-4xl md:text-5xl font-bold text-primary-foreground tracking-tight mb-4">
              Integrated Management Systems Policy
            </h1>
            <p className="text-primary-foreground/70 text-lg max-w-2xl mb-8">
              Quality, Health &amp; Safety, and Environmental Management Systems Policy — signed and
              authorised by the Group Chairman.
            </p>
            <a
              href="/privacy/PBGL IMS Policy.pdf"
              download="PBGL_IMS_Policy.pdf"
              className="inline-flex items-center gap-2 bg-accent hover:bg-accent/90 text-accent-foreground font-semibold px-6 py-3 rounded-lg transition-colors"
            >
              <Download className="w-5 h-5" />
              Download Signed Policy (PDF)
            </a>
          </FadeIn>
        </div>
      </section>

      {/* Group-level commitments */}
      <section className="py-20 bg-background">
        <div className="container mx-auto px-4">
          <FadeIn>
            <SectionHeading
              title="Our QHSE Commitments"
              subtitle="We at Petro-Base Group Limited are committed to the following principles across all our subsidiaries and operations."
            />
          </FadeIn>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-10">
            {commitments.map((item, i) => (
              <FadeIn key={i} delay={i * 0.07}>
                <div className="flex gap-4 p-6 rounded-xl border border-border bg-card shadow-sm h-full">
                  <ShieldCheck className="w-6 h-6 text-accent flex-shrink-0 mt-0.5" />
                  <p className="text-muted-foreground leading-relaxed text-sm">{item}</p>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* Individual entity policies */}
      <section className="py-20 bg-muted/40">
        <div className="container mx-auto px-4">
          <FadeIn>
            <SectionHeading
              title="Subsidiary Policies"
              subtitle="Each entity within the Petro-Base Group maintains its own IMS Policy tailored to its specific scope of operations."
            />
          </FadeIn>

          <div className="space-y-8 mt-10">
            {entities.map((entity, i) => (
              <FadeIn key={entity.abbr} delay={i * 0.08}>
                <div className="rounded-2xl border border-border bg-card shadow-sm overflow-hidden">
                  {/* Card header */}
                  <div className="bg-primary px-6 py-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                    <div>
                      <h2 className="text-xl font-bold text-primary-foreground">{entity.name}</h2>
                      <p className="text-primary-foreground/60 text-sm mt-0.5">
                        Integrated Management Systems Policy
                      </p>
                    </div>
                    <span className="inline-flex items-center bg-accent/20 text-accent-foreground font-semibold text-sm px-3 py-1 rounded-full self-start sm:self-auto">
                      {entity.abbr}
                    </span>
                  </div>

                  {/* Card body */}
                  <div className="px-6 py-6 space-y-5">
                    <div>
                      <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-2">
                        Scope of Services
                      </h3>
                      <p className="text-foreground leading-relaxed">
                        Customer satisfaction through the provision of {entity.services}
                      </p>
                    </div>

                    <div>
                      <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-2">
                        Responsibility for Implementation and Maintenance
                      </h3>
                      <p className="text-muted-foreground leading-relaxed text-sm">
                        The Group Chairman ensures that this Integrated Management System policy is
                        communicated to relevant interested parties, including all employees and
                        contractors, in a manner that ensures suitable application to assigned tasks
                        and continual review for suitability, effectiveness, and continual improvement
                        during management review meetings.
                      </p>
                    </div>

                    <div className="pt-2 border-t border-border">
                      <p className="text-sm font-semibold text-foreground">MARTIN UMEH</p>
                      <p className="text-xs text-muted-foreground">Group Chairman</p>
                    </div>

                    {/* Document metadata */}
                    <div className="flex flex-wrap gap-4 pt-1">
                      <div className="text-xs">
                        <span className="text-muted-foreground">Doc No: </span>
                        <span className="font-medium text-foreground">{entity.docNo}</span>
                      </div>
                      <div className="text-xs">
                        <span className="text-muted-foreground">Issue Date: </span>
                        <span className="font-medium text-foreground">{entity.issueDate}</span>
                      </div>
                      <div className="text-xs">
                        <span className="text-muted-foreground">Rev No: </span>
                        <span className="font-medium text-foreground">{entity.revNo}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* Download CTA */}
      <section className="py-16 bg-primary">
        <div className="container mx-auto px-4 text-center">
          <FadeIn>
            <h2 className="text-2xl md:text-3xl font-bold text-primary-foreground mb-3">
              Download the Full Signed Policy
            </h2>
            <p className="text-primary-foreground/70 mb-8 max-w-xl mx-auto">
              The official signed copy of our Integrated Management Systems Policy is available as a
              PDF for your reference.
            </p>
            <a
              href="/privacy/PBGL IMS Policy.pdf"
              download="PBGL_IMS_Policy.pdf"
              className="inline-flex items-center gap-2 bg-accent hover:bg-accent/90 text-accent-foreground font-semibold px-8 py-4 rounded-lg transition-colors text-lg"
            >
              <Download className="w-5 h-5" />
              Download PDF
            </a>
          </FadeIn>
        </div>
      </section>
    </div>
  );
}