// ── JT Atelier — Sizing Guide (full page) ────────────────────────────
// Size tables + how-to-measure diagrams, all in one place.

const SG_UPPER_IN = [
  { size:'XS',   chest:'31–33', shoulder:'15.5', sleeve:'31–32' },
  { size:'S',    chest:'34–36', shoulder:'16.5', sleeve:'32–33' },
  { size:'M',    chest:'37–39', shoulder:'17.5', sleeve:'33–33.5' },
  { size:'L',    chest:'40–42', shoulder:'18.5', sleeve:'33.5–34' },
  { size:'XL',   chest:'43–45', shoulder:'19.5', sleeve:'34–34.5' },
  { size:'XXL',  chest:'46–48', shoulder:'20.5', sleeve:'34.5–35' },
  { size:'XXXL', chest:'49–51', shoulder:'21.5', sleeve:'35–35.5' },
];
const SG_UPPER_CM = [
  { size:'XS',   chest:'79–84',   shoulder:'40', sleeve:'79–81' },
  { size:'S',    chest:'86–91',   shoulder:'42', sleeve:'81–84' },
  { size:'M',    chest:'94–99',   shoulder:'44', sleeve:'84–85' },
  { size:'L',    chest:'102–107', shoulder:'47', sleeve:'85–86' },
  { size:'XL',   chest:'109–114', shoulder:'50', sleeve:'86–88' },
  { size:'XXL',  chest:'117–122', shoulder:'52', sleeve:'88–89' },
  { size:'XXXL', chest:'124–130', shoulder:'55', sleeve:'89–90' },
];
const SG_LOWER_IN = [
  { size:'XS',   waist:'25–27', hips:'31–33', inseam:'28–29' },
  { size:'S',    waist:'28–30', hips:'34–36', inseam:'29–30' },
  { size:'M',    waist:'31–33', hips:'37–39', inseam:'30–31' },
  { size:'L',    waist:'34–36', hips:'40–42', inseam:'31–32' },
  { size:'XL',   waist:'37–39', hips:'43–45', inseam:'31–32' },
  { size:'XXL',  waist:'40–43', hips:'46–48', inseam:'32' },
  { size:'XXXL', waist:'44–47', hips:'49–52', inseam:'32' },
];
const SG_LOWER_CM = [
  { size:'XS',   waist:'64–69',   hips:'79–84',   inseam:'71–74' },
  { size:'S',    waist:'71–76',   hips:'86–91',   inseam:'74–76' },
  { size:'M',    waist:'79–84',   hips:'94–99',   inseam:'76–79' },
  { size:'L',    waist:'86–91',   hips:'102–107', inseam:'79–81' },
  { size:'XL',   waist:'94–99',   hips:'109–114', inseam:'79–81' },
  { size:'XXL',  waist:'102–109', hips:'117–122', inseam:'81' },
  { size:'XXXL', waist:'112–119', hips:'124–132', inseam:'81' },
];

function SgTable({ headers, rows }) {
  return (
    <div style={{ overflowX: 'auto' }}>
      <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.08em' }}>
        <thead>
          <tr style={{ borderBottom: '.5px solid var(--line)' }}>
            {headers.map(h => (
              <th key={h} style={{ padding: '10px 14px', textAlign: 'left', color: 'var(--fg-3)', fontWeight: 400, textTransform: 'uppercase', letterSpacing: '.16em', whiteSpace: 'nowrap' }}>{h}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={r.size} style={{ borderBottom: '.5px solid var(--line)', background: i % 2 === 0 ? 'transparent' : 'color-mix(in srgb, var(--fg) 2.5%, transparent)' }}>
              <td style={{ padding: '14px', color: 'var(--fg)', fontWeight: 700 }}>{r.size}</td>
              {Object.entries(r).filter(([k]) => k !== 'size').map(([k, v]) => (
                <td key={k} style={{ padding: '14px', color: 'var(--fg-2)' }}>{v}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function SizingPage({ goTo }) {
  const [unit, setUnit] = React.useState('in');
  const [tab,  setTab]  = React.useState('upper');

  React.useEffect(() => { window.scrollTo({ top: 0, behavior: 'instant' }); }, []);

  const upperRows = unit === 'in' ? SG_UPPER_IN : SG_UPPER_CM;
  const lowerRows = unit === 'in' ? SG_LOWER_IN : SG_LOWER_CM;

  const UnitToggle = () => (
    <div style={{ display: 'flex', border: '.5px solid var(--line-2)', overflow: 'hidden', flexShrink: 0 }}>
      {['in', 'cm'].map(u => (
        <button key={u} onClick={() => setUnit(u)}
          className="mono"
          style={{ padding: '7px 18px', background: unit === u ? 'var(--fg)' : 'transparent', color: unit === u ? 'var(--bg)' : 'var(--fg-2)', border: 'none', cursor: 'pointer', fontSize: 10, letterSpacing: '.14em', transition: 'all .15s' }}>
          {u}
        </button>
      ))}
    </div>
  );

  return (
    <main style={{ background: 'var(--bg)', minHeight: '100vh' }}>

      {/* Hero */}
      <section style={{
        padding: 'clamp(64px,10vw,120px) clamp(24px,8vw,96px) 64px',
        borderBottom: '.5px solid var(--line)',
        display: 'grid', gridTemplateColumns: '1fr 1fr',
        gap: 'clamp(32px,6vw,80px)', alignItems: 'end',
      }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 24 }}>◇ &nbsp; Sizing</div>
          <h1 className="display" style={{ fontSize: 'clamp(44px,7vw,96px)', lineHeight: .9, margin: 0, letterSpacing: '-.02em' }}>
            <em>Find<br />Your Fit.</em>
          </h1>
        </div>
        <div style={{ paddingBottom: 8 }}>
          <p style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '.06em', lineHeight: 1.85, color: 'var(--fg-3)', margin: 0, maxWidth: 380 }}>
            All measurements are your <strong style={{ color: 'var(--fg)' }}>body measurements</strong> — not the garment.
            Leather has minimal stretch, so if you're between sizes, size up.
            Bespoke orders use your exact custom measurements.
          </p>
        </div>
      </section>

      {/* ── Size Charts ──────────────────────────────────────────────── */}
      <section style={{ padding: 'clamp(40px,6vw,72px) clamp(24px,8vw,96px)', borderBottom: '.5px solid var(--line)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 32, flexWrap: 'wrap', gap: 16 }}>
          <div className="eyebrow">Size Charts</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
            {/* Tab switcher */}
            <div style={{ display: 'flex', gap: 0, borderBottom: '.5px solid var(--line)' }}>
              {[['upper','Upper Body'],['lower','Lower Body']].map(([t,label]) => (
                <button key={t} onClick={() => setTab(t)} className="mono" style={{
                  padding: '10px 0', marginRight: 24,
                  color: tab === t ? 'var(--fg)' : 'var(--fg-3)',
                  borderBottom: tab === t ? '1px solid var(--fg)' : '1px solid transparent',
                  background: 'transparent', border: 'none', borderBottom: tab === t ? '1px solid var(--fg)' : '1px solid transparent',
                  cursor: 'pointer', fontSize: 11, letterSpacing: '.12em', textTransform: 'uppercase',
                }}>{label}</button>
              ))}
            </div>
            <UnitToggle />
          </div>
        </div>

        {tab === 'upper' && (
          <div>
            <SgTable headers={['Size', `Chest (${unit})`, `Shoulder (${unit})`, `Sleeve (${unit})`]} rows={upperRows} />
            <div style={{ marginTop: 20, padding: '16px 20px', background: 'color-mix(in srgb, var(--fg) 3%, transparent)', borderLeft: '2px solid var(--line-2)' }}>
              <div className="mono" style={{ color: 'var(--fg-2)', lineHeight: 1.8, fontSize: 11 }}>
                <strong style={{ color: 'var(--fg)' }}>Chest</strong> — tape around the fullest part of your chest, just under your arms, parallel to the floor.<br />
                <strong style={{ color: 'var(--fg)' }}>Shoulder</strong> — bony tip of left shoulder straight across your back to the right shoulder tip.<br />
                <strong style={{ color: 'var(--fg)' }}>Sleeve</strong> — center back of neck, over the shoulder point, down to your wrist bone.
              </div>
            </div>
          </div>
        )}

        {tab === 'lower' && (
          <div>
            <SgTable headers={['Size', `Waist (${unit})`, `Hips (${unit})`, `Inseam (${unit})`]} rows={lowerRows} />
            <div style={{ marginTop: 20, padding: '16px 20px', background: 'color-mix(in srgb, var(--fg) 3%, transparent)', borderLeft: '2px solid var(--line-2)' }}>
              <div className="mono" style={{ color: 'var(--fg-2)', lineHeight: 1.8, fontSize: 11 }}>
                <strong style={{ color: 'var(--fg)' }}>Waist</strong> — around your natural waist, approximately one inch above the navel.<br />
                <strong style={{ color: 'var(--fg)' }}>Hips</strong> — around the fullest part of your hips, 7–9 inches below the waist.<br />
                <strong style={{ color: 'var(--fg)' }}>Inseam</strong> — from the crotch seam down to the ankle bone.
              </div>
            </div>
          </div>
        )}
      </section>

      {/* ── How to Measure ──────────────────────────────────────────── */}
      <section style={{ padding: 'clamp(40px,6vw,72px) clamp(24px,8vw,96px)', borderBottom: '.5px solid var(--line)' }}>
        <div className="eyebrow" style={{ marginBottom: 32 }}>How to Measure</div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 24 }}>

          {/* Upper body diagram */}
          <div style={{ border: '.5px solid var(--line)', padding: '20px 16px 16px' }}>
            <div className="mono" style={{ fontSize: 9, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 14, textAlign: 'center' }}>
              Upper Body · Neck · Chest · Shoulders · Sleeve
            </div>
            <svg viewBox="0 0 200 222" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: 'auto', display: 'block' }}>
              <ellipse cx="100" cy="26" rx="16" ry="19" fill="currentColor" opacity=".13"/>
              <path d="M88 45 C86 49 82 51 76 53 C58 59 45 70 38 88 C32 102 28 118 26 132 C25 138 30 140 34 135 C39 128 41 116 46 104 C49 96 53 90 59 86 C56 108 56 130 58 150 C59 162 60 170 61 176 L139 176 C140 170 141 162 142 150 C144 130 144 108 141 86 C147 90 151 96 154 104 C159 116 161 128 166 135 C170 140 175 138 174 132 C172 118 168 102 162 88 C155 70 142 59 124 53 C118 51 114 49 112 45 C108 49 104 51 100 51 C96 51 92 49 88 45 Z" fill="currentColor" opacity=".13" stroke="currentColor" strokeWidth=".8" strokeOpacity=".4"/>
              <line x1="84" y1="52" x2="116" y2="52" stroke="currentColor" strokeWidth=".8" strokeDasharray="3,2.5"/>
              <line x1="84" y1="49" x2="84" y2="55" stroke="currentColor" strokeWidth="1.2"/>
              <line x1="116" y1="49" x2="116" y2="55" stroke="currentColor" strokeWidth="1.2"/>
              <text x="100" y="45" textAnchor="middle" fontSize="8" fill="currentColor" fontFamily="monospace" letterSpacing=".5" opacity=".72">NECK</text>
              <line x1="40" y1="72" x2="160" y2="72" stroke="currentColor" strokeWidth=".8" strokeDasharray="3,2.5"/>
              <line x1="40" y1="69" x2="40" y2="75" stroke="currentColor" strokeWidth="1.2"/>
              <line x1="160" y1="69" x2="160" y2="75" stroke="currentColor" strokeWidth="1.2"/>
              <text x="100" y="65" textAnchor="middle" fontSize="8" fill="currentColor" fontFamily="monospace" letterSpacing=".5" opacity=".72">SHOULDERS</text>
              <line x1="34" y1="104" x2="166" y2="104" stroke="currentColor" strokeWidth=".8" strokeDasharray="3,2.5"/>
              <line x1="34" y1="101" x2="34" y2="107" stroke="currentColor" strokeWidth="1.2"/>
              <line x1="166" y1="101" x2="166" y2="107" stroke="currentColor" strokeWidth="1.2"/>
              <text x="100" y="97" textAnchor="middle" fontSize="8" fill="currentColor" fontFamily="monospace" letterSpacing=".5" opacity=".72">CHEST</text>
              <line x1="180" y1="72" x2="180" y2="150" stroke="currentColor" strokeWidth=".8" strokeDasharray="3,2.5"/>
              <line x1="177" y1="72" x2="183" y2="72" stroke="currentColor" strokeWidth="1.2"/>
              <line x1="177" y1="150" x2="183" y2="150" stroke="currentColor" strokeWidth="1.2"/>
              <line x1="156" y1="72" x2="180" y2="72" stroke="currentColor" strokeWidth=".4" strokeDasharray="1.5,2.5" opacity=".3"/>
              <line x1="150" y1="150" x2="180" y2="150" stroke="currentColor" strokeWidth=".4" strokeDasharray="1.5,2.5" opacity=".3"/>
              <text transform="translate(192,111) rotate(-90)" textAnchor="middle" fontSize="8" fill="currentColor" fontFamily="monospace" letterSpacing=".5" opacity=".72">SLEEVE</text>
              <text x="100" y="214" textAnchor="middle" fontSize="7.5" fill="currentColor" fontFamily="sans-serif" opacity=".38">Tape around the fullest part · seam to wrist</text>
            </svg>
          </div>

          {/* Lower body diagram */}
          <div style={{ border: '.5px solid var(--line)', padding: '20px 16px 16px' }}>
            <div className="mono" style={{ fontSize: 9, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 14, textAlign: 'center' }}>
              Lower Body · Waist · Hips · Inseam · Length
            </div>
            <svg viewBox="0 0 200 222" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: 'auto', display: 'block' }}>
              <path d="M70 20 C66 40 64 56 64 70 C64 82 68 92 76 100 C68 116 64 132 66 150 L72 200 L78 212 L92 212 C95 180 97 158 99 150 C100 145 100 144 101 144 C102 144 102 145 103 150 C105 158 107 180 110 212 L124 212 L130 200 L136 150 C138 132 134 116 126 100 C134 92 138 82 138 70 C138 56 136 40 132 20 Z" fill="currentColor" opacity=".13" stroke="currentColor" strokeWidth=".8" strokeOpacity=".4"/>
              <line x1="64" y1="58" x2="138" y2="58" stroke="currentColor" strokeWidth=".8" strokeDasharray="3,2.5"/>
              <line x1="64" y1="55" x2="64" y2="61" stroke="currentColor" strokeWidth="1.2"/>
              <line x1="138" y1="55" x2="138" y2="61" stroke="currentColor" strokeWidth="1.2"/>
              <text x="101" y="51" textAnchor="middle" fontSize="8" fill="currentColor" fontFamily="monospace" letterSpacing=".5" opacity=".72">WAIST</text>
              <line x1="60" y1="98" x2="142" y2="98" stroke="currentColor" strokeWidth=".8" strokeDasharray="3,2.5"/>
              <line x1="60" y1="95" x2="60" y2="101" stroke="currentColor" strokeWidth="1.2"/>
              <line x1="142" y1="95" x2="142" y2="101" stroke="currentColor" strokeWidth="1.2"/>
              <text x="101" y="91" textAnchor="middle" fontSize="8" fill="currentColor" fontFamily="monospace" letterSpacing=".5" opacity=".72">HIPS</text>
              <line x1="152" y1="146" x2="152" y2="208" stroke="currentColor" strokeWidth=".8" strokeDasharray="3,2.5"/>
              <line x1="149" y1="146" x2="155" y2="146" stroke="currentColor" strokeWidth="1.2"/>
              <line x1="149" y1="208" x2="155" y2="208" stroke="currentColor" strokeWidth="1.2"/>
              <line x1="103" y1="146" x2="152" y2="146" stroke="currentColor" strokeWidth=".4" strokeDasharray="1.5,2.5" opacity=".3"/>
              <text transform="translate(164,177) rotate(-90)" textAnchor="middle" fontSize="8" fill="currentColor" fontFamily="monospace" letterSpacing=".5" opacity=".72">INSEAM</text>
              <line x1="30" y1="20" x2="30" y2="200" stroke="currentColor" strokeWidth=".8" strokeDasharray="3,2.5"/>
              <line x1="27" y1="20" x2="33" y2="20" stroke="currentColor" strokeWidth="1.2"/>
              <line x1="27" y1="200" x2="33" y2="200" stroke="currentColor" strokeWidth="1.2"/>
              <text transform="translate(20,110) rotate(-90)" textAnchor="middle" fontSize="8" fill="currentColor" fontFamily="monospace" letterSpacing=".5" opacity=".72">LENGTH</text>
              <text x="104" y="220" textAnchor="middle" fontSize="7.5" fill="currentColor" fontFamily="sans-serif" opacity=".38">Waist &amp; hips fully around · crotch to ankle</text>
            </svg>
          </div>

        </div>

        {/* Step-by-step measurement guide — exactly where to start & finish */}
        <div style={{ marginTop: 'clamp(36px,5vw,56px)' }}>
          {[
            { group: 'Upper Body', items: [
              ['Chest', 'Wrap the tape around the fullest part of your chest — straight across the nipple line, directly under your armpits, and over your shoulder blades at the back. Keep it snug but never tight: you should be able to slip two fingers between the tape and your body. Hold it perfectly parallel to the floor the whole way around, stand relaxed with arms down, and breathe normally — do not puff your chest out or suck in. Read the number where the end of the tape meets the body of the tape.'],
              ['Shoulders', 'Best done with a helper. Stand naturally, arms relaxed at your sides, looking straight ahead. Start at the bony tip of your LEFT shoulder — the outer point where the sleeve seam of a well-fitting shirt naturally sits. Run the tape straight across your upper back to the bony tip of your RIGHT shoulder. Let the tape follow the gentle curve of your back rather than pulling it tight in a straight line. That edge-to-edge distance is your shoulder width.'],
              ['Sleeve', 'Bend your arm slightly and rest your hand on your hip so the arm has a natural angle. Begin at the CENTER BACK of your neck (the small bump at the base of your neck). Run the tape across the top of your shoulder to the shoulder point, then down the outside of your arm, over the elbow, and finish at the wrist bone — right where your hand begins. That single continuous measurement is your full sleeve length.'],
            ]},
            { group: 'Lower Body', items: [
              ['Waist', 'Find your natural waist first — the narrowest part of your torso, roughly one inch ABOVE your belly button (not where low-rise jeans sit). Wrap the tape all the way around at that point, keeping it level front-to-back and snug without pressing into the skin. Stand relaxed and do not suck in. Read where the tape meets. This is your body waist — we build the garment around it.'],
              ['Hips & Seat', 'Stand with your feet together. Wrap the tape around the FULLEST part of your hips and seat — usually 7 to 9 inches below your natural waist, across the widest point of your backside. Keep the tape parallel to the floor the entire way around (check the back in a mirror — it tends to dip). Snug, not tight.'],
              ['Inseam', 'Stand up straight against a wall, feet about shoulder-width apart. Measure from the very TOP of your inner thigh — the crotch seam — straight down the inside of your leg, finishing at your ankle bone (or wherever you want the hem to fall). Easiest method: take a pair of trousers that already fit you well, lay them flat, and measure along the inside leg seam from crotch to hem.'],
            ]},
          ].map(({ group, items }) => (
            <div key={group} style={{ marginBottom: 28 }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 10 }}>{group}</div>
              <div>
                {items.map(([name, desc]) => (
                  <div key={name} style={{ display: 'grid', gridTemplateColumns: 'minmax(110px,150px) 1fr', gap: 'clamp(14px,3vw,36px)', padding: 'clamp(14px,2vw,20px) 0', borderBottom: '.5px solid var(--line)', alignItems: 'start' }}>
                    <div style={{ fontFamily: 'var(--font-display, Georgia, serif)', fontStyle: 'italic', fontSize: 'clamp(17px,2.2vw,22px)', color: 'var(--fg)', lineHeight: 1.1 }}>{name}</div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 1.9, color: 'var(--fg-2)', letterSpacing: '.02em', maxWidth: 640 }}>{desc}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* Tips */}
        <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 16 }}>
          {[
            ['Use a soft tape measure', 'A fabric tape measure gives the most accurate results. Don\'t use a metal ruler.'],
            ['Measure over minimal clothing', 'Thin base layer only. Avoid bulky sweaters or jackets when measuring.'],
            ['Keep the tape level', 'For chest and waist measurements, keep the tape parallel to the floor all the way around.'],
            ['When in doubt, size up', 'Leather has very little stretch. If you\'re on the border between two sizes, always go larger.'],
          ].map(([title, desc]) => (
            <div key={title} style={{ padding: '18px 20px', border: '.5px solid var(--line)' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--fg)', marginBottom: 8 }}>{title}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, lineHeight: 1.7, color: 'var(--fg-3)' }}>{desc}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Still unsure CTA */}
      <section style={{
        borderTop: '.5px solid var(--line)',
        padding: 'clamp(40px,6vw,72px) clamp(24px,8vw,96px)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 24,
      }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Need help finding your size?</div>
          <div className="display" style={{ fontSize: 'clamp(18px,3vw,28px)' }}><em>We'll walk you through it.</em></div>
        </div>
        <div style={{ display: 'flex', gap: 12 }}>
          <button className="btn ghost" onClick={() => goTo('contact')}>Ask us <span className="arrow">→</span></button>
          <button className="btn" onClick={() => window.openBespoke && window.openBespoke()}>Start Bespoke <span className="arrow">→</span></button>
        </div>
      </section>

    </main>
  );
}

Object.assign(window, { SizingPage });
