{t.contact.form.name}

{t.contact.form.company}

{t.contact.form.email}

{t.contact.form.phone}

{t.contact.form.province}

{t.contact.form.kind}

{t.contact.form.message}

</div>
      </div>
      <div style={{ marginTop: 28 }}>
        <button type="submit" className="btn btn-gold">{t.contact.form.send} <span className="arrow" /></button>
      </div>
    </form>
  );
}

function GoldenDustCanvas() {
  const canvasRef = React.useRef(null);

React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf, w = 0, h = 0, tick = 0;

const DPR = Math.min(window.devicePixelRatio || 1, 2);
    const setSize = () => {
      w = canvas.offsetWidth;
      h = canvas.offsetHeight;
      canvas.width  = w * DPR;
      canvas.height = h * DPR;
      ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
    };
    setSize();
    const ro = new ResizeObserver(setSize);
    ro.observe(canvas);

// ── Math helpers ──────────────────────────────────────────────
    const ease = (p, g) => p < 0.5 ? 0.5*Math.pow(2*p,g) : 1 - 0.5*Math.pow(2*(1-p),g);
    const easeElastic = (x) => {
      if (x<=0) return 0; if (x>=1) return 1;
      return Math.pow(2,-8*x)*Math.sin((x*8-0.75)*(2*Math.PI/4.5))+1;
    };
    const mapV  = (v,a,b,c,d) => c+(d-c)*((v-a)/(b-a));
    const clamp = (v,a,b) => Math.min(Math.max(v,a),b);
    const lerp  = (a,b,t) => a*(1-t)+b*t;

// ── Spiral math (matches reference component) ─────────────────
    const SPIRAL_TURNS = 6;
    const CAMERA_Z     = -400;
    const CAMERA_TRAVEL= 3400;
    const VIEW_ZOOM    = 100;
    const START_Y_OFF  = 28;
    const CHANGE_TIME  = 0.32;
    const SPIRAL_R     = 170;

const spiralPath = (p) => {
      p = clamp(1.2*p, 0, 1);
      p = ease(p, 1.8);
      const theta = 2*Math.PI*SPIRAL_TURNS*Math.sqrt(p);
      const r = SPIRAL_R * Math.sqrt(p);
      return [r*Math.cos(theta), r*Math.sin(theta)+START_Y_OFF];
    };

// ── Seeded stars for consistent spiral ────────────────────────
    let seed = 1234;
    const rand = () => { seed=(seed*9301+49297)%233280; return seed/233280; };

// ── Leather goods silhouettes (normalized coords −1..1) ───────
    const buildSombrero = () => {
      const p = [];
      for (let a=0; a<Math.PI*2; a+=0.045) p.push([Math.cos(a)*0.82, Math.sin(a)*0.10+0.10]);
      for (let a=0; a<Math.PI*2; a+=0.065) p.push([Math.cos(a)*0.75, Math.sin(a)*0.085+0.13]);
      for (let a=Math.PI; a<=Math.PI*2; a+=0.05) p.push([Math.cos(a)*0.26, Math.sin(a)*0.43+0.07]);
      for (let i=0;i<13;i++) p.push([-0.26, 0.07-(i/12)*0.43]);
      for (let i=0;i<13;i++) p.push([ 0.26, 0.07-(i/12)*0.43]);
      for (let a=0; a<Math.PI*2; a+=0.075) p.push([Math.cos(a)*0.285, Math.sin(a)*0.058+0.09]);
      for (let k=0;k<50;k++) {
        const r=0.30+Math.random()*0.47, a=Math.random()*Math.PI*2;
        if (r>0.28) p.push([Math.cos(a)*r*0.82, Math.sin(a)*r*0.10+0.11]);
      }
      return p;
    };

const buildCueroHex = () => {
      const p = [];
      const hexSize = 0.18; // Tamaño de cada hexágono
      const rows = 4, cols = 5; // Grid de hexágonos
      const startX = -(cols * hexSize * 0.85) / 2;
      const startY = -(rows * hexSize * 1.5) / 2;

// Función para crear un hexágono
      const addHex = (cx, cy) => {
        for (let i = 0; i < 6; i++) {
          const angle = (i * Math.PI) / 3;
          p.push([cx + Math.cos(angle) * hexSize, cy + Math.sin(angle) * hexSize]);
        }
        // Puntos internos para textura
        for (let k = 0; k < 8; k++) {
          const r = hexSize * 0.6 * Math.sqrt(Math.random());
          const a = Math.random() * Math.PI * 2;
          p.push([cx + r * Math.cos(a), cy + r * Math.sin(a)]);
        }
      };

// Crear grid de hexágonos
      for (let row = 0; row < rows; row++) {
        const y = startY + row * hexSize * 1.5;
        const offsetX = (row % 2) * hexSize * 0.85;
        for (let col = 0; col < cols; col++) {
          const x = startX + col * hexSize * 1.7 + offsetX;
          addHex(x, y);
        }
      }

// Puntos aleatorios para textura de cuero
      for (let k = 0; k < 60; k++) {
        p.push([(Math.random() - 0.5) * cols * hexSize * 2,
                (Math.random() - 0.5) * rows * hexSize * 2]);
      }
      return p;
    };

const SHAPES  = [buildSombrero, buildBilletera, buildCorrea, buildCueroHex];
    const LABELS  = ['SOMBRERO · SensStyle', 'BILLETERA · SensStyle', 'CORREA · SensStyle', 'CUERO · SensStyle'];

// ── Form particles ────────────────────────────────────────────
    const N_FP = 1200; // Más partículas para efecto de polvo dorado
    const fp = Array.from({length: N_FP}, () => ({
      x: (Math.random()-0.5)*1600, y: (Math.random()-0.5)*900,
      vx: (Math.random()-0.5)*1.5, vy: (Math.random()-0.5)*1.5,
      r: 0.5+Math.random()*1.9,
      alpha: 0.22+Math.random()*0.6,
      hue: 32+Math.random()*26, sat: 74+Math.random()*22, lit: 48+Math.random()*28,
      tx: 0, ty: 0,
      ph: Math.random()*Math.PI*2,
    }));

const assignFormTargets = (shapeIdx) => {
      const raw = SHAPES[shapeIdx]();
      const scale = Math.min(w,h) * 0.40;
      const cx = w/2, cy = h/2;
      const scaled = raw.map(([px,py])=>[cx+px*scale, cy+py*scale]);
      const shuffled = scaled.slice().sort(()=>Math.random()-0.5);
      fp.forEach((p,i)=>{ const [tx,ty]=shuffled[i%shuffled.length]; p.tx=tx; p.ty=ty; });
    };

// ── Phase timing (seconds) ────────────────────────────────────
    const T_SPIRAL  = 4.5;
    const T_FORM    = 2.2;
    const T_HOLD    = 4.5;
    const T_DISS    = 1.4;
    const T_TOTAL   = T_SPIRAL + T_FORM + T_HOLD + T_DISS;

let currentShape = 0, lastCycle = -1, formAssigned = false;
    let startTime = null;

// ── Draw helpers ──────────────────────────────────────────────
    const drawSpiralScene = (t) => {
      const t1 = clamp(mapV(t, 0, CHANGE_TIME+0.25, 0, 1), 0, 1);
      const t2 = clamp(mapV(t, CHANGE_TIME, 1, 0, 1), 0, 1);
      const newCamZ = CAMERA_Z + ease(Math.pow(t2,1.2),1.8)*CAMERA_TRAVEL;

ctx.save();
      ctx.translate(w/2, h/2);
      ctx.rotate(-Math.PI * ease(t2, 2.7));

// Spiral trail
      const TRAIL = 72;
      for (let i=0; i<TRAIL; i++) {
        const f = mapV(i, 0, TRAIL, 1.1, 0.1);
        const sw = (1.3*(1-t1) + 3.0*Math.sin(Math.PI*t1)) * f;
        const [px,py] = spiralPath(t1 - 0.00015*i);
        if (sw > 0.15) {
          ctx.beginPath();
          ctx.arc(px, py, sw/2, 0, Math.PI*2);
          ctx.fillStyle = `rgba(212,169,74,${0.72*f})`;
          ctx.fill();
        }
      }

// Stars with 3D projection
      for (const s of stars) {
        const [sx,sy] = spiralPath(s.spiralLocation);
        const q = t1 - s.spiralLocation;
        if (q <= 0) continue;
        const disp = clamp(4*q, 0, 1);
        let scrX, scrY;

if (disp < 0.3) {
          scrX = lerp(sx, sx+s.dx*0.3, disp/0.3);
          scrY = lerp(sy, sy+s.dy*0.3, disp/0.3);
        } else if (disp < 0.7) {
          const mp=(disp-0.3)/0.4, bx=sx+s.dx*0.3, by=sy+s.dy*0.3, tx=sx+s.dx*0.7, ty=sy+s.dy*0.7;
          const cv=Math.sin(mp*Math.PI)*s.rotDir*1.2;
          scrX=lerp(bx,tx,mp)+(-s.dy*0.3*cv)*mp;
          scrY=lerp(by,ty,mp)+(s.dx*0.3*cv)*mp;
        } else {
          const fp2=(disp-0.7)/0.3, tDist=s.distance*s.expRate*1.5;
          const sA=s.angle+s.rotDir*1.2*fp2*Math.PI;
          scrX=lerp(sx+s.dx*0.7, sx+tDist*Math.cos(sA), fp2);
          scrY=lerp(sy+s.dy*0.7, sy+tDist*Math.sin(sA), fp2);
        }

if (s.z > newCamZ) {
          const depth = s.z - newCamZ;
          const vx = (s.z-CAMERA_Z)*scrX/VIEW_ZOOM;
          const vy = (s.z-CAMERA_Z)*scrY/VIEW_ZOOM;
          const px2 = VIEW_ZOOM*vx/depth;
          const py2 = VIEW_ZOOM*vy/depth;
          const dotSz = 400*(8.5*s.sw)/depth;
          if (dotSz > 0.25 && dotSz < 90) {
            ctx.beginPath();
            ctx.arc(px2, py2, dotSz/2, 0, Math.PI*2);
            ctx.fillStyle = `hsla(${30+s.sw*28},80%,${54+s.sw*22}%,0.88)`;
            ctx.fill();
          }
        }
      }
      ctx.restore();
    };

const updateAndDrawForm = (alpha, phase) => {
      const lerpK = phase==='form' ? 0.036 : phase==='hold' ? 0.068 : 0.004;
      const moving = phase==='form' || phase==='hold';
      for (const p of fp) {
        if (moving) {
          const dx=p.tx-p.x, dy=p.ty-p.y;
          p.vx+=dx*lerpK*0.18; p.vy+=dy*lerpK*0.18;
          p.vx*=0.85; p.vy*=0.85;
        } else {
          p.vx+=(Math.random()-0.5)*0.09; p.vy+=(Math.random()-0.5)*0.09-0.013;
          p.vx*=0.971; p.vy*=0.971;
        }
        p.x+=p.vx; p.y+=p.vy;
        if (p.x<-20) p.x=w+20; if (p.x>w+20) p.x=-20;
        if (p.y<-20) p.y=h+20; if (p.y>h+20) p.y=-20;

const shimmer = phase==='hold' ? 0.76+Math.sin(tick*0.040+p.ph)*0.24 : 1.0;
        const a = Math.min(p.alpha*shimmer*alpha, 0.92);

if (phase==='hold' || (phase==='form' && alpha>0.5)) {
          ctx.beginPath();
          ctx.arc(p.x, p.y, p.r*5.5, 0, Math.PI*2);
          ctx.fillStyle = `hsla(${p.hue},88%,72%,${0.038*Math.min(alpha*1.6,1)})`;
          ctx.fill();
        }
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r, 0, Math.PI*2);
        ctx.fillStyle = `hsla(${p.hue},${p.sat}%,${p.lit}%,${a})`;
        ctx.fill();
      }
    };

const drawCaption = (label, progress) => {
      const a = Math.min(progress/0.10,1)*Math.min((1-progress)/0.08,1);
      if (a<0.01) return;
      ctx.save();
      ctx.globalAlpha = a*0.68;
      ctx.font = '10px monospace';
      ctx.fillStyle = 'rgba(212,169,74,1)';
      ctx.textAlign = 'center';
      ctx.fillText(label.toUpperCase()+' · EST. 2004', w/2, h-22);
      ctx.restore();
    };

// ── Main loop ─────────────────────────────────────────────────
    const loop = (ts) => {
      raf = requestAnimationFrame(loop);
      if (!startTime) startTime = ts;
      tick++;

const elapsed   = (ts - startTime) / 1000;
      const cycleTime = elapsed % T_TOTAL;
      const cycleNum  = Math.floor(elapsed / T_TOTAL);

if (cycleNum !== lastCycle) {
        lastCycle    = cycleNum;
        currentShape = cycleNum % SHAPES.length;
        formAssigned = false;
      }

ctx.clearRect(0, 0, w, h);

if (phase==='spiral') {
        drawSpiralScene(phaseP);
      } else if (phase==='form') {
        ctx.save(); ctx.globalAlpha=Math.max(1-phaseP*1.5, 0); drawSpiralScene(1.0); ctx.restore();
        updateAndDrawForm(clamp(phaseP*2,0,1), 'form');
      } else if (phase==='hold') {
        updateAndDrawForm(1.0, 'hold');
        drawCaption(LABELS[currentShape], phaseP);
      } else {
        updateAndDrawForm(1.0-phaseP, 'dissolve');
      }
    };

assignFormTargets(0);
    if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      loop(performance.now());
    }

return () => { cancelAnimationFrame(raf); ro.disconnect(); };
  }, []);

return (
    <canvas
      ref={canvasRef}
      role="img"
      aria-label="Animated golden dust particles"
      style={{ display: 'block', width: '100%', height: '100%', position: 'absolute', inset: 0, pointerEvents: 'none' }}
    />
  );
}

function AboutPage({ lang, navigate }) {
  const t = I18N[lang].aboutPage;
  const heroImg = MODEL_GALLERY_PHOTOS && MODEL_GALLERY_PHOTOS[2] ? MODEL_GALLERY_PHOTOS[2] : null;

return (
    <div className="page-enter">

{/* ── HERO INTEGRADO: Animación de fondo + texto superpuesto ── */}
      <section style={{
        background: 'var(--ink)',
        color: 'var(--cream)',
        position: 'relative',
        overflow: 'hidden',
        padding: 0,
      }}>
        {/* Canvas de fondo - partículas doradas */}
        <div style={{
          position: 'absolute',
          inset: 0,
          zIndex: 1,
          minHeight: 'clamp(520px, 70vh, 780px)',
        }}>
          <GoldenDustCanvas />
        </div>

{/* Overlay degradado para legibilidad */}
        <div style={{
          position: 'absolute',
          inset: 0,
          zIndex: 2,
          background: 'linear-gradient(180deg, rgba(15,10,5,0.75) 0%, rgba(15,10,5,0.45) 40%, rgba(15,10,5,0.85) 100%)',
          pointerEvents: 'none',
        }} />

{/* Contenido superpuesto */}
        <div className="container" style={{
          position: 'relative',
          zIndex: 3,
          paddingTop: 'clamp(80px, 12vw, 140px)',
          paddingBottom: 'clamp(60px, 8vw, 100px)',
          minHeight: 'clamp(520px, 70vh, 780px)',
        }}>
          <div style={{ maxWidth: 720 }}>
            {/* Ornamento animado */}
            <div style={{
              color: 'var(--gold-300)',
              marginBottom: 28,
              animation: 'fadeIn 1.2s ease-out',
            }}>
              <Ornament color="var(--gold-300)" />
            </div>

{/* Eyebrow */}
            <div className="eyebrow light" style={{
              color: 'var(--gold-300)',
              marginBottom: 20,
              opacity: 0.9,
              animation: 'slideUp 0.8s ease-out 0.2s both',
            }}>
              {t.eyebrow}
            </div>

{/* Título principal */}
            <h1 style={{
              fontSize: 'clamp(48px, 7vw, 96px)',
              fontStyle: 'italic',
              fontWeight: 400,
              lineHeight: 1.05,
              whiteSpace: 'pre-line',
              color: 'var(--cream)',
              marginBottom: 28,
              textShadow: '0 2px 40px rgba(0,0,0,0.4)',
              animation: 'slideUp 0.8s ease-out 0.3s both',
            }}>{t.title}</h1>

{/* Lead paragraph */}
            <p style={{
              fontSize: 'clamp(17px, 1.8vw, 20px)',
              color: 'rgba(245,237,224,0.85)',
              lineHeight: 1.7,
              maxWidth: '56ch',
              textShadow: '0 1px 20px rgba(0,0,0,0.3)',
              animation: 'slideUp 0.8s ease-out 0.4s both',
            }}>{t.lead}</p>

{/* Scroll indicator */}
            <div style={{
              position: 'absolute',
              bottom: 32,
              right: 'var(--gutter)',
              color: 'var(--gold-300)',
              fontFamily: 'var(--font-mono)',
              fontSize: 10,
              letterSpacing: '0.3em',
              textTransform: 'uppercase',
              display: 'flex',
              alignItems: 'center',
              gap: 14,
              writingMode: 'vertical-rl',
              opacity: 0.7,
              animation: 'pulse 2s ease-in-out infinite',
            }}>
              <span>Explora</span>
              <span style={{ width: 1, height: 50, background: 'var(--gold-300)' }} />
            </div>
          </div>
        </div>

{/* Gradiente inferior de transición */}
        <div style={{
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0,
          height: 120,
          background: 'linear-gradient(transparent, var(--ink))',
          zIndex: 3,
          pointerEvents: 'none',
        }} />
      </section>

{/* ── STATS BAR ── */}
      <section style={{ background: 'var(--saddle-900)', color: 'var(--cream)', padding: '0' }}>
        <div className="container">
          <div className="stats-bar-inline" style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
            borderTop: '1px solid rgba(212,169,74,0.2)',
          }}>
            {t.stats.map((s, i) => (
              <div key={i} style={{
                padding: '36px 28px',
                borderRight: i < 3 ? '1px solid rgba(212,169,74,0.15)' : 'none',
                display: 'flex', flexDirection: 'column', gap: 8,
              }}>
                <div style={{
                  fontFamily: 'var(--font-display)', fontStyle: 'italic',
                  fontSize: 'clamp(36px, 4vw, 56px)', color: 'var(--gold-300)', lineHeight: 1,
                }}>{s.value}</div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10,
                  letterSpacing: '0.22em', textTransform: 'uppercase',
                  color: 'rgba(245,237,224,0.5)',
                }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* ── HISTORIA SPLIT ── */}
      <section style={{ background: 'var(--parchment)', padding: 'clamp(60px,8vw,120px) 0' }}>
        <div className="container about-story-inline" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(48px,6vw,96px)',
          alignItems: 'center',
        }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>{t.storyTitle}</div>
            <div style={{ whiteSpace: 'pre-line', fontSize: 18, color: 'var(--charcoal)', lineHeight: 1.75 }}>
              {t.storyBody}
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <Placeholder
              label="SensStyle · Atelier"
              ratio="4/5"
              src={heroImg}
              tone="dark"
              corner="ATELIER"
            />
            <div style={{
              position: 'absolute', bottom: -1, left: -1,
              background: 'var(--ink)', color: 'var(--cream)',
              padding: '14px 22px',
              fontFamily: 'var(--font-mono)', fontSize: 10,
              letterSpacing: '0.22em', textTransform: 'uppercase',
            }}>
              <span style={{ color: 'var(--gold-300)' }}>◆</span> SensStyle · Est. 2004
            </div>
          </div>
        </div>
      </section>

{/* ── PILARES ── */}
      <section style={{ background: 'var(--sand)', padding: 'clamp(60px,8vw,100px) 0' }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 56, textAlign: 'center' }}>
            {lang === 'es' ? 'Lo que nos define' : lang === 'fr' ? 'Ce qui nous définit' : 'What defines us'}
          </div>
          <div className="about-pillars-inline" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 80px' }}>
            {t.pillars.map((p) => (
              <div key={p.num} style={{
                display: 'flex', gap: 28,
                padding: '32px 0', borderTop: '1px solid rgba(27,18,10,0.12)',
              }}>
                <div style={{
                  fontFamily: 'var(--font-display)', fontStyle: 'italic',
                  fontSize: 48, color: 'var(--gold-600)', lineHeight: 1,
                  minWidth: 56,
                }}>{p.num}</div>
                <div>
                  <h3 style={{
                    fontFamily: 'var(--font-display)', fontSize: 26,
                    fontStyle: 'italic', fontWeight: 400, marginBottom: 12,
                  }}>{p.title}</h3>
                  <p style={{ color: 'var(--charcoal)', fontSize: 17, lineHeight: 1.6 }}>{p.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* ── CTA FINAL ── */}
      <section style={{
        background: 'var(--ink)', color: 'var(--cream)',
        padding: 'clamp(80px,10vw,130px) 0',
        textAlign: 'center', position: 'relative', overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', inset: 0, opacity: 0.07,
          background: 'radial-gradient(ellipse at 30% 60%, var(--gold-300), transparent 55%)',
          pointerEvents: 'none',
        }} />
        <div className="container" style={{ position: 'relative' }}>
          <div style={{ color: 'var(--gold-300)', display: 'flex', justifyContent: 'center', marginBottom: 28 }}>
            <Ornament color="var(--gold-300)" />
          </div>
          <h2 style={{
            fontSize: 'clamp(36px, 5vw, 72px)', fontStyle: 'italic', fontWeight: 400,
            lineHeight: 1.08, color: 'var(--cream)', whiteSpace: 'pre-line', marginBottom: 40,
          }}>{t.ctaTitle}</h2>
          <button
            className="btn btn-gold"
            onClick={() => navigate && navigate({ page: 'collection' })}
          >
            {t.ctaBtn} <span className="arrow" />
          </button>
        </div>
      </section>

</div>
  );
}

const MODEL_GALLERY_PHOTOS = [
  '/uploads/PHOTO-2026-04-09-08-43-12 (Virtual Model).webp',
  '/uploads/PHOTO-2026-04-09-08-43-36 (Virtual Model).webp',
  '/uploads/PHOTO-2026-04-09-08-43-36 (Virtual Model) 2.webp',
  '/uploads/PHOTO-2026-04-09-08-44-43 (Virtual Model).webp',
  '/uploads/PHOTO-2026-04-09-08-46-02 (Virtual Model).webp',
  '/uploads/PHOTO-2026-04-09-08-43-12 (Virtual Model) 2.webp',
  '/uploads/Photoroom_008_20250725_104709 (Virtual Model).webp',
  '/uploads/Photoroom_009_20250725_104709 (Virtual Model).webp',
  '/uploads/Photoroom_014_20250725_104709 (Virtual Model).webp',
  '/uploads/foto_5 (Virtual Model).webp',
  '/uploads/foto_14 (Virtual Model).webp',
  '/uploads/foto_15 (Virtual Model).webp',
  '/uploads/foto_carpeta_4 (Virtual Model).webp',
  '/uploads/foto_carpeta_16 (Virtual Model).webp',
  '/uploads/foto_carpeta_25 (Virtual Model).webp',
  '/uploads/foto_carpeta_35 (Virtual Model).webp',
];

function GalleryPage({ lang }) {
  const [lb, setLb] = useState(null);

const title = lang === 'es' ? 'Modelos' : lang === 'fr' ? 'Modèles' : 'Models';
  const sub = lang === 'es'
    ? 'Fotografías de nuestros modelos posando con los sombreros SensStyle.'
    : lang === 'fr'
    ? 'Photographies de nos modèles portant les chapeaux SensStyle.'
    : 'Photographs of our models wearing SensStyle hats.';

return (
    <div className="page-enter">
      <section style={{ padding: '100px 0 48px', background: 'var(--parchment)' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}><Ornament /></div>
          <div className="eyebrow" style={{ marginBottom: 20 }}>SensStyle · Lookbook</div>
          <h1 style={{ fontSize: 'clamp(56px, 7vw, 96px)', fontStyle: 'italic', fontWeight: 400, lineHeight: 1 }}>{title}</h1>
          <p style={{ color: 'var(--muted)', maxWidth: '50ch', margin: '20px auto 0', fontSize: 19, lineHeight: 1.6 }}>{sub}</p>
        </div>
      </section>

<section style={{ padding: '8px 0 120px', background: 'var(--parchment)' }}>
        <div className="container">
          <div className="gallery-masonry-inline" style={{ columns: '3 280px', columnGap: 12 }}>
            {MODEL_GALLERY_PHOTOS.map((src, i) => (
              <div
                key={i}
                onClick={() => setLb(i)}
                style={{
                  breakInside: 'avoid',
                  marginBottom: 12,
                  cursor: 'zoom-in',
                  overflow: 'hidden',
                  position: 'relative',
                }}
              >
                <img
                  src={src}
                  alt={`Modelo ${i + 1}`}
                  loading="lazy"
                  style={{
                    width: '100%',
                    display: 'block',
                    transition: 'transform 500ms var(--ease)',
                  }}
                  onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.03)'; }}
                  onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; }}
                />
                <div style={{
                  position: 'absolute', bottom: 0, left: 0, right: 0,
                  padding: '32px 16px 14px',
                  background: 'linear-gradient(transparent, rgba(15,10,5,0.55))',
                  fontFamily: 'var(--font-mono)', fontSize: 9,
                  letterSpacing: '0.22em', color: 'rgba(245,237,224,0.7)',
                  textTransform: 'uppercase',
                  opacity: 0,
                  transition: 'opacity 300ms',
                }}
                  className="gallery-caption"
                >
                  {String(i + 1).padStart(2, '0')} · SensStyle
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

{lb !== null && (
        <Lightbox
          images={MODEL_GALLERY_PHOTOS}
          index={lb}
          onClose={() => setLb(null)}
          onNav={(d) => setLb((lb + d + MODEL_GALLERY_PHOTOS.length) % MODEL_GALLERY_PHOTOS.length)}
        />
      )}
    </div>
  );
}

return (
    <div className="page-enter" style={{ background: 'var(--parchment)' }}>

{/* ── HERO SPLIT ── */}
      <section className="contact-hero-grid" style={{ minHeight: '92vh', display: 'grid', gridTemplateColumns: '1fr 1fr', position: 'relative', padding: 0 }}>
        <div style={{ position: 'relative', overflow: 'hidden' }}>
          <Placeholder label="SensStyle Contact" ratio="unset" src={heroImg} objectPosition="top center" style={{ height: '100%', minHeight: '92vh' }} />
        </div>
        <div className="contact-hero-text" style={{ background: 'var(--ink)', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 'clamp(48px,6vw,100px)', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, opacity: 0.07, background: 'radial-gradient(circle at 80% 20%, var(--gold-300), transparent 55%)', pointerEvents: 'none' }} />
          <div style={{ color: 'var(--gold-300)', marginBottom: 28 }}><Ornament color="var(--gold-300)" /></div>
          <div className="eyebrow light" style={{ color: 'rgba(245,237,224,0.55)', marginBottom: 20 }}>{t.topicsEyebrow.split('?')[0].replace('¿','').trim().toUpperCase()}</div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400, fontSize: 'clamp(48px,5vw,80px)', lineHeight: 1.05, color: 'var(--cream)', marginBottom: 24 }}>
            {t.waHero}
          </h1>
          <p style={{ color: 'rgba(245,237,224,0.7)', fontSize: 18, lineHeight: 1.6, maxWidth: '36ch', marginBottom: 48 }}>
            {t.waSub}
          </p>
          <button
            className="btn btn-ghost-light"
            onClick={() => openWA(t.waGreeting)}
            style={{ display: 'inline-flex', alignItems: 'center', gap: 12, width: 'fit-content' }}
          >
            <WaIcon size={15} color="currentColor" />
            {t.whatsapp}
          </button>
          <div style={{ marginTop: 28, display: 'inline-flex', alignItems: 'center', gap: 8, color: 'rgba(245,237,224,0.4)', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--gold-300)', display: 'inline-block' }} />
            {t.info.hours}
          </div>
        </div>
      </section>

{/* ── TOPICS ── */}
      <section style={{ background: 'var(--parchment)', padding: '80px 0' }}>
        <div className="container">
          <div style={{ marginBottom: 48 }}>
            <div className="eyebrow muted">{t.topicsEyebrow}</div>
          </div>
          <div className="contact-topics-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 2 }}>
            {topics.map((topic, i) => (
              <button
                key={i}
                onClick={() => openWA(topic.msg)}
                style={{
                  background: 'var(--ink)', color: 'var(--cream)',
                  border: 'none', padding: '40px 28px',
                  textAlign: 'left', cursor: 'pointer',
                  display: 'flex', flexDirection: 'column', gap: 20,
                  transition: 'background 200ms var(--ease)',
                }}
                onMouseEnter={e => { e.currentTarget.style.background = 'var(--saddle-700)'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'var(--ink)'; }}
              >
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em', color: 'var(--gold-300)' }}>
                  {String(i + 1).padStart(2, '0')}
                </span>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontStyle: 'italic', lineHeight: 1.3, flex: 1 }}>
                  {topic.label}
                </span>
                <span style={{ display: 'flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(245,237,224,0.45)' }}>
                  <WaIcon size={13} color="rgba(245,237,224,0.45)" />
                  WhatsApp
                </span>
              </button>
            ))}
          </div>
        </div>
      </section>

{/* ── PHOTO + INFO ── */}
      <section style={{ background: 'var(--sand)', padding: '80px 0' }}>
        <div className="container contact-info-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <Placeholder label="SensStyle" ratio="4/5" src="products/contact-model-ai.webp" objectPosition="top center" />
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>✦ Taller SensStyle</div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400, fontSize: 40, marginBottom: 36 }}>
              {t.infoTitle}
            </h3>
            <dl style={{ margin: 0 }}>
              {[
                { k: 'Email', v: t.info.email, href: `mailto:${t.info.email}` },
                { k: 'Tel.',  v: t.info.phone, href: `tel:${t.info.phone.replace(/\D/g,'')}` },
                { k: 'Dir.',  v: t.info.address, href: null },
                { k: 'Hrs.', v: t.info.hours, href: null },
              ].map(({ k, v, href }) => (
                <div key={k} style={{ padding: '16px 0', borderBottom: '1px solid rgba(27,18,10,0.12)', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16 }}>
                  <dt className="eyebrow muted">{k}</dt>
                  <dd style={{ margin: 0, fontSize: 17, textAlign: 'right', whiteSpace: 'pre-line' }}>
                    {href ? <a href={href} style={{ color: 'var(--ink)', textDecoration: 'none' }}>{v}</a> : v}
                  </dd>
                </div>
              ))}
            </dl>
          </div>
        </div>
      </section>

{/* ── CONTACT FORM ── */}
      <section style={{ background: 'var(--parchment)', padding: '80px 0' }}>
        <div className="container" style={{ maxWidth: 720 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>{I18N[lang].contact.form.name ? '' : ''}</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400, fontSize: 'clamp(28px,3vw,42px)', marginBottom: 32 }}>
            {lang === 'es' ? 'Envíanos un mensaje' : lang === 'fr' ? 'Envoyez-nous un message' : 'Send us a message'}
          </h2>
          <ContactForm lang={lang} />
        </div>
      </section>

</div>
  );
}

function ContactForm({ lang }) {
  const [form, setForm] = useState({ name: '', email: '', phone: '', subject: '', message: '' });
  const [captchaToken, setCaptchaToken] = useState('');
  const [sending, setSending] = useState(false);
  const [sent, setSent] = useState(false);
  const [error, setError] = useState('');

if (sent) {
    return (
      <div style={{ padding: 48, textAlign: 'center', border: '1px solid rgba(27,18,10,0.12)' }}>
        <Ornament />
        <p style={{ fontSize: 24, fontStyle: 'italic', fontFamily: 'var(--font-display)', marginTop: 20 }}>
          {lang === 'es' ? '¡Mensaje enviado!' : lang === 'fr' ? 'Message envoyé!' : 'Message sent!'}
        </p>
        <p style={{ color: 'var(--muted)', marginTop: 8, fontSize: 15 }}>
          {lang === 'es' ? 'Te responderemos lo antes posible.' : lang === 'fr' ? 'Nous vous répondrons dès que possible.' : 'We\'ll get back to you as soon as possible.'}
        </p>
      </div>
    );
  }

return (
    <form onSubmit={handleSubmit}>
      <CaptchaField onCaptcha={setCaptchaToken} />
      <div className="form-grid">
        <div className="form-field"><label htmlFor="contact-name">{I18N[lang].contact.form.name}</label>
          <input id="contact-name" name="name" required value={form.name} onChange={e => setForm({...form, name: e.target.value})} />
        </div>
        <div className="form-field"><label htmlFor="contact-email">{I18N[lang].contact.form.email}</label>
          <input id="contact-email" name="email" type="email" required value={form.email} onChange={e => setForm({...form, email: e.target.value})} />
        </div>
        <div className="form-field"><label htmlFor="contact-phone">{lang === 'es' ? 'Teléfono' : lang === 'fr' ? 'Téléphone' : 'Phone'}</label>
          <input id="contact-phone" name="phone" value={form.phone} onChange={e => setForm({...form, phone: e.target.value})} />
        </div>
        <div className="form-field"><label htmlFor="contact-subject">{lang === 'es' ? 'Asunto' : lang === 'fr' ? 'Sujet' : 'Subject'}</label>
          <input id="contact-subject" name="subject" required value={form.subject} onChange={e => setForm({...form, subject: e.target.value})} />
        </div>
        <div className="form-field full"><label htmlFor="contact-message">{I18N[lang].contact.form.message}</label>
          <textarea id="contact-message" name="message" rows={5} required value={form.message} onChange={e => setForm({...form, message: e.target.value})} style={{ resize: 'vertical' }} />
        </div>
      </div>
      {error && <p style={{ color: 'var(--err)', fontFamily: 'var(--font-mono)', fontSize: 12, marginTop: 12, letterSpacing: '0.1em' }}>{error}</p>}
      <div style={{ marginTop: 28 }}>
        <button type="submit" className="btn btn-primary" disabled={sending}>
          {sending ? (lang === 'es' ? 'Enviando...' : lang === 'fr' ? 'Envoi...' : 'Sending...') : I18N[lang].contact.form.send}
          <span className="arrow" />
        </button>
      </div>
    </form>
  );
}

function DistributorForm({ lang, t, onSent }) {
  const [form, setForm] = useState({ name: '', company: '', email: '', phone: '', message: '' });
  const [captchaToken, setCaptchaToken] = useState('');
  const [sending, setSending] = useState(false);
  const [error, setError] = useState('');

return (
    <form onSubmit={handleSubmit}>
      <CaptchaField onCaptcha={setCaptchaToken} />
      <p style={{ color: 'var(--muted)', marginBottom: 28 }}>{t.requestBody}</p>
      <div className="form-grid">
        <div className="form-field"><label>{I18N[lang].contact.form.name}</label><input required value={form.name} onChange={e => setForm({...form, name: e.target.value})} /></div>
        <div className="form-field"><label>{I18N[lang].contact.form.company}</label><input required value={form.company} onChange={e => setForm({...form, company: e.target.value})} /></div>
        <div className="form-field full"><label>{I18N[lang].contact.form.email}</label><input type="email" required value={form.email} onChange={e => setForm({...form, email: e.target.value})} /></div>
        <div className="form-field full"><label>{I18N[lang].contact.form.message}</label><textarea rows={3} value={form.message} onChange={e => setForm({...form, message: e.target.value})} /></div>
      </div>
      {error && <p style={{ color: 'var(--err)', fontFamily: 'var(--font-mono)', fontSize: 12, marginTop: 12, letterSpacing: '0.1em' }}>{error}</p>}
      <div style={{ marginTop: 28 }}>
        <button type="submit" className="btn btn-primary" disabled={sending}>{I18N[lang].contact.form.send} <span className="arrow" /></button>
      </div>
    </form>
  );
}

function WholesalePage({ lang, navigate, initialView }) {
  const t = I18N[lang].portal;
  const [view, setView] = useState(initialView || 'login'); // login | request | dashboard
  const [email, setEmail] = useState('');
  const [pw, setPw] = useState('');
  const [sent, setSent] = useState(false);

if (view === 'dashboard') {
    return (
      <div className="page-enter" style={{ background: 'var(--parchment)' }}>
        <section style={{ padding: '80px 0 40px', background: 'var(--ink)', color: 'var(--cream)' }}>
          <div className="container" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 20, flexWrap: 'wrap' }}>
            <div>
              <div className="eyebrow light" style={{ marginBottom: 12 }}>{t.title}</div>
              <h1 style={{ fontSize: 'clamp(40px, 5vw, 64px)', fontStyle: 'italic', fontWeight: 400, color: 'var(--cream)' }}>
                {t.welcome}, {email.split('@')[0] || 'Bannerman'}.
              </h1>
            </div>
            <button onClick={() => setView('login')} className="btn btn-ghost-light">{t.signout}</button>
          </div>
        </section>
        <section style={{ padding: '48px 0 120px' }}>
          <div className="container" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {[
              { k: t.privateCatalog, v: `${PRODUCTS.length} ${I18N[lang].catalog.count(PRODUCTS.length).split(' ')[1] || ''}`, action: () => navigate({ page: 'collection' }) },
              { k: t.orders, v: '12 · 2025', action: () => {} },
              { k: t.invoices, v: 'CA$ 48,210', action: () => {} },
            ].map((card, i) => (
              <button key={i} onClick={card.action} style={{
                padding: 36, textAlign: 'left',
                border: '1px solid rgba(27,18,10,0.15)',
                background: 'white',
                transition: 'all 220ms',
              }}>
                <div className="eyebrow" style={{ marginBottom: 16 }}>{String(i + 1).padStart(2, '0')}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontStyle: 'italic', marginBottom: 8 }}>
                  {card.v}
                </div>
                <div style={{ color: 'var(--muted)', fontSize: 16 }}>{card.k} →</div>
              </button>
            ))}
          </div>

<div className="container" style={{ marginTop: 56 }}>
            <h3 style={{ fontSize: 32, fontStyle: 'italic', fontWeight: 400, marginBottom: 24 }}>{t.orders}</h3>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 16 }}>
              <thead>
                <tr style={{ borderBottom: '1px solid rgba(27,18,10,0.2)' }}>
                  {['Order', 'Date', 'Items', 'Total CA$', 'Status'].map(h => (
                    <th key={h} style={{
                      textAlign: 'left', padding: '14px 8px',
                      fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.22em',
                      textTransform: 'uppercase', color: 'var(--muted)', fontWeight: 500,
                    }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {[
                  ['#SS-1042', '2026-04-12', '24 hats · 60 belts', '14,280', 'Shipped'],
                  ['#SS-1038', '2026-03-28', '12 hats · 24 belts', '6,940', 'Shipped'],
                  ['#SS-1031', '2026-03-02', '36 hats · 0 belts', '18,600', 'Delivered'],
                  ['#SS-1022', '2026-02-14', '0 hats · 120 belts', '8,400', 'Delivered'],
                ].map((row, i) => (
                  <tr key={i} style={{ borderBottom: '1px solid rgba(27,18,10,0.08)' }}>
                    {row.map((c, j) => (
                      <td key={j} style={{ padding: '16px 8px' }}>
                        {j === 4 ? (
                          <span style={{
                            padding: '4px 10px', fontFamily: 'var(--font-mono)', fontSize: 10,
                            letterSpacing: '0.18em', textTransform: 'uppercase',
                            color: c === 'Shipped' ? 'var(--gold-700)' : 'var(--ok)',
                            border: `1px solid ${c === 'Shipped' ? 'var(--gold-500)' : 'var(--ok)'}`,
                          }}>{c}</span>
                        ) : c}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>
      </div>
    );
  }

return (
    <div className="page-enter">
      <section style={{
        minHeight: 'calc(100vh - 124px)',
        display: 'grid', gridTemplateColumns: '1fr 1fr',
        background: 'var(--parchment)',
      }}>
        <div style={{ position: 'relative', background: 'var(--saddle-900)', color: 'var(--cream)', padding: 0 }}>
          <Placeholder label="WHOLESALE · Leather at rest" tone="dark"
            style={{ position: 'absolute', inset: 0, aspectRatio: 'unset', border: 0 }} corner="PORTAL" />
          <div style={{
            position: 'absolute', inset: 0,
            padding: 'clamp(40px, 6vw, 80px)',
            display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
            background: 'linear-gradient(transparent 30%, rgba(15,10,5,0.75))',
          }}>
            <div className="eyebrow light" style={{ marginBottom: 16 }}>{t.title}</div>
            <h1 style={{
              fontSize: 'clamp(40px, 5vw, 68px)', fontStyle: 'italic', fontWeight: 400,
              color: 'var(--cream)', lineHeight: 1.05, marginBottom: 20,
            }}>Access reserved</h1>
            <p style={{ fontSize: 19, color: 'rgba(245,237,224,0.8)', maxWidth: '40ch' }}>{t.sub}</p>
          </div>
        </div>
        <div style={{ padding: 'clamp(40px, 6vw, 80px)', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div style={{ display: 'flex', gap: 24, marginBottom: 36 }}>
            <button onClick={() => { setView('login'); setSent(false); }} className="nav-link" style={{ color: view === 'login' ? 'var(--gold-600)' : 'var(--ink)' }}>
              {t.signin}
            </button>
            <button onClick={() => { setView('request'); setSent(false); }} className="nav-link" style={{ color: view === 'request' ? 'var(--gold-600)' : 'var(--ink)' }}>
              {t.request}
            </button>
          </div>

{view === 'login' && (
            <form onSubmit={(e) => { e.preventDefault(); setView('dashboard'); }}>
              <div className="form-field" style={{ marginBottom: 28 }}>
                <label>{t.email}</label>
                <input type="email" required value={email} onChange={(e) => setEmail(e.target.value)} />
              </div>
              <div className="form-field" style={{ marginBottom: 40 }}>
                <label>{t.password}</label>
                <input type="password" required value={pw} onChange={(e) => setPw(e.target.value)} />
              </div>
              <div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
                <button type="submit" className="btn btn-primary">{t.signin} <span className="arrow" /></button>
                <a href="#" className="link-inline" style={{ borderBottom: 0, color: 'var(--muted)' }}>{t.forgot}</a>
              </div>
              <div style={{ marginTop: 36, padding: 16, background: 'rgba(212,169,74,0.12)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: 'var(--gold-700)' }}>
                DEMO · enter anything to sign in
              </div>
            </form>
          )}

{view === 'request' && !sent && (
            <DistributorForm lang={lang} t={t} onSent={() => setSent(true)} />
          )}
          )}
          {view === 'request' && sent && (
            <div style={{ padding: 40, border: '1px solid rgba(27,18,10,0.15)', textAlign: 'center' }}>
              <Ornament />
              <p style={{ fontSize: 24, fontStyle: 'italic', fontFamily: 'var(--font-display)', marginTop: 20 }}>
                {I18N[lang].contact.form.sent}
              </p>
            </div>
          )}
        </div>
      </section>
    </div>
  );
}

function BlogPage({ lang, navigate }) {
  const t = I18N[lang].journal;
  const imgs = [
    '/products/blog/01-hat-face-type.webp',
    '/products/blog/03-cowboy-rodeo.webp',
    '/products/blog/02-genuine-leather.webp',
    '/products/blog/04-leather-belt-care.webp',
    '/products/blog/05-western-buckle.webp',
    '/products/blog/07-wholesale-warehouse.webp',
  ];

const title = lang === 'es' ? 'Blog' : 'Blog';
  const eyebrow = lang === 'es' ? 'Desde el taller' : lang === 'fr' ? 'De l\'atelier' : 'From the workshop';

return (
    <div className="page-enter">
      <section style={{ padding: '100px 0 64px', background: 'var(--parchment)' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}><Ornament /></div>
          <div className="eyebrow" style={{ marginBottom: 20 }}>{eyebrow}</div>
          <h1 style={{ fontSize: 'clamp(56px, 7vw, 96px)', fontStyle: 'italic', fontWeight: 400, lineHeight: 1 }}>{title}</h1>
        </div>
      </section>

<section style={{ padding: '0 0 120px', background: 'var(--parchment)' }}>
        <div className="container">
          <div className="journal-grid">
            {t.posts.map((p, i) => (
              <div key={i} style={{ cursor: 'pointer' }}>
                <div style={{ overflow: 'hidden', marginBottom: 0 }}>
                  <img
                    src={imgs[i] || imgs[0]}
                    alt={p.title}
                    loading="lazy"
                    style={{
                      width: '100%', aspectRatio: '5/4', objectFit: 'cover', display: 'block',
                      transition: 'transform 500ms var(--ease)',
                    }}
                    onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.04)'; }}
                    onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; }}
                  />
                </div>
                <div style={{ padding: '24px 0' }}>
                  <div className="eyebrow" style={{ marginBottom: 10 }}>{p.tag} · {p.read}</div>
                  <h3 style={{
                    fontFamily: 'var(--font-display)', fontStyle: 'italic',
                    fontSize: 28, fontWeight: 400, lineHeight: 1.15, marginBottom: 16,
                  }}>{p.title}</h3>
                  <span className="link-inline">
                    {lang === 'es' ? 'Leer más' : lang === 'fr' ? 'Lire' : 'Read more'} →
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ── Privacy Policy ──────────────────────────────────────────────────────────

function PrivacyPage({ lang, navigate }) {
  const t = I18N[lang].legal;
  return (
    <div className="page">
      <div className="container" style={{ padding: 'clamp(64px,10vw,120px) clamp(20px,4vw,48px) clamp(48px,8vw,96px)' }}>
        <div className="eyebrow" style={{ marginBottom: 16 }}>{t.lastUpdated}</div>
        <h1 style={{ fontSize: 'clamp(40px,6vw,72px)', fontStyle: 'italic', fontWeight: 400, marginBottom: 12 }}>{t.privacyTitle}</h1>
        <div style={{ width: 60, height: 1, background: 'var(--gold-600)', marginBottom: 40 }} />
        <p style={{ fontSize: 'clamp(17px,1.5vw,20px)', color: 'var(--charcoal)', maxWidth: '72ch', lineHeight: 1.7, marginBottom: 48 }}>{t.intro}</p>
        <div style={{ display: 'grid', gap: 40, maxWidth: '72ch' }}>
          <div>
            <h2 style={{ fontSize: 'clamp(22px,2vw,28px)', fontStyle: 'italic', fontWeight: 400, marginBottom: 16, fontFamily: 'var(--font-display)' }}>{t.privacyWho}</h2>
            <p style={{ fontSize: 17, color: 'var(--charcoal)', lineHeight: 1.7 }}>{t.privacyWhoText}</p>
          </div>
          <div>
            <h2 style={{ fontSize: 'clamp(22px,2vw,28px)', fontStyle: 'italic', fontWeight: 400, marginBottom: 16, fontFamily: 'var(--font-display)' }}>{t.privacyCollect}</h2>
            <ul style={{ listStyle: 'none', padding: 0, display: 'grid', gap: 10 }}>
              {t.privacyCollectList.map((item, i) => (
                <li key={i} style={{ display: 'flex', gap: 14, fontSize: 17, color: 'var(--charcoal)', lineHeight: 1.6 }}>
                  <span style={{ color: 'var(--gold-600)', marginTop: 6, flexShrink: 0 }}>✦</span>
                  <span>{item}</span>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <h2 style={{ fontSize: 'clamp(22px,2vw,28px)', fontStyle: 'italic', fontWeight: 400, marginBottom: 16, fontFamily: 'var(--font-display)' }}>{t.privacyUse}</h2>
            <ul style={{ listStyle: 'none', padding: 0, display: 'grid', gap: 10 }}>
              {t.privacyUseList.map((item, i) => (
                <li key={i} style={{ display: 'flex', gap: 14, fontSize: 17, color: 'var(--charcoal)', lineHeight: 1.6 }}>
                  <span style={{ color: 'var(--gold-600)', marginTop: 6, flexShrink: 0 }}>✦</span>
                  <span>{item}</span>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <h2 style={{ fontSize: 'clamp(22px,2vw,28px)', fontStyle: 'italic', fontWeight: 400, marginBottom: 16, fontFamily: 'var(--font-display)' }}>{t.privacyShare}</h2>
            <ul style={{ listStyle: 'none', padding: 0, display: 'grid', gap: 10 }}>
              {t.privacyShareList.map((item, i) => (
                <li key={i} style={{ display: 'flex', gap: 14, fontSize: 17, color: 'var(--charcoal)', lineHeight: 1.6 }}>
                  <span style={{ color: 'var(--gold-600)', marginTop: 6, flexShrink: 0 }}>✦</span>
                  <span>{item}</span>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <h2 style={{ fontSize: 'clamp(22px,2vw,28px)', fontStyle: 'italic', fontWeight: 400, marginBottom: 16, fontFamily: 'var(--font-display)' }}>{t.privacyRights}</h2>
            <p style={{ fontSize: 17, color: 'var(--charcoal)', lineHeight: 1.7 }}>{t.privacyRightsText}</p>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Terms and Conditions ───────────────────────────────────────────────────

// ── Cookie Policy ─────────────────────────────────────────────────────────

Object.assign(window, { DistributorsPage, AboutPage, GalleryPage, BlogPage, ContactPage, WholesalePage, PrivacyPage, TermsPage, CookiesPage });

{t.distributors.title}

{t.distributors.joinTitle}