// Ch.03 wrapper: tab strip → one tool in focus at a time

const TOOLS = [
  {
    id: "fee",
    label: "Fee Calculator",
    sub: "What to charge",
    color: "#d4a64a",
    tip: "Enter your role, deal type, and stream count, get a fair producer fee range instantly.",
  },
  {
    id: "netnet",
    label: "Net-Net Take-Home",
    sub: "After splits & taxes",
    color: "#b889ff",
    tip: "See how much you actually keep after publisher splits, manager cuts, and taxes. The number most producers never calculate.",
  },
  {
    id: "curve",
    label: "10-Year Curve",
    sub: "Career income projection",
    color: "#7acf99",
    tip: "Model your catalog growth over a decade. Add placements year by year and watch compounding royalties build.",
  },
];

function YourNumbers() {
  const [active, setActive] = React.useState("fee");

  return (
    <>
      <section className="section tight" style={{ paddingBottom: 0 }}>
        <div className="page">
          <GlassSegmented
            items={TOOLS.map((t, i) => ({
              id: t.id,
              num: String(i + 1).padStart(2, "0"),
              label: t.label,
              sub: t.sub,
              color: t.color,
            }))}
            active={active}
            onChange={setActive}
            ariaLabel="Your Numbers tools"
          />
        </div>
      </section>

      <div key={active}>
        {active === "fee"    && <Calculator embedded />}
        {active === "netnet" && <NetNetSection embedded />}
        {active === "curve"  && <CareerProjection embedded />}
      </div>
    </>
  );
}

window.YourNumbers = YourNumbers;