// Hero — headline + dashboard mockup

const Hero = () => {
  const Ic = window.Ic;
  return (
    <section className="hero">
      <div className="wrap-narrow">
        <h1 className="h1 hero-a1" style={{marginTop: 0}}>Before you decide to shut down — <em>know all your options.</em></h1>
        <p className="sub hero-a2">Connect your company data, understand your runway, identify legal, tax, payroll, accounting, and investor risks, and compare your options before making a closure decision.</p>
        <div className="hero-ctas hero-a3" style={{justifyContent:'center'}}>
          <a href="#cta-final" className="btn btn-primary btn-lg" style={{padding:'20px 36px', fontSize:17}}>Get Started <Ic.arrow /></a>
        </div>
      </div>

      {/* Dashboard mockup */}
      <div className="wrap hero-dash-wrap hero-a4">
        <HeroDashboard />
      </div>
    </section>);

};

const HeroDashboard = () => {
  const Ic = window.Ic;
  // Light auto-animation: numbers tick subtly
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    const i = setInterval(() => setT((x) => x + 1), 2400);
    return () => clearInterval(i);
  }, []);
  const cashOut = ['Aug 14, 2026', 'Aug 18, 2026', 'Aug 12, 2026'][t % 3];
  const burn = ['$184k', '$181k', '$186k'][t % 3];

  return (
    <div className="dash">
      <div className="dash-bar">
        <div className="dot-row"><span /><span /><span /></div>
        <div className="url">app.drclosest.com / overview / smile-inc</div>
        <div className="crumb"><span className="live-dot"></span>Live snapshot · synced 2 min ago</div>
      </div>
      <div className="dash-body">
        {/* sidebar */}
        <aside className="dash-side">
          <div className="brand" style={{ padding: '4px 8px 12px', fontSize: 14 }}>
            <div className="brand-mark" style={{ width: 22, height: 22, fontSize: 13, borderRadius: 6 }}>D</div>
            DR.ClosEST
          </div>
          <div className="side-section">Diagnostics</div>
          <div className="side-item active"><Ic.layers /> Overview</div>
          <div className="side-item"><Ic.cash /> Runway &amp; cash</div>
          <div className="side-item"><Ic.shield /> Risk findings</div>
          <div className="side-item"><Ic.scale /> Decision compare</div>
          <div className="side-item"><Ic.doc /> Documents</div>
          <div className="side-section">Workspace</div>
          <div className="side-item"><Ic.users /> Cap table</div>
          <div className="side-item"><Ic.briefcase /> Payroll</div>
          <div className="side-item"><Ic.globe /> State filings</div>
          <div className="side-item"><Ic.flag /> Closure report</div>
        </aside>

        <div className="dash-main">
          {/* Plain-language verdict banner — answers "what should I look at?" instantly */}
          <div style={{
            display:'flex', alignItems:'center', gap:14,
            padding:'14px 18px', borderRadius:12,
            background:'linear-gradient(90deg, #fdf3e2 0%, #fff 70%)',
            border:'1px solid rgba(184,122,26,.25)', marginBottom:16
          }}>
            <div style={{
              width:36, height:36, borderRadius:10, flexShrink:0,
              background:'#f6ecd6', color:'#b87a1a',
              display:'grid', placeItems:'center'
            }}><Ic.alert/></div>
            <div style={{flex:1}}>
              <div style={{fontSize:11.5, color:'#b87a1a', letterSpacing:'.1em', textTransform:'uppercase', fontWeight:500}}>Your situation, in one line</div>
              <div style={{fontSize:14.5, color:'var(--ink)', marginTop:2, fontWeight:500}}>
                You have <strong>~4 months of runway</strong> and <strong>2 high-priority risks</strong>. Most founders in this state should plan a decision within 30 days.
              </div>
            </div>
            <span className="pill amber" style={{flexShrink:0}}><span className="dotc"></span> Needs review</span>
          </div>

          <div className="dash-h">
            <div>
              <h3>DR.ClosEST — Closure readiness overview</h3>
              <p>Delaware C-Corp · 7 employees · synced from QuickBooks, Gusto &amp; Plaid</p>
            </div>
          </div>

          {/* Tiles with explainer captions */}
          <div className="tiles">
            <div className="tile">
              <div className="label">① How long can you keep going?</div>
              <div className="val">4.2<small>mo</small></div>
              <div className="delta">Cash runs out: {cashOut}</div>
            </div>
            <div className="tile">
              <div className="label">② What it costs to close</div>
              <div className="val">$72k<small>– $118k</small></div>
              <div className="delta">Estimated total wind-down cost</div>
            </div>
            <div className="tile">
              <div className="label">③ What you spend each month</div>
              <div className="val">{burn}</div>
              <div className="delta">One more month costs you {burn}</div>
            </div>
            <div className="tile">
              <div className="label">④ What needs your attention</div>
              <div className="val">11<small>items</small></div>
              <div style={{ display: 'flex', gap: 4, marginTop: 8 }}>
                {[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 3, 3, 3, 3].map((s, i) =>
                <span key={i} style={{ flex: 1, height: 6, borderRadius: 2, background: s === 1 ? '#e6f1ea' : s === 2 ? '#f6ecd6' : '#f5dedb' }} />
                )}
              </div>
              <div className="delta"><span style={{color:'var(--red)'}}>● 2 high</span> · <span style={{color:'var(--amber)'}}>● 4 review</span> · <span style={{color:'var(--green)'}}>● 5 low</span></div>
            </div>
          </div>

          <div className="dash-row2">
            <div className="panel">
              <h4>Top things to handle <span className="more">5 of 11 shown →</span></h4>
              <div className="risk-row">
                <span className="badge red">High</span>
                <span className="name">Pay final wages by termination day (CA rule)</span>
                <span className="meta">Payroll</span>
              </div>
              <div className="risk-row">
                <span className="badge red">High</span>
                <span className="name">Get investor approval before closing</span>
                <span className="meta">Cap table</span>
              </div>
              <div className="risk-row">
                <span className="badge amber">Review</span>
                <span className="name">$24,800 owed to 3 vendors</span>
                <span className="meta">Accounting</span>
              </div>
              <div className="risk-row">
                <span className="badge amber">Review</span>
                <span className="name">Withdraw CA foreign registration</span>
                <span className="meta">Legal · State</span>
              </div>
              <div className="risk-row">
                <span className="badge green">Low</span>
                <span className="name">EIN cancellation ready to file</span>
                <span className="meta">Tax · IRS</span>
              </div>
            </div>

            <div className="reco">
              <div className="tag">→ Recommended next step</div>
              <h5>Start closure prep within 30 days.</h5>
              <p>Waiting another month would leave you below the cash needed to close safely. We've prepared a report you can bring to your attorney and CPA.</p>
              <div className="actions">
                <span className="chip" style={{background:'var(--ink)', color:'#fff', borderColor:'var(--ink)'}}>Generate report →</span>
                <span className="chip">Compare options</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>);

};

window.Hero = Hero;
window.HeroDashboard = HeroDashboard;