// ============================================================================
// Traduality Branding Guidelines — sections (part 4: icons, imagery, lockups)
// ============================================================================

// ---------- Iconography ----------
const IconSection = () => {
  // simple inline lucide-style icons (stroke 1.75)
  const icons = [
    { name: 'message-circle', d: 'M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z' },
    { name: 'languages', d: 'm5 8 6 6 M4 14l6-6 2-3 M2 5h12 M7 2h1 M22 22l-5-10-5 10 M14 18h6' },
    { name: 'users', d: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2 M12 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0z M22 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75' },
    { name: 'mic', d: 'M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z M19 10v2a7 7 0 0 1-14 0v-2 M12 19v3' },
    { name: 'building-2', d: 'M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2 M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2 M10 6h4 M10 10h4 M10 14h4 M10 18h4' },
    { name: 'phone', d: 'M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z' },
    { name: 'file-text', d: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M16 13H8 M16 17H8 M10 9H8' },
    { name: 'bar-chart-3', d: 'M3 3v18h18 M18 17V9 M13 17V5 M8 17v-3' },
    { name: 'shield-check', d: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z M9 12l2 2 4-4' },
    { name: 'globe', d: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z M2 12h20 M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z' },
    { name: 'check-circle-2', d: 'M22 11.08V12a10 10 0 1 1-5.93-9.14 M22 4 12 14.01l-3-3' },
    { name: 'arrow-right', d: 'M5 12h14 M12 5l7 7-7 7' },
    { name: 'search', d: 'M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z M21 21l-4.35-4.35' },
    { name: 'settings', d: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z' },
    { name: 'bell', d: 'M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9 M13.73 21a2 2 0 0 1-3.46 0' },
    { name: 'headphones', d: 'M3 18v-6a9 9 0 0 1 18 0v6 M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3z M3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z' },
  ];

  return (
    <section className="guide" id="icons">
      <div className="eyebrow"><span className="section-num">08</span>Iconography</div>
      <h2>Lucide. 1.75 stroke. Rounded joins.</h2>
      <p className="intro">
        We use <a href="https://lucide.dev" target="_blank" rel="noopener">Lucide</a> as our icon system —
        the 1.75px stroke and humanist geometry match the wordmark. Inherit <code>currentColor</code>;
        never recolor outside the palette; never rotate or mirror; and never use emoji as icons.
      </p>

      <div className="icon-grid">
        {icons.map(i => (
          <div className="icon-tile" key={i.name} title={i.name}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
              <path d={i.d} />
            </svg>
          </div>
        ))}
      </div>

      <h3 style={{marginTop: 'var(--sp-9)'}}>Sizes</h3>
      <div className="icon-size-row">
        {[
          { px: 16, label: 'Inline with text' },
          { px: 20, label: 'Default UI' },
          { px: 24, label: 'Nav rail' },
          { px: 32, label: 'Empty states' },
        ].map(s => (
          <div className="icon-size" key={s.px}>
            <svg width={s.px} height={s.px} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
              <path d="M22 4 12 14.01l-3-3" />
            </svg>
            <span>{s.px} px</span>
            <span style={{textTransform: 'uppercase', letterSpacing: '0.08em', fontSize: 9, color: 'var(--fg3)'}}>{s.label}</span>
          </div>
        ))}
      </div>

      <h3 style={{marginTop: 'var(--sp-9)'}}>Language flags</h3>
      <p style={{maxWidth: 720, color: 'var(--fg2)'}}>
        For language pickers, use clean flat SVG flags at 16–20px height — slightly desaturated to sit
        peacefully next to the blues. Never emoji flags; older members and compliance officers read them as unserious.
      </p>
    </section>
  );
};

// ---------- Imagery ----------
const ImagerySection = () => (
  <section className="guide" id="imagery">
    <div className="eyebrow"><span className="section-num">09</span>Imagery</div>
    <h2>Real people. Real institutions. No stock.</h2>
    <p className="intro">
      Photography shows real employees and real members in real credit-union contexts — tellers with
      members, contact-center agents on calls, loan officers at desks. Cool-neutral grade, light grain
      acceptable. Warm but never staged.
    </p>

    <div className="imagery-grid">
      <div className="imagery-tile use">
        <div className="imagery-tile-content">
          <div className="imagery-tag">Use</div>
          <div className="imagery-desc">Teller and member at the counter, mid-conversation, natural light.</div>
        </div>
      </div>
      <div className="imagery-tile use">
        <div className="imagery-tile-content">
          <div className="imagery-tag">Use</div>
          <div className="imagery-desc">Contact-center agent at desk, headset on, soft daylight.</div>
        </div>
      </div>
      <div className="imagery-tile use">
        <div className="imagery-tile-content">
          <div className="imagery-tag">Use</div>
          <div className="imagery-desc">Members in community — outside the branch, in line, walking in.</div>
        </div>
      </div>
      <div className="imagery-tile avoid">
        <div className="imagery-tile-content">
          <div className="imagery-tag">Avoid</div>
          <div className="imagery-desc">Oversaturated stock with three smiling people and a tablet.</div>
        </div>
      </div>
      <div className="imagery-tile avoid">
        <div className="imagery-tile-content">
          <div className="imagery-tag">Avoid</div>
          <div className="imagery-desc">Globe-and-handshake "international business" stock photography.</div>
        </div>
      </div>
      <div className="imagery-tile avoid">
        <div className="imagery-tile-content">
          <div className="imagery-tag">Avoid</div>
          <div className="imagery-desc">AI-generated illustrations, hand-drawn icons, vector clip art.</div>
        </div>
      </div>
    </div>

    <div className="dodont">
      <div className="do">
        <div className="label">Photography rules</div>
        <ul>
          <li>Real people in real institutional environments</li>
          <li>Cool-neutral color grade — pulled toward navy</li>
          <li>Faces over devices: relationships are the story</li>
          <li>Natural light, subtle grain, real depth of field</li>
        </ul>
      </div>
      <div className="dont">
        <div className="label">Never</div>
        <ul>
          <li>Stock images with the laughing-at-laptop look</li>
          <li>Hand-drawn illustrations of people or scenes</li>
          <li>Generated imagery posing as photography</li>
          <li>Decorative patterns, textures, or background art</li>
        </ul>
      </div>
    </div>
  </section>
);

// ---------- Co-branding ----------
const CoBrandingSection = () => (
  <section className="guide" id="cobranding">
    <div className="eyebrow"><span className="section-num">10</span>Co-branding</div>
    <h2>Lockups with credit-union partners.</h2>
    <p className="intro">
      When pairing the Traduality wordmark with a partner credit union, sit them on the same baseline,
      separate them with a thin divider equal to the wordmark cap-height in width, and size both marks
      so they read with equal visual weight — neither one should dominate.
    </p>

    <div className="lockup-grid">
      <div className="lockup">
        <div className="lockup-row">
          <img src="assets/traduality-logo.jpg" alt="Traduality" style={{height: 56}} />
          <div className="divider-line" style={{height: 44}}></div>
          <img src="assets/partner-metro-cu.png" alt="Metro Credit Union" style={{height: 44}} />
        </div>
        <div className="lockup-caption">Horizontal · light surface</div>
      </div>
      <div className="lockup dark">
        <div className="lockup-row">
          <img src="assets/traduality-logo-white.png" alt="Traduality" style={{height: 56}} />
          <div className="divider-line" style={{height: 44}}></div>
          <img src="assets/partner-metro-cu-white.png" alt="Metro Credit Union" style={{height: 44}} />
        </div>
        <div className="lockup-caption" style={{color: 'rgba(255,255,255,.6)'}}>Horizontal · navy surface</div>
      </div>
    </div>

    <div className="callout" style={{marginTop: 'var(--sp-7)'}}>
      <div className="callout-icon">i</div>
      <div className="callout-body">
        <b>White-label note.</b> Some credit unions prefer Fire Lingo to ship under their own brand at
        the member-facing surface. In those contexts, Traduality lives in the footer — "Powered by Traduality"
        in slate, never as a co-equal partner mark. Internal admin surfaces (FLD, settings) keep full Traduality branding.
      </div>
    </div>
  </section>
);

// ---------- Quick reference / Footer link block ----------
const QuickRefSection = () => (
  <section className="guide" id="quick-ref">
    <div className="eyebrow"><span className="section-num">11</span>Quick reference</div>
    <h2>The five rules to never break.</h2>

    <div style={{display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 'var(--sp-4)', marginTop: 'var(--sp-6)'}}>
      {[
        { n: '01', t: 'Not a translation company', d: 'Multicultural member experience platform — every time.' },
        { n: '02', t: 'Members, not customers', d: 'Mirror the language credit unions use for their own people.' },
        { n: '03', t: 'No DEI framing', d: 'Service quality, member experience equity, community credibility.' },
        { n: '04', t: 'Orange is highlight only', d: 'One CTA per view. Never a surface fill larger than a badge.' },
        { n: '05', t: 'Fire Lingo is the AI', d: 'Traduality is the company. Fire Lingo powers the product line.' },
      ].map(r => (
        <div key={r.n} style={{
          background: 'var(--td-navy)',
          color: '#fff',
          padding: 'var(--sp-6)',
          borderRadius: 'var(--radius-lg)',
          display: 'flex',
          flexDirection: 'column',
          gap: 'var(--sp-2)',
          minHeight: 220,
        }}>
          <div style={{fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--td-sky)', letterSpacing: '0.08em'}}>{r.n}</div>
          <div style={{fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20, lineHeight: 1.2, marginBottom: 'var(--sp-2)'}}>{r.t}</div>
          <div style={{fontSize: 13, color: 'rgba(255,255,255,.7)', lineHeight: 1.5}}>{r.d}</div>
        </div>
      ))}
    </div>
  </section>
);

// ---------- Downloads ----------
const DownloadsSection = () => {
  // Lucide-style icon paths (1.75 stroke, rounded joins). Each is one or more <path d="...">.
  const ic = {
    package: 'm7.5 4.27 9 5.15 M21 8 12 13 3 8 M12 22V13 M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z',
    type: 'M4 7V4h16v3 M9 20h6 M12 4v16',
    braces: 'M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5a2 2 0 0 0 2 2h1 M16 21h1a2 2 0 0 0 2-2v-5a2 2 0 0 1 2-2 2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1',
    code: 'm16 18 6-6-6-6 M8 6l-6 6 6 6',
    fileText: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M16 13H8 M16 17H8 M10 9H8',
    printer: 'M6 9V2h12v7 M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 0 2 2v5a2 2 0 0 1-2 2h-2 M6 14h12v8H6z',
    download: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4 M7 10l5 5 5-5 M12 15V3',
    external: 'M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6 M15 3h6v6 M10 14 21 3',
  };

  const Icon = ({ d }) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
      <path d={d} />
    </svg>
  );

  const printPage = () => window.print();

  return (
    <section className="guide" id="downloads">
      <div className="eyebrow"><span className="section-num">12</span>Downloads</div>
      <h2>Brand assets, ready to use.</h2>
      <p className="intro">
        Everything marketing, sales, and product teams need to keep work on-brand without re-typing,
        re-screenshotting, or guessing at color codes. All files are pre-vetted against the rules in this book.
      </p>

      <div className="download-grid">

        <div className="download-card">
          <div className="download-icon"><Icon d={ic.package} /></div>
          <div className="download-title">Logo pack</div>
          <p className="download-desc">
            Color and reverse lockups plus the standalone mark, with a usage README covering
            clearspace, minimum size, and what not to do.
          </p>
          <div className="download-meta"><span>ZIP</span><span>·</span><span>4 files + README</span></div>
          <div className="download-actions">
            <a className="download-btn" href="downloads/traduality-logos.zip" download>
              <Icon d={ic.download} /> Download
            </a>
          </div>
        </div>

        <div className="download-card">
          <div className="download-icon"><Icon d={ic.type} /></div>
          <div className="download-title">Font kit</div>
          <p className="download-desc">
            Nunito (display) and Inter (UI) — variable TTFs with all weights, plus the SIL OFL
            licenses. Or grab them from Google Fonts directly.
          </p>
          <div className="download-meta"><span>ZIP</span><span>·</span><span>Nunito + Inter · OFL</span></div>
          <div className="download-actions">
            <a className="download-btn" href="downloads/traduality-fonts.zip" download>
              <Icon d={ic.download} /> Download
            </a>
            <a className="download-btn secondary" href="https://fonts.google.com/specimen/Nunito" target="_blank" rel="noopener">
              <Icon d={ic.external} /> Google Fonts
            </a>
          </div>
        </div>

        <div className="download-card">
          <div className="download-icon"><Icon d={ic.code} /></div>
          <div className="download-title">Design tokens · CSS</div>
          <p className="download-desc">
            Drop-in stylesheet of every color, type, spacing, radius, shadow, and motion variable.
            Import once and use <code>var(--td-navy)</code> everywhere.
          </p>
          <div className="download-meta"><span>CSS</span><span>·</span><span>308 lines</span></div>
          <div className="download-actions">
            <a className="download-btn" href="colors_and_type.css" download="traduality-tokens.css">
              <Icon d={ic.download} /> Download
            </a>
            <a className="download-btn secondary" href="colors_and_type.css" target="_blank" rel="noopener">
              <Icon d={ic.external} /> View
            </a>
          </div>
        </div>

        <div className="download-card">
          <div className="download-icon"><Icon d={ic.braces} /></div>
          <div className="download-title">Design tokens · JSON</div>
          <p className="download-desc">
            The same tokens in JSON for tooling — Figma Tokens plugin, Style Dictionary, Tailwind
            config generation, design ops automation.
          </p>
          <div className="download-meta"><span>JSON</span><span>·</span><span>Tooling-ready</span></div>
          <div className="download-actions">
            <a className="download-btn" href="downloads/traduality-tokens.json" download>
              <Icon d={ic.download} /> Download
            </a>
            <a className="download-btn secondary" href="downloads/traduality-tokens.json" target="_blank" rel="noopener">
              <Icon d={ic.external} /> View
            </a>
          </div>
        </div>

        <div className="download-card">
          <div className="download-icon"><Icon d={ic.fileText} /></div>
          <div className="download-title">Boilerplate copy</div>
          <p className="download-desc">
            Pre-approved descriptions in three lengths, product one-liners, founder bios, legal
            entity names, and the positioning rules to never violate.
          </p>
          <div className="download-meta"><span>TXT</span><span>·</span><span>Marketing &amp; PR</span></div>
          <div className="download-actions">
            <a className="download-btn" href="downloads/traduality-boilerplate.txt" download>
              <Icon d={ic.download} /> Download
            </a>
            <a className="download-btn secondary" href="downloads/traduality-boilerplate.txt" target="_blank" rel="noopener">
              <Icon d={ic.external} /> View
            </a>
          </div>
        </div>

        <div className="download-card">
          <div className="download-icon"><Icon d={ic.printer} /></div>
          <div className="download-title">Brand book PDF</div>
          <p className="download-desc">
            Save this entire brand book as a PDF for offline reference, partner shares, or a
            printed copy. Uses the page's print stylesheet automatically.
          </p>
          <div className="download-meta"><span>PDF</span><span>·</span><span>Cmd / Ctrl + P</span></div>
          <div className="download-actions">
            <button className="download-btn" onClick={printPage}>
              <Icon d={ic.printer} /> Print / Save as PDF
            </button>
          </div>
        </div>

      </div>

      <div className="callout" style={{marginTop: 'var(--sp-7)'}}>
        <div className="callout-icon">i</div>
        <div className="callout-body">
          <b>Need something not here?</b><br/>
          Vector logos (SVG / EPS / AI), email signature templates, slide decks, social post
          templates, photography licenses, or a partner co-brand lockup — email Diego at
          <a href="mailto:diego@traduality.com" style={{marginLeft: 4}}>diego@traduality.com</a>.
        </div>
      </div>
    </section>
  );
};

// ---------- Footer ----------
const Footer = () => (
  <footer className="guide-footer">
    <div className="inner">
      <div>
        <div className="footer-mark">Traduality</div>
        <p>Get closer to your people.</p>
        <p style={{fontSize: 12, color: 'rgba(255,255,255,.45)'}}>
          Traduality Language Solutions, Inc. · Bloomington, IN<br/>
          Traduality CUSO, LLC
        </p>
      </div>
      <div>
        <h5>Brand book</h5>
        <p><a href="#who-we-are" style={{color: 'rgba(255,255,255,.85)'}}>Who we are</a></p>
        <p><a href="#product" style={{color: 'rgba(255,255,255,.85)'}}>Product line</a></p>
        <p><a href="#logo" style={{color: 'rgba(255,255,255,.85)'}}>Logo</a></p>
        <p><a href="#color" style={{color: 'rgba(255,255,255,.85)'}}>Color</a></p>
        <p><a href="#voice" style={{color: 'rgba(255,255,255,.85)'}}>Voice and tone</a></p>
      </div>
      <div>
        <h5>Maintained by</h5>
        <p>Diego Achio, CEO</p>
        <p>Cynthia Herrera, CFO</p>
        <p>Matthew "strager" Glazar, CTO</p>
        <p style={{fontSize: 12, color: 'rgba(255,255,255,.45)', marginTop: 'var(--sp-4)'}}>
          v1.0 · Brand book · 2026
        </p>
      </div>
    </div>
  </footer>
);

Object.assign(window, { IconSection, ImagerySection, CoBrandingSection, QuickRefSection, DownloadsSection, Footer });