/* eslint-disable */
// Personnel = about. Editorial 2-column with sticky stat sidebar.
function Personnel() {
  return (
    <section className="section personnel" id="personnel">
      <div className="container">
        <div className="section-label">
          <span className="num">§ 02</span>
          <span>// Personnel</span>
          <span className="tag">FILE-02</span>
        </div>

        <h2 className="personnel__heading reveal">
          An operator's <em>holding company.</em>
        </h2>

        <div className="personnel__grid">
          <div className="personnel__body reveal" data-delay="2">
            <p>
              <strong>Whiskey Tango Industries is the parent entity for a portfolio of
              independent consumer brands.</strong> Each vertical operates as its own
              company — with its own audience, its own P&amp;L, and its own
              standard of work — under a single ownership structure designed
              to keep overhead light and decisions fast.
            </p>
            <p>
              The name is intentional. <em>Whiskey</em> and <em>Tango</em> are the
              NATO phonetic alphabet letters for <strong>W</strong> and <strong>T</strong> —
              the kind of language you pick up around radios, aircraft,
              and people who don't have time to repeat themselves. WTI is built
              by an operator, run with that sensibility, and not particularly
              interested in taking itself too seriously.
            </p>
            <p>
              We don't take outside capital. We don't take on clients. Every
              brand under this roof exists because we wanted it to exist —
              and we own it outright. <em>That arrangement is the whole point.</em>
            </p>
          </div>

          <aside className="personnel__sidebar reveal" data-delay="3">
            <div className="personnel__sidebar-label">
              <span>Snapshot</span>
              <span>FILE-02-A</span>
            </div>
            <div className="personnel__stats">
              <Stat value="03" label="Active Verticals" />
              <Stat value="TX" label="Jurisdiction" />
              <Stat value="100%" label="Independently Owned" />
              <Stat value="00" label="Outside Investors" />
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

function Stat({ value, label }) {
  return (
    <div className="personnel__stat">
      <span className="personnel__stat-value">{value}</span>
      <span className="personnel__stat-label">{label}</span>
    </div>
  );
}

window.Personnel = Personnel;
