import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight } from "lucide-react";
import founder from "@/assets/founder.jpg";
import chairmanImg from "@/assets/people/chairman.jpg";
import ceoImg from "@/assets/people/ceo.jpg";
import ambassadorImg from "@/assets/people/ambassador.jpg";
import people from "@/assets/story-people.jpg";
import waterfront from "@/assets/hero-waterfront.jpg";
import { Reveal } from "@/components/site/Reveal";

export const Route = createFileRoute("/about")({
  head: () => ({
    meta: [
      { title: "About — Vigor Group of Companies" },
      {
        name: "description",
        content:
          "The story of Vigor Group of Companies: from a Zanzibar tailoring mart founded by the late Salim Turky to a diversified Tanzanian group across seven sectors.",
      },
      { property: "og:title", content: "About Vigor Group of Companies" },
      {
        property: "og:description",
        content:
          "Four decades of Tanzanian enterprise — our founder, our journey, our leadership and our vision for the decades ahead.",
      },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: About,
});

const timeline = [
  { year: "1980s", title: "A single storefront", body: "Salim Turky opens a tailoring mart in Zanzibar on one promise: honest work, fairly priced." },
  { year: "1990s", title: "Into trade and logistics", body: "The business expands into general trade, logistics and industrial supply across Tanzania, earning a reputation for reliability." },
  { year: "2000s", title: "One enterprise becomes many", body: "The group enters real estate, hospitality and manufacturing — building institutions rather than storefronts." },
  { year: "2010s", title: "Healthcare and landmarks", body: "Ampola Regency and Tasakhtaa hospitals open, and work begins on the Zanzibar Waterfront." },
  { year: "Today", title: "A diversified group", body: "Seven connected sectors, thousands of Tanzanian employees and partnerships reaching from East Africa to Asia." },
];

const stats = [
  { v: "40+", l: "Years of enterprise" },
  { v: "7", l: "Connected sectors" },
  { v: "1000s", l: "Tanzanians employed" },
  { v: "2", l: "Hospitals operating" },
];

const board = [
  {
    name: "Late Salim Turky",
    role: "Founder",
    bio: "The visionary entrepreneur whose standards still set ours.",
    img: founder,
  },
  {
    name: "Taufiq Salim Turky",
    role: "Chairman",
    bio: "Provides strategic leadership and governance, guiding the group's vision and long-term success.",
    img: chairmanImg,
  },
  {
    name: "Abdallah Salim Turky",
    role: "Chief Executive Officer",
    bio: "Leads operations and strategic execution, driving growth, performance and innovation.",
    img: ceoImg,
  },
  {
    name: "Khaytham Salim Turky",
    role: "Ambassador",
    bio: "Represents the group's vision, values and partnerships locally and internationally.",
    img: ambassadorImg,
  },
];

function initials(name: string) {
  return name
    .replace("Late ", "")
    .split(" ")
    .slice(0, 2)
    .map((w) => w[0])
    .join("");
}

function About() {
  return (
    <>
      {/* INTRODUCTION */}
      <section className="container-x pt-16 md:pt-20 pb-12 border-b border-border">
        <Reveal>
          <p className="eyebrow">About</p>
          <h1 className="mt-6 text-5xl md:text-7xl max-w-4xl leading-[1]">
            Forty Years. One Vision. Building <span className="italic text-primary">Tanzania</span>.
          </h1>
          <p className="mt-8 max-w-2xl text-lg text-ink-soft leading-relaxed">
            Vigor Group of Companies began as a local tailoring mart in Zanzibar in the
            early 1980s. Four decades later it is one of Tanzania's leading diversified
            business groups — still family-led, still rooted at home, and still guided by
            the belief that enterprise should serve the community that sustains it.
          </p>
        </Reveal>
      </section>

      {/* PURPOSE */}
      <section className="container-x py-16 md:py-20 grid lg:grid-cols-12 gap-12">
        <Reveal className="lg:col-span-5">
          <p className="eyebrow">Our Purpose</p>
          <h2 className="mt-4 text-3xl md:text-4xl leading-tight">
            Value created in Tanzania, kept in Tanzania.
          </h2>
        </Reveal>
        <Reveal delay={100} className="lg:col-span-7 space-y-6 text-base md:text-lg text-ink-soft leading-relaxed">
          <p>
            We invest in supplies, services and local talent in ways that create value,
            generate employment and improve quality of life for the communities we serve.
            Every business we enter is chosen for the same reason as the first: because
            Tanzania needed it done properly.
          </p>
          <p>
            That purpose is expressed daily through the principles the founder set —{" "}
            <strong className="text-foreground">integrity</strong> in how we trade,{" "}
            <strong className="text-foreground">professionalism</strong> in how we deliver,{" "}
            <strong className="text-foreground">empathy</strong> for the people we serve and{" "}
            <strong className="text-foreground">accountability</strong> for the results we
            produce.
          </p>
        </Reveal>
      </section>

      {/* FOUNDER STORY */}
      <section className="bg-secondary/60 border-y border-border">
        <div className="container-x py-16 md:py-20 grid lg:grid-cols-12 gap-14 items-start">
          <Reveal className="lg:col-span-5 lg:sticky lg:top-28">
            <img
              src={founder}
              alt="The late Salim Turky, founder of Vigor Group of Companies"
              loading="lazy"
              className="w-full aspect-4/5 object-cover object-top"
            />
            <p className="mt-4 text-xs uppercase tracking-[0.18em] text-muted-foreground font-semibold">
              Late Salim Turky · Founder
            </p>
          </Reveal>
          <Reveal delay={100} className="lg:col-span-7">
            <p className="eyebrow">The Founder</p>
            <h2 className="mt-4 text-4xl md:text-5xl leading-tight">Late Salim Turky</h2>
            <div className="mt-8 space-y-6 text-base md:text-lg text-ink-soft leading-relaxed">
              <p>
                Behind that first Zanzibar storefront stood a young entrepreneur with an
                unfashionable idea: that quality should not be a privilege. He priced fairly,
                delivered on time, and treated every customer as a long-term relationship
                rather than a transaction. Word travelled, and the mart grew.
              </p>
              <p>
                What he built next was shaped by the same instinct. Where he saw a gap that
                mattered — reliable supply, decent hospitality, proper healthcare — he
                stepped into it, and insisted the standard be set locally rather than
                imported.
              </p>
              <blockquote className="quote-block my-10">
                <p className="font-display text-xl md:text-3xl font-semibold italic leading-snug">
                  "To be pioneer is offering top notch products and services to the general
                  public at the rate they can afford, whenever we do business."
                </p>
                <footer className="mt-6 text-xs font-bold uppercase tracking-[0.2em] text-gold">
                  Late Salim Turky · Founder, Vigor Group of Companies
                </footer>
              </blockquote>
              <p>
                That sentence remains the group's compass. His generosity continues through
                the Salim Turky Foundation, and his standards continue in every business
                that carries the Vigor name.
              </p>
            </div>
          </Reveal>
        </div>
      </section>

      {/* GROWTH JOURNEY + STATS */}
      <section className="container-x py-16 md:py-20">
        <Reveal className="max-w-2xl">
          <p className="eyebrow">Growth</p>
          <h2 className="mt-4 text-4xl md:text-5xl leading-tight">
            From one storefront to seven sectors.
          </h2>
          <p className="mt-6 text-lg text-ink-soft leading-relaxed">
            Growth came steadily rather than suddenly. Trade led to logistics; logistics led
            to manufacturing; property followed the businesses that needed it; healthcare and
            hospitality followed the communities that asked for it. Each step was funded by
            the last and judged by whether it made everyday life better.
          </p>
        </Reveal>
        <div className="mt-14 grid grid-cols-2 md:grid-cols-4 border-t border-border">
          {stats.map((s) => (
            <div key={s.l} className="border-b border-r border-border px-5 py-8">
              <div className="font-display text-4xl md:text-5xl text-crimson">{s.v}</div>
              <div className="mt-2 text-xs uppercase tracking-[0.16em] text-muted-foreground font-semibold">
                {s.l}
              </div>
            </div>
          ))}
        </div>
        <div className="mt-14">
          <img
            src={waterfront}
            alt="The Zanzibar Waterfront development by Vigor Group of Companies"
            loading="lazy"
            className="w-full aspect-21/9 object-cover"
          />
        </div>
      </section>

      {/* TIMELINE */}
      <section className="bg-ink text-white">
        <div className="container-x py-16 md:py-20">
          <p className="eyebrow text-crimson">Our Journey</p>
          <h2 className="mt-4 text-4xl md:text-5xl max-w-2xl">A story written over four decades.</h2>
          <div className="mt-14 grid gap-8">
            {timeline.map((t) => (
              <Reveal key={t.year} className="grid md:grid-cols-12 gap-4 md:gap-8 border-t border-white/20 pt-8">
                <div className="md:col-span-3 font-display text-3xl md:text-4xl font-bold text-gold">
                  {t.year}
                </div>
                <div className="md:col-span-9">
                  <h3 className="text-2xl">{t.title}</h3>
                  <p className="mt-3 text-white/75 text-base md:text-lg leading-relaxed max-w-2xl">
                    {t.body}
                  </p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* VISION */}
      <section className="container-x py-16 md:py-20 grid lg:grid-cols-12 gap-14 items-center">
        <Reveal className="lg:col-span-6">
          <p className="eyebrow">Our Vision</p>
          <h2 className="mt-4 text-4xl md:text-5xl leading-tight">
            The next decades: <span className="italic text-primary">wider reach</span>, same compass.
          </h2>
          <p className="mt-6 text-lg text-ink-soft leading-relaxed">
            To be a pioneer in offering top-notch products and services at prices people can
            afford, wherever we do business. Practically, that means growing into one of East
            Africa's most trusted diversified groups, deepening international partnerships
            from East Africa to Asia, and investing in innovation and the next generation of
            Tanzanian talent.
          </p>
          <p className="mt-6 text-lg text-ink-soft leading-relaxed">
            Ambition on that scale only works when it is patient. We plan in decades, not
            quarters — which is why <strong className="text-foreground">innovation</strong> and{" "}
            <strong className="text-foreground">compassion</strong> sit side by side in how we
            choose what to build next.
          </p>
        </Reveal>
        <Reveal delay={100} className="lg:col-span-6">
          <img
            src={people}
            alt="Vigor Group of Companies team members at work in Tanzania"
            loading="lazy"
            className="w-full aspect-4/3 object-cover"
          />
        </Reveal>
      </section>

      {/* LEADERSHIP */}
      <section className="bg-secondary/50 border-y border-border">
        <div className="container-x py-16 md:py-20">
          <div className="max-w-2xl">
            <p className="eyebrow">Leadership</p>
            <h2 className="mt-4 text-4xl md:text-5xl leading-tight">
              The people guiding the group.
            </h2>
          </div>
          <div className="mt-14 grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
            {board.map((p) => (
              <Reveal key={p.name}>
                <div className="w-full aspect-4/5 bg-ink/5 border border-border overflow-hidden">
                  {p.img ? (
                    <img
                      src={p.img}
                      alt={`${p.name}, ${p.role} of Vigor Group of Companies`}
                      loading="lazy"
                      className="w-full h-full object-cover object-top"
                    />
                  ) : (
                    <div className="w-full h-full flex items-center justify-center font-display text-4xl text-muted-foreground">
                      {initials(p.name)}
                    </div>
                  )}
                </div>
                <p className="mt-4 text-xs text-primary uppercase tracking-[0.18em] font-semibold">
                  {p.role}
                </p>
                <h3 className="mt-2 text-xl">{p.name}</h3>
                <p className="mt-2 text-sm text-muted-foreground leading-relaxed">{p.bio}</p>
              </Reveal>
            ))}
          </div>
          <div className="mt-12">
            <Link to="/leadership" className="btn-ghost">
              Full leadership team <ArrowRight size={16} />
            </Link>
          </div>
        </div>
      </section>

      {/* FOUNDATION */}
      <section className="container-x py-16 md:py-20 grid lg:grid-cols-12 gap-14 items-start">
        <Reveal className="lg:col-span-5">
          <p className="eyebrow">Legacy</p>
          <h2 className="mt-4 text-4xl md:text-5xl leading-tight">The Salim Turky Foundation.</h2>
        </Reveal>
        <Reveal delay={100} className="lg:col-span-7 space-y-6 text-base md:text-lg text-ink-soft leading-relaxed">
          <p>
            The founder gave quietly for most of his life. The Foundation formalised that
            habit, carrying his generosity into education, healthcare access, and community
            support across Zanzibar and the mainland.
          </p>
          <p>
            It is not a department of the group so much as its conscience — a reminder that
            the measure of a business is the condition of the community around it.
          </p>
          <div className="pt-2">
            <Link to="/foundation" className="btn-ghost">
              Explore the Foundation <ArrowRight size={16} />
            </Link>
          </div>
        </Reveal>
      </section>

      {/* CLOSING */}
      <section className="bg-navy-deep text-white">
        <div className="container-x py-16 md:py-20">
          <Reveal className="max-w-3xl">
            <p className="eyebrow text-crimson">Looking Forward</p>
            <h2 className="mt-4 text-4xl md:text-6xl leading-tight">
              Building Tanzania's future.
            </h2>
            <p className="mt-8 text-lg md:text-xl text-white/75 leading-relaxed">
              Our commitment is long-term: to the people we employ and train, to the
              innovation that keeps our industries competitive, and to a country whose
              development we intend to be part of for generations. Four decades in, the work
              still begins the same way it did in 1980s Zanzibar — with a promise kept.
            </p>
            <div className="mt-10 flex flex-wrap gap-3">
              <Link to="/businesses" className="btn-outline-light">
                Our businesses <ArrowRight size={16} />
              </Link>
              <Link to="/careers" className="btn-outline-light">
                Careers at Vigor
              </Link>
            </div>
          </Reveal>
        </div>
      </section>
    </>
  );
}
