import Image from 'next/image';
import { setRequestLocale } from 'next-intl/server';
import { Shield, PenTool, Users } from 'lucide-react';
import ScrollReveal from '@/components/ui/ScrollReveal';
import Button from '@/components/ui/Button';
import CornerBracket from '@/components/icons/CornerBracket';
import { routing } from '@/i18n/routing';

// ─── Static Generation ────────────────────────────────────────────────────────

export function generateStaticParams() {
  return routing.locales.map((locale) => ({ locale }));
}

// ─── Data ─────────────────────────────────────────────────────────────────────

const PILLARS = [
  {
    id: 'ownership',
    Icon: Shield,
    title: 'Ownership & Privacy',
    description:
      'We build on infrastructure you control. No vendor lock-in, no opaque SaaS dependencies quietly holding your data hostage. Your platform, your servers, your rules — backed by engineering that makes it maintainable.',
  },
  {
    id: 'craftsmanship',
    Icon: PenTool,
    title: 'Craftsmanship',
    description:
      'The gap between a website that works and one that endures is craft. We sweat the typography, the transitions, the query performance, the edge cases. Every interface we ship is something we would be proud to sign.',
  },
  {
    id: 'one-team',
    Icon: Users,
    title: 'One Team, Everything',
    description:
      'Strategy, design, engineering, infrastructure — under one roof, one point of contact, one shared standard of quality. No handoffs between agencies. No telephone-game briefs. Just people who care about the whole thing.',
  },
];

// ─── Sub-components ───────────────────────────────────────────────────────────

function PillarCard({
  Icon,
  title,
  description,
}: {
  Icon: React.ElementType;
  title: string;
  description: string;
}) {
  return (
    <ScrollReveal variant="fadeUp">
      <div className="bg-surface-high rounded-xl p-8 flex flex-col gap-5 h-full shadow-subtle">
        {/* Icon */}
        <div
          className="w-11 h-11 rounded-xl flex items-center justify-center flex-shrink-0"
          style={{ background: 'rgba(91,164,217,0.10)' }}
        >
          <Icon
            size={20}
            strokeWidth={1.75}
            className="text-primary"
            aria-hidden="true"
          />
        </div>

        {/* Text */}
        <div className="flex flex-col gap-2.5">
          <h3 className="font-serif text-xl font-semibold text-on-surface leading-snug tracking-[-0.02em]">
            {title}
          </h3>
          <p className="text-outline text-sm leading-relaxed">{description}</p>
        </div>
      </div>
    </ScrollReveal>
  );
}

// ─── Page ─────────────────────────────────────────────────────────────────────

type Props = {
  params: Promise<{ locale: string }>;
};

export default async function AboutPage({ params }: Props) {
  const { locale } = await params;
  setRequestLocale(locale);

  return (
    <main>

      {/* ── 1. Hero ── */}
      <section className="bg-surface py-32">
        <div className="container mx-auto px-6">
          <div className="max-w-4xl mx-auto flex flex-col items-center text-center gap-8">

            <ScrollReveal variant="fadeIn">
              <span className="label-md text-primary">About LetsBe.</span>
            </ScrollReveal>

            <ScrollReveal variant="fadeUp" delay={0.1}>
              <h1 className="font-serif font-semibold text-on-surface text-5xl md:text-6xl lg:text-[4rem] leading-[1.05] tracking-[-0.03em]">
                Digital Sovereignty
                <br />
                is not a luxury.
              </h1>
            </ScrollReveal>

            <ScrollReveal variant="fadeUp" delay={0.2}>
              <p className="text-outline text-xl leading-relaxed max-w-2xl">
                We build digital platforms for businesses that refuse to compromise — on ownership,
                on quality, or on the partner they trust to build it with them.
              </p>
            </ScrollReveal>

          </div>
        </div>
      </section>

      {/* ── 2. Story ── */}
      <section className="bg-surface-low py-24">
        <div className="container mx-auto px-6">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start">

            {/* Left: Text */}
            <div className="lg:col-span-5 flex flex-col gap-10">

              <ScrollReveal variant="slideLeft" className="flex flex-col gap-4">
                <span className="label-md text-primary">Our Story</span>
                <h2 className="font-serif text-4xl md:text-[2.75rem] font-semibold text-on-surface leading-[1.1] tracking-[-0.02em]">
                  Born on the<br />
                  Côte d&rsquo;Azur.
                </h2>
              </ScrollReveal>

              <ScrollReveal variant="fadeUp" delay={0.1} className="flex flex-col gap-5 text-outline leading-relaxed text-[0.9375rem]">
                <p>
                  LetsBe. was founded on the French Riviera by a small team of engineers and
                  designers who shared a single conviction: that ambitious businesses deserve digital
                  infrastructure as carefully considered as the work they do.
                </p>
                <p>
                  We started by building for founders and institutions along the coast — port
                  authorities, conservation organisations, maritime operators — each one operating
                  in a context where reliability, elegance, and discretion were not optional extras.
                  Those early projects shaped everything we believe about what a digital partner
                  should be.
                </p>
                <p>
                  Today we work with clients across Europe and the Mediterranean on platforms that
                  are built to be owned, not rented. We do not believe in locking clients into
                  systems they cannot see, services they cannot leave, or vendors whose priorities
                  will drift from theirs. We build on open infrastructure, we document everything,
                  and we hand over codebases that outlast the engagement.
                </p>
              </ScrollReveal>

            </div>

            {/* Right: Decorative canvas */}
            <div className="lg:col-span-7 relative">
              <ScrollReveal variant="slideRight">
                <div
                  className="relative bg-surface rounded-xl overflow-hidden"
                  style={{ minHeight: '460px' }}
                >
                  <Image
                    src="/images/our_story.png"
                    alt="Our story"
                    fill
                    className="object-cover rounded-xl"
                    sizes="(max-width: 1024px) 100vw, 58vw"
                  />

                  {/* Inset rim */}
                  <div
                    className="absolute inset-0 rounded-xl pointer-events-none"
                    style={{
                      boxShadow: 'inset 0 0 0 1px rgba(194,199,206,0.22)',
                    }}
                    aria-hidden="true"
                  />
                </div>
              </ScrollReveal>

              {/* Floating pull quote */}
              <ScrollReveal
                variant="fadeUp"
                delay={0.4}
                className="absolute -bottom-8 -left-4 lg:-left-10 z-10 max-w-[320px] w-[calc(100%-2.5rem)] lg:max-w-[340px]"
              >
                <div className="bg-surface-high rounded-xl p-6 shadow-subtle relative">
                  <div className="absolute top-4 right-4">
                    <CornerBracket
                      size={28}
                      position="top-right"
                      color="var(--color-primary)"
                    />
                  </div>
                  <blockquote className="font-serif italic text-lg text-on-surface leading-relaxed pr-8">
                    &ldquo;Build fewer things. Build them better. Build them to last.&rdquo;
                  </blockquote>
                  <div
                    className="w-8 h-px bg-primary/40 my-4"
                    aria-hidden="true"
                  />
                  <p className="label-md text-outline">LetsBe. founding principle</p>
                </div>
              </ScrollReveal>

            </div>
          </div>
        </div>
      </section>

      {/* ── 3. Three Pillars ── */}
      <section className="bg-surface py-24 mt-8">
        <div className="container mx-auto px-6">

          <ScrollReveal variant="fadeUp" className="flex flex-col items-center text-center gap-4 mb-16">
            <span className="label-md text-primary">Our Beliefs</span>
            <h2 className="font-serif font-semibold text-on-surface text-4xl md:text-5xl leading-[1.1] tracking-[-0.02em] max-w-2xl">
              What We Believe
            </h2>
            <p className="text-outline text-lg leading-relaxed max-w-xl mt-1">
              Three principles that inform every decision we make, every line of code we write, and
              every client relationship we enter.
            </p>
          </ScrollReveal>

          <ScrollReveal variant="fadeUp" stagger className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {PILLARS.map(({ id, Icon, title, description }) => (
              <PillarCard key={id} Icon={Icon} title={title} description={description} />
            ))}
          </ScrollReveal>

        </div>
      </section>

      {/* ── 4. Quote ── */}
      <section
        className="py-20"
        style={{ backgroundColor: 'var(--color-navy)' }}
      >
        <div className="container mx-auto px-6">
          <ScrollReveal variant="fadeUp">
            <div className="max-w-3xl mx-auto flex flex-col items-center text-center gap-6">

              {/* Decorative line */}
              <div
                className="w-10 h-px"
                style={{ background: 'rgba(91,164,217,0.5)' }}
                aria-hidden="true"
              />

              <blockquote className="font-serif italic text-white text-3xl md:text-[2.25rem] leading-[1.3] tracking-[-0.02em]">
                &ldquo;Our mission is to bring the precision of architecture to the fluidity of the
                web.&rdquo;
              </blockquote>

              <p className="label-md text-white/40">
                &mdash; LetsBe. founding philosophy
              </p>

            </div>
          </ScrollReveal>
        </div>
      </section>

      {/* ── 5. CTA ── */}
      <section className="bg-surface py-16">
        <div className="container mx-auto px-6">
          <ScrollReveal variant="fadeUp">
            <div className="max-w-3xl mx-auto flex flex-col items-center text-center gap-8">

              <div className="flex flex-col gap-3 items-center">
                <span className="label-md text-primary">Work With Us</span>
                <h2 className="font-serif font-semibold text-on-surface text-3xl md:text-4xl leading-[1.1] tracking-[-0.02em]">
                  Let&rsquo;s build something together.
                </h2>
                <p className="text-outline text-lg leading-relaxed max-w-lg">
                  Whether you have a clear brief or an early-stage idea, we would be glad to talk
                  through what is possible.
                </p>
              </div>

              <div className="flex flex-col sm:flex-row items-center gap-4">
                <Button variant="primary" size="lg" arrow href="/#configure">
                  Start your project
                </Button>
                <Button
                  variant="secondary"
                  size="lg"
                  href="mailto:hello@letsbe.biz"
                >
                  Book a call
                </Button>
              </div>

            </div>
          </ScrollReveal>
        </div>
      </section>

    </main>
  );
}