import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, ArrowUpRight } from "lucide-react";
import hero from "@/assets/hero-waterfront.jpg";
import people from "@/assets/story-people.jpg";
import { units } from "@/lib/units";
import { SectorEcosystem } from "@/components/site/SectorEcosystem";
import { Reveal, Counter } from "@/components/site/Reveal";
import {
  Lightbulb,
  BadgeCheck,
  ShieldCheck,
  HeartHandshake,
  Leaf,
  Trophy,
  Users2,
  Sprout,
} from "lucide-react";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "Vigor Group of Companies — Diversified Tanzanian business group" },
      {
        name: "description",
        content:
          "Vigor Group of Companies is a diversified Tanzanian business group delivering excellence across seven sectors — healthcare, hospitality, manufacturing, trading, real estate, investment and community development.",
      },
      { property: "og:title", content: "Vigor Group of Companies" },
      {
        property: "og:description",
        content:
          "One of Tanzania's trusted diversified business groups, delivering excellence across multiple industries.",
      },
      { property: "og:type", content: "website" },
      { property: "og:url", content: "/" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
    links: [{ rel: "canonical", href: "/" }],
    scripts: [
      {
        type: "application/ld+json",
        children: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "Organization",
          name: "Vigor Group of Companies",
          description:
            "A diversified Tanzanian business group operating across seven sectors: healthcare, hospitality, manufacturing, trading, real estate, investment and community development.",
          address: {
            "@type": "PostalAddress",
            addressLocality: "Zanzibar",
            addressCountry: "TZ",
          },
          subOrganization: units.map((u) => ({ "@type": "Organization", name: u.name, url: u.href })),
        }),
      },
    ],
  }),
  component: Home,
});

const whyUs = [
  { Icon: Lightbulb, k: "Innovation", v: "Modern solutions and continuous improvement across every business." },
  { Icon: BadgeCheck, k: "Quality", v: "Standards we hold ourselves to long after the sale is made." },
  { Icon: ShieldCheck, k: "Integrity", v: "Honesty, transparency and ethical conduct in every dealing." },
  { Icon: HeartHandshake, k: "Customer Focus", v: "We build around the real needs of the people we serve." },
  { Icon: Leaf, k: "Sustainability", v: "Growth that respects the environment and the next generation." },
  { Icon: Trophy, k: "Excellence", v: "A relentless pursuit of better in operations and service." },
  { Icon: Users2, k: "Professional Team", v: "Skilled Tanzanian talent supported to grow their careers." },
  { Icon: Sprout, k: "Community Impact", v: "Investing where we live and work, for the long term." },
];

const impact = [
  { value: 40, suffix: "+", label: "Years of experience" },
  { value: 20, suffix: "+", label: "Group businesses" },
  { value: 1500, suffix: "+", label: "People employed" },
  { value: 7, suffix: "", label: "Industries served" },
];

function Home() {
  return (
    <>
      {/* HERO */}
      <section className="relative isolate">
        <div className="absolute inset-0 -z-10">
          <img
            src={hero}
            alt="The Zanzibar waterfront at sunset"
            className="w-full h-full object-cover"
            width={1920}
            height={1088}
          />
          <div className="absolute inset-0 bg-gradient-to-t from-navy-deep via-navy-deep/80 to-navy-deep/40" />
        </div>
        <div className="container-x pt-40 pb-28 md:pt-56 md:pb-40 text-white">
          <Reveal>
            <p className="eyebrow text-white/70">Est. Zanzibar · 1980s</p>
            <h1 className="mt-6 max-w-4xl text-5xl md:text-7xl lg:text-8xl leading-[0.95]">
              Building Tanzania's
              <br />
              <span className="italic">Future</span>.
            </h1>
          </Reveal>
          <Reveal delay={120}>
            <p className="mt-8 max-w-xl text-base md:text-lg text-white/80 leading-relaxed">
              Seven sectors. One Tanzanian group. Healthcare, hospitality, manufacturing,
              trading, real estate, investment and community development.
            </p>
            <div className="mt-10 flex flex-wrap gap-3">
              <Link to="/businesses" className="btn-accent">
                Explore our businesses <ArrowRight size={16} />
              </Link>
              <Link to="/contact" className="btn-outline-light">
                Contact us
              </Link>
            </div>
          </Reveal>
        </div>

        <div className="relative bg-navy-deep text-white border-t border-white/10">
          <div className="container-x grid grid-cols-2 md:grid-cols-4 divide-x divide-white/10">
            {impact.map((s) => (
              <div key={s.label} className="px-4 md:px-8 py-8 md:py-10">
                <div className="font-display text-4xl md:text-5xl text-crimson">
                  <Counter value={s.value} suffix={s.suffix} />
                </div>
                <div className="mt-2 text-xs md:text-sm uppercase tracking-[0.18em] text-white/60">
                  {s.label}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* OUR STORY — concise introduction */}
      <section className="container-x py-16 md:py-20">
        <div className="grid lg:grid-cols-12 gap-12 lg:gap-20 items-start">
          <Reveal className="lg:col-span-5">
            <p className="eyebrow">Our Story</p>
            <h2 className="mt-4 text-4xl md:text-5xl leading-tight">
              A family enterprise built on <span className="italic text-crimson">vision</span>,
              resilience and excellence.
            </h2>
          </Reveal>

          <Reveal delay={100} className="lg:col-span-7 space-y-6 text-base md:text-lg leading-relaxed text-ink-soft">
            <p>
              It began in the early 1980s with a single storefront in Zanzibar — a local
              tailoring mart run on one simple promise: honest work, fairly priced. That
              storefront was the beginning of Vigor Group of Companies.
            </p>
            <p>
              Today the group operates across seven sectors — healthcare, hospitality,
              manufacturing, trading, real estate, investment and community development —
              employing thousands of Tanzanians and partnering with organisations from
              East Africa to Asia.
            </p>

            <div className="pt-4 flex flex-wrap gap-3">
              <Link to="/about" className="btn-ghost">
                Read our full story <ArrowRight size={16} />
              </Link>
              <Link to="/foundation" className="btn-ghost">
                Salim Turky Foundation
              </Link>
            </div>
          </Reveal>
        </div>
      </section>


      {/* BUSINESSES */}
      <section className="bg-secondary/60 border-y border-border">
        <div className="container-x py-16 md:py-20">
          <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-14">
            <div className="max-w-2xl">
              <p className="eyebrow">Our Businesses</p>
              <h2 className="mt-4 text-4xl md:text-5xl leading-tight">
                Driving excellence across diverse industries.
              </h2>
            </div>
            <Link to="/businesses" className="btn-ghost self-start">
              View all <ArrowRight size={16} />
            </Link>
          </div>

          <div className="flex gap-6 overflow-x-auto snap-x snap-mandatory pb-4 -mx-5 px-5 md:mx-0 md:px-0 md:grid md:grid-cols-2 lg:grid-cols-3 md:overflow-visible">
            {units.map((u, i) => (
              <Reveal
                key={u.slug}
                delay={i * 80}
                className={`snap-start shrink-0 w-[85%] sm:w-[60%] md:w-auto ${i === 0 ? "lg:col-span-2" : ""}`}
              >
                <article className="group h-full bg-card border border-border hover:border-crimson transition-colors overflow-hidden flex flex-col">
                  <div className={`relative overflow-hidden ${i === 0 ? "aspect-[16/10]" : "aspect-[4/3]"}`}>
                    <img
                      src={u.image}
                      alt={u.name}
                      loading="lazy"
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-navy-deep/70 via-transparent to-transparent" />
                    <div className="card-label">{u.sector}</div>
                  </div>
                  <div className="p-6 md:p-7 flex flex-col flex-1">
                    <h3 className="text-xl md:text-2xl">{u.name}</h3>
                    <p className="mt-2 text-sm text-muted-foreground leading-relaxed">{u.blurb}</p>
                    <div className="mt-6 pt-5 border-t border-border flex flex-wrap items-center gap-4 text-xs font-semibold uppercase tracking-[0.1em]">
                      <Link
                        to="/businesses/$slug"
                        params={{ slug: u.slug }}
                        className="text-navy hover:text-crimson transition-colors"
                      >
                        Learn more
                      </Link>
                      <a
                        href={u.href}
                        target="_blank"
                        rel="noreferrer"
                        className="inline-flex items-center gap-1.5 text-crimson hover:underline"
                      >
                        Website <ArrowUpRight size={14} />
                      </a>
                    </div>
                  </div>
                </article>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* INDUSTRIES — interconnected ecosystem */}
      <section className="container-x py-16 md:py-20">
        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6">
          <div className="max-w-2xl">
            <p className="eyebrow">Industries</p>
            <h2 className="mt-4 text-4xl md:text-5xl leading-tight">
              Seven Sectors. One Vision.
            </h2>
            <p className="mt-5 text-ink-soft leading-relaxed">
              Vigor Group operates as an ecosystem, not a collection of companies — each
              sector supporting, supplying and strengthening the others.
            </p>
          </div>
          <Link to="/businesses" className="btn-ghost self-start">
            All industries <ArrowRight size={16} />
          </Link>
        </div>
        <Reveal className="mt-14">
          <SectorEcosystem />
        </Reveal>
      </section>

      {/* WHY VIGOR */}
      <section className="bg-navy-deep text-white">
        <div className="container-x py-16 md:py-20">
          <div className="max-w-2xl">
            <p className="eyebrow">Why Vigor Group</p>
            <h2 className="mt-4 text-4xl md:text-5xl leading-tight">
              The reasons partners and communities trust us.
            </h2>
          </div>
          <div className="mt-14 grid sm:grid-cols-2 lg:grid-cols-4 gap-x-10 gap-y-12">
            {whyUs.map((w, i) => (
              <Reveal key={w.k} delay={i * 60}>
                <div className="border-t-2 border-crimson pt-6">
                  <w.Icon size={26} strokeWidth={1.4} className="text-crimson" />
                  <h3 className="mt-5 text-2xl">{w.k}</h3>
                  <p className="mt-3 text-sm text-white/65 leading-relaxed">{w.v}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* PEOPLE BAND */}
      <section className="relative">
        <div className="relative h-[60vh] min-h-[420px]">
          <img
            src={people}
            alt="Vigor Group of Companies employees at work"
            loading="lazy"
            className="absolute inset-0 w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-navy-deep/70" />
          <div className="relative container-x h-full flex items-end pb-16 text-white">
            <div className="max-w-2xl">
              <p className="eyebrow text-white/70">Our People</p>
              <h2 className="mt-4 text-4xl md:text-5xl leading-tight">
                Every business we run is powered by{" "}
                <span className="italic">Tanzanian talent</span>.
              </h2>
              <Link
                to="/careers"
                className="mt-8 inline-flex items-center gap-2 border-b border-white pb-1 font-semibold hover:text-crimson hover:border-crimson transition-colors"
              >
                Build your career with us <ArrowRight size={16} />
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="container-x py-16 md:py-20">
        <div className="border-t border-navy pt-16 grid lg:grid-cols-2 gap-10 items-end">
          <h2 className="text-4xl md:text-6xl leading-[1]">
            Let's build the next chapter together.
          </h2>
          <div className="flex flex-wrap gap-3 lg:justify-end">
            <Link to="/contact" className="btn-accent">
              Contact us <ArrowRight size={16} />
            </Link>
            <Link to="/businesses" className="btn-ghost">
              Our businesses
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}
