// Mid sections — process flow, metrics, integrations, founder situation,
// MVP features, data table, decision options, final CTA, footer

const ProcessFlow = () => {
  const Ic = window.Ic;
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    const i = setInterval(() => setActive((a) => (a + 1) % 5), 1900);
    return () => clearInterval(i);
  }, []);
  const steps = [
  { ico: <Ic.link />, title: "Connect data", body: "Link or upload your sources." },
  { ico: <Ic.cash />, title: "Calculate runway", body: "See your cash-out date." },
  { ico: <Ic.shield />, title: "Detect risks", body: "Tax, payroll, legal, investor." },
  { ico: <Ic.scale />, title: "Compare options", body: "Continue, downsize, or close." },
  { ico: <Ic.doc />, title: "Generate report", body: "Bring to your CPA & attorney." }];

  return (
    <section id="how">
      <div className="wrap">
        <div className="sec-head-center">
          <div className="sec-eyebrow">How the process works</div>
          <h2 className="sec-title">A clearer path before closure.</h2>
        </div>
        <div className="flow">
          {steps.map((s, i) =>
          <div key={i} className={`step ${i === active ? 'active' : ''}`}>
              <div className="num">{s.ico}</div>
              <span className="step-tag">Step {String(i + 1).padStart(2, '0')}</span>
              <h4>{s.title}</h4>
              <p>{s.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const Metrics = () => {
  const Ic = window.Ic;
  return (
    <section style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div className="metrics">
          <div className="sec-eyebrow ri">Impact</div>
          <h2 className="sec-title ri" data-delay="1">Reduce uncertainty before<br />making a costly decision.</h2>
          <div className="metrics-grid">
            <div className="metric ri ri-scale" data-delay="2">
              <div className="big">↓72<small>%</small></div>
              <div className="lbl">Less time preparing for expert consultations*</div>
            </div>
            <div className="metric ri ri-scale" data-delay="3">
              <div className="big">$22<small>k</small></div>
              <div className="lbl">Median cost-range clarity before closure*</div>
            </div>
            <div className="metric ri ri-scale" data-delay="4">
              <div className="big">3.1<small>×</small></div>
              <div className="lbl">Higher founder confidence with structured risk visibility*</div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', alignItems: 'center', flexWrap: 'wrap', marginTop: 8 }}>
            <a href="#cta-final" className="btn btn-primary btn-lg">Get Started <Ic.arrow /></a>
          </div>
        </div>
      </div>
    </section>);

};

const Integrations = () => {
  const Ic = window.Ic;
  const names = ["Plaid", "QuickBooks", "Xero", "Carta", "Gusto", "Rippling"];

  return (
    <section id="data">
      <div className="wrap">
        <div className="sec-head-center">
          <p className="ri" style={{ color: 'var(--muted)', fontSize: 13, letterSpacing: '.1em', textTransform: 'uppercase', marginBottom: 24 }}>Partnering with companies people trust</p>
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 40, flexWrap: 'wrap' }}>
            {names.map((n, i) =>
              <span key={n} className="ri" data-delay={String(i + 1)} style={{ fontFamily: "'Newsreader', serif", fontSize: 28, fontWeight: 400, color: 'var(--muted)', letterSpacing: '-0.01em' }}>{n}</span>
            )}
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 14, alignItems: 'center', marginTop: 36, flexWrap: 'wrap' }}>
          <a href="#cta-final" className="btn btn-primary btn-lg">Get Started <Ic.arrow /></a>
        </div>
      </div>
    </section>);

};

const ProductDef = () => {
  return (
    <section style={{ paddingTop: 0 }}>
      <div className="wrap-narrow">
        <div style={{
          background: '#fff', border: '1px solid var(--line)',
          borderRadius: 24, padding: '56px 56px',
          display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 48
        }} className="prod-def">
          <div>
            <div className="sec-eyebrow">What DR.ClosEST is</div>
            <h2 className="sec-title" style={{ fontSize: 'clamp(28px, 3.4vw, 44px)' }}>Decision support — <br />not legal or tax execution.</h2>
          </div>
          <div>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-2)', margin: '0 0 18px' }}>
              DR.ClosEST helps founders diagnose their company's current condition before making a closure decision. It analyzes connected data or uploaded documents and generates a <strong>Closure Readiness Report</strong>.
            </p>
            <p style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--muted)', margin: '0 0 22px' }}>
              The product compares possible paths so you can walk into expert conversations prepared:
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {[
              ['Continue operating', 'Test whether revenue or extension is realistic.'],
              ['Downsize operations', 'Project savings from headcount or cost cuts.'],
              ['Prepare for closure', 'Estimate cash needed and obligations to clear.'],
              ['Seek expert intervention', 'When dissolution alone isn\'t enough.']].
              map(([t, d]) =>
              <div key={t} style={{ padding: '14px 16px', background: 'var(--paper)', borderRadius: 12 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 4 }}>{t}</div>
                  <div style={{ fontSize: 12.5, color: 'var(--muted)', lineHeight: 1.45 }}>{d}</div>
                </div>
              )}
            </div>
            <div className="disclaim" style={{ marginTop: 22 }}>
              DR.ClosEST does not replace attorneys, CPAs, tax advisors, or labor experts — it prepares you to talk to them.
            </div>
          </div>
        </div>
      </div>
    </section>);

};

const FounderSituation = () => {
  const Ic = window.Ic;
  const items = [
  { ico: <Ic.cash />, l: "Cash running out", q: "Shut down or keep going?" },
  { ico: <Ic.users />, l: "Team still on payroll", q: "What labor risks exist?" },
  { ico: <Ic.briefcase />, l: "Investors on cap table", q: "What approvals do I need?" },
  { ico: <Ic.alert />, l: "Debts &amp; unpaid bills", q: "Who gets paid first?" },
  { ico: <Ic.chart />, l: "Messy accounting", q: "What needs cleanup?" },
  { ico: <Ic.globe />, l: "Multi-state registration", q: "How do I withdraw safely?" }];

  return (
    <section>
      <div className="wrap">
        <div className="sec-head-center">
          <div className="sec-eyebrow ri">For founders in the in-between</div>
          <h2 className="sec-title ri" data-delay="1">If any of this sounds familiar —<br />DR.ClosEST is built for you.</h2>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14,
          maxWidth: 1080, margin: '0 auto'
        }} className="sit-grid">
          {items.map((it, i) =>
          <div key={i} className="ri" data-delay={String((i % 3) + 1)} style={{
            background: '#fff', border: '1px solid var(--line)',
            borderRadius: 16, padding: '22px 22px',
            display: 'flex', flexDirection: 'column', gap: 10,
            transition: 'transform .18s, border-color .18s'
          }}>
              <div style={{
              width: 36, height: 36, borderRadius: 10,
              background: 'var(--lavender)', color: 'var(--accent)',
              display: 'grid', placeItems: 'center'
            }}>{it.ico}</div>
              <div style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--ink)' }} dangerouslySetInnerHTML={{ __html: it.l }} />
              <div style={{ fontSize: 13, color: 'var(--muted)', fontStyle: 'italic', fontFamily: "\"Apple SD Gothic Neo\"" }}>"{it.q}"</div>
            </div>
          )}
        </div>
      </div>
    </section>);
};

const Features = () => {
  const Ic = window.Ic;
  const feats = [
  { ico: <Ic.hourglass />, t: "Runway & timing", d: "How long you can keep going." },
  { ico: <Ic.cash />, t: "Closure cost estimate", d: "Rough range to wind down." },
  { ico: <Ic.chart />, t: "Accounting & tax risks", d: "Hidden liabilities, surfaced." },
  { ico: <Ic.users />, t: "Payroll & labor", d: "Final paycheck, PTO, taxes." },
  { ico: <Ic.briefcase />, t: "Investor & cap table", d: "Approvals & distributions." },
  { ico: <Ic.upload />, t: "Document analysis", d: "AI reads your connected data & contracts." }];

  return (
    <section id="features" style={{ background: 'var(--paper-warm)' }}>
      <div className="wrap">
        <div className="sec-head-center">
          <div className="sec-eyebrow ri">What's inside</div>
          <h2 className="sec-title ri" data-delay="1">Six diagnostics. One clear picture.</h2>
        </div>

        {/* Visual product strip — annotated mockup */}
        <div style={{
          background: '#fff', border: '1px solid var(--line)', borderRadius: 20,
          padding: '28px', maxWidth: 1080, margin: '0 auto 36px',
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28
        }} className="feat-vis">
          {/* Mock 1 — runway curve */}
          <div>
            <div style={{ fontSize: 11.5, color: 'var(--accent)', letterSpacing: '.12em', textTransform: 'uppercase', marginBottom: 8 }}>Runway visualization</div>
            <div style={{ fontFamily: "'Newsreader', serif", fontSize: 22, lineHeight: 1.2, marginBottom: 14, letterSpacing: '-.01em' }}>See exactly when cash runs out.</div>
            <div style={{
              background: 'var(--paper)', borderRadius: 12, padding: '18px 16px',
              border: '1px solid var(--line-soft)', height: 200, position: 'relative'
            }}>
              <svg viewBox="0 0 320 160" width="100%" height="100%" preserveAspectRatio="none" style={{ display: 'block' }}>
                <defs>
                  <linearGradient id="rwg" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0%" stopColor="var(--accent)" stopOpacity=".3" />
                    <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
                  </linearGradient>
                </defs>
                {/* horizontal grid */}
                {[40, 80, 120].map((y) => <line key={y} x1="0" x2="320" y1={y} y2={y} stroke="var(--line-soft)" strokeDasharray="3 4" />)}
                {/* curve */}
                <path d="M0,30 Q60,40 100,55 T200,110 T320,150" stroke="var(--accent)" strokeWidth="2.5" fill="none" strokeLinecap="round" />
                <path d="M0,30 Q60,40 100,55 T200,110 T320,150 L320,160 L0,160 Z" fill="url(#rwg)" />
                {/* danger zone */}
                <line x1="225" x2="225" y1="0" y2="160" stroke="var(--red)" strokeDasharray="4 4" strokeWidth="1.4" />
                <circle cx="225" cy="123" r="5" fill="var(--red)" />
              </svg>
              <div style={{ position: 'absolute', top: 14, right: 18, background: '#fff', borderRadius: 8, padding: '6px 10px', fontSize: 11.5, border: '1px solid var(--line)' }}>
                <div style={{ color: 'var(--muted)' }}>Cash-out</div>
                <div style={{ fontWeight: 600, marginTop: 2 }}>Aug 14, 2026</div>
              </div>
              <div style={{ position: 'absolute', bottom: 10, left: 14, fontSize: 11, color: 'var(--muted-2)' }}>Today</div>
              <div style={{ position: 'absolute', bottom: 10, right: 14, fontSize: 11, color: 'var(--red)' }}>4.2 months</div>
            </div>
          </div>

          {/* Mock 2 — risk surface */}
          <div>
            <div style={{ fontSize: 11.5, color: 'var(--accent)', letterSpacing: '.12em', textTransform: 'uppercase', marginBottom: 8 }}>Risk surface</div>
            <div style={{ fontFamily: "'Newsreader', serif", fontSize: 22, lineHeight: 1.2, marginBottom: 14, letterSpacing: '-.01em' }}>Every category — diagnosed in plain English.</div>
            <div style={{
              background: 'var(--paper)', borderRadius: 12, padding: '14px',
              border: '1px solid var(--line-soft)',
              display: 'flex', flexDirection: 'column', gap: 8
            }}>
              {[
              ['Payroll', 'Final paycheck rule (CA)', 'red', 'High'],
              ['Cap table', 'Investor consent likely required', 'red', 'High'],
              ['Accounting', '$24,800 owed to 3 vendors', 'amber', 'Review'],
              ['State', 'Withdraw CA foreign registration', 'amber', 'Review'],
              ['Tax · IRS', 'EIN cancellation prepared', 'green', 'Low']].
              map((r, i) =>
              <div key={i} style={{
                background: '#fff', borderRadius: 8, padding: '8px 12px',
                display: 'flex', alignItems: 'center', gap: 10, fontSize: 12.5,
                border: '1px solid var(--line-soft)'
              }}>
                  <span style={{ width: 62, fontSize: 11, color: 'var(--muted)' }}>{r[0]}</span>
                  <span style={{ flex: 1, color: 'var(--ink-2)' }}>{r[1]}</span>
                  <span className={`badge ${r[2]}`}>{r[3]}</span>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Compact feature grid — much less text */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12,
          maxWidth: 1080, margin: '0 auto'
        }} className="feat-mini">
          {feats.map((f, i) =>
          <div key={i} style={{
            background: '#fff', border: '1px solid var(--line)', borderRadius: 14,
            padding: '18px 20px', display: 'flex', alignItems: 'center', gap: 14
          }}>
              <div style={{
              width: 36, height: 36, borderRadius: 10,
              background: 'var(--lavender)', color: 'var(--accent)',
              display: 'grid', placeItems: 'center', flexShrink: 0
            }}>{f.ico}</div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 2 }}>{f.t}</div>
                <div style={{ fontSize: 12.5, color: 'var(--muted)' }}>{f.d}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);
};

const DataStrategy = () => {
  const rows = [
  ["Banking data", "Plaid · manual input", "Cash balance, transactions, runway calculation"],
  ["Accounting data", "QuickBooks · Xero · CSV", "A/P, A/R, accounting and tax risk"],
  ["Payroll data", "Gusto · Rippling", "Payroll, employee settlement, payroll tax risk"],
  ["Cap table data", "Carta · uploaded cap table", "Investor ownership, liquidation preference, distribution issues"],
  ["Document data", "Contract upload", "Legal risk, termination clauses, penalties, notice obligations"]];

  return (
    <section>
      <div className="wrap-narrow">
        <div className="sec-head-center">
          <div className="sec-eyebrow ri">Data connection strategy</div>
          <h2 className="sec-title ri" data-delay="1">Start simple. Expand with integrations.</h2>
          <p className="sec-sub ri" data-delay="2">The MVP runs on what you can paste in or upload today. Deeper integrations come as you need them.</p>
        </div>
        <div className="data-table ri" data-delay="3">
          <table>
            <thead><tr><th>Area</th><th>Data source</th><th>Purpose</th></tr></thead>
            <tbody>
              {rows.map((r, i) =>
              <tr key={i}>
                  <td>{r[0]}</td>
                  <td>{r[1].split(' · ').map((s, j) => <span key={j} className="data-source" style={{ marginRight: 6 }}>{s}</span>)}</td>
                  <td style={{ color: 'var(--muted)' }}>{r[2]}</td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </section>);

};

const Decisions = () => {
  const Ic = window.Ic;
  const opts = [
  { kind: 'go', tag: 'Option 01', title: 'Continue Operating',
    qs: [
    'How many months of runway remain?',
    'Is additional revenue or funding realistic?',
    'Can the current cost structure continue?']
  },
  { kind: '', tag: 'Option 02', title: 'Downsize Operations',
    qs: [
    'How much runway can be extended by reducing headcount or fixed costs?',
    'What labor risks appear if employees are terminated?',
    'Which costs can be reduced safely?']
  },
  { kind: '', tag: 'Option 03', title: 'Prepare for Closure',
    qs: [
    'How much cash is needed to close safely?',
    'Are there unpaid wages, taxes, debts, or vendor obligations?',
    'Are investor approvals or communications needed?']
  },
  { kind: 'warn', tag: 'Option 04', title: 'Expert Intervention Needed',
    qs: [
    'Is voluntary dissolution enough?',
    'Is an Assignment for the Benefit of Creditors needed?',
    'Should bankruptcy or formal insolvency be reviewed?',
    'Which expert should you speak to first?']
  }];

  return (
    <section id="decide">
      <div className="wrap">
        <div className="sec-head-center">
          <div className="sec-eyebrow ri">AI decision simulation</div>
          <h2 className="sec-title ri" data-delay="1">Compare your options before<br />making the decision.</h2>
        </div>
        <div className="decisions">
          {opts.map((o, i) =>
          <div key={i} className={`dec ${o.kind} ri`} data-delay={String(i + 1)}>
              <span className="badge-top">{o.tag}</span>
              <h4>{o.title}</h4>
              <div className="pre">Questions analyzed</div>
              <ul>{o.qs.map((q, j) => <li key={j}>{q}</li>)}</ul>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const FinalCTA = () => {
  const Ic = window.Ic;
  return (
    <section id="cta-final">
      <div className="wrap">
        <div className="final">
          <h2 className="ri">Make the closure decision with clarity, not panic.</h2>
          <p className="ri" data-delay="1">Understand your runway, risks, costs, and obligations before deciding whether to continue, downsize, or prepare for closure.</p>
          <div className="hero-ctas" style={{ justifyContent: 'center' }}>
            <a href="#cta-final" className="btn btn-primary btn-lg">Get Started <Ic.arrow /></a>
          </div>
        </div>
      </div>
    </section>);

};

const Footer = () => {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-grid" style={{ display: 'block' }}>
          <div>
            <div className="brand" style={{ marginBottom: 14 }}>
              <div className="brand-mark">D</div>
              DR.ClosEST
            </div>
            <p style={{ maxWidth: 32 + 'ch', lineHeight: 1.55 }}>A pre-closure decision diagnostic for US founders. DR.ClosEST helps you understand your company before you decide what to do next.</p>
            <p style={{ fontSize: 11.5, color: 'var(--muted-2)', marginTop: 14 }}>DR.ClosEST does not provide legal, tax, or accounting advice. Information surfaced is for decision support only.</p>
          </div>
        </div>
        <div className="foot-bottom">
          <div>© 2026 DR.ClosEST, Inc. — Made for US-based corporations and LLCs.</div>
          <div>Built for clarity. Not for advice.</div>
        </div>
      </div>
    </footer>);

};

Object.assign(window, { ProcessFlow, Metrics, Integrations, ProductDef, FounderSituation, Features, DataStrategy, Decisions, FinalCTA, Footer });