import { createFileRoute } from "@tanstack/react-router";
import hero from "@/assets/hero.jpg";

export const Route = createFileRoute("/about")({
  head: () => ({
    meta: [
      { title: "About Us — Global Market Connections Co. Ltd" },
      { name: "description", content: "Learn about Global Market Connections Co. Ltd — our mission, vision and core values driving trusted service across South Sudan." },
      { property: "og:title", content: "About — Global Market Connections Co. Ltd" },
      { property: "og:description", content: "A diversified South Sudanese corporate established to strengthen global connections across industries." },
    ],
  }),
  component: About,
});

function About() {
  return (
    <>
      <PageBanner title="About Us" caption="Who we are" />
      <section className="bg-ivory">
        <div className="container-classic grid gap-12 py-20 md:grid-cols-12">
          <div className="md:col-span-5">
            <img src={hero} alt="Global trade" width={1280} height={800} loading="lazy" className="w-full object-cover" />
          </div>
          <div className="md:col-span-7">
            <p className="text-xs uppercase tracking-[0.4em] text-gold">Our Story</p>
            <span className="gold-rule mt-4" />
            <h2 className="section-title mt-5">Building bridges across industries.</h2>
            <div className="mt-6 space-y-5 text-lg leading-relaxed text-muted-foreground">
              <p>
                Global Market Connection Co. Ltd is a dynamic and versatile corporate dedicated to
                establishing and strengthening global connections across a spectrum of industries.
              </p>
              <p>
                Our commitment is in delivering exceptional services and innovative solutions
                across various sectors. We take pride in offering a comprehensive suite of services
                that cater to diverse business needs and operational requirements.
              </p>
              <p>
                Incorporated in Juba on 11 July 2024 under the Laws of South Sudan (Companies Act
                2012), GMC operates with full legal authorisation and a clear mandate to serve our
                clients with discipline, integrity and craft.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="bg-secondary/60 border-y border-border">
        <div className="container-classic grid gap-12 py-20 md:grid-cols-2">
          <article className="bg-card p-10 border border-border">
            <p className="text-xs uppercase tracking-[0.4em] text-gold">Mission</p>
            <span className="gold-rule mt-4" />
            <h3 className="mt-5 font-serif text-3xl text-navy-deep">Service without compromise.</h3>
            <p className="mt-5 text-lg leading-relaxed text-muted-foreground">
              To continually innovate and provide unparalleled services across our diverse
              portfolio — fostering growth, reliability and efficiency for our clients and
              partners worldwide.
            </p>
          </article>
          <article className="bg-card p-10 border border-border">
            <p className="text-xs uppercase tracking-[0.4em] text-gold">Vision</p>
            <span className="gold-rule mt-4" />
            <h3 className="mt-5 font-serif text-3xl text-navy-deep">A global facilitator.</h3>
            <p className="mt-5 text-lg leading-relaxed text-muted-foreground">
              To be the foremost global facilitator of connection and services, empowering
              businesses and individuals to thrive in an interconnected world.
            </p>
          </article>
        </div>
      </section>

      <section className="bg-navy-deep text-ivory">
        <div className="container-classic py-16 md:py-20 text-center">
          <p className="text-xs uppercase tracking-[0.4em] text-gold">Legal Status</p>
          <h3 className="mt-4 font-serif text-2xl">Republic of South Sudan · Companies Act 2012</h3>
          <p className="mx-auto mt-3 max-w-2xl text-ivory/70">
            Registered as Global Market Connections Enterprise Limited. A company limited by
            shares with full operating licence, tax clearance and certifications.
          </p>
        </div>
      </section>
    </>
  );
}

export function PageBanner({ title, caption }: { title: string; caption: string }) {
  return (
    <section className="bg-navy-deep text-ivory border-b-4 border-gold">
      <div className="container-classic py-16 md:py-24">
        <p className="text-xs uppercase tracking-[0.4em] text-gold">{caption}</p>
        <h1 className="mt-4 font-serif text-5xl md:text-6xl">{title}</h1>
        <span className="gold-rule mt-6" />
      </div>
    </section>
  );
}