/* Mesh website — "The current system breakdown": four illustrated problem cards.
   Illustrations reuse the kit's window/grid motif (CSS, not hand-drawn SVG) and
   animate on hover; cards reveal with a stagger on scroll. */

function BdManual() {
  return (
    <div className="bd-illu bd-manual">
      <div className="bd-win bd-win-back">
        <div className="bd-win-bar"><i></i><i></i><i></i></div>
        <div className="bd-grid"><span className="bd-cell blue"></span></div>
      </div>
      <div className="bd-win bd-win-front">
        <div className="bd-win-bar"><i></i><i></i><i></i></div>
        <div className="bd-grid"><span className="bd-cell blue b2"></span></div>
      </div>
    </div>
  );
}

function BdMissing() {
  return (
    <div className="bd-illu bd-missing">
      <div className="bd-disc"></div>
      <div className="bd-doc bd-doc-back"><span>INVOICE</span></div>
      <div className="bd-doc bd-doc-front"><span>INVOICE</span></div>
      <span className="bd-glass"><Icon name="search" className="ic" /></span>
    </div>
  );
}

function BdMessy() {
  return (
    <div className="bd-illu bd-messy">
      <div className="bd-win bd-win-solo">
        <div className="bd-win-bar"><i></i><i></i><i></i></div>
        <div className="bd-grid bd-grid-lg">
          <span className="bd-cell red"></span>
          <span className="bd-warn"><Icon name="triangle-alert" className="ic" /></span>
        </div>
      </div>
    </div>
  );
}

function BdMaterial() {
  return (
    <div className="bd-illu bd-material">
      <span className="bd-pill"><span className="bd-spin"></span> ADJUSTMENTS…</span>
      <div className="bd-bars">
        <span className="bd-bar ghost"></span>
        <span className="bd-bar tall"></span>
        <span className="bd-bar short"></span>
      </div>
    </div>
  );
}

const BREAKDOWN = [
  { Illu: BdManual, title: 'Manual reconciliation', body: "Identifying vendors that haven't invoiced and need to be accrued involves aggregating data across AP inbox, GL, and contracts." },
  { Illu: BdMissing, title: 'Missing invoices', body: 'Confirming usage and service delivery with internal stakeholders and vendors requires time-consuming outreach.' },
  { Illu: BdMessy, title: 'Messy exceptions', body: 'Evolving accrual policies across vendors and functional departments lead to lengthy reviews and offline spreadsheets.' },
  { Illu: BdMaterial, title: 'Material adjustments', body: 'Accounting for discrepancies between estimated accruals, realized expenses, and budgets is complex and labor-intensive.' },
];

function BdCard({ Illu, title, body, delay }) {
  const ref = React.useRef(null);
  const [active, setActive] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el || typeof IntersectionObserver === 'undefined') return;
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) { setActive(true); obs.unobserve(el); }
    }, { threshold: 0.35 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return (
    <article ref={ref} className={'bd-card' + (active ? ' is-active' : '')} tabIndex="0"
             style={{ animationDelay: delay + 'ms' }}>
      <div className="bd-stage"><Illu /></div>
      <h3 className="bd-title">{title}</h3>
      <p className="bd-body">{body}</p>
    </article>
  );
}

function SystemBreakdown() {
  return (
    <section className="bd" id="breakdown">
      <div className="wrap">
        <div className="section-head center">
          <h2>Month-end close is broken.</h2>
          <p className="sub">Teams waste days every close cycle on repetitive, error-prone accrual work.</p>
        </div>
        <div className="bd-grid-cards">
          {BREAKDOWN.map(({ Illu, title, body }, i) => (
            <BdCard key={title} Illu={Illu} title={title} body={body} delay={i * 90} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SystemBreakdown });