// ============================================================================
// Traduality Branding Guidelines — sections (part 3: type, voice, vocab, etc.)
// ============================================================================

// ---------- Typography ----------
const TypeSection = () => (
  <section className="guide" id="type">
    <div className="eyebrow"><span className="section-num">05</span>Typography</div>
    <h2>Nunito leads. Inter follows. Everything else is mono.</h2>
    <p className="intro">
      Display in <b>Nunito</b> — a rounded humanist geometric that picks up the wordmark's softness.
      UI body in <b>Inter</b> — neutral, screen-optimized, predictable. System mono only for IDs,
      timestamps, and codes. <a href="#" style={{color: 'var(--td-orange)'}}>Font flag:</a> these
      are substitutions until licensed brand fonts arrive.
    </p>

    <div className="card">
      <div className="type-spec">
        <div className="type-meta">
          <b>Display · H1</b>
          Nunito 800 · 72/77 · -0.02em
        </div>
        <div className="type-sample" style={{fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 72, lineHeight: 1.05, letterSpacing: '-0.02em'}}>
          Get closer to your people.
        </div>
      </div>
      <div className="type-spec">
        <div className="type-meta">
          <b>Display · H2</b>
          Nunito 800 · 44/50 · -0.015em
        </div>
        <div className="type-sample" style={{fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 44, lineHeight: 1.1}}>
          A platform for credit unions.
        </div>
      </div>
      <div className="type-spec">
        <div className="type-meta">
          <b>Display · H3</b>
          Nunito 700 · 28/36
        </div>
        <div className="type-sample" style={{fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, lineHeight: 1.3}}>
          Marta is ready to talk about her auto loan.
        </div>
      </div>
      <div className="type-spec">
        <div className="type-meta">
          <b>Lead</b>
          Inter 400 · 22/33
        </div>
        <div className="type-sample" style={{fontFamily: 'var(--font-sans)', fontSize: 22, lineHeight: 1.5, color: 'var(--fg2)'}}>
          We translated 14 pages into Vietnamese for tomorrow's appointment.
        </div>
      </div>
      <div className="type-spec">
        <div className="type-meta">
          <b>Body</b>
          Inter 400 · 15/25
        </div>
        <div className="type-sample" style={{fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.65, color: 'var(--fg2)', maxWidth: 600}}>
          We kept the terminology consistent with your last session — including how Marta likes us
          to refer to her auto loan. You're set.
        </div>
      </div>
      <div className="type-spec">
        <div className="type-meta">
          <b>Eyebrow</b>
          Inter 600 · 12 · 0.12em ALL CAPS
        </div>
        <div className="type-sample" style={{fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--td-blue)'}}>
          Fire Lingo — Face-to-Face
        </div>
      </div>
      <div className="type-spec">
        <div className="type-meta">
          <b>Mono</b>
          System mono · IDs and timestamps
        </div>
        <div className="type-sample" style={{fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--fg2)'}}>
          SES_a91c · 2026-05-04 14:32 · 00:04:18
        </div>
      </div>
    </div>

    <h3 style={{marginTop: 'var(--sp-9)'}}>Casing rules</h3>
    <div className="dodont">
      <div className="do">
        <div className="label">Casing</div>
        <ul>
          <li><b>Sentence case</b> for all UI: buttons, menus, toasts, dialog headers</li>
          <li><b>Title Case</b> only for proper product names: Fire Lingo, Face-to-Face, Contact Center</li>
          <li><b>ALL CAPS</b> only for eyebrows, tab labels, and the wordmark — always with 0.12em tracking</li>
        </ul>
      </div>
      <div className="dont">
        <div className="label">Don't</div>
        <ul>
          <li>Title Case in product UI ("Start A New Session")</li>
          <li>ALL CAPS body or button labels</li>
          <li>Italicize Spanish words as "foreign" — Traduality lives bilingually</li>
          <li>Roboto, Arial, system-default fallbacks in marketing surfaces</li>
        </ul>
      </div>
    </div>
  </section>
);

// ---------- Voice and Tone ----------
const VoiceSection = () => (
  <section className="guide" id="voice">
    <div className="eyebrow"><span className="section-num">06</span>Voice and tone</div>
    <h2>A bilingual ops lead who cares about the member.</h2>
    <p className="intro">
      We sound like a credit union operations lead who deeply cares about their members —
      not a consumer AI startup, not a stiff enterprise vendor. Warm. Competent. Institutional.
    </p>

    <div className="tone-matrix">
      <div className="tone-card">
        <div className="axis"><span className="we">Human</span><span className="not">Clinical</span></div>
        <div className="scale"><div className="marker" style={{left: '12%'}}></div></div>
        <div className="label">Human, not clinical</div>
        <p className="desc">"Let's get Marta connected" beats "Initiate translation session."</p>
      </div>
      <div className="tone-card">
        <div className="axis"><span className="we">Confident</span><span className="not">Clever</span></div>
        <div className="scale"><div className="marker" style={{left: '15%'}}></div></div>
        <div className="label">Confident, not clever</div>
        <p className="desc">No puns, no wordplay. The audience is regulators and members.</p>
      </div>
      <div className="tone-card">
        <div className="axis"><span className="we">Proud</span><span className="not">Performative</span></div>
        <div className="scale"><div className="marker" style={{left: '20%'}}></div></div>
        <div className="label">Proud of the mission</div>
        <p className="desc">Multicultural service is dignity. Copy should feel that.</p>
      </div>
      <div className="tone-card">
        <div className="axis"><span className="we">Specific</span><span className="not">Generic</span></div>
        <div className="scale"><div className="marker" style={{left: '18%'}}></div></div>
        <div className="label">Members are named</div>
        <p className="desc">Use the member's first name wherever possible — never "the customer."</p>
      </div>
    </div>

    <h3 style={{marginTop: 'var(--sp-9)'}}>Point of view</h3>
    <p>
      <b>"You"</b> = the employee. <span style={{color: 'var(--fg3)'}}>"You're connected to Marta in Spanish."</span><br/>
      <b>"We"</b> = Traduality the platform. <span style={{color: 'var(--fg3)'}}>"We kept your terminology consistent with last session."</span>
    </p>

    <h3 style={{marginTop: 'var(--sp-9)'}}>Voice in practice</h3>
    <div className="voice-stack">
      <div className="voice-sample use">
        <div className="voice-tag">We say</div>
        <div>
          <div className="voice-quote">"Marta is ready to talk about her auto loan."</div>
          <div className="voice-note">Member named. Specific. Warm.</div>
        </div>
      </div>
      <div className="voice-sample avoid">
        <div className="voice-tag">Not</div>
        <div>
          <div className="voice-quote">"Session initiated with customer #48291."</div>
          <div className="voice-note">Clinical. Anonymized. Wrong noun.</div>
        </div>
      </div>
      <div className="voice-sample use">
        <div className="voice-tag">We say</div>
        <div>
          <div className="voice-quote">"We translated 14 pages into Vietnamese."</div>
          <div className="voice-note">Plain, factual, proud of the work.</div>
        </div>
      </div>
      <div className="voice-sample avoid">
        <div className="voice-tag">Not</div>
        <div>
          <div className="voice-quote">"🎉 Translation job complete!"</div>
          <div className="voice-note">No emoji. No celebration confetti.</div>
        </div>
      </div>
      <div className="voice-sample use">
        <div className="voice-tag">We say</div>
        <div>
          <div className="voice-quote">"This term doesn't have a clean equivalent — we kept it in English and added a short note."</div>
          <div className="voice-note">Honest, transparent, helpful.</div>
        </div>
      </div>
      <div className="voice-sample avoid">
        <div className="voice-tag">Not</div>
        <div>
          <div className="voice-quote">"Untranslatable token retained."</div>
          <div className="voice-note">Cold. Tells the employee nothing useful.</div>
        </div>
      </div>
      <div className="voice-sample use">
        <div className="voice-tag">We say</div>
        <div>
          <div className="voice-quote">"Start a Face-to-Face session"</div>
          <div className="voice-note">Full product name. Verb-first. Clear.</div>
        </div>
      </div>
      <div className="voice-sample avoid">
        <div className="voice-tag">Not</div>
        <div>
          <div className="voice-quote">"Launch F2F"</div>
          <div className="voice-note">Internal jargon. Not for end users.</div>
        </div>
      </div>
    </div>

    <h3 style={{marginTop: 'var(--sp-9)'}}>Founder voice (for executive comms)</h3>
    <p style={{maxWidth: 720, color: 'var(--fg2)'}}>
      Diego's emails and outbound founder comms are casual and direct: no corporate filler, no virtual-assistant
      phrasing. Open with "Hey [Name], hope you're doing well" — close with "Looking forward to hearing from you!"
      when a reply is expected. A founder talking to another human, not a polished PR team.
    </p>

    <div className="callout warning">
      <div className="callout-icon">!</div>
      <div className="callout-body">
        <b>Hard nos.</b> No emoji in product UI or marketing. No "DEI," "inclusion," or "diversity" framing.
        No water metaphors ("bubbling this back," "resurfacing," "floating this back"). No idioms that don't
        translate ("knock it out of the park").
      </div>
    </div>
  </section>
);

// ---------- Vocabulary ----------
const VocabSection = () => (
  <section className="guide" id="vocab">
    <div className="eyebrow"><span className="section-num">07</span>Vocabulary</div>
    <h2>Use the words credit unions use.</h2>
    <p className="intro">
      Mirror the language of our customers. Credit unions don't say "customer," and they don't say "branches"
      when they mean their network. Match their vocabulary so we sound like a partner, not a vendor.
    </p>

    <div className="vocab">
      <div className="vocab-row head">
        <div className="vocab-cell">Use</div>
        <div className="vocab-cell">Avoid</div>
        <div className="vocab-cell">Why</div>
      </div>
      <div className="vocab-row">
        <div className="vocab-cell use">Member</div>
        <div className="vocab-cell avoid">Customer</div>
        <div className="vocab-cell why">Credit unions are member-owned cooperatives. Members, not customers — every time.</div>
      </div>
      <div className="vocab-row">
        <div className="vocab-cell use">Retail</div>
        <div className="vocab-cell avoid">Branch network · stores</div>
        <div className="vocab-cell why">"Retail" is what credit unions call their physical footprint at the org level.</div>
      </div>
      <div className="vocab-row">
        <div className="vocab-cell use">Branch</div>
        <div className="vocab-cell avoid">Location · office</div>
        <div className="vocab-cell why">A single physical site is still a "branch" inside the retail footprint.</div>
      </div>
      <div className="vocab-row">
        <div className="vocab-cell use">CUSO</div>
        <div className="vocab-cell avoid">Subsidiary · spin-off</div>
        <div className="vocab-cell why">Credit Union Service Organization — a real legal structure. Use the term.</div>
      </div>
      <div className="vocab-row">
        <div className="vocab-cell use">Multicultural member experience</div>
        <div className="vocab-cell avoid">Diversity · inclusion · DEI</div>
        <div className="vocab-cell why">DEI framing creates political friction. Keep it about service quality.</div>
      </div>
      <div className="vocab-row">
        <div className="vocab-cell use">Communicate with non-English-speaking members</div>
        <div className="vocab-cell avoid">Translate for · interpret for</div>
        <div className="vocab-cell why">We are not a translation service. We are a platform that enables communication.</div>
      </div>
      <div className="vocab-row">
        <div className="vocab-cell use">Multicultural member experience platform</div>
        <div className="vocab-cell avoid">Translation tool · interpreter app</div>
        <div className="vocab-cell why">The category we're building. Hold the line on this language.</div>
      </div>
      <div className="vocab-row">
        <div className="vocab-cell use">Fire Lingo (the AI)</div>
        <div className="vocab-cell avoid">The translator · the bot · the model</div>
        <div className="vocab-cell why">Fire Lingo is the AI that powers our product line. Name it.</div>
      </div>
      <div className="vocab-row">
        <div className="vocab-cell use">Member experience equity</div>
        <div className="vocab-cell avoid">Equity · equality (standalone)</div>
        <div className="vocab-cell why">We're talking about equal quality of service, not political concepts.</div>
      </div>
      <div className="vocab-row">
        <div className="vocab-cell use">Community credibility</div>
        <div className="vocab-cell avoid">Cultural competence</div>
        <div className="vocab-cell why">Credibility lands with credit-union boards. Keep it operational.</div>
      </div>
    </div>
  </section>
);

Object.assign(window, { TypeSection, VoiceSection, VocabSection });