import Image from 'next/image';
import type { Metadata } from 'next';
import { getTranslations, 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';

const BASE_URL = 'https://letsbe.biz';

// ─── Metadata ─────────────────────────────────────────────────────────────────

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

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'meta.about' });

  const path = locale === 'en' ? '/about' : `/${locale}/about`;

  return {
    title: t('title'),
    description: t('description'),
    alternates: {
      canonical: `${BASE_URL}${path}`,
      languages: {
        'en': `${BASE_URL}/about`,
        'fr': `${BASE_URL}/fr/about`,
        'it': `${BASE_URL}/it/about`,
        'es': `${BASE_URL}/es/about`,
        'x-default': `${BASE_URL}/about`,
      },
    },
  };
}

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

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

// ─── 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);

  const t = await getTranslations({ locale, namespace: 'aboutPage' });

  const PILLARS = [
    { id: 'craftsmanship', Icon: PenTool, title: t('pillars.craftsmanship.title'), description: t('pillars.craftsmanship.description') },
    { id: 'one-team', Icon: Users, title: t('pillars.oneTeam.title'), description: t('pillars.oneTeam.description') },
    { id: 'ownership', Icon: Shield, title: t('pillars.ownership.title'), description: t('pillars.ownership.description') },
  ];

  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">{t('hero.eyebrow')}</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]">
                {t('hero.title')}
              </h1>
            </ScrollReveal>

            <ScrollReveal variant="fadeUp" delay={0.2}>
              <p className="text-outline text-xl leading-relaxed max-w-2xl">
                {t('hero.subtitle')}
              </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">{t('story.eyebrow')}</span>
                <h2 className="font-serif text-4xl md:text-[2.75rem] font-semibold text-on-surface leading-[1.1] tracking-[-0.02em]">
                  {t('story.title')}
                </h2>
              </ScrollReveal>

              <ScrollReveal variant="fadeUp" delay={0.1} className="flex flex-col gap-5 text-outline leading-relaxed text-[0.9375rem]">
                <p>{t('story.p1')}</p>
                <p>{t('story.p2')}</p>
                <p>{t('story.p3')}</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">
                    "{t('story.quote')}"
                  </blockquote>
                  <div
                    className="w-8 h-px bg-primary/40 my-4"
                    aria-hidden="true"
                  />
                  <p className="label-md text-outline">{t('story.quoteAttrib')}</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">{t('pillars.eyebrow')}</span>
            <h2 className="font-serif font-semibold text-on-surface text-4xl md:text-5xl leading-[1.1] tracking-[-0.02em] max-w-2xl">
              {t('pillars.title')}
            </h2>
            <p className="text-outline text-lg leading-relaxed max-w-xl mt-1">
              {t('pillars.subtitle')}
            </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]">
                "{t('quote.text')}"
              </blockquote>

              <p className="label-md text-white/40">
                &mdash; {t('quote.attrib')}
              </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">{t('cta.eyebrow')}</span>
                <h2 className="font-serif font-semibold text-on-surface text-3xl md:text-4xl leading-[1.1] tracking-[-0.02em]">
                  {t('cta.title')}
                </h2>
                <p className="text-outline text-lg leading-relaxed max-w-lg">
                  {t('cta.subtitle')}
                </p>
              </div>

              <div className="flex flex-col sm:flex-row items-center gap-4">
                <Button variant="primary" size="lg" arrow href="/#configure">
                  {t('cta.primary')}
                </Button>
                <Button
                  variant="secondary"
                  size="lg"
                  href="mailto:hello@letsbe.biz"
                >
                  {t('cta.secondary')}
                </Button>
              </div>

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

    </main>
  );
}
