// What I hear from founders — categories on left, questions on right, auto-cycling
function Questions({ style = 'quiet' }) {
  const categories = [
  {
    key: 'cash',
    label: 'Cash Burn & Runway',
    questions: [
    'How do we accurately forecast cash flow?',
    'How much runway do we really have, and what levers can we pull to extend it by 6 months?',
    'How do we optimize our working capital?',
    'Are we overspending in certain departments compared to industry benchmarks?']

  },
  {
    key: 'board',
    label: 'Fundraising & Investor Reporting',
    questions: [
    'What metrics do investors care about, and how do we measure them?',
    'What financial slides must be in our deck, and what story should they tell?',
    'Is our fundraising story tight?',
    'Should we raise debt or equity?',
    'How do we transition from cash to accrual accounting without slowing down the team?',
    'Are we ready for a financial audit, and if not, what will it take to get us there?']

  },
  {
    key: 'unit',
    label: 'Unit Economics & Profitability',
    questions: [
    'Which levers should we pull to improve our LTV to CAC ratio?',
    'Are our unit economics actually sound?',
    'Are we leaving money on the table with our current pricing?',
    'What is our CAC payback period on a cash basis?',
    'At what spend level do our paid channels stop being profitable?']

  },
  {
    key: 'hiring',
    label: 'Hiring & Compensation',
    questions: [
    'What is the fully burdened cost of our next 10 hires?',
    'What is the financial impact of transitioning from contractors to full-time W2 employees?',
    'Can we afford to hire a VP of Sales, and how should we structure their commission & bonus?',
    'How should we size and manage our employee option pool for our next phase of growth?',
    'At what scale should we swap our EOR for a foreign entity?']

  },
  {
    key: 'growth',
    label: 'Growth & Strategic Moves',
    questions: [
    'How should we set up our financial systems for growth?',
    'If we wanted to sell the company in three years, what financial metrics do we need to hit?',
    'We received an acquisition offer. How do we properly value the deal?',
    'Does it make financial sense to build this new product line, or should we partner or buy?']

  },
  {
    key: 'tax',
    label: 'Tax & Compliance',
    questions: [
    'Are we maximizing our R&D tax credits and other non-dilutive funding options?',
    'Do we have unexpected sales tax liabilities in states or countries we are selling into?',
    'If an acquirer opened our data room today, what’s the first compliance red flag they’d find?']

  },
  {
    key: 'ops',
    label: 'Operational Finance',
    questions: [
    'Why does it take so long to reconcile last month’s accounting?',
    'What are our true gross margins right now if we strip out the cloud credits?',
    'How do we balance the savings of a cloud commit against the risk of overcommitting?']

  }];


  const CYCLE_MS = 5000;
  const [active, setActive] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const cur = categories[active];

  // Auto-cycle
  React.useEffect(() => {
    if (paused) return;
    const id = setTimeout(() => {
      setActive((i) => (i + 1) % categories.length);
    }, CYCLE_MS);
    return () => clearTimeout(id);
  }, [active, paused]);

  // Click to pin a category (stops the cycle)
  const onPick = (i) => {
    setPaused(true);
    setActive(i);
  };

  return (
    <section id="questions" style={{ padding: '96px 32px', borderBottom: '1px solid var(--line-2)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <h2 style={window.sectionHeadingStyle}>Founder FAQs

        </h2>
        <p style={{
          marginTop: 16, fontSize: 17, color: 'var(--ink-2)',
          maxWidth: 'none', lineHeight: 1.6
        }}>Across pricing, runway, hiring, and capital, the questions cluster into a few familiar shapes. 



        </p>

        <div className="questions-grid" style={{
          marginTop: 56,
          display: 'grid',
          gridTemplateColumns: '300px 1fr',
          gap: 56,
          alignItems: 'start'
        }}>
          {/* LEFT: category list */}
          <div style={{
            display: 'flex', flexDirection: 'column',
            borderTop: '1px solid var(--line-2)'
          }}>
            {categories.map((c, i) => {
              const isActive = i === active;
              return (
                <button
                  key={c.key}
                  onClick={() => onPick(i)}
                  onMouseEnter={() => setPaused(true)}
                  style={{
                    position: 'relative',
                    background: 'transparent',
                    border: 'none',
                    borderBottom: '1px solid var(--line-2)',
                    padding: '20px 0',
                    textAlign: 'left',
                    fontSize: 16,
                    fontWeight: isActive ? 500 : 400,
                    color: isActive ? 'var(--ink)' : 'var(--ink-3)',
                    cursor: 'pointer',
                    display: 'flex', alignItems: 'baseline', gap: 12,
                    transition: 'color 240ms ease'
                  }}>
                  
                  {/* Style A: serif arrow marker */}
                  {style === 'serif' &&
                  <span style={{
                    fontFamily: "'Instrument Serif', serif",
                    fontSize: 22, lineHeight: 1,
                    color: 'var(--ink)',
                    width: 18,
                    opacity: isActive ? 1 : 0,
                    transform: isActive ? 'translateX(0)' : 'translateX(-6px)',
                    transition: 'opacity 280ms ease, transform 280ms ease'
                  }}>→</span>
                  }
                  {/* Style B: index dot */}
                  {style === 'dot' &&
                  <span style={{
                    width: 6, height: 6, borderRadius: 999,
                    alignSelf: 'center',
                    background: isActive ? 'var(--accent)' : 'transparent',
                    transition: 'background 240ms ease'
                  }} />
                  }

                  <span style={{
                    flex: 1,
                    fontFamily: style === 'serif' && isActive ?
                    "'Instrument Serif', serif" :
                    'inherit',
                    fontSize: style === 'serif' && isActive ? 22 : 16,
                    letterSpacing: style === 'serif' && isActive ? '-0.01em' : 0,
                    transition: 'font-size 240ms ease'
                  }}>
                    {c.label}
                  </span>

                  {/* progress hairline at the bottom of active row */}
                  {isActive && !paused &&
                  <span
                    key={`p-${active}`}
                    style={{
                      position: 'absolute', left: 0, right: 0, bottom: -1, height: 1,
                      background: 'var(--ink)',
                      transformOrigin: 'left',
                      animation: `qprog ${CYCLE_MS}ms linear forwards`
                    }} />

                  }
                </button>);

            })}

            <style>{`
              @keyframes qprog {
                from { transform: scaleX(0); }
                to   { transform: scaleX(1); }
              }
              @keyframes qfade {
                from { opacity: 0; transform: translateY(6px); }
                to   { opacity: 1; transform: translateY(0); }
              }
            `}</style>
          </div>

          {/* RIGHT: questions for active category */}
          <div key={cur.key} style={{
            animation: 'qfade 380ms ease both',
            display: 'flex', flexDirection: 'column'
          }}>
            {cur.questions.map((q, i) =>
            <div key={i} style={{
              padding: '18px 0',
              borderTop: i === 0 ? 'none' : '1px solid var(--line-2)'
            }}>
                <div style={{
                fontFamily: "'Instrument Serif', serif",
                fontSize: 24, lineHeight: 1.25, letterSpacing: '-0.01em',
                color: 'var(--ink)'
              }}>
                  “{q}”
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}
window.Questions = Questions;