'use client';

import Image from 'next/image';
import { motion } from 'framer-motion';
import { useTranslations } from 'next-intl';
import { cn } from '@/lib/utils';
import {
  slideLeftVariants,
  viewportOnce,
} from '@/lib/animations';
import CornerBracket from '@/components/icons/CornerBracket';

// ─── Types ────────────────────────────────────────────────────────────────────

interface PillarKey {
  key: 'ownership' | 'craftsmanship' | 'oneTeam';
}

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

const PILLARS: PillarKey[] = [
  { key: 'ownership' },
  { key: 'craftsmanship' },
  { key: 'oneTeam' },
];

// ─── Animation Variants ───────────────────────────────────────────────────────

const ease = [0.16, 1, 0.3, 1] as const;

const pillarContainerVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.12,
      delayChildren: 0.2,
    },
  },
};

const pillarVariants = {
  hidden: { opacity: 0, x: -32 },
  visible: {
    opacity: 1,
    x: 0,
    transition: { duration: 0.6, ease },
  },
};

const decorativeVariants = {
  hidden: { opacity: 0, scale: 0.96 },
  visible: {
    opacity: 1,
    scale: 1,
    transition: { duration: 0.8, ease, delay: 0.15 },
  },
};

const quoteCardVariants = {
  hidden: {
    opacity: 0,
    y: 32,
    rotate: 4,
  },
  visible: {
    opacity: 1,
    y: 0,
    rotate: 0,
    transition: { duration: 0.75, ease, delay: 0.5 },
  },
};

const leftBorderVariants = {
  hidden: { scaleY: 0 },
  visible: {
    scaleY: 1,
    transition: { duration: 0.6, ease },
  },
};

// ─── Philosophy Pillar ────────────────────────────────────────────────────────

function PhilosophyPillar({
  title,
  description,
  index,
}: {
  title: string;
  description: string;
  index: number;
}) {
  return (
    <motion.div
      variants={pillarVariants}
      className="relative flex items-stretch gap-0"
    >
      {/* Animated left border */}
      <div className="relative flex-shrink-0 w-[2px] mr-5 self-stretch overflow-hidden">
        <div className="absolute inset-0 bg-outline-variant/20 rounded-full" />
        <motion.div
          variants={leftBorderVariants}
          className="absolute inset-0 origin-top rounded-full"
          style={{
            background: `linear-gradient(to bottom, var(--color-primary), var(--color-primary-dark))`,
          }}
        />
      </div>

      {/* Content */}
      <div className="flex flex-col gap-1.5 py-4">
        <p
          className="font-serif text-sm font-semibold text-primary mb-1"
          aria-hidden="true"
        >
          {String(index + 1).padStart(2, '0')}
        </p>
        <h3 className="font-semibold text-on-surface text-base leading-snug">
          {title}
        </h3>
        <p className="text-sm text-outline leading-relaxed">
          {description}
        </p>
      </div>
    </motion.div>
  );
}

// ─── Main Component ───────────────────────────────────────────────────────────

export default function Philosophy() {
  const t = useTranslations();

  return (
    <section
      id="about"
      className="relative bg-surface py-20 overflow-hidden"
      style={{
        backgroundImage: [
          'repeating-linear-gradient(0deg, rgba(25,28,29,0.02) 0px, rgba(25,28,29,0.02) 1px, transparent 1px, transparent 48px)',
          'repeating-linear-gradient(90deg, rgba(25,28,29,0.02) 0px, rgba(25,28,29,0.02) 1px, transparent 1px, transparent 48px)',
        ].join(', '),
      }}
    >
      {/* Ambient radial glow */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background: 'radial-gradient(ellipse 80% 60% at 20% 50%, rgba(91,164,217,0.04) 0%, transparent 70%)',
        }}
        aria-hidden="true"
      />
      <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 Column: Text (5 cols) ── */}
          <div className="lg:col-span-5 flex flex-col gap-10">

            {/* Header block */}
            <motion.div
              variants={slideLeftVariants}
              initial="hidden"
              whileInView="visible"
              viewport={viewportOnce}
              className="flex flex-col gap-4"
            >
              <p className="label-md text-primary">{t('philosophy.eyebrow')}</p>
              <h2 className="font-serif text-4xl md:text-[2.75rem] font-semibold text-on-surface leading-[1.1] tracking-[-0.02em]">
                {t('philosophy.title')}
              </h2>
              <p className="text-outline leading-relaxed text-[0.9375rem]">
                {t('philosophy.subtitle')}
              </p>
            </motion.div>

            {/* Philosophy pillars */}
            <motion.div
              variants={pillarContainerVariants}
              initial="hidden"
              whileInView="visible"
              viewport={viewportOnce}
              className="flex flex-col gap-2"
            >
              {PILLARS.map(({ key }, i) => (
                <PhilosophyPillar
                  key={key}
                  index={i}
                  title={t(`philosophy.${key}.title`)}
                  description={t(`philosophy.${key}.description`)}
                />
              ))}
            </motion.div>

          </div>

          {/* ── Right Column: Decorative (7 cols) ── */}
          <div className="lg:col-span-7 relative">

            {/* Main decorative canvas */}
            <motion.div
              variants={decorativeVariants}
              initial="hidden"
              whileInView="visible"
              viewport={viewportOnce}
              className={cn(
                'relative bg-surface-low rounded-xl',
                'min-h-[420px] lg:min-h-[500px]',
                'overflow-visible',
              )}
            >
              <Image
                src="/images/philosophy_image.png"
                alt="Craftsmanship and precision"
                fill
                className="object-cover rounded-xl"
                sizes="(max-width: 1024px) 100vw, 58vw"
              />

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

            {/* ── Pull-Quote Card ── */}
            <motion.div
              variants={quoteCardVariants}
              initial="hidden"
              whileInView="visible"
              viewport={viewportOnce}
              className={cn(
                'absolute -bottom-8 -left-4 lg:-left-10',
                'bg-surface-high rounded-xl p-6 shadow-subtle',
                'max-w-[320px] w-[calc(100%-2.5rem)] lg:max-w-[340px]',
                'z-10',
                'border-l-[3px] border-primary',
              )}
            >
              {/* CornerBracket top-right decoration */}
              <div className="absolute top-4 right-4">
                <CornerBracket
                  size={28}
                  position="top-right"
                  color="var(--color-primary)"
                />
              </div>

              {/* Quote text */}
              <blockquote className="font-serif italic text-lg text-on-surface leading-relaxed pr-8">
                &ldquo;{t('philosophy.quote')}&rdquo;
              </blockquote>

              {/* Divider */}
              <div
                className="w-8 h-px bg-primary/40 my-4"
                aria-hidden="true"
              />

              {/* Attribution */}
              <p className="label-md text-outline">{t('philosophy.foundedLocation')}</p>
            </motion.div>

          </div>
        </div>
      </div>
    </section>
  );
}
