function About() {
  const tabs = [
    {
      label: "Who we are",
      text: "Base 38 is small on purpose. Steven Bezemer founded it after a decade in operations at companies that were too big to move and too tired to try. The whole pitch: act like a senior team member for a fraction of the cost, ship one useful thing at a time, and refuse to do anything that smells like consulting theatre."
    },
    {
      label: "Why \"38\"?",
      text: "It's the latitude that runs through the towns we grew up in — and a reminder to keep our feet on the ground. AI is changing fast, but small businesses run on trust, margin, and Tuesday. We try not to forget that."
    },
    {
      label: "How we charge",
      text: "Two ways. Fixed-price pilots from $4.5k for the first one — you know exactly what you're getting before we start. Or a small monthly retainer once we're embedded. No lock-ins, no platform fees, no \"licence\" you'll forget you're paying for."
    },
    {
      label: "What we won't do",
      text: "We won't sell you a chatbot you don't need. We won't replace people with worse versions of themselves. We won't ghost you after the invoice clears. And we won't pretend AI fixes a process that was already broken — sometimes the answer is a spreadsheet."
    },
  ];

  const [active, setActive] = useState(0);
  const [typed, setTyped] = useState("");

  useEffect(() => {
    const target = tabs[active].text;
    setTyped("");
    let i = 0;
    const id = setInterval(() => {
      i += Math.max(1, Math.floor(target.length / 90));
      if (i >= target.length) {
        setTyped(target);
        clearInterval(id);
      } else {
        setTyped(target.slice(0, i));
      }
    }, 18);
    return () => clearInterval(id);
  }, [active]);

  return (
    <section className="about" id="about">
      <div className="container">
        <div className="about-wrap">
          <div className="about-photo-card reveal">
            <div className="photo" role="img" aria-label="Steven Bezemer, founder" />
            <div className="credentials">
              <div className="name">Steven Bezemer</div>
              <div className="role">Founder · AI Strategist</div>
            </div>
          </div>

          <div className="about-chat reveal delay-1">
            <span className="eyebrow">About us</span>
            <h2 className="h-section">A boutique AI partner — not an enterprise sales machine.</h2>

            <div className="chat-tabs">
              {tabs.map((t, i) => (
                <button key={i} className={"chat-tab" + (i === active ? " active" : "")} onClick={() => setActive(i)}>
                  {t.label}
                </button>
              ))}
            </div>

            <div className="chat-bubble">
              <span className="typed-text">{typed}</span>
              {typed.length < tabs[active].text.length && <span className="cursor" />}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.About = About;