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: 'craftsmanship',
    Icon: PenTool,
    title: 'Craftsmanship First',
    description:
      'The gap between a website that works and one that lasts is craft. We sweat the typography, the transitions, the performance, the edge cases. Every interface we ship is something we\'d be proud to sign.',
  },
  {
    id: 'one-team',
    Icon: Users,
    title: 'One Team, Everything',
    description:
      'Design, development, hosting, infrastructure — one team, one point of contact, one standard of quality. No handoffs between agencies. No juggling freelancers. Just people who care about the whole thing.',
  },
  {
    id: 'ownership',
    Icon: Shield,
    title: 'Built to Be Yours',
    description:
      'Everything we build, you own — the code, the data, the infrastructure. No vendor lock-in, no platform dependencies. We hand over work that outlasts the engagement.',
  },
];

// ─── 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]">
                Great businesses deserve
                <br />
                great digital partners.
              </h1>
            </ScrollReveal>

            <ScrollReveal variant="fadeUp" delay={0.2}>
              <p className="text-outline text-xl leading-relaxed max-w-2xl">
                We design and build custom websites, software, and digital platforms for businesses
                that care about quality — and want a team that does too.
              </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]">
                  Built for businesses<br />
                  like yours.
                </h2>
              </ScrollReveal>

              <ScrollReveal variant="fadeUp" delay={0.1} className="flex flex-col gap-5 text-outline leading-relaxed text-[0.9375rem]">
                <p>
                  LetsBe. started with a simple belief: that ambitious businesses deserve digital
                  tools as carefully considered as the work they do. Not templates. Not off-the-shelf
                  platforms. Real design and engineering, built from scratch.
                </p>
                <p>
                  Our early clients were founders and operators who needed more than a website —
                  they needed a technical partner who could design, build, host, and maintain
                  everything under one roof. Those projects shaped how we work today.
                </p>
                <p>
                  We build platforms meant to be owned, not rented. We document everything, we hand
                  over codebases that outlast the engagement, and we never lock clients into systems
                  they can&rsquo;t leave. That&rsquo;s not a feature — it&rsquo;s how we think business should work.
                </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 behind every project we take on.
            </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;We don&rsquo;t just build websites — we build the foundation your business
                runs on.&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 just an early idea, we&rsquo;d love to talk
                  through what&rsquo;s 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>
  );
}