import AltivateLayout from '@/Layouts/AltivateLayout';
import { Link } from '@inertiajs/react';
import { ArrowUpRight } from "lucide-react";

const principles = [
  { t: "Purpose before tactics", b: "Every strategy we build starts with why the business exists and who it was built to serve. Tactics without purpose are expensive noise." },
  { t: "Systems over campaigns", b: "A great campaign is temporary. A great system compounds. We build the system first, then the campaigns that feed it." },
  { t: "Measurement is non-negotiable", b: "If we can't measure it, we don't recommend it. Everything we do connects to a revenue outcome — or we explain clearly why it doesn't yet." },
  { t: "African excellence is a global standard", b: "We don't dilute African brand identity to fit Western markets. We translate it — so it lands powerfully in both worlds." },
];

export default function About() {
  return (
    <AltivateLayout title="About" description="We built Altivate because we were angry. Why we exist, what we believe, and the markets we serve.">
      <div>
        <section className="container-x pt-32 pb-24 md:pt-40 md:pb-32">
          <p className="eyebrow">About</p>
          <h1 className="font-display mt-6 max-w-5xl text-[clamp(2.5rem,7vw,5.5rem)] leading-[0.95]">
            We built Altivate because we were <span className="italic">angry.</span>
          </h1>
          <div className="mt-12 grid gap-10 md:grid-cols-12">
            <p className="md:col-span-5 md:col-start-7 text-lg text-muted-foreground">
              Angry at watching talented Nigerian entrepreneurs fail — not because their products were bad, but because nobody showed them how to communicate their value. Angry at seeing diaspora business owners stuck serving only their own community because no agency could bridge both worlds. Angry at an industry that sells tactics when businesses need systems.
            </p>
          </div>
        </section>

        <section className="border-t border-border bg-secondary/30">
          <div className="container-x py-20">
            <p className="eyebrow">Founder story</p>
            <h2 className="font-display mt-4 max-w-4xl text-4xl md:text-5xl leading-[1.05]">Why Altivate exists.</h2>
            <div className="mt-10 grid gap-10 md:grid-cols-12">
              <div className="md:col-span-7 space-y-6 text-muted-foreground">
                <p>
                  Our founder spent years working in marketing and brand strategy before founding Altivate. In that time, they watched Nigerian businesses with genuinely superior products lose to inferior competitors with better marketing. They watched diaspora business owners spend money on UK/US agencies who didn't understand their culture — and get generic results that felt wrong and performed poorly.
                </p>
                <p>
                  Altivate was built to solve both of those problems at once. An agency that brings world-class strategic rigour to African businesses — without stripping out the cultural intelligence that makes those businesses unique.
                </p>
              </div>
              <div className="md:col-span-5">
                <div className="rounded-3xl border border-border bg-background p-8">
                  <p className="eyebrow">In numbers</p>
                  <div className="mt-6 space-y-6">
                    {[
                      { k: "2", v: "markets — Nigeria + diaspora" },
                      { k: "6", v: "interconnected services" },
                      { k: "4D", v: "framework: Diagnose → Dominate" },
                    ].map((s) => (
                      <div key={s.v} className="flex items-end justify-between border-b border-border pb-4 last:border-0">
                        <div className="font-display text-5xl">{s.k}</div>
                        <div className="text-right text-xs uppercase tracking-wider text-muted-foreground">{s.v}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="container-x py-24">
          <div className="grid gap-10 md:grid-cols-12">
            <div className="md:col-span-4">
              <p className="eyebrow">What we believe</p>
              <h2 className="font-display mt-4 text-4xl md:text-5xl leading-[1.05]">The principles we don't <span className="italic">negotiate</span> on.</h2>
            </div>
            <div className="md:col-span-8 grid gap-6 sm:grid-cols-2">
              {principles.map((p, i) => (
                <div key={p.t} className="rounded-2xl border border-border bg-card p-6">
                  <div className="font-display text-sm text-accent">0{i + 1}</div>
                  <h3 className="font-display mt-3 text-2xl">{p.t}</h3>
                  <p className="mt-3 text-sm text-muted-foreground">{p.b}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="container-x pb-24">
          <p className="eyebrow">The markets we serve</p>
          <h2 className="font-display mt-4 text-4xl md:text-5xl">Nigeria and the African diaspora.</h2>
          <div className="mt-12 grid gap-6 md:grid-cols-2">
            {[
              { tag: "Nigeria", body: "SMEs across Lagos, Abuja, Port Harcourt, and other major cities. Fashion, food, professional services, real estate, events, fintech, and retail. Businesses earning ₦5M–₦500M annually that are ready to grow strategically." },
              { tag: "UK & US Diaspora", body: "African business owners in London, Birmingham, Manchester, New York, Houston, Atlanta, and beyond. Businesses that have built strong community followings and are ready to reach mainstream audiences without losing their identity." },
            ].map((c) => (
              <article key={c.tag} className="rounded-3xl border border-border bg-card p-8 md:p-10 transition-all hover:-translate-y-1 hover:shadow-xl">
                <span className="rounded-full border border-border px-3 py-1 text-[11px] uppercase tracking-wider text-muted-foreground">{c.tag}</span>
                <p className="font-display mt-8 text-2xl leading-snug">{c.body}</p>
              </article>
            ))}
          </div>

          <div className="mt-12 rounded-3xl border border-border bg-ink p-12 text-primary-foreground md:p-16">
            <h3 className="font-display max-w-3xl text-4xl md:text-5xl leading-[1.05]">
              We'd rather <span className="italic text-accent">show you</span> what we can do than describe it.
            </h3>
            <p className="mt-6 max-w-xl text-primary-foreground/70">
              Book a free Growth Audit call — 30 minutes, no obligation — and you'll leave with more clarity about your business's marketing than most owners get in a year.
            </p>
            <Link href="/audit" className="mt-8 inline-flex h-12 items-center gap-3 rounded-full bg-accent px-6 text-sm font-medium text-accent-foreground transition-all hover:-translate-y-0.5">
              Book my free audit call <ArrowUpRight className="h-4 w-4" />
            </Link>
          </div>
        </section>
      </div>
    </AltivateLayout>
  );
}