// ============================================================================
// Traduality Branding Guidelines — sections (part 2: visual)
// ============================================================================

// ---------- Logo ----------
const LogoSection = () => {
  const Spec = ({ label, value }) => (
    <div style={{display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderTop: '1px solid var(--divider)', fontSize: 'var(--fs-sm)'}}>
      <span style={{color: 'var(--fg3)'}}>{label}</span>
      <span style={{color: 'var(--td-navy)', fontFamily: 'var(--font-mono)'}}>{value}</span>
    </div>
  );

  return (
    <section className="guide" id="logo">
      <div className="eyebrow"><span className="section-num">03</span>Logo</div>
      <h2>The mark and the wordmark, together and apart.</h2>
      <p className="intro">
        The interlocking tri-prism reads as three voices weaving into one conversation. Three corporate
        blues create implied dimensionality. The wordmark sits in a soft humanist sans, with the tagline
        in tracked caps tucked underneath.
      </p>

      <h3>Primary lockups</h3>
      <div className="logo-grid">
        <div className="logo-tile">
          <div className="logo-tile-art">
            <img src="assets/traduality-logo.jpg" alt="Traduality primary lockup" />
          </div>
          <div className="logo-tile-meta">
            <span className="logo-tile-name">Primary · color on light</span>
            <span className="logo-tile-sub">traduality-logo.jpg</span>
          </div>
        </div>
        <div className="logo-tile dark">
          <div className="logo-tile-art">
            <img src="assets/traduality-logo-white.png" alt="Traduality lockup white" />
          </div>
          <div className="logo-tile-meta">
            <span className="logo-tile-name">Reverse · white on navy</span>
            <span className="logo-tile-sub">traduality-logo-white.png</span>
          </div>
        </div>
        <div className="logo-tile subtle">
          <div className="logo-tile-art">
            <img src="assets/traduality-icon-color.png" alt="Traduality mark" style={{maxWidth: '50%', maxHeight: '70%', objectFit: 'contain'}} />
          </div>
          <div className="logo-tile-meta">
            <span className="logo-tile-name">Mark only · color</span>
            <span className="logo-tile-sub">App icons · favicons · social</span>
          </div>
        </div>
        <div className="logo-tile image">
          <div className="logo-tile-art">
            <div className="protect">
              <img src="assets/traduality-logo.jpg" alt="Traduality lockup over photography" />
            </div>
          </div>
          <div className="logo-tile-meta">
            <span className="logo-tile-name">Over imagery · soft white capsule</span>
            <span className="logo-tile-sub">Never a gradient scrim</span>
          </div>
        </div>
      </div>

      <h3 style={{marginTop: 'var(--sp-10)'}}>Clearspace and minimum size</h3>
      <div style={{display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--sp-6)', marginTop: 'var(--sp-5)'}}>
        <div className="card" style={{padding: 0, overflow: 'hidden'}}>
          <div style={{
            background: 'repeating-linear-gradient(45deg, var(--td-slate-50) 0 8px, #fff 8px 16px)',
            padding: 'var(--sp-9)',
            display: 'grid',
            placeItems: 'center',
            position: 'relative',
            minHeight: 280
          }}>
            <div style={{
              position: 'relative',
              padding: '40px 60px',
              background: '#fff',
              border: '2px dashed var(--td-blue-300)',
              borderRadius: '8px'
            }}>
              <img src="assets/traduality-logo.jpg" alt="" style={{height: 60}} />
              {/* clearspace markers */}
              <div style={{position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)', fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--td-blue)'}}>▲</div>
              <div style={{position: 'absolute', bottom: 8, left: '50%', transform: 'translateX(-50%)', fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--td-blue)'}}>▼</div>
              <div style={{position: 'absolute', top: '50%', left: 8, transform: 'translateY(-50%)', fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--td-blue)'}}>◀</div>
              <div style={{position: 'absolute', top: '50%', right: 8, transform: 'translateY(-50%)', fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--td-blue)'}}>▶</div>
            </div>
          </div>
        </div>
        <div className="card">
          <h4>Clearspace = X</h4>
          <p style={{fontSize: 'var(--fs-sm)'}}>X equals the cap-height of the "T" in the wordmark. Maintain at least 1X on every side. More is better.</p>
          <Spec label="Min digital width" value="160 px" />
          <Spec label="Min print width" value="1.25 in" />
          <Spec label="Mark-only min" value="32 px / 0.4 in" />
          <Spec label="Cleared on all sides" value="≥ 1× cap-height" />
          <Spec label="Wordmark color" value="#0f385c · navy" />
        </div>
      </div>

      <h3 style={{marginTop: 'var(--sp-10)'}}>Logo misuse</h3>
      <p style={{maxWidth: 720, color: 'var(--fg3)', fontSize: 'var(--fs-sm)'}}>
        The mark is geometrically tuned. Don't repaint it, distort it, lay it on busy art, or
        wedge it inside containers it wasn't built for.
      </p>
      <div className="misuse-grid">
        <div className="misuse">
          <div className="misuse-art" style={{background: '#cf6328'}}><img src="assets/traduality-logo-white.png" alt="" /></div>
          <div className="misuse-meta">
            <div className="misuse-label">Don't · accent backgrounds</div>
            <div className="misuse-detail">Orange is for highlight only. Never a logo surface.</div>
          </div>
        </div>
        <div className="misuse">
          <div className="misuse-art"><img src="assets/traduality-logo.jpg" alt="" style={{transform: 'skewX(-12deg) scaleY(1.2)'}} /></div>
          <div className="misuse-meta">
            <div className="misuse-label">Don't · distort</div>
            <div className="misuse-detail">No skew, no stretch, no rotation.</div>
          </div>
        </div>
        <div className="misuse">
          <div className="misuse-art" style={{background: 'linear-gradient(135deg,#ff5,#fa3,#f06,#a0f)'}}><img src="assets/traduality-logo.jpg" alt="" /></div>
          <div className="misuse-meta">
            <div className="misuse-label">Don't · busy backgrounds</div>
            <div className="misuse-detail">Use a soft white capsule over photography.</div>
          </div>
        </div>
        <div className="misuse">
          <div className="misuse-art"><img src="assets/traduality-logo.jpg" alt="" style={{filter: 'hue-rotate(140deg) saturate(2)'}} /></div>
          <div className="misuse-meta">
            <div className="misuse-label">Don't · recolor</div>
            <div className="misuse-detail">Only navy color, white reverse, or original mark.</div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ---------- Color ----------
const ColorSection = () => {
  const swatches = [
    { name: 'Navy', role: 'Primary brand', hex: '#0f385c', text: '#fff' },
    { name: 'Blue', role: 'Interactive', hex: '#256498', text: '#fff' },
    { name: 'Sky', role: 'Highlight', hex: '#4689c8', text: '#fff' },
    { name: 'Slate', role: 'Neutral', hex: '#6c7e8f', text: '#fff' },
    { name: 'Orange', role: 'Accent only', hex: '#cf6328', text: '#fff' },
  ];

  const ramp = (label, prefix, vals) => (
    <div>
      <div className="ramp">
        <div className="ramp-label">{label}</div>
        {vals.map(({ step, hex, dark }) => (
          <div
            key={step}
            className="ramp-step"
            style={{ background: hex, color: dark ? '#fff' : 'var(--td-navy)' }}
            onClick={() => copyToClipboard(hex)}
            title={`Click to copy ${hex}`}
          >
            {step}
          </div>
        ))}
      </div>
    </div>
  );

  return (
    <section className="guide" id="color">
      <div className="eyebrow"><span className="section-num">04</span>Color</div>
      <h2>Four blues. One orange. Used on purpose.</h2>
      <p className="intro">
        The four corporate blues carry the brand. Orange is reserved for highlight — one CTA per view, status flags,
        member-impact callouts, data outliers. Never a surface fill. Click any swatch to copy its hex.
      </p>

      <div className="swatch-grid">
        {swatches.map(s => (
          <div className="swatch" key={s.name} onClick={(e) => copySwatch(e, s.hex)}>
            <div className="swatch-color" style={{ background: s.hex, color: s.text }} data-copy={s.hex}></div>
            <div className="swatch-meta">
              <div className="swatch-name">
                <span>{s.name}</span>
                <span className="swatch-role">{s.role}</span>
              </div>
              <div className="swatch-hex">{s.hex}</div>
            </div>
          </div>
        ))}
      </div>

      <h3 style={{marginTop: 'var(--sp-10)'}}>Tonal ramps</h3>
      <p style={{color: 'var(--fg3)', fontSize: 'var(--fs-sm)', maxWidth: 720}}>
        Click any swatch to copy. All neutrals carry a cool cast — never use pure gray.
      </p>

      <div style={{display: 'grid', gap: 'var(--sp-3)', marginTop: 'var(--sp-4)'}}>
        {ramp('Navy / Blue', 'blue', [
          { step: '50', hex: '#eff4f9' },
          { step: '100', hex: '#dce7f2' },
          { step: '200', hex: '#b2cbe5' },
          { step: '300', hex: '#78a8d6' },
          { step: '400', hex: '#4689c8', dark: true },
          { step: '500', hex: '#256498', dark: true },
          { step: '600', hex: '#1f5688', dark: true },
          { step: '700', hex: '#164976', dark: true },
          { step: '800', hex: '#0f385c', dark: true },
          { step: '900', hex: '#082440', dark: true },
        ])}
        {ramp('Slate', 'slate', [
          { step: '50', hex: '#f7f9fb' },
          { step: '100', hex: '#eff2f5' },
          { step: '200', hex: '#e2e7ec' },
          { step: '300', hex: '#c8d0d9' },
          { step: '400', hex: '#a8b3bf' },
          { step: '500', hex: '#8795a4' },
          { step: '600', hex: '#6c7e8f', dark: true },
          { step: '700', hex: '#4a5868', dark: true },
          { step: '800', hex: '#374350', dark: true },
          { step: '900', hex: '#222a33', dark: true },
        ])}
        {ramp('Orange', 'orange', [
          { step: '50', hex: '#fdf3eb' },
          { step: '100', hex: '#fbe8dc' },
          { step: '200', hex: '#f7d4bd' },
          { step: '300', hex: '#f1b790' },
          { step: '400', hex: '#e89761' },
          { step: '500', hex: '#e27a3f', dark: true },
          { step: '600', hex: '#cf6328', dark: true },
          { step: '700', hex: '#a64d1e', dark: true },
          { step: '800', hex: '#7d3a17', dark: true },
          { step: '900', hex: '#532610', dark: true },
        ])}
      </div>

      <h3 style={{marginTop: 'var(--sp-10)'}}>Usage discipline</h3>
      <div className="dodont">
        <div className="do">
          <div className="label">Color does this</div>
          <ul>
            <li>Navy carries headlines, the wordmark, and inverse hero surfaces</li>
            <li>Blue is interactive — links, primary buttons, active tabs</li>
            <li>Sky highlights, fills illustrations, and accents data</li>
            <li>Slate is body text, borders, and meta — always cool, never warm gray</li>
            <li>Orange flags one moment per view: a CTA, an outlier, a "new"</li>
          </ul>
        </div>
        <div className="dont">
          <div className="label">Color never does this</div>
          <ul>
            <li>Orange backgrounds on cards, headers, or sections</li>
            <li>Multi-orange CTAs in the same view (loses meaning)</li>
            <li>Pure black or pure gray for body text</li>
            <li>Gradient backgrounds across whole surfaces</li>
            <li>Rainbow palettes in data viz — navy / sky / slate / orange-for-outliers</li>
          </ul>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { LogoSection, ColorSection });

// global helpers
window.copyToClipboard = function(text) {
  navigator.clipboard?.writeText(text);
  showToast(`Copied ${text}`);
};
window.copySwatch = function(e, hex) {
  navigator.clipboard?.writeText(hex);
  const el = e.currentTarget;
  el.classList.add('copied');
  setTimeout(() => el.classList.remove('copied'), 1200);
  showToast(`Copied ${hex}`);
};
window.showToast = function(msg) {
  let t = document.getElementById('__toast');
  if (!t) {
    t = document.createElement('div');
    t.id = '__toast';
    t.className = 'toast';
    document.body.appendChild(t);
  }
  t.textContent = msg;
  t.classList.add('show');
  clearTimeout(window.__toastT);
  window.__toastT = setTimeout(() => t.classList.remove('show'), 1600);
};