// Product detail route

const PRODUCT_ASSETS = [
  {
    slug: 'fes',
    image: 'images/belgha-360/frame-001.webp',
    backdrop: 'images/city-bg-fes-tannery.webp',
    letter: 'F',
    blend: 'screen'
  },
  {
    slug: 'chefchaouen',
    image: 'images/belgha-chefchaouen-cutout.png',
    backdrop: 'images/city-bg-chefchaouen-medina.webp',
    letter: 'C',
    blend: 'normal'
  },
  {
    slug: 'marrakech',
    image: 'images/belgha-marrakech-cutout.png',
    backdrop: 'images/city-bg-marrakech-koutoubia.webp',
    letter: 'M',
    blend: 'normal'
  }
];

const PRODUCT_COPY = {
  en: [
    {
      title: 'Fès',
      subtitle: 'The Classic Yellow',
      body: 'Born in the heart of the old Médina. Saffron warmth, full-grain leather, and a sharper ceremonial line.',
      code: 'BLG-01-FES',
      city: 'Fès',
      colorway: 'Classic yellow',
      material: 'Full-grain Fès leather',
      lining: 'Vegetable-tanned interior',
      finish: 'Natural grain',
      specs: [
        ['Material', 'Full-grain Fès leather'],
        ['Lining', 'Vegetable-tanned interior'],
        ['Sole', 'Hand-tooled leather'],
        ['Stitch', 'Hand-sewn, 1.2 mm waxed linen'],
        ['Craft time', '~14 hours per pair'],
        ['Origin', 'Médina de Fès, Morocco'],
        ['Shipping', 'Free across GCC · 5-7 days'],
        ['Packaging', 'Rigid box · monogrammed tissue · signed card']
      ]
    },
    {
      title: 'Chefchaouen',
      subtitle: 'The Blue',
      body: 'Inspired by the blue pearl of the Rif mountains. A cooler, quieter colorway with the same hand-shaped Moroccan form.',
      code: 'BLG-02-CHA',
      city: 'Chefchaouen',
      colorway: 'Rif blue',
      material: 'Dyed full-grain leather',
      lining: 'Vegetable-tanned interior',
      finish: 'Saturated dye',
      specs: [
        ['Material', 'Blue dyed full-grain leather'],
        ['Lining', 'Vegetable-tanned interior'],
        ['Sole', 'Supple hand-finished leather'],
        ['Stitch', 'Hand-sewn, 1.2 mm waxed linen'],
        ['Craft time', '~14 hours per pair'],
        ['Origin', 'Médina de Fès, Morocco'],
        ['Shipping', 'Free across GCC · 5-7 days'],
        ['Packaging', 'Rigid box · monogrammed tissue · signed card']
      ]
    },
    {
      title: 'Marrakech',
      subtitle: 'The Red',
      body: 'The warmth of the ochre city, captured in leather. A deeper evening colorway with a formal, grounded presence.',
      code: 'BLG-03-MAR',
      city: 'Marrakech',
      colorway: 'Ochre red',
      material: 'Dyed full-grain leather',
      lining: 'Vegetable-tanned interior',
      finish: 'Warm dyed grain',
      specs: [
        ['Material', 'Ochre dyed full-grain leather'],
        ['Lining', 'Vegetable-tanned interior'],
        ['Sole', 'Hand-tooled leather'],
        ['Stitch', 'Hand-sewn, 1.2 mm waxed linen'],
        ['Craft time', '~14 hours per pair'],
        ['Origin', 'Médina de Fès, Morocco'],
        ['Shipping', 'Free across GCC · 5-7 days'],
        ['Packaging', 'Rigid box · monogrammed tissue · signed card']
      ]
    }
  ],
  ar: [
    {
      title: 'فاس',
      subtitle: 'الأصفر الأصيل',
      body: 'من قلب المدينة القديمة. دفء بلون الزعفران، جلد طبيعي، وخط احتفالي أكثر دقة.',
      code: 'BLG-01-FES',
      city: 'فاس',
      colorway: 'الأصفر الأصيل',
      material: 'جلد فاس طبيعي',
      lining: 'بطانة نباتية الدباغة',
      finish: 'ملمس طبيعي',
      specs: [
        ['الخامة', 'جلد طبيعي من فاس'],
        ['البطانة', 'داخلية نباتية الدباغة'],
        ['النعل', 'جلد مشغول يدوياً'],
        ['الخياطة', 'كتان مشمع، ١.٢ مم'],
        ['وقت الصنع', 'حوالي ١٤ ساعة لكل زوج'],
        ['الأصل', 'المدينة القديمة، فاس'],
        ['الشحن', 'مجاني في الخليج · ٥-٧ أيام'],
        ['التغليف', 'علبة صلبة · ورق بشعار Belgham · بطاقة موقعة']
      ]
    },
    {
      title: 'شفشاون',
      subtitle: 'الأزرق',
      body: 'مستوحاة من جوهرة الريف الزرقاء. لون أهدأ بنفس القالب المغربي المشكل يدوياً.',
      code: 'BLG-02-CHA',
      city: 'شفشاون',
      colorway: 'أزرق الريف',
      material: 'جلد طبيعي مصبوغ',
      lining: 'بطانة نباتية الدباغة',
      finish: 'صبغة عميقة',
      specs: [
        ['الخامة', 'جلد طبيعي أزرق مصبوغ'],
        ['البطانة', 'داخلية نباتية الدباغة'],
        ['النعل', 'جلد مرن مشطب يدوياً'],
        ['الخياطة', 'كتان مشمع، ١.٢ مم'],
        ['وقت الصنع', 'حوالي ١٤ ساعة لكل زوج'],
        ['الأصل', 'المدينة القديمة، فاس'],
        ['الشحن', 'مجاني في الخليج · ٥-٧ أيام'],
        ['التغليف', 'علبة صلبة · ورق بشعار Belgham · بطاقة موقعة']
      ]
    },
    {
      title: 'مراكش',
      subtitle: 'الأحمر',
      body: 'دفء المدينة الحمراء في الجلد. لون مسائي أعمق وحضور رسمي ومتوازن.',
      code: 'BLG-03-MAR',
      city: 'مراكش',
      colorway: 'الأحمر الأكسيدي',
      material: 'جلد طبيعي مصبوغ',
      lining: 'بطانة نباتية الدباغة',
      finish: 'ملمس مصبوغ دافئ',
      specs: [
        ['الخامة', 'جلد طبيعي أحمر مصبوغ'],
        ['البطانة', 'داخلية نباتية الدباغة'],
        ['النعل', 'جلد مشغول يدوياً'],
        ['الخياطة', 'كتان مشمع، ١.٢ مم'],
        ['وقت الصنع', 'حوالي ١٤ ساعة لكل زوج'],
        ['الأصل', 'المدينة القديمة، فاس'],
        ['الشحن', 'مجاني في الخليج · ٥-٧ أيام'],
        ['التغليف', 'علبة صلبة · ورق بشعار Belgham · بطاقة موقعة']
      ]
    }
  ]
};

const PRODUCT_SIZES = ['39', '40', '41', '42', '43', '44', '45', '46'];

function ProductPage({ lang, productIndex, onClose }) {
  const { isPhone, isTablet } = useResponsive();
  const [entered, setEntered] = useState(false);
  const [selectedSize, setSelectedSize] = useState('42');
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState('idle');
  const [joined, setJoined] = useState(false);
  const [message, setMessage] = useState('');
  const [openFaq, setOpenFaq] = useState(0);
  const isRTL = lang === 'ar';
  const content = window.CONTENT[lang];
  const waitlist = content.waitlist;
  const items = content.colors.items;
  const item = items[productIndex] || items[0];
  const asset = PRODUCT_ASSETS[productIndex] || PRODUCT_ASSETS[0];
  const copy = PRODUCT_COPY[lang][productIndex] || PRODUCT_COPY[lang][0];
  const isCompact = isTablet;
  const isDropOpen = productIndex === 0;
  const availability = {
    eyebrow: isRTL ? 'قريباً' : 'Coming soon',
    title: isRTL ? 'هذا اللون قادم قريباً.' : 'This colorway is coming soon.',
    body: isRTL
      ? 'دعوة الإصدار مفتوحة حالياً للون فاس الأصفر فقط. سنعلن عن هذا اللون عندما يقترب موعده.'
      : 'Drop access is currently open only for the Fès yellow Belgha. This colorway will open in a later release.'
  };

  useEffect(() => {
    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const raf = requestAnimationFrame(() => setEntered(true));
    const onKey = event => {
      if (event.key === 'Escape') onClose();
    };
    window.addEventListener('keydown', onKey);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = previousOverflow;
    };
  }, [onClose]);

  useEffect(() => {
    const syncJoined = () => {
      setJoined(!!localStorage.getItem('belgham-waitlist-joined'));
    };
    syncJoined();
    window.addEventListener('belgham:waitlist-joined', syncJoined);
    window.addEventListener('storage', syncJoined);
    return () => {
      window.removeEventListener('belgham:waitlist-joined', syncJoined);
      window.removeEventListener('storage', syncJoined);
    };
  }, []);

  const selectProduct = index => {
    const next = PRODUCT_ASSETS[index];
    if (next) window.location.hash = `product-${next.slug}`;
  };

  const submitWaitlist = async event => {
    event.preventDefault();
    if (!isDropOpen) return;
    const normalized = email.trim().toLowerCase();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(normalized)) {
      setMessage(waitlist.error);
      return;
    }

    setStatus('submitting');
    setMessage('');

    try {
      const response = await fetch('/api/waitlist', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email: normalized,
          lang,
          source: `product-${asset.slug}-${selectedSize}`
        })
      });

      if (!response.ok) throw new Error('waitlist failed');

      localStorage.setItem('belgham-waitlist-joined', normalized);
      localStorage.removeItem('belgham-waitlist-dismissed');
      window.dispatchEvent(new CustomEvent('belgham:waitlist-joined'));
      setJoined(true);
      setStatus('success');
    } catch (error) {
      setStatus('idle');
      setMessage(waitlist.serverError);
    }
  };

  const labelStyle = {
    fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-mono)',
    fontSize: isRTL ? 12 : 9,
    letterSpacing: isRTL ? '0' : '0.22em',
    textTransform: isRTL ? 'none' : 'uppercase'
  };
  const hasWaitlistAccess = isDropOpen && (joined || status === 'success');

  const form = compact => {
    if (!isDropOpen || hasWaitlistAccess) return null;

    return (
    <form onSubmit={submitWaitlist} style={{
      width: '100%',
      display: 'flex',
      flexDirection: compact ? 'column' : 'row',
      alignItems: 'stretch',
      gap: compact ? 10 : 0
    }}>
      <input
        type="email"
        autoComplete="email"
        inputMode="email"
        value={email}
        onChange={event => {
          setEmail(event.target.value);
          if (message) setMessage('');
        }}
        placeholder={waitlist.placeholder}
        disabled={status === 'submitting' || status === 'success'}
        style={{
          flex: '1 1 auto',
          minWidth: 0,
          minHeight: 58,
          background: 'rgba(250,250,247,0.025)',
          border: '1px solid rgba(250,250,247,0.22)',
          borderRight: compact || isRTL ? '1px solid rgba(250,250,247,0.22)' : 0,
          borderLeft: compact || !isRTL ? '1px solid rgba(250,250,247,0.22)' : 0,
          color: 'var(--fg)',
          padding: '0 18px',
          outline: 'none',
          fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-sans)',
          fontSize: 15,
          direction: 'ltr',
          textAlign: isRTL ? 'right' : 'left'
        }}
      />
      <button type="submit" data-cursor="hover" disabled={status === 'submitting' || status === 'success'} style={{
        flex: compact ? '0 0 auto' : '0 0 190px',
        minHeight: 58,
        background: 'var(--fg)',
        border: '1px solid var(--fg)',
        color: '#07070a',
        fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-mono)',
        fontSize: isRTL ? 14 : 10,
        letterSpacing: isRTL ? '0' : '0.18em',
        textTransform: isRTL ? 'none' : 'uppercase',
        opacity: status === 'submitting' ? 0.72 : 1,
        cursor: isPhone ? 'auto' : 'none'
      }}>
        {status === 'success' ? waitlist.successTitle : status === 'submitting' ? waitlist.submitting : waitlist.submit}
      </button>
    </form>
    );
  };

  const faqs = isRTL
    ? [
        ['متى يفتح الإصدار؟', 'تصل الرسالة الأولى في اليوم السابق. يفتح الطلب في الساعة 20:00 بتوقيت الخليج.'],
        ['هل ستكون هناك أزواج أخرى؟', 'كل لون يصدر بعدد محدود. بعد انتهاء العدد، ينتقل Belgham إلى المدينة التالية.'],
        ['هل أدفع شيئاً للانضمام؟', 'لا. القائمة مخصصة لإرسال رابط الدعوة فقط.'],
        ['أين تشحنون؟', 'الشحن الأول مخصص لدول الخليج، وسنضيف مناطق أخرى مع الإصدارات القادمة.']
      ]
    : [
        ['When does the drop open?', 'The first email goes out the day before. The store opens at 20:00 GST.'],
        ['Will there be more pairs after?', 'Each colorway is limited. When the edition is spoken for, Belgham moves to the next city.'],
        ['Do I pay anything to join?', 'No. The whitelist only reserves early access to the private invite link.'],
        ['Where do you ship?', 'The first release ships across the GCC. More regions will be added with future drops.']
      ];

  const careSteps = isRTL
    ? [
        ['01', 'ارتدها حافية في الأسبوع الأول. الجلد يحفظ شكل القدم.'],
        ['02', 'امسحها بقطعة قطن جافة. اتركها ترتاح يوماً بين الاستخدامات.'],
        ['03', 'لمسة خفيفة من بلسم الجلد الطبيعي كل موسم. لا أكثر.']
      ]
    : [
        ['01', 'Wear them barefoot the first week. The leather will memorise your foot.'],
        ['02', 'Wipe with a dry cotton cloth. Let them rest a day between wears.'],
        ['03', 'A touch of neutral leather balm, every season. Nothing more.']
      ];

  const otherProducts = items
    .map((swatch, index) => ({ swatch, index, asset: PRODUCT_ASSETS[index], copy: PRODUCT_COPY[lang][index] }))
    .filter(product => product.index !== productIndex);

  return (
    <div style={{
      position: 'fixed',
      inset: 0,
      zIndex: 1050,
      background: '#08080b',
      color: 'var(--fg)',
      overflowY: 'auto',
      overscrollBehavior: 'contain',
      direction: isRTL ? 'rtl' : 'ltr',
      opacity: entered ? 1 : 0,
      transition: 'opacity 0.45s ease'
    }}>
      <header style={{
        position: 'sticky',
        top: 0,
        zIndex: 8,
        minHeight: isPhone ? 68 : 74,
        display: 'grid',
        gridTemplateColumns: isPhone ? 'auto 1fr auto' : '1fr auto 1fr',
        alignItems: 'center',
        gap: 16,
        padding: isPhone
          ? 'calc(12px + env(safe-area-inset-top)) 18px 12px'
          : 'calc(18px + env(safe-area-inset-top)) 40px 18px',
        background: 'rgba(8,8,11,0.82)',
        backdropFilter: 'blur(18px)',
        WebkitBackdropFilter: 'blur(18px)',
        borderBottom: '1px solid rgba(250,250,247,0.12)'
      }}>
        <a href="#top" onClick={onClose} aria-label="Belgham" data-cursor="hover" style={{
          justifySelf: isRTL ? 'end' : 'start',
          display: 'inline-flex',
          alignItems: 'center',
          width: isPhone ? 34 : 42,
          height: isPhone ? 34 : 42
        }}>
          <img src="images/logo-dark.png" alt="Belgham" style={{ width: '100%', height: '100%', objectFit: 'contain', filter: 'invert(1)' }} />
        </a>

        {!isPhone && (
          <nav style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: isTablet ? 24 : 34,
            fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-mono)',
            fontSize: isRTL ? 13 : 10,
            letterSpacing: isRTL ? '0' : '0.2em',
            textTransform: isRTL ? 'none' : 'uppercase',
            color: 'rgba(250,250,247,0.78)'
          }}>
            <a href="#craft" onClick={onClose} data-cursor="hover" style={{ color: 'inherit', textDecoration: 'none' }}>{content.navCraft}</a>
            <a href="#collection" onClick={onClose} data-cursor="hover" style={{ color: 'inherit', textDecoration: 'none' }}>{content.navCollection}</a>
            <a href="#about" onClick={onClose} data-cursor="hover" style={{ color: 'inherit', textDecoration: 'none' }}>{content.navAbout}</a>
            <a href="#contact" onClick={onClose} data-cursor="hover" style={{ color: 'inherit', textDecoration: 'none' }}>{content.navContact}</a>
          </nav>
        )}

        <button onClick={onClose} data-cursor="hover" style={{
          justifySelf: isRTL ? 'start' : 'end',
          minHeight: isPhone ? 40 : 44,
          background: 'rgba(250,250,247,0.035)',
          border: '1px solid rgba(250,250,247,0.22)',
          color: 'var(--fg)',
          padding: isPhone ? '0 13px' : '0 18px',
          fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-mono)',
          fontSize: isRTL ? 13 : 10,
          letterSpacing: isRTL ? '0' : '0.16em',
          textTransform: isRTL ? 'none' : 'uppercase',
          lineHeight: 1
        }}>
          {isRTL ? 'العودة' : 'Back'}
        </button>
      </header>

      <main>
        <section style={{
          position: 'relative',
          minHeight: isPhone ? 'auto' : 'calc(100svh - 74px)',
          display: 'grid',
          gridTemplateColumns: isCompact ? '1fr' : 'minmax(520px, 0.92fr) minmax(520px, 1.08fr)',
          gap: isPhone ? 28 : isTablet ? 40 : '5vw',
          alignItems: 'center',
          padding: isPhone ? '34px 22px 46px' : isTablet ? '58px 54px 76px' : '64px 6vw 82px',
          overflow: 'hidden'
        }}>
          <div style={{
            position: 'absolute',
            inset: 0,
            pointerEvents: 'none',
            background: `
              radial-gradient(circle at ${isRTL ? '22%' : '72%'} 53%, ${item.hex}1f, transparent 34%),
              linear-gradient(180deg, rgba(250,250,247,0.02), rgba(250,250,247,0))
            `
          }} />

          <div style={{
            position: 'relative',
            zIndex: 2,
            maxWidth: 650,
            transform: entered ? 'translateY(0)' : 'translateY(18px)',
            opacity: entered ? 1 : 0,
            transition: 'opacity 0.75s ease, transform 0.9s cubic-bezier(0.22,0.61,0.36,1)'
          }}>
            <div style={{
              display: 'inline-flex',
              alignItems: 'center',
              maxWidth: '100%',
              minHeight: 36,
              border: '1px solid rgba(250,250,247,0.18)',
              borderRadius: 999,
              padding: isPhone ? '0 12px' : '0 16px',
              gap: 12,
              marginBottom: isPhone ? 44 : 64,
              color: 'rgba(250,250,247,0.64)'
            }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: item.hex, boxShadow: `0 0 16px ${item.hex}` }} />
              <span style={{ ...labelStyle, color: 'var(--fg)' }}>
                {isDropOpen ? (isRTL ? 'الإصدار ٠١' : 'Drop 01') : availability.eyebrow}
              </span>
              {!isPhone && (
                <span style={{ ...labelStyle, color: 'rgba(250,250,247,0.44)' }}>
                  {isDropOpen ? (isRTL ? 'القائمة مفتوحة الآن' : 'Whitelist now open') : copy.code}
                </span>
              )}
            </div>

            <h1 style={{
              fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-serif)',
              fontWeight: 300,
              fontSize: isPhone ? 'clamp(70px, 22vw, 96px)' : isTablet ? 'clamp(82px, 12vw, 128px)' : 'clamp(96px, 8.2vw, 156px)',
              lineHeight: 0.88,
              marginBottom: 18,
              letterSpacing: 0
            }}>
              {copy.title}
            </h1>
            <p style={{
              fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-serif)',
              fontStyle: isRTL ? 'normal' : 'italic',
              color: 'rgba(250,250,247,0.66)',
              fontSize: isPhone ? 25 : 31,
              lineHeight: 1.15,
              marginBottom: 28
            }}>
              {copy.subtitle}
            </p>
            <p style={{
              color: 'rgba(250,250,247,0.72)',
              fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-sans)',
              fontSize: isPhone ? 16 : 18,
              lineHeight: 1.65,
              maxWidth: 430,
              textWrap: 'pretty'
            }}>
              {copy.body}
            </p>

            <div style={{ marginTop: isPhone ? 38 : 54 }}>
              <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                gap: 14,
                marginBottom: 14,
                color: 'rgba(250,250,247,0.5)'
              }}>
                <span style={labelStyle}>{isRTL ? 'اللون' : 'Colorway'}</span>
                <span style={labelStyle}>{copy.code}</span>
              </div>
              <div style={{
                display: 'grid',
                gridTemplateColumns: isPhone ? '1fr' : 'repeat(3, minmax(0, 1fr))',
                gap: 10
              }}>
                {items.map((swatch, index) => (
                  <button key={swatch.name} onClick={() => selectProduct(index)} data-cursor="hover" aria-pressed={index === productIndex} style={{
                    minHeight: isPhone ? 58 : 62,
                    border: `1px solid ${index === productIndex ? swatch.hex : 'rgba(250,250,247,0.18)'}`,
                    background: index === productIndex ? `${swatch.hex}12` : 'rgba(250,250,247,0.018)',
                    color: 'var(--fg)',
                    padding: '0 14px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'flex-start',
                    gap: 12,
                    fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-sans)',
                    fontSize: 14,
                    cursor: isPhone ? 'auto' : 'none'
                  }}>
                    <span style={{ width: 13, height: 13, borderRadius: '50%', background: swatch.hex, boxShadow: index === productIndex ? `0 0 18px ${swatch.hex}` : 'none' }} />
                    <span style={{ display: 'flex', flexDirection: 'column', alignItems: isRTL ? 'flex-end' : 'flex-start', justifyContent: 'center', gap: 5, minWidth: 0 }}>
                      <span>{swatch.name}</span>
                      {index > 0 && (
                        <span style={{
                          ...labelStyle,
                          color: 'rgba(250,250,247,0.42)',
                          fontSize: isRTL ? 10 : 8,
                          whiteSpace: 'nowrap'
                        }}>
                          {availability.eyebrow}
                        </span>
                      )}
                    </span>
                  </button>
                ))}
              </div>
            </div>

            {isDropOpen && (
            <div style={{ marginTop: 30 }}>
              <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                gap: 14,
                marginBottom: 14,
                color: 'rgba(250,250,247,0.5)'
              }}>
                <span style={labelStyle}>{isRTL ? 'المقاس' : 'Size'}</span>
                <span style={labelStyle}>EU · {selectedSize}</span>
              </div>
              <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(8, minmax(0, 1fr))',
                gap: 6
              }}>
                {PRODUCT_SIZES.map(size => (
                  <button key={size} onClick={() => setSelectedSize(size)} data-cursor="hover" aria-pressed={selectedSize === size} style={{
                    minHeight: isPhone ? 44 : 48,
                    border: `1px solid ${selectedSize === size ? 'var(--fg)' : 'rgba(250,250,247,0.18)'}`,
                    background: selectedSize === size ? 'var(--fg)' : 'rgba(250,250,247,0.015)',
                    color: selectedSize === size ? '#07070a' : 'var(--fg)',
                    fontFamily: 'var(--font-mono)',
                    fontSize: 10,
                    cursor: isPhone ? 'auto' : 'none'
                  }}>
                    {size}
                  </button>
                ))}
              </div>
              <p style={{
                marginTop: 10,
                color: 'rgba(250,250,247,0.42)',
                fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-sans)',
                fontSize: 12,
                lineHeight: 1.6
              }}>
                {isRTL ? 'مقاسات أوروبية. كل زوج يُشكّل يدوياً؛ اترك هامش ٠.٥ للراحة.' : 'European sizing. Each pair is hand-lasted; allow ±0.5 for a comfort fit.'}
              </p>
            </div>
            )}

            <div style={{ marginTop: isPhone ? 34 : 46 }}>
              <h2 style={{
                fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-serif)',
                fontStyle: isRTL ? 'normal' : 'italic',
                fontWeight: 300,
                fontSize: isPhone ? 34 : 39,
                lineHeight: 1,
                marginBottom: 8
              }}>
              {isDropOpen
                ? hasWaitlistAccess ? waitlist.successTitle : `${waitlist.title}.`
                : availability.title}
            </h2>
            <p style={{
              color: 'rgba(250,250,247,0.55)',
                fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-sans)',
              fontSize: 14,
              marginBottom: 18
            }}>
              {isDropOpen
                ? hasWaitlistAccess
                  ? waitlist.successBody
                  : isRTL ? 'أولوية الوصول. أول الأزواج. بدون ضجيج.' : 'First access. First pairs. No noise.'
                : availability.body}
            </p>
            {form(isPhone)}
              {message && !joined && status !== 'success' && (
                <p style={{
                  marginTop: 12,
                  color: '#d99b88',
                  fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-sans)',
                  fontSize: 12,
                  lineHeight: 1.5
                }}>
                  {message}
                </p>
              )}
              <a href="#contact" onClick={onClose} data-cursor="hover" style={{
                display: 'inline-flex',
                alignItems: 'center',
                minHeight: 44,
                marginTop: 16,
                color: 'rgba(250,250,247,0.78)',
                textDecoration: 'none',
                fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-mono)',
                fontSize: isRTL ? 13 : 10,
                letterSpacing: isRTL ? '0' : '0.16em',
                textTransform: isRTL ? 'none' : 'uppercase'
              }}>
                {content.navContact} {isRTL ? '←' : '→'}
              </a>
            </div>

            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
              gap: 22,
              marginTop: isPhone ? 32 : 42,
              paddingTop: 24,
              borderTop: '1px solid rgba(250,250,247,0.18)'
            }}>
              <div>
                <div style={{ ...labelStyle, color: 'rgba(250,250,247,0.45)', marginBottom: 10 }}>{isRTL ? 'الوصول' : 'Arriving'}</div>
                <div style={{
                  fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-serif)',
                  fontStyle: isRTL ? 'normal' : 'italic',
                  fontSize: isPhone ? 21 : 25
                }}>
              {isDropOpen ? (isRTL ? 'شتاء ٢٠٢٦' : 'Winter 2026') : availability.eyebrow}
                </div>
              </div>
              <div>
                <div style={{ ...labelStyle, color: 'rgba(250,250,247,0.45)', marginBottom: 10 }}>{isRTL ? 'العدد' : 'Edition'}</div>
                <div style={{
                  fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-serif)',
                  fontStyle: isRTL ? 'normal' : 'italic',
                  fontSize: isPhone ? 21 : 25
                }}>
                  {isRTL ? '٣٠٠ زوج' : '300 pairs'}
                </div>
              </div>
            </div>
          </div>

          <div style={{
            position: 'relative',
            zIndex: 1,
            minHeight: isPhone ? 360 : isTablet ? 520 : 'calc(100svh - 164px)',
            order: isPhone ? -1 : 0,
            transform: entered ? 'translateY(0) scale(1)' : 'translateY(20px) scale(0.97)',
            opacity: entered ? 1 : 0,
            transition: 'opacity 0.85s 0.08s ease, transform 1s 0.08s cubic-bezier(0.22,0.61,0.36,1)'
          }}>
            <img
              src={asset.backdrop}
              alt=""
              loading="eager"
              decoding="async"
              style={{
                position: 'absolute',
                inset: isPhone ? '-12% -24% -8%' : '-8% -14%',
                width: isPhone ? '148%' : '128%',
                height: isPhone ? '118%' : '116%',
                objectFit: 'cover',
                opacity: 0.17,
                filter: 'saturate(0.8) brightness(0.5) contrast(1.14)'
              }}
            />
            <div style={{
              position: 'absolute',
              inset: 0,
              background: `radial-gradient(circle at 50% 56%, ${item.hex}24, transparent 42%)`
            }} />
            <div style={{
              position: 'absolute',
              inset: 0,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontFamily: 'var(--font-serif)',
              fontSize: isPhone ? '56vw' : isTablet ? '42vw' : '34vw',
              color: item.hex,
              opacity: 0.11,
              lineHeight: 0.8,
              transform: 'translateY(12%)',
              pointerEvents: 'none'
            }}>
              {asset.letter}
            </div>
            <div style={{
              position: 'absolute',
              left: '50%',
              top: '50%',
              width: isPhone ? '102vw' : isTablet ? '80vw' : '58vw',
              maxWidth: isPhone ? 520 : 840,
              aspectRatio: '1.45 / 1',
              transform: `translate(-50%, -50%) rotate(${isRTL ? 3 : -3}deg)`
            }}>
              <img
                src={asset.image}
                alt={copy.title}
                loading="eager"
                decoding="async"
                style={{
                  width: '100%',
                  height: '100%',
                  objectFit: 'contain',
                  mixBlendMode: asset.blend,
                  filter: asset.blend === 'screen'
                    ? 'brightness(1.1) contrast(1.12) drop-shadow(0 34px 54px rgba(0,0,0,0.66))'
                    : 'contrast(1.08) saturate(1.05) drop-shadow(0 34px 54px rgba(0,0,0,0.66))'
                }}
              />
            </div>
          </div>
        </section>

        <section style={{
          borderTop: '1px solid rgba(250,250,247,0.13)',
          padding: isPhone ? '70px 22px' : isTablet ? '90px 54px' : '118px 6vw',
          display: 'grid',
          gridTemplateColumns: isCompact ? '1fr' : '0.78fr 1.22fr',
          gap: isPhone ? 44 : '7vw'
        }}>
          <div>
            <div style={{ ...labelStyle, color: item.hex, marginBottom: 34 }}>
              {isRTL ? '٠٢ — المواصفات' : '02 — Specifications'}
            </div>
            <h2 style={{
              fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-serif)',
              fontStyle: isRTL ? 'normal' : 'italic',
              fontWeight: 300,
              fontSize: isPhone ? 'clamp(48px, 14vw, 64px)' : 'clamp(58px, 6vw, 88px)',
              lineHeight: 0.96,
              marginBottom: 26
            }}>
              {isRTL ? 'القطعة.' : 'The object.'}
            </h2>
            <p style={{
              color: 'rgba(250,250,247,0.55)',
              fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-sans)',
              fontSize: isPhone ? 16 : 18,
              lineHeight: 1.65,
              maxWidth: 410
            }}>
              {isRTL
                ? 'تصنع يدوياً في المدينة القديمة بفاس، مرقمة وموقعة ومقدمة في علبة تحفظ لحظة الإهداء.'
                : 'Built by hand in the Médina of Fès. Numbered, signed, and shipped in a keepsake box.'}
            </p>
          </div>

          <div style={{ borderTop: '1px solid rgba(250,250,247,0.18)' }}>
            {copy.specs.map(([label, value]) => (
              <div key={label} style={{
                display: 'grid',
                gridTemplateColumns: isPhone ? '1fr' : '190px 1fr',
                gap: isPhone ? 10 : 24,
                padding: isPhone ? '21px 0' : '27px 0',
                borderBottom: '1px solid rgba(250,250,247,0.16)'
              }}>
                <div style={{ ...labelStyle, color: 'rgba(250,250,247,0.44)', paddingTop: isPhone ? 0 : 6 }}>{label}</div>
                <div style={{
                  fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-serif)',
                  fontStyle: isRTL ? 'normal' : 'italic',
                  fontSize: isPhone ? 23 : 'clamp(25px, 2.2vw, 34px)',
                  lineHeight: 1.18,
                  color: 'rgba(250,250,247,0.9)'
                }}>
                  {value}
                </div>
              </div>
            ))}
          </div>
        </section>

        <section style={{
          borderTop: '1px solid rgba(250,250,247,0.13)',
          borderBottom: '1px solid rgba(250,250,247,0.13)',
          display: 'grid',
          gridTemplateColumns: isCompact ? '1fr' : '0.92fr 1.08fr',
          minHeight: isPhone ? 'auto' : 620
        }}>
          <div style={{
            padding: isPhone ? '70px 22px 52px' : isTablet ? '90px 54px' : '112px 6vw',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center'
          }}>
            <div style={{ ...labelStyle, color: item.hex, marginBottom: 34 }}>
              {isRTL ? 'الحكاية' : 'The story'}
            </div>
            <h2 style={{
              fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-serif)',
              fontStyle: isRTL ? 'normal' : 'italic',
              fontWeight: 300,
              fontSize: isPhone ? 'clamp(46px, 13vw, 62px)' : 'clamp(58px, 5.2vw, 84px)',
              lineHeight: 1,
              maxWidth: 560,
              marginBottom: 26
            }}>
              {isRTL ? 'زوج، وليس منتجاً.' : 'A pair, not a product.'}
            </h2>
            <p style={{
              color: 'rgba(250,250,247,0.76)',
              fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-serif)',
              fontSize: isPhone ? 20 : 27,
              lineHeight: 1.35,
              maxWidth: 610
            }}>
              {isRTL
                ? 'كل Belgham يشكله معلّم واحد. لا خط مصنع، فقط إيقاع المخراز والشمع والكتان. عندما يجهز الزوج، يحمل أثر اليد التي صنعته.'
                : 'Every Belgham is hand-lasted by a single Maâlem. There is no factory line, only the rhythm of the awl, the wax, and the linen. When your pair is ready, it carries the small marks of the hand that made it.'}
            </p>
          </div>
          <div style={{
            minHeight: isPhone ? 380 : 620,
            position: 'relative',
            overflow: 'hidden',
            background: '#0c0c10'
          }}>
            <img
              src="images/maalem-stitching/frame-190.webp"
              alt=""
              loading="lazy"
              decoding="async"
              style={{
                position: 'absolute',
                inset: 0,
                width: '100%',
                height: '100%',
                objectFit: 'cover',
                filter: 'grayscale(0.22) brightness(0.55) contrast(1.12)'
              }}
            />
            <div style={{
              position: 'absolute',
              inset: 0,
              background: `radial-gradient(circle at 66% 58%, transparent, rgba(8,8,11,0.34) 44%, rgba(8,8,11,0.68))`
            }} />
          </div>
        </section>

        <section style={{
          padding: isPhone ? '70px 22px' : isTablet ? '90px 54px' : '112px 6vw',
          borderBottom: '1px solid rgba(250,250,247,0.13)'
        }}>
          <div style={{ ...labelStyle, color: item.hex, marginBottom: 32 }}>
            {isRTL ? 'العناية' : 'Keeping it'}
          </div>
          <h2 style={{
            fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-serif)',
            fontStyle: isRTL ? 'normal' : 'italic',
            fontWeight: 300,
            fontSize: isPhone ? 'clamp(44px, 12vw, 60px)' : 'clamp(58px, 5.5vw, 88px)',
            lineHeight: 1,
            marginBottom: isPhone ? 42 : 70
          }}>
            {isRTL ? 'صُنعت لتلين، لا لتشيخ.' : 'Made to soften, not to age.'}
          </h2>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isPhone ? '1fr' : 'repeat(3, minmax(0, 1fr))',
            gap: isPhone ? 34 : '7vw'
          }}>
            {careSteps.map(([num, text]) => (
              <div key={num}>
                <div style={{
                  fontFamily: 'var(--font-serif)',
                  fontStyle: 'italic',
                  color: item.hex,
                  fontSize: isPhone ? 58 : 78,
                  lineHeight: 0.9,
                  marginBottom: 26
                }}>
                  {num}
                </div>
                <p style={{
                  color: 'rgba(250,250,247,0.74)',
                  fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-sans)',
                  fontSize: isPhone ? 15 : 17,
                  lineHeight: 1.55,
                  maxWidth: 360
                }}>
                  {text}
                </p>
              </div>
            ))}
          </div>
        </section>

        <section style={{
          position: 'relative',
          minHeight: isPhone ? 420 : 560,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          padding: isPhone ? '78px 22px' : '112px 6vw',
          textAlign: 'center',
          overflow: 'hidden',
          borderBottom: '1px solid rgba(250,250,247,0.13)'
        }}>
          <div style={{
            position: 'absolute',
            inset: 0,
            background: `radial-gradient(circle at 50% 45%, ${item.hex}18, transparent 42%)`,
            pointerEvents: 'none'
          }} />
          <div style={{ position: 'relative', maxWidth: 780 }}>
            <div style={{ ...labelStyle, color: item.hex, marginBottom: 28 }}>
              {isRTL ? 'لماذا القائمة' : 'Why a whitelist'}
            </div>
            <h2 style={{
              fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-serif)',
              fontWeight: 300,
              fontSize: isPhone ? 'clamp(44px, 12vw, 62px)' : 'clamp(62px, 6vw, 96px)',
              lineHeight: 0.96,
              marginBottom: 26
            }}>
              {isRTL ? 'نصنع ٣٠٠ زوج. ثم نغلق.' : 'We make 300 pairs. Then we close.'}
            </h2>
            <p style={{
              margin: '0 auto',
              maxWidth: 620,
              color: 'rgba(250,250,247,0.56)',
              fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-sans)',
              fontSize: isPhone ? 15 : 17,
              lineHeight: 1.7
            }}>
              {isRTL
                ? 'كل إصدار يُقص في دفعة واحدة. عندما تكتمل الأزواج، ينام اللون حتى الإصدار التالي. أعضاء القائمة يستلمون الدعوة قبل الجميع بأربع وعشرين ساعة.'
                : 'Each drop is hand-cut in a single batch. When the 300 are spoken for, the colorway sleeps until the next drop. Whitelist members get the email twenty-four hours before everyone else.'}
            </p>
          </div>
        </section>

        <section style={{
          padding: isPhone ? '70px 22px' : isTablet ? '90px 54px' : '112px 6vw',
          borderBottom: '1px solid rgba(250,250,247,0.13)',
          display: 'grid',
          gridTemplateColumns: isCompact ? '1fr' : '0.72fr 1.28fr',
          gap: isPhone ? 34 : '7vw'
        }}>
          <div style={{ ...labelStyle, color: item.hex }}>
            {isRTL ? 'أسئلة مفتوحة' : 'Open questions'}
          </div>
          <div style={{ borderTop: '1px solid rgba(250,250,247,0.16)' }}>
            {faqs.map(([question, answer], index) => (
              <div key={question} style={{ borderBottom: '1px solid rgba(250,250,247,0.16)' }}>
                <button onClick={() => setOpenFaq(openFaq === index ? -1 : index)} data-cursor="hover" style={{
                  width: '100%',
                  minHeight: isPhone ? 78 : 86,
                  background: 'transparent',
                  border: 0,
                  color: 'var(--fg)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  gap: 18,
                  textAlign: isRTL ? 'right' : 'left',
                  fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-serif)',
                  fontStyle: isRTL ? 'normal' : 'italic',
                  fontSize: isPhone ? 23 : 30,
                  cursor: isPhone ? 'auto' : 'none',
                  padding: 0
                }}>
                  <span>{question}</span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: 'rgba(250,250,247,0.58)' }}>
                    {openFaq === index ? '×' : '+'}
                  </span>
                </button>
                <div style={{
                  maxHeight: openFaq === index ? 120 : 0,
                  overflow: 'hidden',
                  transition: 'max-height 0.35s ease'
                }}>
                  <p style={{
                    color: 'rgba(250,250,247,0.54)',
                    fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-sans)',
                    fontSize: isPhone ? 14 : 16,
                    lineHeight: 1.65,
                    padding: '0 0 26px',
                    margin: 0
                  }}>
                    {answer}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </section>

        <section style={{
          padding: isPhone ? '70px 22px 40px' : isTablet ? '90px 54px 60px' : '112px 6vw 78px',
          borderBottom: '1px solid rgba(250,250,247,0.13)'
        }}>
          <div style={{ ...labelStyle, color: 'rgba(250,250,247,0.46)', marginBottom: 40 }}>
            {isRTL ? 'مدن أخرى' : 'Other cities'}
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isPhone ? '1fr' : 'repeat(2, minmax(0, 1fr))',
            gap: 24
          }}>
            {otherProducts.map(product => (
              <button key={product.asset.slug} onClick={() => selectProduct(product.index)} data-cursor="hover" style={{
                minHeight: isPhone ? 270 : 290,
                border: `1px solid ${product.swatch.hex}88`,
                background: '#0b0b0f',
                color: 'var(--fg)',
                padding: isPhone ? 24 : 34,
                display: 'grid',
                gridTemplateColumns: isPhone ? '1fr' : '1fr 220px',
                gap: 20,
                alignItems: 'center',
                textAlign: isRTL ? 'right' : 'left',
                position: 'relative',
                overflow: 'hidden',
                cursor: isPhone ? 'auto' : 'none'
              }}>
                <div style={{ position: 'relative', zIndex: 2 }}>
                  <span style={{ display: 'block', width: 12, height: 12, borderRadius: '50%', background: product.swatch.hex, boxShadow: `0 0 18px ${product.swatch.hex}`, marginBottom: 28 }} />
                  <h3 style={{
                    fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-serif)',
                    fontStyle: isRTL ? 'normal' : 'italic',
                    fontWeight: 300,
                    fontSize: isPhone ? 39 : 48,
                    lineHeight: 0.95,
                    marginBottom: 10
                  }}>
                    {product.copy.title}
                  </h3>
                  <p style={{
                    color: 'rgba(250,250,247,0.54)',
                    fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-sans)',
                    fontSize: 14,
                    marginBottom: 26
                  }}>
                    {product.copy.subtitle}
                  </p>
                  <span style={{ ...labelStyle, color: product.swatch.hex }}>
                    {isRTL ? 'استكشف' : 'Explore'} →
                  </span>
                </div>
                <img
                  src={product.asset.image}
                  alt=""
                  loading="lazy"
                  decoding="async"
                  style={{
                    width: isPhone ? '72%' : '100%',
                    justifySelf: 'center',
                    maxHeight: 210,
                    objectFit: 'contain',
                    mixBlendMode: product.asset.blend,
                    filter: product.asset.blend === 'screen'
                      ? 'brightness(1.08) contrast(1.1) drop-shadow(0 26px 34px rgba(0,0,0,0.58))'
                      : 'contrast(1.07) saturate(1.04) drop-shadow(0 26px 34px rgba(0,0,0,0.58))'
                  }}
                />
              </button>
            ))}
          </div>
        </section>

        <section style={{
          position: 'relative',
          minHeight: isPhone ? 460 : 520,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          padding: isPhone ? '76px 22px' : '112px 6vw',
          textAlign: 'center',
          overflow: 'hidden'
        }}>
          <div style={{
            position: 'absolute',
            inset: 0,
            background: `radial-gradient(circle at 50% 45%, ${item.hex}18, transparent 42%)`,
            pointerEvents: 'none'
          }} />
          <div style={{ position: 'relative', width: '100%', maxWidth: 620 }}>
            <div style={{ ...labelStyle, color: item.hex, marginBottom: 28 }}>
              {isRTL ? 'الإصدار ٠١ · شتاء ٢٠٢٦' : 'Drop 01 · Winter 2026'}
            </div>
            <h2 style={{
              fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-serif)',
              fontStyle: isRTL ? 'normal' : 'italic',
              fontWeight: 300,
              fontSize: isPhone ? 'clamp(46px, 13vw, 64px)' : 'clamp(62px, 6vw, 86px)',
              lineHeight: 0.98,
              marginBottom: 24
            }}>
              {isDropOpen
                ? hasWaitlistAccess ? waitlist.successTitle : `${waitlist.title}.`
                : availability.title}
            </h2>
            <p style={{
              color: 'rgba(250,250,247,0.56)',
              fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-sans)',
              fontSize: isPhone ? 15 : 17,
              marginBottom: 28
            }}>
              {isDropOpen
                ? hasWaitlistAccess
                  ? waitlist.successBody
                  : isRTL ? 'أولوية الوصول. أول الأزواج. بدون ضجيج.' : 'First access. First pairs. No noise.'
                : availability.body}
            </p>
            {form(isPhone)}
          </div>
        </section>
      </main>

      <footer style={{
        minHeight: 106,
        borderTop: '1px solid rgba(250,250,247,0.13)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 20,
        padding: isPhone ? '28px 22px calc(28px + env(safe-area-inset-bottom))' : '28px 6vw',
        flexDirection: isPhone ? 'column' : 'row'
      }}>
        <img src="images/logo-dark.png" alt="Belgham" style={{ width: 28, height: 28, objectFit: 'contain', filter: 'invert(1)', opacity: 0.9 }} />
        <div style={{ ...labelStyle, color: 'rgba(250,250,247,0.42)', textAlign: isPhone ? 'center' : 'inherit' }}>
          © MMXXVI Belgham — {isRTL ? 'صنع في فاس' : 'Crafted in Fès'}
        </div>
      </footer>
    </div>
  );
}

window.ProductPage = ProductPage;