// "Choose your lane" + Lane entry cards + Featured writer

const PERSONAL_TOPICS = [
  { t: "How to Build a 3-Month Emergency Fund", meta: "SAVINGS · 6 MIN", tag: "Foundations" },
  { t: "How to Negotiate a Salary Increase (Data-Backed Script)", meta: "CAREER · 7 MIN", tag: "Income" },
  { t: "How to Start Investing With $500", meta: "INVEST · 5 MIN", tag: "Markets" },
  { t: "How to Eliminate Credit Card Debt in 12 Months", meta: "DEBT · 11 MIN", tag: "Recovery" },
  { t: "How to Automate Your Savings (Set It and Forget It)", meta: "SAVINGS · 4 MIN", tag: "Systems" },
  { t: "How to Understand Your Credit Score (And Why It Matters)", meta: "CREDIT · 8 MIN", tag: "Foundations" },
];

const BUSINESS_TOPICS = [
  { t: "How to Set Up Accounting for Your Solo Business", meta: "BOOKS · 9 MIN", tag: "Setup" },
  { t: "How to Get Approved for a Business Line of Credit", meta: "CREDIT · 10 MIN", tag: "Capital" },
  { t: "How to Price Your Services Without Leaving Money on the Table", meta: "PRICING · 8 MIN", tag: "Revenue" },
  { t: "How to Calculate Your Real Profit Margin (Most People Get This Wrong)", meta: "MARGIN · 7 MIN", tag: "Revenue" },
  { t: "How to Separate Personal and Business Finances Legally", meta: "LEGAL · 6 MIN", tag: "Setup" },
  { t: "How to Read Financial Statements Like a Founder", meta: "FINANCE · 9 MIN", tag: "Literacy" },
];

function ChooseLane({ lane, setLane }) {
  return (
    <section className="choose">
      <div className="section-head">
        <div className="section-head__kicker"><span className="bar"/> CHOOSE YOUR LANE</div>
        <h2 className="section-head__h2">Two different people.<br/>The same precision.</h2>
        <p className="section-head__sub">
          One lane for the money in your life. One lane for the money in your business. Pick the one that fits — or toggle between them up top at any time.
        </p>
      </div>

      <div className="choose__grid">
        {/* PERSONAL */}
        <article
          className={`lane-card ${lane === "personal" ? "lane-card--active" : ""}`}
          onClick={() => setLane("personal")}
          data-lane="personal"
        >
          <div className="lane-card__num">01</div>
          <div className="lane-card__kicker">FOR PERSONAL</div>
          <h3 className="lane-card__title">
            Your money, <br/>without the jargon.
          </h3>
          <p className="lane-card__desc">
            Budgeting, saving, investing, debt, credit, taxes. Straight answers that assume you have a life, not a finance degree.
          </p>
          <div className="lane-card__stats">
            <div><span className="k">GUIDES</span><span className="v">1,284</span></div>
            <div><span className="k">AVG READ</span><span className="v">7 MIN</span></div>
            <div><span className="k">UPDATED</span><span className="v">WEEKLY</span></div>
          </div>
          <ul className="lane-card__topics">
            {["Budget","Save","Invest","Debt","Credit","Taxes","Retire","Insurance"].map(x => (
              <li key={x}>{x}</li>
            ))}
          </ul>
          <button className="btn btn--primary lane-card__cta">
            ENTER PERSONAL LANE →
          </button>
        </article>

        {/* BUSINESS */}
        <article
          className={`lane-card lane-card--dark ${lane === "business" ? "lane-card--active" : ""}`}
          onClick={() => setLane("business")}
          data-lane="business"
        >
          <div className="lane-card__num">02</div>
          <div className="lane-card__kicker">FOR BUSINESS</div>
          <h3 className="lane-card__title">
            Run the numbers,<br/>run the shop.
          </h3>
          <p className="lane-card__desc">
            Bookkeeping, pricing, margins, capital, compliance. Written for operators — solo, founder, owner — not accountants talking to accountants.
          </p>
          <div className="lane-card__stats">
            <div><span className="k">GUIDES</span><span className="v">864</span></div>
            <div><span className="k">AVG READ</span><span className="v">9 MIN</span></div>
            <div><span className="k">UPDATED</span><span className="v">WEEKLY</span></div>
          </div>
          <ul className="lane-card__topics">
            {["Books","Price","Margin","Credit","Payroll","Tax","Entity","Cashflow"].map(x => (
              <li key={x}>{x}</li>
            ))}
          </ul>
          <button className="btn btn--mint lane-card__cta">
            ENTER BUSINESS LANE →
          </button>
        </article>
      </div>
    </section>
  );
}

function TopicItem({ t, meta, tag, index, open, onOpen, lane }) {
  return (
    <li className={`topic ${open ? "topic--open" : ""}`}>
      <button className="topic__row" onClick={onOpen}>
        <span className="topic__idx">{String(index).padStart(3, "0")}</span>
        <span className="topic__title">{t}</span>
        <span className="topic__tag">{tag}</span>
        <span className="topic__meta">{meta}</span>
        <span className="topic__chev">{open ? "—" : "+"}</span>
      </button>
      {open && (
        <div className="topic__preview">
          <div className="topic__preview-l">
            <div className="topic__preview-kicker">ARTICLE PREVIEW</div>
            <h4 className="topic__preview-h">{t}</h4>
            <p>
              Short read. Structured like a procedure, not an op-ed. Opens with the
              one-sentence answer, then walks through the exact steps with numbers
              where numbers belong. Ends with what to watch for next quarter.
            </p>
            <ol className="topic__steps">
              <li><b>Step 01 —</b> Frame the goal in a dollar figure, not a feeling.</li>
              <li><b>Step 02 —</b> Pull the three statements that show where you are today.</li>
              <li><b>Step 03 —</b> Automate the boring 80%. Review the other 20% monthly.</li>
              <li><b>Step 04 —</b> Re-check against your plan every 90 days.</li>
            </ol>
            <div className="topic__cta-row">
              <button className="btn btn--primary">READ FULL GUIDE →</button>
              <button className="btn btn--ghost">SAVE TO LIBRARY</button>
            </div>
          </div>
          <aside className="topic__preview-r">
            <div className="topic__preview-kicker">KEY FIGURES</div>
            <div className="figure">
              <div className="figure__k">TARGET</div>
              <div className="figure__v">$12,400</div>
              <div className="figure__d">3 months essential spend</div>
            </div>
            <div className="figure">
              <div className="figure__k">TIMELINE</div>
              <div className="figure__v">18 MO</div>
              <div className="figure__d">at $689 / mo automated</div>
            </div>
            <div className="figure">
              <div className="figure__k up">RATE</div>
              <div className="figure__v">4.35%</div>
              <div className="figure__d">HYSA, 26-wk avg</div>
            </div>
          </aside>
        </div>
      )}
    </li>
  );
}

function TopicList({ lane }) {
  const list = lane === "personal" ? PERSONAL_TOPICS : BUSINESS_TOPICS;
  const [open, setOpen] = React.useState(0);
  return (
    <section className="topics">
      <div className="section-head">
        <div className="section-head__kicker">
          <span className="bar"/> GUIDES · {lane.toUpperCase()} LANE
        </div>
        <h2 className="section-head__h2">
          {lane === "personal" ? "This week, for your money." : "This week, for the shop."}
        </h2>
        <p className="section-head__sub">
          Six how-tos hand-picked for the {lane === "personal" ? "Personal" : "Business"} lane. Click any item to expand the full preview.
        </p>
      </div>
      <ul className="topics__list">
        {list.map((x, i) => (
          <TopicItem
            key={x.t}
            {...x}
            index={i + 1}
            open={open === i}
            onOpen={() => setOpen(open === i ? -1 : i)}
            lane={lane}
          />
        ))}
      </ul>
    </section>
  );
}

function ExpertCards({ lane, setLane }) {
  return (
    <section className="experts">
      <div className="experts__grid">
        {/* Johnnie — Personal */}
        <article
          className={`expert ${lane === "personal" ? "expert--active" : ""}`}
          onClick={() => setLane("personal")}
        >
          <div className="expert__portrait expert__portrait--personal" style={{position: "relative", overflow: "hidden"}}>
            <img src="/contributors/johnnie.png" alt="Johnnie — Lead, Personal" style={{position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover"}} />
          </div>
          <div className="expert__body">
            <div className="expert__num">01 / LEAD · PERSONAL</div>
            <h3 className="expert__name">Johnnie</h3>
            <div className="expert__role">Lead writer, personal finance</div>
            <p className="expert__bio">
              Johnnie spent a decade on a retail trading desk before walking away to write for people who were never meant to read a 10-K. He answers the money questions you're a little embarrassed to ask.
            </p>
            <div className="expert__stats">
              <div><span className="k">GUIDES</span><span className="v">312</span></div>
              <div><span className="k">YRS</span><span className="v">12</span></div>
              <div><span className="k">BEAT</span><span className="v">PERSONAL</span></div>
            </div>
            <button className="btn btn--primary">EXPLORE PERSONAL →</button>
          </div>
        </article>

        {/* Isabella — Business */}
        <article
          className={`expert expert--dark ${lane === "business" ? "expert--active" : ""}`}
          onClick={() => setLane("business")}
        >
          <div className="expert__portrait expert__portrait--business" style={{position: "relative", overflow: "hidden"}}>
            <img src="/contributors/isabella.png" alt="Isabella — Lead, Business" style={{position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover"}} />
          </div>
          <div className="expert__body">
            <div className="expert__num">02 / LEAD · BUSINESS</div>
            <h3 className="expert__name">Isabella</h3>
            <div className="expert__role">Lead writer, small business</div>
            <p className="expert__bio">
              Isabella has opened three businesses, closed one, and wrote the financial operating manuals for the other two. She's the person founders text at 11pm when the books don't tie.
            </p>
            <div className="expert__stats">
              <div><span className="k">GUIDES</span><span className="v">218</span></div>
              <div><span className="k">YRS</span><span className="v">9</span></div>
              <div><span className="k">BEAT</span><span className="v">BUSINESS</span></div>
            </div>
            <button className="btn btn--mint">EXPLORE BUSINESS →</button>
          </div>
        </article>
      </div>
    </section>
  );
}

function FeaturedWriter({ lane }) {
  const isP = lane === "personal";
  return (
    <section className="featured">
      <div className="featured__kicker">
        <span className="bar"/> THIS WEEK'S FEATURE · {isP ? "JOHNNIE'S HOW-TO" : "ISABELLA'S HOW-TO"}
      </div>
      <div className="featured__grid">
        <div className={`featured__portrait featured__portrait--${lane}`} style={{position: "relative", overflow: "hidden"}}>
          <img src={isP ? "/contributors/johnnie.png" : "/contributors/isabella.png"} alt={isP ? "Johnnie" : "Isabella"} style={{position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover"}} />
          <div className="featured__portrait-stamp" style={{position: "relative", zIndex: 2}}>FILED {isP ? "04.18.26" : "04.17.26"}</div>
        </div>
        <div className="featured__body">
          <div className="featured__meta">
            <span>ISSUE 038</span>
            <span>·</span>
            <span>{isP ? "PERSONAL" : "BUSINESS"}</span>
            <span>·</span>
            <span>{isP ? "6 MIN" : "9 MIN"}</span>
          </div>
          <h3 className="featured__eyebrow">This week {isP ? "Johnnie" : "Isabella"} is writing about…</h3>
          <p className="featured__h">
            {isP
              ? "How to stop living paycheck to paycheck without cutting the things you actually like."
              : "How to build a cash-flow forecast your bank will actually respect."}
          </p>
          <p className="featured__sub">
            {isP
              ? "Why the \"cut your lattes\" advice fails, what to put on autopilot first, and the two numbers that decide whether your next month is quiet or loud."
              : "The three-sheet model that moves a line of credit from no to yes, how to stress-test it for a slow quarter, and what to hand your lender before they ask."}
          </p>
          <div className="featured__actions">
            <button className="btn btn--primary">READ THE FEATURE →</button>
            <button className="btn btn--ghost">VIEW {isP ? "JOHNNIE" : "ISABELLA"}'S PROFILE →</button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ChooseLane, TopicList, ExpertCards, FeaturedWriter, PERSONAL_TOPICS, BUSINESS_TOPICS });