"use client";

import Image from "next/image";
import { m, useReducedMotion } from "framer-motion";
import { useLocale } from "next-intl";
import TypewriterText from "@/components/TypewriterText";

type Locale = "tr" | "en" | "ru";

const content = {
  tr: {
    eyebrow: "Hikâyemiz",
    lead: "Modern pişirme deneyimi için tasarlandı.",
    intro: "Norden, yüksek performanslı pişirme ürünlerini farklı mutfakların ölçü, kullanım ve tasarım ihtiyaçlarına göre şekillendirir. BE UNIQUE yaklaşımı; işlevi, dayanıklılığı, kişiselleştirmeyi ve güçlü bir görsel karakteri aynı yüzeyde buluşturur.",
    scroll: "Norden yaklaşımını keşfedin",
    why: "Neden Norden?",
    imageAlts: ["Nero siyah cam ankastre ocak", "Vitroceramic elektrikli ocak", "Nexus Inox ankastre ocak", "Swan siyah cam ankastre ocak", "ChronoFlame dokuz kademe kontrol detayı", "Elite siyah cam ankastre ocak"],
    scenes: [
      ["01", "BE UNIQUE", "Tek bir kalıba değil, mutfağın ölçüsüne ve kullanım biçimine göre şekillenen ürün aileleri.", "7 SERİ · FARKLI TASARIM KARAKTERLERİ"],
      ["02", "Ölçü, tasarımın başlangıç noktasıdır.", "30, 45, 60 ve 90 cm seçenekleri; seri ve ürün tipine göre farklı mutfak planlarına uyum sağlar.", "30 · 45 · 60 · 90 CM"],
      ["03", "Yüzey, karakteri belirler.", "Modele göre 6 veya 8 mm temperli cam ile paslanmaz çelik üst tabla seçenekleri sunulur. Cam yüzeyler Glossy veya Matte karakterde seçilebilir.", "GLASS · INOX · 6 / 8 MM"],
      ["04", "Kontrollü güç, gerçek pişirme odağı.", "Sabaf Wok 3,6 kW standart veya modele bağlıdır. Talebe göre opsiyonel 4,0 kW alternatifi sunulabilir.", "3,6 KW · OPSİYONEL 4,0 KW"],
      ["05", "Alev görünür bir sisteme dönüşür.", "Opsiyonel ChronoFlame yaklaşımı, alev seviyesini 1’den 9’a kadar görünür ve tekrar edilebilir adımlarla yönetmeye yardımcı olur.", "CHRONOFLAME · 1—9 · OPSİYONEL"],
      ["06", "Denge, dayanıklılık ve kolay bakım.", "Döküm ızgara seçenekleri pişirme kaplarını dengede tutarken pürüzsüz cam veya çelik yüzeyler temizliği kolaylaştırır.", "CAST IRON · EASY TO CLEAN"],
    ],
  },
  en: {
    eyebrow: "Our story", lead: "Designed for the modern cooking experience.", intro: "Norden shapes high-performance cooking products around the dimensions, use and design needs of different kitchens. BE UNIQUE brings function, durability, customisation and a confident visual character together on one surface.", scroll: "Discover the Norden approach", why: "Why Norden?",
    imageAlts: ["Nero black-glass built-in hob", "Vitroceramic electric hob", "Nexus Inox built-in hob", "Swan black-glass built-in hob", "ChronoFlame nine-level control detail", "Elite black-glass built-in hob"],
    scenes: [
      ["01", "BE UNIQUE", "Product families shaped around the dimensions and use of the kitchen rather than one fixed mould.", "7 SERIES · DISTINCT DESIGN CHARACTERS"],
      ["02", "Dimensions are where design begins.", "30, 45, 60 and 90 cm options adapt to different kitchen plans depending on series and product type.", "30 · 45 · 60 · 90 CM"],
      ["03", "The surface defines the character.", "Depending on model, 6 or 8 mm tempered glass and stainless-steel tops are available. Glass can have a Glossy or Matte character.", "GLASS · INOX · 6 / 8 MM"],
      ["04", "Controlled power with a true cooking focus.", "Sabaf Wok 3.6 kW is standard or model dependent. An optional 4.0 kW alternative can be supplied on request.", "3.6 KW · OPTIONAL 4.0 KW"],
      ["05", "Flame becomes a visible system.", "The optional ChronoFlame approach helps manage flame from level 1 to 9 in visible, repeatable steps.", "CHRONOFLAME · 1—9 · OPTIONAL"],
      ["06", "Balance, durability and easier care.", "Cast-iron support options stabilise cookware while smooth glass or steel surfaces make cleaning easier.", "CAST IRON · EASY TO CLEAN"],
    ],
  },
  ru: {
    eyebrow: "Наша история", lead: "Создано для современной кухни.", intro: "Norden создаёт высокопроизводительную технику с учётом размеров, задач и дизайна разных кухонь. BE UNIQUE объединяет функциональность, долговечность, персонализацию и выразительный характер.", scroll: "Откройте подход Norden", why: "Почему Norden?",
    imageAlts: ["Встраиваемая панель Nero из чёрного стекла", "Электрическая панель Vitroceramic", "Встраиваемая панель Nexus Inox", "Встраиваемая панель Swan из чёрного стекла", "Девятиуровневое управление ChronoFlame", "Встраиваемая панель Elite из чёрного стекла"],
    scenes: [
      ["01", "BE UNIQUE", "Семейства продуктов создаются с учётом размеров и задач кухни, а не по одному неизменному шаблону.", "7 СЕРИЙ · РАЗНЫЙ ХАРАКТЕР ДИЗАЙНА"],
      ["02", "Размер — отправная точка дизайна.", "Варианты 30, 45, 60 и 90 см подходят для разных планировок в зависимости от серии и типа изделия.", "30 · 45 · 60 · 90 СМ"],
      ["03", "Поверхность задаёт характер.", "В зависимости от модели доступны закалённое стекло 6 или 8 мм и нержавеющая сталь. Стекло может быть Glossy или Matte.", "GLASS · INOX · 6 / 8 MM"],
      ["04", "Контролируемая мощность.", "Sabaf Wok 3,6 кВт — стандарт или зависит от модели. По запросу доступен опциональный вариант 4,0 кВт.", "3,6 КВТ · ОПЦИЯ 4,0 КВТ"],
      ["05", "Пламя становится понятной системой.", "Опциональный подход ChronoFlame помогает управлять пламенем от 1 до 9 видимыми повторяемыми шагами.", "CHRONOFLAME · 1—9 · ОПЦИЯ"],
      ["06", "Баланс, надёжность и простой уход.", "Чугунные опоры стабилизируют посуду, а гладкие стеклянные или стальные поверхности упрощают очистку.", "ЧУГУН · ПРОСТОЙ УХОД"],
    ],
  },
} satisfies Record<Locale, { eyebrow: string; lead: string; intro: string; scroll: string; why: string; imageAlts: string[]; scenes: string[][] }>;

const sceneImages = [
  "/products/nero/nero-siyah-cam-60cm-4g-onden/01-perspective.webp",
  "/products/vtc/vtc-ceran-60cm-ceran/02-top.webp",
  "/products/nexus/nexus-inox-60-cm-4-gaz-onden-dugme-sac/01-perspective.webp",
  "/products/swan/swan-siyah-cam-60cm-4g-onden/01-perspective.webp",
  "/media/story/catalog/chrono-9-level-960.webp",
  "/products/elite/elite-siyah-cam-60cm-4g-onden/02-top.webp",
];

export default function BrandStory() {
  const rawLocale = useLocale();
  const locale: Locale = rawLocale === "en" || rawLocale === "ru" ? rawLocale : "tr";
  const t = content[locale];
  const reduceMotion = useReducedMotion();

  return <section id="about" className="relative overflow-hidden border-t" style={{ background: "var(--surface-1)", borderColor: "var(--border)" }}>
    <div className="relative flex items-center border-b px-6 py-20 md:px-12 lg:min-h-[92svh] lg:py-24" style={{ borderColor: "var(--border)" }}>
      <m.p aria-hidden initial={{ opacity: 0 }} whileInView={{ opacity: .035 }} className="absolute inset-x-0 top-[14%] whitespace-nowrap text-center text-[18vw] font-semibold tracking-[-.08em]">BE UNIQUE</m.p>
      <div className="relative mx-auto grid w-full max-w-[92rem] gap-12 lg:grid-cols-[.9fr_1.1fr] lg:items-center">
        <m.div initial={reduceMotion ? false : { opacity: 0, x: -110 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true, amount: .4 }} transition={{ duration: .9 }}>
          <div className="flex items-center justify-between">
            <span className="eyebrow">{t.eyebrow}</span>
            <span className="font-mono text-[9px] tracking-[.22em]" style={{ color: "var(--fg-muted)" }}>01—06</span>
          </div>
          <div className="relative mt-8 aspect-[4/3] overflow-hidden rounded-[2rem] border" style={{ borderColor: "var(--border)", background: "var(--surface-0)" }}>
            <m.div
              className="absolute left-[11%] top-[11%] h-[78%] w-[78%]"
              animate={reduceMotion ? undefined : { y: [0, -7, 0], rotate: [-1.5, 0, -1.5] }}
              transition={{ duration: 7, repeat: Infinity, ease: "easeInOut" }}
            >
              <Image src="/products/nero/nero-siyah-cam-60cm-4g-onden/01-perspective.webp" alt={t.imageAlts[0]} fill sizes="(max-width:1024px) 90vw, 38vw" className="object-contain p-7 drop-shadow-[0_28px_45px_rgba(0,0,0,.62)]" />
            </m.div>
            <StoryMarker className="left-5 top-5" label={locale === "ru" ? "30 · 60 · 90 СМ" : "30 · 60 · 90 CM"} />
            <StoryMarker className="right-5 top-5 text-right" label="GLASS · INOX" />
            <StoryMarker className="bottom-5 left-5" label="SABAF WOK" />
            <StoryMarker className="bottom-5 right-5 text-right" label="CHRONOFLAME · 1—9" />
          </div>
          <p className="mt-5 font-mono text-[9px] uppercase tracking-[.22em]" style={{ color: "var(--fg-muted)" }}>NORDEN · BE UNIQUE</p>
        </m.div>
        <div>
          <h2 aria-label={t.lead} className="max-w-5xl text-5xl font-medium leading-[1.01] tracking-[-.055em] md:text-7xl">{t.lead.split(" ").map((word, index) => <m.span aria-hidden key={`${word}-${index}`} initial={reduceMotion ? false : { y: 48, opacity: 0 }} whileInView={{ y: 0, opacity: 1 }} viewport={{ once: false }} transition={{ delay: index * .055, duration: .7, ease: [0.16, 1, 0.3, 1] }} className="mr-[.2em] inline-block">{word}</m.span>)}</h2>
          <m.p initial={reduceMotion ? false : { opacity: 0, x: 100 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true, amount: .5 }} transition={{ duration: .9 }} className="mt-8 max-w-3xl text-lg leading-8" style={{ color: "var(--fg-secondary)" }}>{t.intro}</m.p>
          <m.div initial={reduceMotion ? false : { opacity: 0 }} whileInView={{ opacity: 1 }} className="mt-10 flex items-center gap-3 text-[9px] uppercase tracking-[.18em]" style={{ color: "var(--fg-muted)" }}><span className="h-px w-14" style={{ background: "var(--ember)" }}/>{t.scroll}</m.div>
        </div>
      </div>
    </div>

    <div className="mx-auto max-w-[100rem] px-6 md:px-12">
      {t.scenes.map((scene, index) => {
        const right = index % 2 === 0;
        return <article key={scene[0]} className={`grid items-center gap-7 border-t py-12 md:gap-10 md:py-14 lg:min-h-[72svh] lg:grid-cols-2 ${right ? "lg:[&>*:first-child]:order-2" : ""}`} style={{ borderColor: "var(--border)" }}>
          <m.div initial={reduceMotion ? false : { opacity: 0, x: right ? 150 : -150 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ amount: .3 }} transition={{ duration: 1, ease: [0.16, 1, 0.3, 1] }} className="relative aspect-[4/3] overflow-hidden rounded-[2rem] border" style={{ borderColor: "var(--border)", background: "var(--surface-0)" }}>
            <StoryImageDecor index={index} />
            <Image src={sceneImages[index]} alt={t.imageAlts[index]} fill sizes="(max-width:1024px) 100vw, 50vw" className={`z-10 object-contain ${index === 4 ? "object-cover" : "p-6 md:p-10"} drop-shadow-[0_28px_45px_rgba(0,0,0,.55)]`} />
            <span className="absolute bottom-5 left-5 z-30 font-mono text-[9px] tracking-[.18em]" style={{ color: "var(--fg-muted)" }}>NORDEN · {scene[0]}</span>
          </m.div>
          <m.div initial={reduceMotion ? false : { opacity: 0, x: right ? -150 : 150 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ amount: .34 }} transition={{ duration: 1, delay: .08, ease: [0.16, 1, 0.3, 1] }} className={`${right ? "lg:pr-16" : "lg:pl-16"}`}>
            {index === 0 ? <span className="eyebrow mb-8 block">{t.why}</span> : null}
            <span className="font-mono text-[10px] tracking-[.24em]" style={{ color: "var(--ember)" }}>{scene[0]}</span>
            <h3 className="mt-5 text-4xl font-medium leading-[1.04] tracking-[-.045em] md:text-6xl"><TypewriterText text={scene[1]} /></h3>
            <p className="mt-7 max-w-xl text-lg leading-8" style={{ color: "var(--fg-secondary)" }}>{scene[2]}</p>
            <p className="mt-9 font-mono text-[9px] uppercase tracking-[.17em]" style={{ color: "var(--fg-muted)" }}>{scene[3]}</p>
          </m.div>
        </article>;
      })}
    </div>
  </section>;
}

function StoryMarker({ className, label }: { className: string; label: string }) {
  return <span className={`absolute z-10 font-mono text-[7px] uppercase tracking-[.16em] md:text-[8px] ${className}`} style={{ color: "var(--fg-muted)" }}>
    <span className="mb-2 block h-px w-10" style={{ background: "var(--ember)" }} />
    {label}
  </span>;
}

function StoryImageDecor({ index }: { index: number }) {
  const mirror = index % 2 === 1;
  return <div aria-hidden="true" className="pointer-events-none absolute inset-0 overflow-hidden">
    <span className={`absolute top-5 z-30 flex items-center gap-2 opacity-70 ${mirror ? "right-5 flex-row-reverse" : "left-5"}`}><span className="h-px w-12" style={{ background: "var(--ember)" }}/><span className="h-1.5 w-1.5 rounded-full border" style={{ borderColor: "var(--ember)" }}/></span>
    <span className={`absolute bottom-5 z-30 flex items-center gap-2 opacity-45 ${mirror ? "left-5" : "right-5 flex-row-reverse"}`}><span className="h-px w-8" style={{ background: "var(--ember)" }}/><span className="h-1.5 w-1.5 rounded-full border" style={{ borderColor: "var(--ember)" }}/></span>
  </div>;
}