'use client';

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>
  );
}

// ─── Abstract Geometric Decoration ───────────────────────────────────────────

function AbstractGeometry() {
  return (
    <div
      className="absolute inset-0 overflow-hidden rounded-xl"
      aria-hidden="true"
    >
      {/* Primary large circle — filled radial glow */}
      <div
        className="absolute rounded-full"
        style={{
          width: '65%',
          height: '65%',
          top: '-8%',
          right: '-12%',
          background:
            'radial-gradient(circle, rgba(91,164,217,0.12) 0%, rgba(0,100,148,0.06) 60%, transparent 100%)',
        }}
      />

      {/* Large circle ring — border only, ~40% opacity */}
      <div
        className="absolute rounded-full"
        style={{
          width: '72%',
          height: '72%',
          top: '-18%',
          right: '-20%',
          border: '1px solid rgba(91,164,217,0.20)',
          opacity: 0.4,
        }}
      />

      {/* Secondary circle, bottom-left */}
      <div
        className="absolute rounded-full"
        style={{
          width: '50%',
          height: '50%',
          bottom: '-10%',
          left: '-6%',
          background:
            'radial-gradient(circle, rgba(0,100,148,0.08) 0%, transparent 70%)',
        }}
      />

      {/* Second smaller ring — bottom-left */}
      <div
        className="absolute rounded-full"
        style={{
          width: '38%',
          height: '38%',
          bottom: '-4%',
          left: '4%',
          border: '1px solid rgba(0,100,148,0.18)',
          opacity: 0.45,
        }}
      />

      {/* Diagonal grid */}
      <div
        className="absolute inset-0 opacity-[0.03]"
        style={{
          backgroundImage:
            'repeating-linear-gradient(-45deg, var(--color-primary-dark) 0, var(--color-primary-dark) 1px, transparent 0, transparent 50%)',
          backgroundSize: '32px 32px',
        }}
      />

      {/* Diagonal line crossing the composition */}
      <div
        className="absolute"
        style={{
          width: '130%',
          height: '1px',
          top: '42%',
          left: '-15%',
          background:
            'linear-gradient(90deg, transparent 0%, rgba(91,164,217,0.18) 30%, rgba(0,100,148,0.22) 60%, transparent 100%)',
          transform: 'rotate(-12deg)',
          transformOrigin: 'left center',
        }}
      />

      {/* Accent rectangle top-left, rotated */}
      <div
        className="absolute rounded-md"
        style={{
          width: '22%',
          height: '30%',
          top: '10%',
          left: '8%',
          border: '1.5px solid rgba(91,164,217,0.15)',
          transform: 'rotate(-8deg)',
        }}
      />

      {/* Second rotated rectangle outline — center */}
      <div
        className="absolute rounded-sm"
        style={{
          width: '16%',
          height: '22%',
          top: '38%',
          left: '28%',
          border: '1px solid rgba(91,164,217,0.12)',
          transform: 'rotate(14deg)',
        }}
      />

      {/* Floating dot cluster center-right */}
      <div
        className="absolute"
        style={{
          width: '22%',
          height: '22%',
          top: '35%',
          right: '10%',
          backgroundImage:
            'radial-gradient(circle, rgba(91,164,217,0.28) 1.5px, transparent 1.5px)',
          backgroundSize: '10px 10px',
        }}
      />

      {/* Small dot cluster upper-left */}
      <div
        className="absolute"
        style={{
          width: '14%',
          height: '16%',
          top: '12%',
          right: '32%',
          backgroundImage:
            'radial-gradient(circle, rgba(0,100,148,0.20) 1.5px, transparent 1.5px)',
          backgroundSize: '8px 8px',
        }}
      />

      {/* Thin dashed arc */}
      <svg
        className="absolute"
        style={{ top: '20%', left: '30%', opacity: 0.09 }}
        width="140"
        height="140"
        viewBox="0 0 140 140"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle
          cx="70"
          cy="70"
          r="60"
          stroke="var(--color-primary-dark)"
          strokeWidth="1"
          strokeDasharray="8 6"
        />
      </svg>

      {/* Small solid accent square */}
      <div
        className="absolute rounded-sm"
        style={{
          width: '6%',
          height: '6%',
          bottom: '28%',
          right: '28%',
          background: 'rgba(91,164,217,0.22)',
          transform: 'rotate(12deg)',
        }}
      />

      {/* Navy bottom overlay that fades upward — gives depth to pull-quote */}
      <div
        className="absolute inset-x-0 bottom-0 rounded-b-xl"
        style={{
          height: '45%',
          background:
            'linear-gradient(to top, rgba(28,43,58,0.55) 0%, rgba(28,43,58,0.18) 55%, transparent 100%)',
        }}
      />
    </div>
  );
}

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

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

  return (
    <section id="about" className="bg-surface py-20">
      <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',
              )}
            >
              <AbstractGeometry />

              {/* 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>
  );
}
