1import { useState } from 'react';
 2
 3export default function App() {
 4  const [tab, setTab] = useState('overview');
 5
 6  return (
 7    <main className="page">
 8      <nav className="tabs" role="tablist">
 9        <button
10          data-testid="tab-overview"
11          role="tab"
12          aria-selected={tab === 'overview'}
13          onClick={() => setTab('overview')}
14        >
15          Overview
16        </button>
17        <button
18          data-testid="tab-features"
19          role="tab"
20          aria-selected={tab === 'features'}
21          onClick={() => setTab('features')}
22        >
23          Features
24        </button>
25      </nav>
26
27      {tab === 'overview' && (
28        <section className="tab-panel" role="tabpanel">
29          <p>Default overview content. The hero lives in the Features tab.</p>
30        </section>
31      )}
32
33      {tab === 'features' && (
34        <section className="tab-panel" role="tabpanel">
35          <h1 className="hero-title">Features Hero</h1>
36          <p className="hero-hook">Lives in the non-default tab — only mounts when Features is active.</p>
37        </section>
38      )}
39    </main>
40  );
41}