// ============================================================================
// Traduality Branding Guidelines — sections (part 1: foundations)
// ============================================================================

const Hero = () => (
  <section className="hero">
    <div className="hero-inner">
      <div>
        <div className="eyebrow">Traduality Language Solutions · Brand book v1.0</div>
        <h1>Get closer to your people.</h1>
        <p className="lead">
          The brand foundations for the multicultural member experience platform built for credit unions.
          What we sound like, what we look like, and what we never call ourselves.
        </p>
        <div className="hero-meta">
          <div><b>Last updated</b>May 2026</div>
          <div><b>Maintained by</b>Diego Achio, CEO</div>
          <div><b>Audience</b>Internal · partners · vendors</div>
        </div>
      </div>
      <div className="hero-mark">
        <img src="assets/traduality-icon-white.png" alt="Traduality mark" />
      </div>
    </div>
  </section>
);

const TaglineBand = () => {
  const phrase = (
    <span>
      Get closer to your people. <span className="dot"></span>
    </span>
  );
  return (
    <section className="tagline-band">
      <div className="tagline-track">
        {phrase}{phrase}{phrase}{phrase}
      </div>
    </section>
  );
};

const WhoWeAre = () => (
  <section className="guide" id="who-we-are">
    <div className="eyebrow"><span className="section-num">01</span>Who we are</div>
    <h2>A multicultural member experience platform.</h2>
    <p className="lead">
      Traduality makes it possible for credit union employees to serve, engage, and build credibility
      with non-English-speaking members across every touchpoint — branches, contact center,
      back office, and community outreach.
    </p>

    <div className="callout warning" style={{marginTop: 'var(--sp-7)'}}>
      <div className="callout-icon">!</div>
      <div className="callout-body">
        <b>Critical positioning rule.</b><br/>
        We are <b>not</b> a translation company, translation agency, translation service, or interpretation service.
        Never describe Traduality with the words <i>translation</i>, <i>interpretation</i>, <i>translator</i>, or <i>interpreter</i>.
        We are a <b>multicultural member experience platform</b>.
      </div>
    </div>

    <h3 style={{marginTop: 'var(--sp-9)'}}>Our vision</h3>
    <p className="lead">
      A United States where coming from a different culture or speaking a different language doesn't
      mean undergoing an inferior member experience.
    </p>

    <h3 style={{marginTop: 'var(--sp-9)'}}>How we describe what we do</h3>
    <div className="dodont">
      <div className="do">
        <div className="label">Use this language</div>
        <ul>
          <li>"Multicultural member experience platform"</li>
          <li>"Makes it possible for employees to communicate with non-English-speaking members"</li>
          <li>"Culturally responsive member service"</li>
          <li>"Member experience equity"</li>
          <li>"Relationship-enabling, friction-reducing"</li>
          <li>"Service consistency across every language"</li>
        </ul>
      </div>
      <div className="dont">
        <div className="label">Never say</div>
        <ul>
          <li>"Translation company / agency / service"</li>
          <li>"Interpretation service"</li>
          <li>"Inclusion / inclusivity / DEI"</li>
          <li>"Translator app" or "interpreter tool"</li>
          <li>Water metaphors (bubbling, resurfacing, floating)</li>
          <li>"Diverse populations" as a euphemism</li>
        </ul>
      </div>
    </div>

    <p style={{marginTop: 'var(--sp-6)', maxWidth: 720, color: 'var(--fg3)', fontSize: 'var(--fs-sm)'}}>
      The DEI vocabulary creates political friction with credit unions. Stay in the language of
      <i> service quality</i>, <i>member experience</i>, and <i>community credibility</i> — that's where the boards live.
    </p>
  </section>
);

const ProductLine = () => (
  <section className="guide" id="product">
    <div className="eyebrow"><span className="section-num">02</span>Product line</div>
    <h2>Fire Lingo is the AI. Traduality is the company.</h2>
    <p className="intro">
      Always lockstep: <b>Fire Lingo</b> branded products live <i>under</i> the Traduality platform.
      Use the full product name on first reference; abbreviations are fine internally.
    </p>

    <div className="product-grid">
      <div className="product-card">
        <div className="product-tag">FLF2F · Tablet</div>
        <div className="product-name">Fire Lingo Face-to-Face</div>
        <div className="product-tag-sub">In-branch tablet</div>
        <p className="product-desc">
          The employee picks a language, presses and holds the on-screen button, and speaks.
          Designed to help employees <b>build relationships</b> — not to keep members staring at a screen.
        </p>
        <div className="product-surface">Surface · Tablet (landscape)</div>
      </div>

      <div className="product-card">
        <div className="product-tag">FLCC · Contact Center</div>
        <div className="product-name">Fire Lingo Contact Center</div>
        <div className="product-tag-sub">Genesys · Talkdesk · RingCentral · Avaya · Five9 · NICE · AWS Connect · 8x8</div>
        <p className="product-desc">
          Fire Lingo joins live calls when a member calls in speaking a different language —
          simultaneous, conversational, agent-side.
        </p>
        <div className="product-surface">Surface · Agent desktop</div>
      </div>

      <div className="product-card">
        <div className="product-tag">FLC · Cloud</div>
        <div className="product-name">Fire Lingo Cloud</div>
        <div className="product-tag-sub">Documents · spreadsheets · decks · video · audio · Adobe</div>
        <p className="product-desc">
          Employees upload any file type and receive a vetted, human-reviewed final file in the
          target language.
        </p>
        <div className="product-surface">Surface · Desktop web</div>
      </div>

      <div className="product-card">
        <div className="product-tag">FLD · Dashboard</div>
        <div className="product-name">Fire Lingo Dashboard</div>
        <div className="product-tag-sub">Connected to FLF2F · FLCC · FLC</div>
        <p className="product-desc">
          Conversations per branch, by agent, by language. Topic trends. Member and employee feedback.
          Quarterly reports. The strategic layer above every Fire Lingo session.
        </p>
        <div className="product-surface">Surface · Desktop web</div>
      </div>

    </div>

    <div className="callout" style={{marginTop: 'var(--sp-7)'}}>
      <div className="callout-icon">i</div>
      <div className="callout-body">
        <b>How we're different from free translation tools.</b><br/>
        We don't compete on translation quality. We compete on <b>member experience</b>: natural voices that feel human,
        relationship-building over device-staring, customizable to the terminology each credit union actually uses,
        and designed around credit union workflows.
      </div>
    </div>
  </section>
);

Object.assign(window, { Hero, TaglineBand, WhoWeAre, ProductLine });