// ============================================================================
// Traduality Branding Guidelines: sections (part 5, marketing)
// ============================================================================

// ---------- Social media ----------
const SocialMediaSection = () => (
  <section className="guide" id="social">
    <div className="eyebrow"><span className="section-num">12</span>Social media</div>
    <h2>Posts that build relationships, not impressions.</h2>
    <p className="intro">
      Social keeps Traduality visible to the credit-union community and gives partner credit
      unions ready-to-post templates they can launch with. Same voice as the rest of the brand,
      with one carve-out for emoji.
    </p>

    <h3 style={{marginTop: 'var(--sp-9)'}}>Channels</h3>
    <p style={{maxWidth: 760, color: 'var(--fg2)'}}>
      We're a B2B company. Almost everything we post lives on <b>LinkedIn</b>, where the
      credit-union audience reads industry news, partner spotlights, member stories, hires, and
      product updates. Facebook covers a narrower slice: big news worth a wider net (a major
      partnership, a milestone) and job postings, especially for our Mexico-based audiences
      where Facebook still outranks LinkedIn for professional reach.
    </p>
    <div className="product-grid" style={{marginTop: 'var(--sp-5)'}}>
      <div className="product-card">
        <div className="product-tag">Primary</div>
        <div className="product-name">LinkedIn</div>
        <p className="product-desc">
          The B2B credit-union conversation. Member stories, partner launches, product news,
          hires and milestones, founder perspective. The home of our credibility with prospective
          customers.
        </p>
      </div>
      <div className="product-card">
        <div className="product-tag">Secondary</div>
        <div className="product-name">Facebook</div>
        <p className="product-desc">
          Big news worth a wider net and job postings. Especially relevant for our Mexico-based
          audiences, where Facebook still outranks LinkedIn for professional reach.
        </p>
      </div>
    </div>

    <h3 style={{marginTop: 'var(--sp-9)'}}>Voice on social</h3>
    <p style={{maxWidth: 720}}>
      Same warm, competent voice as the rest of the brand: sentence case, member-named, no hype.
      One carve-out:
    </p>
    <div className="callout" style={{marginTop: 'var(--sp-5)'}}>
      <div className="callout-icon">i</div>
      <div className="callout-body">
        <b>Emoji are OK on Traduality's own social posts.</b><br/>
        Use them sparingly and purposefully. A 🇪🇸 next to a Spanish member story, a 🎉 on a
        hiring announcement, a 🤝 on a partnership post. Never decorative, never as substitutes
        for icons, and never in product UI, partner co-branded templates, sales decks, or
        investor materials.
      </div>
    </div>

    <h3 style={{marginTop: 'var(--sp-9)'}}>What we post</h3>
    <div className="dodont">
      <div className="do">
        <div className="label">Post types</div>
        <ul>
          <li><b>Announcements:</b> achievements, new hires, open roles, milestones</li>
          <li><b>Partner spotlights:</b> new credit-union partnerships, launch posts</li>
          <li><b>Member stories:</b> named members, with consent, framed around relationship</li>
          <li><b>Product news:</b> Fire Lingo updates, new contact-center integrations, dashboard releases</li>
        </ul>
      </div>
      <div className="dont">
        <div className="label">Don't post</div>
        <ul>
          <li>"Translation" or "interpretation" framing of any kind</li>
          <li>DEI, inclusion, or diversity language</li>
          <li>Before/after teardowns of free translation tools</li>
          <li>Generic motivational content disconnected from credit unions</li>
          <li>Member faces or stories without explicit consent</li>
        </ul>
      </div>
    </div>

    <h3 style={{marginTop: 'var(--sp-9)'}}>Templates partners use</h3>
    <p style={{maxWidth: 760}}>
      When a credit union launches with Traduality, the media kit ships ready-to-post visual
      templates: <b>vertical for Facebook and Instagram</b>, and <b>square for LinkedIn</b>.
      Partners download them from their <b>Multicultural Member Experience Dashboard</b>
      (Fire Lingo Dashboard, FLD) and personalize for their brand and language mix.
    </p>
    <div className="callout" style={{marginTop: 'var(--sp-5)'}}>
      <div className="callout-icon">i</div>
      <div className="callout-body">
        <b>Why partner templates use Manrope and Poppins, not Nunito and Inter.</b><br/>
        Shared social templates are built in <b>Manrope</b> (display) and <b>Poppins</b> (body),
        intentionally neutral typefaces so partner credit unions can co-brand the post with their
        own typography without a clash. Internally, for posts published by Traduality, we use the
        same template style with our brand fonts: <b>Nunito</b> and <b>Inter</b>.
      </div>
    </div>

    <h3 style={{marginTop: 'var(--sp-9)'}}>Visual rules</h3>
    <div className="dodont">
      <div className="do">
        <div className="label">Visual discipline</div>
        <ul>
          <li>Navy dominant; orange only as a single highlight per post</li>
          <li>Logo at the top, centered for Traduality posts; partner-left and Traduality-right when co-branded</li>
          <li>Photography per the Imagery section: real people, real branches, no stock</li>
          <li>Vertical for Facebook and Instagram. Square for LinkedIn.</li>
        </ul>
      </div>
      <div className="dont">
        <div className="label">Never on social</div>
        <ul>
          <li>Recolor or distort the Traduality lockup</li>
          <li>Use orange as a background color block</li>
          <li>"International business" globe-and-handshake stock imagery</li>
          <li>Crop the logo or strip the tagline at small sizes</li>
        </ul>
      </div>
    </div>

    <h3 style={{marginTop: 'var(--sp-9)'}}>When partners post about Traduality</h3>
    <div className="dodont">
      <div className="do">
        <div className="label">Partners should</div>
        <ul>
          <li>Use the lockup as provided in the media kit (color or white)</li>
          <li>Use approved language: "multicultural member experience platform"</li>
          <li>Tag <b>@Traduality</b> on Facebook and LinkedIn</li>
          <li>Mirror credit-union vocabulary: members, retail, branches</li>
          <li>Personalize the green-marked layers in templates: their logo, brand colors, language list</li>
        </ul>
      </div>
      <div className="dont">
        <div className="label">Partners should not</div>
        <ul>
          <li>Recolor the <b>Traduality lockup</b> itself. It stays navy or white.</li>
          <li>Modify the wordmark, the mark, or the tagline</li>
          <li>Describe Traduality as a "translation service" or "interpreter app"</li>
          <li>Use DEI, inclusion, or diversity framing in posts about us</li>
        </ul>
      </div>
    </div>
    <p style={{maxWidth: 720, color: 'var(--fg3)', fontSize: 'var(--fs-sm)', marginTop: 'var(--sp-5)'}}>
      Personalizing templates is the whole point. Partners change the green-marked layers (their
      logo, language list, brand colors) and keep the Traduality lockup, voice, and core layout
      intact. The recolor rule applies to <i>our mark</i>, not to the rest of the template.
    </p>

    <h3 style={{marginTop: 'var(--sp-9)'}}>Hashtags</h3>
    <p style={{maxWidth: 720}}>
      Default set on Traduality posts. Add partner-specific or campaign-specific tags when relevant.
    </p>
    <div style={{display: 'flex', flexWrap: 'wrap', gap: 'var(--sp-2)', marginTop: 'var(--sp-4)'}}>
      {['#traduality', '#creditunions', '#peoplehelpingpeople'].map(h => (
        <span key={h} className="hashtag-pill">{h}</span>
      ))}
    </div>
  </section>
);

// ---------- Marketing materials ----------
const MarketingMaterialsSection = () => (
  <section className="guide" id="marketing">
    <div className="eyebrow"><span className="section-num">13</span>Marketing materials</div>
    <h2>What partners get when they launch with us.</h2>
    <p className="intro">
      Every credit-union partnership comes with a media kit: everything the partner needs to
      announce Traduality to their community and post to social with minimal lift. This brand book
      is the single source of truth; the kit ships pre-vetted assets ready to drop in.
    </p>

    <h3>Inside the partner media kit</h3>
    <div className="download-grid" style={{marginTop: 'var(--sp-5)'}}>
      <div className="download-card">
        <div className="download-title">Social media outline</div>
        <p className="download-desc">
          Pre-translated post copy in English and Spanish, ready to personalize. Includes a section
          listing local consulates and community organizations the credit union can collaborate with
          on launch outreach. Add languages relevant to the partner's service area.
        </p>
        <div className="download-meta"><span>DOCX</span></div>
      </div>
      <div className="download-card">
        <div className="download-title">Press release · first draft</div>
        <p className="download-desc">
          A first-draft release the partner can edit, sign, and send to their local press list and
          credit-union trade publications.
        </p>
        <div className="download-meta"><span>DOCX</span></div>
      </div>
      <div className="download-card">
        <div className="download-title">Visual templates</div>
        <p className="download-desc">
          Generic, non-branded versions of the partnership announcement post. Vertical for Facebook
          and Instagram, square for LinkedIn. Built in Manrope + Poppins so partners can co-brand
          cleanly.
        </p>
        <div className="download-meta"><span>PNG</span><span>·</span><span>Editable</span></div>
      </div>
      <div className="download-card">
        <div className="download-title">Logo files</div>
        <p className="download-desc">
          Color and white versions of the Traduality lockup, sized for digital and print. Same files
          available in the Downloads section of this brand book.
        </p>
        <div className="download-meta"><span>PNG</span><span>·</span><span>JPG</span></div>
      </div>
    </div>

    <div className="callout warning" style={{marginTop: 'var(--sp-7)'}}>
      <div className="callout-icon">!</div>
      <div className="callout-body">
        <b>This brand book is canonical.</b><br/>
        If a file in the media kit ever conflicts with what's documented here at brand.traduality.com,
        follow the brand book. Older standalone media-kit files are being retired in favor of pointers
        back to this guide.
      </div>
    </div>

    <h3 style={{marginTop: 'var(--sp-9)'}}>How partners access the kit</h3>
    <p style={{maxWidth: 760}}>
      Partner credit unions get the media kit through their <b>Multicultural Member Experience
      Dashboard</b> (Fire Lingo Dashboard / FLD) once their account is provisioned. For pre-launch
      partnerships, custom co-brand needs, or anything not in the kit, contact{' '}
      <a href="mailto:elizabeth.eschler@traduality.com?cc=achiodiego@traduality.com">Elizabeth Eschler</a>
      {' '}and CC Diego.
    </p>

    <h3 style={{marginTop: 'var(--sp-9)'}}>Internal marketing materials</h3>
    <p style={{maxWidth: 760}}>
      For Traduality's own marketing (investor decks, conference one-pagers, sales collateral,
      newsletters, internal templates), use <b>Nunito</b> (display) and <b>Inter</b> (body), and
      follow every other rule in this brand book. The Manrope + Poppins typeface system applies
      only to the shared partner social templates.
    </p>
  </section>
);

Object.assign(window, { SocialMediaSection, MarketingMaterialsSection });