// pages.jsx — Home, Gallery, ProductDetail, About, Order

const { useState: usePageState, useEffect: usePageEffect, useMemo: usePageMemo, useRef: usePageRef } = React;

// ───────────────────────────────────────────────────────────────────
// HOME
// ───────────────────────────────────────────────────────────────────

const HomePage = ({ lang, setRoute, onOpenProduct, onOpenTelegram, accent, pattern }) => {
  const c = COPY[lang];
  const featured = PRODUCTS.filter((p) => ['p01', 'p04', 'p06', 'p07'].includes(p.id));

  return (
    <div className="page-enter">
      {/* Hero */}
      <section className="relative" data-screen-label="01 Home — Hero">
        <PatternBackdrop density={pattern} accent={accent} />
        <div className="relative max-w-[1320px] mx-auto px-6 md:px-10 pt-[120px] md:pt-[140px] pb-20 md:pb-28">
          <div className="eyebrow opacity-55 mb-6" style={{ fontSize: "13px" }}>{c.hero.eyebrow}</div>
          <h1 className="display text-[clamp(64px,11vw,180px)] leading-[0.88] tracking-[-0.02em]">
            <span>{c.hero.title_a}</span>{' '}
            <span style={{ fontStyle: 'italic', fontWeight: 500 }}>{c.hero.title_b}</span>
            <br />
            <span>{c.hero.title_c}</span>
          </h1>
          <div className="mt-10 max-w-3xl">
            <p className="display text-[clamp(22px,2.4vw,32px)] leading-[1.25]" style={{ color: 'var(--ink-2)' }}>
              {c.hero.body}
            </p>
            <div className="mt-8 flex flex-wrap items-center gap-3">
              <button onClick={() => setRoute('gallery')}
              className="inline-flex items-center gap-2 h-12 px-6 rounded-full"
              style={{ background: 'var(--ink)', color: 'var(--bg)', fontFamily: 'PT Sans', fontWeight: 700, letterSpacing: '0.04em' }}>
                {c.hero.cta_browse} →
              </button>
            </div>
          </div>
          {/* Hero stats */}
          <div className="mt-16 md:mt-24 grid grid-cols-3 gap-4 border-t pt-8" style={{ borderColor: 'var(--hair)' }}>
            {[
            { v: c.hero.stat_a_v, l: c.hero.stat_a_l },
            { v: c.hero.stat_b_v, l: c.hero.stat_b_l },
            { v: c.hero.stat_c_v, l: c.hero.stat_c_l }].
            map((s, i) =>
            <div key={i}>
                <div className="display text-[clamp(36px,5vw,64px)] leading-[1] tracking-tight">{s.v}</div>
                <div className="mt-2 text-[13px] md:text-[14px]" style={{ color: 'var(--ink-3)', fontSize: "18px" }}>{s.l}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Featured */}
      <section className="relative" data-screen-label="01 Home — Featured">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10 pt-24 md:pt-32 pb-10">
          <div className="flex items-end justify-between gap-6 mb-10">
            <div>
              <h2 className="display text-[clamp(40px,6vw,84px)] leading-[0.95] tracking-tight">{c.featured.title}</h2>
            </div>
            <button onClick={() => setRoute('gallery')} className="ulink eyebrow whitespace-nowrap" style={{ color: 'var(--ink)' }}>
              {c.featured.link} →
            </button>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-x-6 md:gap-x-8 gap-y-12">
            {featured.map((p) =>
            <ProductCard key={p.id} p={p} lang={lang} onOpen={onOpenProduct} copy={c} />
            )}
          </div>
        </div>
      </section>

      {/* Philosophy */}
      <section className="relative mt-20" style={{ background: 'var(--linen)' }} data-screen-label="01 Home — Philosophy">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10 py-24 md:py-32 grid grid-cols-12 gap-8 items-center">
          <div className="col-span-12 md:col-span-5 relative">
            <div className="relative aspect-square max-w-[420px] mx-auto">
              <ArtFace className="absolute inset-0 w-full h-full" stroke="var(--ink)" sw={1.4} />
            </div>
          </div>
          <div className="col-span-12 md:col-span-7">
            <div className="eyebrow opacity-55 mb-3">{c.philosophy.eyebrow}</div>
            <h2 className="display text-[clamp(36px,5.5vw,72px)] leading-[1.02] tracking-tight">{c.philosophy.title}</h2>
            <p className="mt-6 text-[18px] leading-[1.55] max-w-[58ch]" style={{ color: 'var(--ink-2)' }}>
              {c.philosophy.body}
            </p>
            <div className="mt-8 flex items-center gap-3">
              <button onClick={() => setRoute('about')} className="ulink eyebrow" style={{ color: 'var(--ink)' }}>
                {lang === 'ru' ? 'О мастерской' : 'About the studio'} →
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Process */}
      <section className="relative" data-screen-label="01 Home — Process">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10 py-24 md:py-32">
          <div className="grid grid-cols-12 gap-8 mb-12">
            <div className="col-span-12 md:col-span-5">
              <div className="eyebrow opacity-55 mb-3">{c.process.eyebrow}</div>
              <h2 className="display text-[clamp(40px,6vw,80px)] leading-[0.96] tracking-tight">Как рождается <span style={{ fontStyle: 'italic' }}>штука</span></h2>
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-0 border-t" style={{ borderColor: 'var(--hair-2)' }}>
            {c.process.steps.map((s, i) =>
            <div key={i} className="relative py-8 md:py-10 md:pr-8 md:pl-8 first:md:pl-0"
            style={{ borderRight: i < c.process.steps.length - 1 ? '0.5px solid var(--hair)' : 'none',
              borderBottom: '0.5px solid var(--hair)' }}>
                <div className="display text-[36px] opacity-30 leading-none">{s.n}</div>
                <div className="mt-4 display text-[26px] leading-tight">{s.t}</div>
                <p className="mt-3 text-[14.5px] leading-relaxed" style={{ color: 'var(--ink-3)', fontSize: "18px" }}>{s.d}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Closing CTA */}
      <section className="relative">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10 pb-24">
          <div className="relative rounded-[36px] overflow-hidden px-8 md:px-16 py-16 md:py-24" style={{ background: 'var(--ink)', color: 'var(--bg)' }}>
            <ArtThread className="absolute top-0 left-0 w-[60%] opacity-25" stroke="var(--rose)" sw={1.4} />
            <ArtThread className="absolute bottom-0 right-0 w-[55%] opacity-20" stroke="var(--rose)" sw={1.4} />
            <div className="relative max-w-3xl">
              <div className="eyebrow opacity-60 mb-4" style={{ color: 'var(--rose)' }}>{lang === 'ru' ? 'Возьмите штуку себе домой' : 'Take a piece home'}</div>
              <h2 className="display text-[clamp(40px,6vw,80px)] leading-[1] tracking-tight">
                {lang === 'ru' ?
                <>Найдите ту, что <span style={{ fontStyle: 'italic', color: 'var(--rose)' }}>останется</span> с вами.</> :
                <>Find the one that <span style={{ fontStyle: 'italic', color: 'var(--rose)' }}>stays</span> with you.</>}
              </h2>
              <div className="mt-8 flex flex-wrap items-center gap-4" style={{ gap: "32px" }}>
                <button onClick={() => setRoute('gallery')}
                className="inline-flex items-center gap-2 h-12 px-6 rounded-full"
                style={{ background: 'var(--bg)', color: 'var(--ink)', fontFamily: 'PT Sans', fontWeight: 700, letterSpacing: '0.04em' }}>
                  {c.hero.cta_browse} →
                </button>
                <button onClick={onOpenTelegram} className="ulink eyebrow" style={{ color: 'var(--rose)' }}>
                  {lang === 'ru' ? 'Написать нам' : 'Message us'}
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>);

};

// ───────────────────────────────────────────────────────────────────
// GALLERY
// ───────────────────────────────────────────────────────────────────

const GalleryPage = ({ lang, onOpenProduct, layout, accent, pattern }) => {
  const c = COPY[lang];
  const [cat, setCat] = usePageState('all');
  const [sort, setSort] = usePageState('default');

  const items = usePageMemo(() => {
    let list = cat === 'all' ? PRODUCTS : PRODUCTS.filter((p) => p.cat === cat);
    if (sort === 'low') list = [...list].sort((a, b) => a.price - b.price);
    if (sort === 'high') list = [...list].sort((a, b) => b.price - a.price);
    return list;
  }, [cat, sort]);

  const gridCols = layout === 'editorial' ? 'grid-cols-1 md:grid-cols-12' : 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4';

  return (
    <div className="page-enter" data-screen-label="02 Gallery">
      <section className="relative">
        <PatternBackdrop density={pattern === 'off' ? 'off' : 'subtle'} accent={accent} />
        <div className="relative max-w-[1320px] mx-auto px-6 md:px-10 pt-[120px] md:pt-[140px] pb-12">
          <div className="eyebrow opacity-55 mb-4">{c.nav.gallery}</div>
          <h1 className="display text-[clamp(54px,9vw,140px)] leading-[0.9] tracking-tight">
            {lang === 'ru' ? <>Все <span style={{ fontStyle: 'italic' }}>штуки</span>,</> : <>Every <span style={{ fontStyle: 'italic' }}>piece</span>,</>}
            <br />
            {lang === 'ru' ? 'по одной за раз.' : 'one at a time.'}
          </h1>
          <p className="mt-6 text-[16px] max-w-xl" style={{ color: 'var(--ink-3)', fontSize: "18px" }}>
            {c.product.pricing}
          </p>
        </div>
      </section>

      {/* Filters */}
      <section className="sticky z-30" style={{ top: 72, background: 'rgba(252,249,248,.92)', backdropFilter: 'blur(8px)' }}>
        <div className="max-w-[1320px] mx-auto px-6 md:px-10 py-4 border-y" style={{ borderColor: 'var(--hair)' }}>
          <div className="flex flex-wrap items-center gap-x-2 gap-y-3 justify-between">
            <div className="flex flex-wrap items-center gap-2">
              {CATEGORIES.map((k) => {
                const active = cat === k.id;
                const count = k.id === 'all' ? PRODUCTS.length : PRODUCTS.filter((p) => p.cat === k.id).length;
                return (
                  <button key={k.id} onClick={() => setCat(k.id)}
                  className="inline-flex items-center gap-1.5 px-3.5 h-9 rounded-full text-[15px] font-bold"
                  style={{
                    background: active ? 'var(--ink)' : 'transparent',
                    color: active ? 'var(--bg)' : 'var(--ink-2)',
                    border: '0.5px solid ' + (active ? 'var(--ink)' : 'var(--hair-2)'),
                    letterSpacing: '0.02em',
                    transition: 'all .2s ease', fontSize: "15px"
                  }}>
                    {k[lang]}
                    <span className="opacity-50 text-[11px] tabular-nums" style={{ fontSize: "13px" }}>{count}</span>
                  </button>);

              })}
            </div>
            <div className="flex items-center gap-2">
              <span className="eyebrow opacity-50">{lang === 'ru' ? 'Сортировка' : 'Sort'}</span>
              <select value={sort} onChange={(e) => setSort(e.target.value)}
              className="text-[15px] bg-transparent h-9 rounded-full"
              style={{ border: '0.5px solid var(--hair-2)', color: 'var(--ink)', paddingLeft: '12px', paddingRight: '32px', fontSize: '15px' }}>
                <option value="default">{lang === 'ru' ? 'По порядку' : 'Default'}</option>
                <option value="low">{lang === 'ru' ? 'Сначала дешевле' : 'Price ↑'}</option>
                <option value="high">{lang === 'ru' ? 'Сначала дороже' : 'Price ↓'}</option>
              </select>
            </div>
          </div>
        </div>
      </section>

      {/* Grid */}
      <section className="relative">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10 pt-10 pb-20">
          <div className="mb-6 eyebrow opacity-50">{items.length} {c.product.results}</div>
          {layout === 'editorial' ?
          <div className="grid grid-cols-1 md:grid-cols-12 gap-x-6 gap-y-14">
              {items.map((p, i) => {
              const span = i % 5 === 0 ? 'md:col-span-7' : i % 5 === 1 ? 'md:col-span-5' : i % 5 === 2 ? 'md:col-span-4' : i % 5 === 3 ? 'md:col-span-4' : 'md:col-span-4';
              return (
                <div key={p.id} className={'col-span-1 ' + span}>
                    <ProductCard p={p} lang={lang} onOpen={onOpenProduct} copy={c} />
                  </div>);

            })}
            </div> :

          <div className={'grid ' + gridCols + ' gap-x-6 md:gap-x-8 gap-y-14'}>
              {items.map((p) =>
            <ProductCard key={p.id} p={p} lang={lang} onOpen={onOpenProduct} copy={c} layout={layout} />
            )}
            </div>
          }

          {items.length === 0 &&
          <div className="py-20 text-center" style={{ color: 'var(--ink-3)' }}>
              {lang === 'ru' ? 'В этой категории пока ничего.' : 'Nothing in this category yet.'}
            </div>
          }
        </div>
      </section>
    </div>);

};

// ───────────────────────────────────────────────────────────────────
// PRODUCT DETAIL (slide-over)
// ───────────────────────────────────────────────────────────────────

const ProductDetail = ({ productId, lang, onClose, onOpenTelegram, onOpenProduct }) => {
  if (!productId) return null;
  const p = PRODUCTS.find((x) => x.id === productId);
  if (!p) return null;
  const c = COPY[lang];
  const related = PRODUCTS.filter((x) => x.id !== p.id && x.cat === p.cat).slice(0, 3);
  const [activeImg, setActiveImg] = usePageState(0);
  const [lightbox, setLightbox] = usePageState(false);

  // lock body scroll
  usePageEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {document.body.style.overflow = prev;};
  }, [productId]);

  const imgs = p.imgs || [];
  const hasImgs = imgs.length > 0;

  return (
    <div className="fixed inset-0 z-50 fade-in" data-screen-label="03 Product Detail">
      <button className="absolute inset-0" onClick={onClose} aria-label="закрыть" style={{ background: 'rgba(17,24,28,.32)' }} />
      <div className="absolute right-0 top-0 bottom-0 w-full md:w-[min(1080px,92vw)] overflow-y-auto" style={{ background: 'var(--bg)' }}>
        {/* top bar */}
        <div className="sticky top-0 z-10 flex items-center justify-between px-6 md:px-10 h-[64px]"
        style={{ background: 'rgba(252,249,248,.92)', backdropFilter: 'blur(8px)', borderBottom: '0.5px solid var(--hair)' }}>
          <button onClick={onClose} className="ulink eyebrow inline-flex items-center gap-2" style={{ color: 'var(--ink)' }}>
            ← {c.product.back}
          </button>
          <div className="eyebrow opacity-50">{CATEGORIES.find((k) => k.id === p.cat)[lang]}</div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-12 gap-0">
          {/* image col */}
          <div className="md:col-span-7 relative">
            {hasImgs ? (
              <>
                <div className="relative cursor-zoom-in" style={{ aspectRatio: '4/5', overflow: 'hidden' }} onClick={() => setLightbox(true)}>
                  <img src={imgs[activeImg]} alt={p.title[lang]} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                </div>
                {imgs.length > 1 &&
                <div className="px-6 md:px-10 py-6 grid grid-cols-4 gap-3">
                  {imgs.map((src, i) =>
                  <div key={i} onClick={() => setActiveImg(i)} className="cursor-pointer" style={{ opacity: i === activeImg ? 1 : 0.45, border: i === activeImg ? '2px solid var(--ink)' : '2px solid transparent', borderRadius: 8, overflow: 'hidden', transition: 'opacity .2s, border-color .2s' }}>
                      <div style={{ aspectRatio: '1/1', overflow: 'hidden' }}>
                        <img src={src} alt={'фото ' + (i + 1)} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                      </div>
                    </div>
                  )}
                </div>
                }
              </>
            ) : (
              <>
                <ProductPlaceholder tone={p.tone} form={p.form} ratio="4/5" label={p.subtitle[lang]} />
                <div className="px-6 md:px-10 py-6 grid grid-cols-4 gap-3">
                  {['object', 'bag', 'print', 'textile'].slice(0, 4).map((_, i) =>
                  <div key={i} className="cursor-pointer" style={{ opacity: i === 0 ? 1 : 0.5 }}>
                      <ProductPlaceholder tone={p.tone} form={p.form} ratio="1/1" label="alt" />
                    </div>
                  )}
                </div>
              </>
            )}
          </div>

          {/* lightbox */}
          {lightbox && hasImgs &&
          <div className="fixed inset-0 z-[100] flex items-center justify-center" style={{ background: 'rgba(0,0,0,.85)' }} onClick={() => setLightbox(false)}>
            <button className="absolute top-5 right-7 text-white text-4xl leading-none" style={{ background: 'none', border: 'none', cursor: 'pointer', opacity: .7 }} onClick={() => setLightbox(false)}>×</button>
            <img src={imgs[activeImg]} alt="" style={{ maxWidth: '90vw', maxHeight: '90vh', objectFit: 'contain', borderRadius: 6, pointerEvents: 'none' }} />
          </div>
          }

          {/* info col */}
          <div className="md:col-span-5 px-6 md:px-10 py-10 md:py-12 md:sticky md:top-[64px] md:self-start">
            <div className="eyebrow opacity-55 mb-3">{p.edition ? p.edition[lang] : ''}</div>
            <h1 className="display text-[44px] md:text-[56px] leading-[0.98] tracking-tight">
              {p.title[lang].split(' ')[0]}{' '}
              <span style={{ fontStyle: 'italic' }}>{p.title[lang].split(' ').slice(1).join(' ')}</span>
            </h1>
            <p className="mt-3 text-[15px]" style={{ color: 'var(--ink-3)' }}>{p.subtitle[lang]}</p>

            <div className="mt-8 display text-[36px] tabular-nums">{p.price.toLocaleString('ru-RU')} ₽</div>

            <button onClick={() => onOpenTelegram(p)} className="mt-6 w-full inline-flex items-center justify-center gap-2 h-12 rounded-full"
            style={{ background: 'var(--ink)', color: 'var(--bg)', fontFamily: 'PT Sans', fontWeight: 700, letterSpacing: '0.04em' }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                <path d="M21.94 4.32 18.5 19.86c-.26 1.16-.95 1.45-1.93.9l-5.32-3.92-2.57 2.47c-.28.28-.52.52-1.07.52l.38-5.42 9.86-8.91c.43-.38-.09-.6-.67-.22L4.99 12.4 0 10.84c-1.08-.34-1.1-1.08.23-1.6L20.6 2.6c.91-.34 1.7.22 1.34 1.72Z" />
              </svg>
              {c.product.cta}
            </button>

            <dl className="mt-10 border-t" style={{ borderColor: 'var(--hair)' }}>
              {[
              ['material', p.material[lang]],
              ['dims', p.dims[lang]],
              ...(p.edition ? [['edition', p.edition[lang]]] : [])].
              map(([k, v]) =>
              <div key={k} className="flex items-baseline justify-between gap-6 py-4 border-b" style={{ borderColor: 'var(--hair)' }}>
                  <dt className="eyebrow opacity-55">{c.product[k]}</dt>
                  <dd className="text-[14px] text-right" style={{ color: 'var(--ink)' }}>{v}</dd>
                </div>
              )}
            </dl>

            <div className="mt-8">
              <div className="eyebrow opacity-55 mb-3">{c.product.story}</div>
              <p className="text-[16px] leading-relaxed" style={{ color: 'var(--ink-2)', whiteSpace: 'pre-line' }}>{p.story[lang]}</p>
            </div>
          </div>
        </div>

        {/* related */}
        {related.length > 0 &&
        <div className="px-6 md:px-10 pt-16 pb-20 border-t" style={{ borderColor: 'var(--hair)' }}>
            <div className="eyebrow opacity-55 mb-6">{lang === 'ru' ? 'В этой же категории' : 'In the same category'}</div>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-x-6 md:gap-x-8 gap-y-12">
              {related.map((rp) =>
            <ProductCard key={rp.id} p={rp} lang={lang} onOpen={onOpenProduct} copy={c} />
            )}
            </div>
          </div>
        }
      </div>
    </div>);

};

// ───────────────────────────────────────────────────────────────────
// ABOUT
// ───────────────────────────────────────────────────────────────────

const AboutPage = ({ lang, onOpenTelegram, accent, pattern, setRoute }) => {
  const c = COPY[lang];
  return (
    <div className="page-enter" data-screen-label="04 About">
      <section className="relative">
        <PatternBackdrop density={pattern} accent={accent} />
        <div className="relative max-w-[1320px] mx-auto px-6 md:px-10 pt-[120px] md:pt-[140px] pb-16">
          <div className="eyebrow opacity-55 mb-4">{c.about.eyebrow}</div>
          <h1 className="display text-[clamp(54px,9vw,140px)] leading-[0.9] tracking-tight">
            <span>{c.about.title_a}</span>{' '}
            <span style={{ fontStyle: 'italic' }}>{c.about.title_b}</span>
            <br />
            <span>{c.about.title_c}</span>
          </h1>
        </div>
      </section>

      <section className="relative">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10 pb-20 grid grid-cols-12 gap-8">
          <div className="col-span-12 md:col-span-7">
            <p className="display text-[clamp(22px,2.4vw,32px)] leading-[1.25] mb-8" style={{ color: 'var(--ink-2)' }}>
              {c.about.lead}
            </p>
            <div className="space-y-5 text-[17px] leading-[1.65] max-w-[60ch]" style={{ color: 'var(--ink-2)' }}>
              {c.about.body.map((line, i) => <p key={i} style={{ fontSize: "18px" }}>{line}</p>)}
            </div>
          </div>
          <div className="col-span-12 md:col-span-5">
            <div className="relative w-full max-w-[460px] mx-auto">
              <div className="relative w-full max-w-[460px] mx-auto overflow-hidden" style={{ borderRadius: 16, aspectRatio: '3/4' }}>
              <img src="o-nas.jpg?v=2" alt="Студия" style={{ height: '100%', display: 'block', objectFit: "cover", width: "460px" }} />
            </div>
            </div>
          </div>
        </div>
      </section>

      <section className="relative" style={{ background: 'var(--linen)' }}>
        <div className="max-w-[1320px] mx-auto px-6 md:px-10 py-24">
          <div className="eyebrow opacity-55 mb-3">{c.values.eyebrow}</div>
          <h2 className="display text-[clamp(36px,5vw,68px)] leading-[1] tracking-tight mb-12">
            {lang === 'ru' ? 'Во что верим' : 'What we believe in'}
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-10">
            {c.values.items.map((v, i) =>
            <div key={i} className="flex flex-col">
                <div className="display text-[20px] opacity-30">0{i + 1} / 03</div>
                <div className="mt-4 display text-[32px] leading-tight" style={{ fontStyle: 'italic' }}>{v.t}</div>
                <p className="mt-3 text-[15.5px] leading-relaxed" style={{ color: 'var(--ink-2)', fontSize: "18px" }}>{v.d}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      <section className="relative">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10 py-24 md:py-32">
          <div className="grid grid-cols-12 gap-8 mb-12">
            <div className="col-span-12 md:col-span-5">
              <div className="eyebrow opacity-55 mb-3">{c.process.eyebrow}</div>
              <h2 className="display text-[clamp(40px,6vw,80px)] leading-[0.96] tracking-tight">Как рождается <span style={{ fontStyle: 'italic' }}>штука</span></h2>
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-0 border-t" style={{ borderColor: 'var(--hair-2)' }}>
            {c.process.steps.map((s, i) =>
            <div key={i} className="relative py-8 md:py-10 md:pr-8 md:pl-8 first:md:pl-0"
            style={{ borderRight: i < c.process.steps.length - 1 ? '0.5px solid var(--hair)' : 'none',
              borderBottom: '0.5px solid var(--hair)' }}>
                <div className="display text-[36px] opacity-30 leading-none">{s.n}</div>
                <div className="mt-4 display text-[26px] leading-tight">{s.t}</div>
                <p className="mt-3 text-[14.5px] leading-relaxed" style={{ color: 'var(--ink-3)', fontSize: '18px' }}>{s.d}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      <section className="relative pb-24">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10">
          <div className="rounded-[32px] px-8 md:px-12 py-14 flex flex-col md:flex-row md:items-center md:justify-between gap-8"
          style={{ background: 'var(--blush)', color: 'var(--ink)' }}>
            <div className="max-w-2xl">
              <h3 className="eyebrow mb-4" style={{ fontFamily: "'PT Sans', sans-serif", fontSize: '13px' }}>
                {lang === 'ru' ? <>Штуки ждут <span style={{ fontStyle: 'italic' }}>своих</span></> : <>Pieces waiting <span style={{ fontStyle: 'italic' }}>for you</span></>}
              </h3>
              <p className="display text-[clamp(24px,3vw,40px)] leading-[1.1]" style={{ fontFamily: "'Alegreya', Georgia, serif", fontWeight: 500, color: 'var(--ink)' }}>
                {lang === 'ru' ? 'Загляните в каталог — возможно, одна из них уже выбрала вас.' : 'Browse the catalogue — one of them may have already chosen you.'}
              </p>
            </div>
            <div className="flex flex-wrap items-center gap-4">
              <button onClick={() => setRoute('gallery')}
              className="inline-flex items-center gap-2 h-12 px-6 rounded-full whitespace-nowrap"
              style={{ background: 'var(--ink)', color: 'var(--bg)', fontFamily: 'PT Sans', fontWeight: 700, letterSpacing: '0.04em' }}>
                {lang === 'ru' ? 'В каталог' : 'Browse'} →
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>);

};

// ───────────────────────────────────────────────────────────────────
// ORDER
// ───────────────────────────────────────────────────────────────────

const OrderPage = ({ lang, onOpenTelegram, setRoute, accent, pattern }) => {
  const c = COPY[lang];
  const [openFaq, setOpenFaq] = usePageState(0);

  return (
    <div className="page-enter" data-screen-label="05 How to Order">
      <section className="relative">
        <PatternBackdrop density={pattern} accent={accent} />
        <div className="relative max-w-[1320px] mx-auto px-6 md:px-10 pt-[120px] md:pt-[140px] pb-16">
          <div className="eyebrow opacity-55 mb-4">{c.order.eyebrow}</div>
          <h1 className="display text-[clamp(54px,9vw,140px)] leading-[0.9] tracking-tight">
            {c.order.title.split(',')[0]},
            <br />
            <span style={{ fontStyle: 'italic' }}>{c.order.title.split(',')[1].trim()}</span>.
          </h1>
        </div>
      </section>

      {/* Steps */}
      <section className="relative">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10 pb-16">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {c.order.steps.map((s, i) =>
            <div key={i} className="relative rounded-[24px] p-8 md:p-10"
            style={{ background: i === 1 ? 'var(--linen)' : i === 2 ? 'var(--blush)' : 'var(--bg)',
              border: i === 0 ? '0.5px solid var(--hair-2)' : 'none' }}>
                <div className="display text-[80px] leading-[0.9] opacity-25">{s.n}</div>
                <div className="mt-2 display text-[34px] leading-tight">{s.t}</div>
                <p className="mt-4 text-[16px] leading-relaxed" style={{ color: 'var(--ink-2)', fontSize: "18px" }}>{s.d}</p>
                {i === 0 &&
              <button onClick={() => setRoute('gallery')} className="mt-6 ulink eyebrow" style={{ color: 'var(--ink)' }}>
                    {lang === 'ru' ? 'Смотреть каталог' : 'Browse catalog'} →
                  </button>
              }
                {i === 1 &&
              <button onClick={onOpenTelegram} className="mt-6 ulink eyebrow" style={{ color: 'var(--ink)' }}>
                    {lang === 'ru' ? 'Написать нам' : 'Message us'} →
                  </button>
              }
              </div>
            )}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="relative" style={{ background: 'var(--linen)' }}>
        <div className="max-w-[1320px] mx-auto px-6 md:px-10 py-24">
          <div className="grid grid-cols-12 gap-8">
            <div className="col-span-12 md:col-span-4">
              <div className="eyebrow opacity-55 mb-3">FAQ</div>
              <h2 className="display text-[clamp(36px,5vw,64px)] leading-[1.02] tracking-tight">
                {lang === 'ru' ? 'Частые вопросы' : 'Frequently asked'}
              </h2>
              <p className="mt-4 text-[15px]" style={{ color: 'var(--ink-3)', fontSize: "18px" }}>
                {lang === 'ru' ? 'Если ответа здесь нет — напишите нам, ответим в течение дня.' : 'If your question is not here — message us on Telegram, we reply within a day.'}
              </p>
            </div>
            <div className="col-span-12 md:col-span-8 border-t" style={{ borderColor: 'var(--hair-2)' }}>
              {c.order.faq.map((f, i) => {
                const open = openFaq === i;
                return (
                  <div key={i} className="border-b" style={{ borderColor: 'var(--hair-2)' }}>
                    <button onClick={() => setOpenFaq(open ? -1 : i)}
                    className="w-full flex items-center justify-between gap-6 py-6 text-left">
                      <span className="display text-[22px] md:text-[26px] leading-tight"
                      style={{ fontStyle: open ? 'italic' : 'normal' }}>{f.q}</span>
                      <span className="display text-[28px] opacity-50" style={{ transform: open ? 'rotate(45deg)' : 'none', transition: 'transform .3s ease' }}>+</span>
                    </button>
                    <div style={{ maxHeight: open ? 200 : 0, overflow: 'hidden', transition: 'max-height .35s ease' }}>
                      <p className="pb-6 text-[16px] leading-relaxed max-w-[60ch]" style={{ color: 'var(--ink-2)', fontSize: "18px", width: "690px", whiteSpace: 'pre-line', height: "800px" }}>{f.a}</p>
                    </div>
                  </div>);

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

      {/* CTA */}
      <section className="relative">
        <div className="max-w-[1320px] mx-auto px-6 md:px-10 py-24">
          <div className="relative rounded-[32px] px-8 md:px-16 py-16 md:py-20 text-center overflow-hidden" style={{ background: 'var(--ink)', color: 'var(--bg)' }}>
            <ArtBlob className="absolute -top-10 -left-10 w-72 opacity-20" stroke="var(--rose)" />
            <ArtHand className="absolute -bottom-10 -right-10 w-72 opacity-20" stroke="var(--rose)" />
            <div className="relative">
              <h2 className="display text-[clamp(40px,6vw,80px)] leading-[1] tracking-tight">
                {lang === 'ru' ? 'Готовы выбрать?' : 'Ready to pick one?'}
              </h2>
              <p className="mt-5 text-[17px] opacity-80 max-w-xl mx-auto" style={{ fontSize: "18px", margin: "20px 243px 5px", width: "600px" }}>
                {lang === 'ru' ? 'Откройте каталог или напишите нам. Расскажем, что в наличии и в работе.' : 'Open the catalog or message us. We will tell you what is in stock and in progress.'}
              </p>
              <div className="mt-8 flex flex-wrap items-center justify-center gap-4">
                <button onClick={() => setRoute('gallery')} className="inline-flex items-center gap-2 h-12 px-6 rounded-full"
                style={{ background: 'var(--bg)', color: 'var(--ink)', fontFamily: 'PT Sans', fontWeight: 700, letterSpacing: '0.04em' }}>
                  {c.hero.cta_browse} →
                </button>
                <button onClick={onOpenTelegram} className="inline-flex items-center gap-2 h-12 px-6 rounded-full"
                style={{ border: '0.5px solid rgba(255,255,255,.3)', color: 'var(--bg)', fontFamily: 'PT Sans', fontWeight: 700, letterSpacing: '0.04em' }}>
                  {c.nav.tg}
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>);

};

Object.assign(window, { HomePage, GalleryPage, ProductDetail, AboutPage, OrderPage });