// Shared components for lane hub pages
// Depends on global Nav, Ticker, Footer, Logo from components/Chrome.jsx

function LaneHero({ lane }) {
  const isP = lane === "personal";
  return (
    <section className={`lane-hero lane-hero--${lane}`}>
      <div className="lane-hero__bg" aria-hidden="true" />
      <div className="lane-hero__inner">
        <div className="lane-hero__meta">
          <span className="lane-hero__num">{isP ? "01" : "02"}</span>
          <span className="lane-hero__bar" />
          <span className="lane-hero__label">{isP ? "PERSONAL LANE" : "BUSINESS LANE"}</span>
          <span className="lane-hero__dot">·</span>
          <span className="lane-hero__counter">{isP ? "1,284 GUIDES" : "864 GUIDES"}</span>
          <span className="lane-hero__dot">·</span>
          <span className="lane-hero__counter">UPDATED WEEKLY</span>
        </div>
        <h1 className="lane-hero__h1">
          {isP ? "Your money," : "Run the numbers,"}<br/>
          <span>{isP ? "without the jargon." : "run the shop."}</span>
        </h1>
        <p className="lane-hero__lede">
          {isP
            ? "Every how-to in the Personal lane. Budgeting, saving, investing, debt, credit — written plainly, structured like a procedure, updated when the facts change."
            : "Every how-to in the Business lane. Books, pricing, margins, capital, compliance — written for operators who have to run the shop after the meeting ends."}
        </p>
        <form className="lane-hero__search" onSubmit={(e) => e.preventDefault()}>
          <span className="lane-hero__search-label">SEARCH &gt;</span>
          <input placeholder={isP ? "search personal guides…" : "search business guides…"} />
          <span className="lane-hero__search-kbd">⌘ K</span>
          <button type="submit" className="lane-hero__search-btn">
            {isP ? "EXECUTE" : "EXECUTE"}
          </button>
        </form>
      </div>
    </section>
  );
}

function Breadcrumbs({ lane }) {
  const isP = lane === "personal";
  return (
    <div className="crumbs">
      <div className="crumbs__inner">
        <a href="Finance Edition.html" className="crumbs__item">HOME</a>
        <span className="crumbs__sep">/</span>
        <a className="crumbs__item">{isP ? "PERSONAL LANE" : "BUSINESS LANE"}</a>
        <span className="crumbs__spacer" />
        <span className="crumbs__stats">
          <span>PATH</span>
          <span className="crumbs__val">/{isP ? "personal" : "business"}</span>
          <span>·</span>
          <span>VIEW</span>
          <span className="crumbs__val" id="viewMode">GRID-03</span>
          <span>·</span>
          <span>SORT</span>
          <span className="crumbs__val">POPULAR</span>
        </span>
      </div>
    </div>
  );
}

/* ========== SUBCATEGORY CARDS ========== */

const PERSONAL_SUBCATS = [
  { name: "Foundations", count: 142, desc: "The fundamentals nobody teaches plainly. Budgets, accounts, the mental model for why your money does what it does.", topics: ["Budgeting", "Net worth", "Cash flow", "Accounts"] },
  { name: "Savings", count: 198, desc: "How to put money aside without it feeling like punishment. Emergency funds, sinking funds, HYSAs, the quiet boring wins.", topics: ["Emergency fund", "HYSA", "Automation", "Sinking funds"] },
  { name: "Income", count: 127, desc: "Earning more on purpose. Salary negotiation with real numbers, side income that actually clears, equity and offers explained.", topics: ["Negotiation", "Offers", "Side income", "Equity"] },
  { name: "Investing", count: 286, desc: "From the first $500 to a real portfolio. Index funds, tax-advantaged accounts, when to rebalance, what not to buy.", topics: ["Index funds", "401(k)", "Roth IRA", "Rebalance"] },
  { name: "Debt", count: 173, desc: "Paying it off without losing the rest of your life. Avalanche vs. snowball, balance transfers, the order that actually saves you the most.", topics: ["Credit cards", "Student loans", "Consolidation", "Order of attack"] },
  { name: "Credit", count: 164, desc: "What your score means, how the bureaus actually score you, and the handful of moves that move the number fastest.", topics: ["Score", "Reports", "Utilization", "Disputes"] },
];

const BUSINESS_SUBCATS = [
  { name: "Systems", count: 118, desc: "The books, the bank stack, the receipts — set up once so the boring parts run themselves and the taxman has nothing to say.", topics: ["Bookkeeping", "Chart of accounts", "Receipts", "Tools"] },
  { name: "Capital", count: 94, desc: "Lines of credit, SBA loans, revenue-based financing, raising from people. When to borrow, when to wait, what the numbers need to say.", topics: ["Lines of credit", "SBA", "RBF", "Equity"] },
  { name: "Operations", count: 156, desc: "Pricing, margin math, payroll, the weekly rhythm. The unglamorous mechanics that turn a business into a business.", topics: ["Pricing", "Margin", "Payroll", "Cashflow"] },
  { name: "Compliance", count: 121, desc: "Entity structure, sales tax, 1099s, the filings that move from annoying to existential if you ignore them.", topics: ["LLC/S-corp", "Sales tax", "1099s", "Filings"] },
  { name: "Growth", count: 188, desc: "Hiring your first, firing when you need to, adding a second line, deciding when to slow down. Decisions in the right order.", topics: ["Hiring", "Second line", "Pricing up", "Geography"] },
  { name: "Benchmarks", count: 187, desc: "What good looks like, by industry and by stage. Margins, overhead ratios, ad efficiency — so you know what number you're shooting at.", topics: ["Margin", "Overhead", "LTV/CAC", "Utilization"] },
];

function SubcatCard({ sub, index, lane, variant, hover }) {
  return (
    <article
      className={`subcat ${hover ? "is-hover" : ""}`}
      data-variant={variant}
    >
      <div className="subcat__top">
        <div className="subcat__num">{String(index + 1).padStart(2, "0")}</div>
        <div className="subcat__count">
          <span className="subcat__count-v">{sub.count}</span>
          <span className="subcat__count-k">GUIDES</span>
        </div>
      </div>
      <h3 className="subcat__title">{sub.name}</h3>
      <p className="subcat__desc">{sub.desc}</p>
      <ul className="subcat__topics">
        {sub.topics.map(t => <li key={t}>{t}</li>)}
      </ul>
      <div className="subcat__cta">
        <span>ENTER {sub.name.toUpperCase()}</span>
        <span className="subcat__arrow">→</span>
      </div>
    </article>
  );
}

function SubcatGrid({ lane, cols, density }) {
  const list = lane === "personal" ? PERSONAL_SUBCATS : BUSINESS_SUBCATS;
  return (
    <section className="subcats" data-cols={cols} data-density={density}>
      <div className="section-head section-head--left">
        <div className="section-head__kicker">
          <span className="bar"/> BROWSE · 06 SUBCATEGORIES
        </div>
        <h2 className="section-head__h2">
          {lane === "personal" ? "Pick a room in the house." : "Pick a station on the floor."}
        </h2>
        <p className="section-head__sub">
          Every how-to in the {lane === "personal" ? "Personal" : "Business"} lane lives in one of six places. Start where the question is loudest.
        </p>
      </div>
      <div className="subcats__grid" data-cols={cols}>
        {list.map((s, i) => (
          <SubcatCard
            key={s.name}
            sub={s}
            index={i}
            lane={lane}
            variant={i === 0 ? "default" : "default"}
            hover={i === 1}
          />
        ))}
      </div>
    </section>
  );
}

/* ========== FEATURED PICK ========== */

function FeaturedPick({ lane }) {
  const isP = lane === "personal";
  const pick = isP
    ? {
        title: "How to Build a 3-Month Emergency Fund",
        sub: "The boring, dollar-by-dollar plan that actually works when the car breaks down in March.",
        meta: ["PERSONAL", "SAVINGS", "6 MIN", "ISSUE 038"],
        tag: "THIS WEEK'S PICK",
        figure: { k: "TARGET", v: "$12,400", d: "3 months essential spend" },
        figure2: { k: "TIMELINE", v: "18 MO", d: "at $689 / mo, automated" },
        figure3: { k: "RATE", v: "4.35%", d: "HYSA, 26-wk avg" },
        author: "Johnnie",
      }
    : {
        title: "How to Get Approved for a Business Line of Credit",
        sub: "The three-sheet model that moves a lender from no to yes — and the quiet work you do before you ever apply.",
        meta: ["BUSINESS", "CAPITAL", "10 MIN", "ISSUE 038"],
        tag: "THIS WEEK'S PICK",
        figure: { k: "APPROVAL", v: "73%", d: "prepared applicants, 2026" },
        figure2: { k: "MIN TIME", v: "24 MO", d: "in business, most banks" },
        figure3: { k: "DSCR", v: "1.25x", d: "lender target, minimum" },
        author: "Isabella",
      };

  return (
    <section className="pick">
      <div className="pick__inner">
        <div className="pick__art" aria-hidden="true">
          <div className="pick__art-grid" />
          <div className="pick__art-tag">{pick.tag}</div>
          <div className="pick__art-num">038</div>
          <svg className="pick__art-chart" viewBox="0 0 400 260" preserveAspectRatio="none">
            <defs>
              <pattern id="ppat" width="20" height="20" patternUnits="userSpaceOnUse">
                <path d="M20 0 L0 0 0 20" fill="none" stroke="#99edc3" strokeOpacity="0.15" strokeWidth="1"/>
              </pattern>
            </defs>
            <rect width="400" height="260" fill="url(#ppat)"/>
            {isP ? (
              <>
                <path d="M0,240 L40,230 L80,220 L120,200 L160,180 L200,155 L240,130 L280,100 L320,75 L360,45 L400,20"
                  fill="none" stroke="#99edc3" strokeWidth="2"/>
                <path d="M0,240 L40,230 L80,220 L120,200 L160,180 L200,155 L240,130 L280,100 L320,75 L360,45 L400,20 L400,260 L0,260 Z"
                  fill="#99edc3" fillOpacity="0.12"/>
              </>
            ) : (
              <>
                <path d="M0,200 L50,180 L100,185 L150,150 L200,160 L250,110 L300,120 L350,70 L400,60"
                  fill="none" stroke="#99edc3" strokeWidth="2"/>
                <path d="M0,200 L50,180 L100,185 L150,150 L200,160 L250,110 L300,120 L350,70 L400,60 L400,260 L0,260 Z"
                  fill="#99edc3" fillOpacity="0.12"/>
              </>
            )}
          </svg>
        </div>
        <div className="pick__body">
          <div className="pick__kicker">
            <span className="bar"/> {pick.tag}
          </div>
          <div className="pick__meta">
            {pick.meta.map((m, i) => (
              <React.Fragment key={m}>
                <span>{m}</span>
                {i < pick.meta.length - 1 && <span className="pick__sep">·</span>}
              </React.Fragment>
            ))}
          </div>
          <h2 className="pick__title">{pick.title}</h2>
          <p className="pick__sub">{pick.sub}</p>
          <div className="pick__figs">
            {[pick.figure, pick.figure2, pick.figure3].map((f, i) => (
              <div key={i} className="pick__fig">
                <div className="pick__fig-k">{f.k}</div>
                <div className="pick__fig-v">{f.v}</div>
                <div className="pick__fig-d">{f.d}</div>
              </div>
            ))}
          </div>
          <div className="pick__actions">
            <button className="btn btn--primary">READ GUIDE →</button>
            <button className="btn btn--ghost">SAVE TO LIBRARY</button>
            <span className="pick__byline">FILED BY {pick.author.toUpperCase()}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ========== GUIDES LIST ========== */

const PERSONAL_GUIDES_LIST = [
  { t: "How to Build a 3-Month Emergency Fund", cat: "SAVINGS", time: "6 MIN", hot: true },
  { t: "How to Negotiate a Salary Increase (Data-Backed Script)", cat: "INCOME", time: "7 MIN", hot: true },
  { t: "How to Start Investing With $500", cat: "INVESTING", time: "5 MIN", hot: false },
  { t: "How to Eliminate Credit Card Debt in 12 Months", cat: "DEBT", time: "11 MIN", hot: true },
  { t: "How to Automate Your Savings (Set It and Forget It)", cat: "SAVINGS", time: "4 MIN", hot: false },
  { t: "How to Understand Your Credit Score (And Why It Matters)", cat: "CREDIT", time: "8 MIN", hot: false },
  { t: "How to Build a Budget You'll Actually Follow", cat: "FOUNDATIONS", time: "9 MIN", hot: false },
  { t: "How to Pick a Roth IRA Provider in 15 Minutes", cat: "INVESTING", time: "5 MIN", hot: false },
  { t: "How to Read Your Credit Report (And Dispute Errors)", cat: "CREDIT", time: "7 MIN", hot: false },
  { t: "How to Pay Off a Mortgage 8 Years Early", cat: "DEBT", time: "12 MIN", hot: false },
];

const BUSINESS_GUIDES_LIST = [
  { t: "How to Set Up Accounting for Your Solo Business", cat: "SYSTEMS", time: "9 MIN", hot: true },
  { t: "How to Get Approved for a Business Line of Credit", cat: "CAPITAL", time: "10 MIN", hot: true },
  { t: "How to Price Your Services Without Leaving Money on the Table", cat: "OPERATIONS", time: "8 MIN", hot: true },
  { t: "How to Calculate Your Real Profit Margin (Most Get This Wrong)", cat: "OPERATIONS", time: "7 MIN", hot: false },
  { t: "How to Separate Personal and Business Finances Legally", cat: "COMPLIANCE", time: "6 MIN", hot: false },
  { t: "How to Read Financial Statements Like a Founder", cat: "SYSTEMS", time: "9 MIN", hot: false },
  { t: "How to File Quarterly Estimated Taxes Without Panic", cat: "COMPLIANCE", time: "8 MIN", hot: false },
  { t: "How to Hire Your First Employee (and Not Regret It)", cat: "GROWTH", time: "11 MIN", hot: false },
  { t: "How to Build a 13-Week Cash-Flow Forecast", cat: "SYSTEMS", time: "10 MIN", hot: false },
  { t: "How to Benchmark Your Margin Against Your Industry", cat: "BENCHMARKS", time: "7 MIN", hot: false },
];

function GuidesList({ lane }) {
  const list = lane === "personal" ? PERSONAL_GUIDES_LIST : BUSINESS_GUIDES_LIST;
  return (
    <section className="guides">
      <div className="section-head section-head--left">
        <div className="section-head__kicker">
          <span className="bar"/> GUIDES INDEX · FIRST 10 · {lane.toUpperCase()}
        </div>
        <h2 className="section-head__h2">
          The full ledger.
        </h2>
        <p className="section-head__sub">
          Every {lane === "personal" ? "Personal" : "Business"} how-to ranked by recent reads. Use the search above to narrow down, or jump in by subcategory.
        </p>
      </div>
      <div className="guides__table">
        <div className="guides__head">
          <div>#</div>
          <div>TITLE</div>
          <div>CATEGORY</div>
          <div>READ</div>
          <div>STATUS</div>
        </div>
        {list.map((g, i) => (
          <a key={g.t} href="#" className="guides__row">
            <div className="guides__idx">{String(i + 1).padStart(3, "0")}</div>
            <div className="guides__title">{g.t}</div>
            <div className="guides__cat">{g.cat}</div>
            <div className="guides__time">{g.time}</div>
            <div className="guides__status">
              {g.hot ? <span className="pill pill--mint">TRENDING ▲</span> : <span className="pill">—</span>}
            </div>
          </a>
        ))}
      </div>
      <div className="guides__foot">
        <button className="btn btn--primary">VIEW ALL {lane === "personal" ? "1,284" : "864"} GUIDES →</button>
        <span className="guides__foot-meta">Showing 10 of {lane === "personal" ? "1,284" : "864"} · Sorted by POPULAR</span>
      </div>
    </section>
  );
}

/* ========== WRITER BIO ========== */

function WriterBio({ lane }) {
  const isP = lane === "personal";
  return (
    <section className={`writer writer--${lane}`}>
      <div className="writer__inner">
        <div className={`writer__portrait writer__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>
        <div className="writer__body">
          <div className="writer__kicker">
            <span className="bar"/> YOUR LEAD WRITER · {isP ? "PERSONAL" : "BUSINESS"} LANE
          </div>
          <h3 className="writer__name">{isP ? "Johnnie" : "Isabella"}</h3>
          <div className="writer__role">
            {isP
              ? "Personal finance — formerly retail trading desk, Chicago"
              : "Small business — operator, three founded, two still running"}
          </div>
          <p className="writer__bio">
            {isP
              ? "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 — budget, debt, first investments, what a credit score actually is — in plain language, with real numbers, and without judgment."
              : "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. Every guide in the Business lane runs through her — either as author or as editor — before it goes live."}
          </p>
          <dl className="writer__creds">
            <div><dt>EXPERIENCE</dt><dd>{isP ? "12 YRS" : "9 YRS"}</dd></div>
            <div><dt>GUIDES</dt><dd>{isP ? "312" : "218"}</dd></div>
            <div><dt>REVIEWED</dt><dd>{isP ? "1,284" : "864"}</dd></div>
            <div><dt>LANE</dt><dd>{isP ? "PERSONAL" : "BUSINESS"}</dd></div>
          </dl>
          <div className="writer__actions">
            <button className="btn btn--primary">
              SEE ALL {(isP ? "JOHNNIE" : "ISABELLA").toUpperCase()}'S GUIDES →
            </button>
            <button className="btn btn--ghost">
              {isP ? "JOHNNIE" : "ISABELLA"}'S PROFILE
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  LaneHero, Breadcrumbs, SubcatCard, SubcatGrid, FeaturedPick, GuidesList, WriterBio,
  PERSONAL_SUBCATS, BUSINESS_SUBCATS,
});