// ─────────────────────────────────────────────────────────
//  Bento — 3 capability cards
// ─────────────────────────────────────────────────────────

function dailyIncrement(dayIndex, min, max) {
  const h = (dayIndex * 1103515245 + 12345) >>> 0;
  return min + (h % (max - min + 1));
}

function computeDailyCount(start, anchorDate, minStep, maxStep) {
  const anchor = new Date(anchorDate + 'T00:00:00');
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const days = Math.max(0, Math.floor((today - anchor) / 86400000));
  let total = start;
  for (let d = 0; d < days; d++) {
    total += dailyIncrement(d, minStep, maxStep);
  }
  return total;
}

function Counter({ start, anchorDate, minStep = 10, maxStep = 20 }) {
  const n = computeDailyCount(start, anchorDate, minStep, maxStep);
  return <span>{n.toLocaleString()}</span>;
}

function Bento() {
  return (
    <section className="section shell" data-screen-label="Capabilities">
      <div>
        <div className="kicker">§02 · Capability Verticals</div>
        <h2 style={{
          fontFamily:'var(--serif)', fontWeight:400,
          fontSize:'clamp(40px, 5vw, 76px)', lineHeight:1.0,
          letterSpacing:'-0.02em', margin:'18px 0 0', maxWidth:'18ch',
          textWrap:'balance',
        }}>
          Three disciplines.<br/>
          <span style={{fontStyle:'italic', color:'var(--accent)'}}>One execution layer.</span>
        </h2>
      </div>

      <div className="bento-grid">
        {/* CARD 1 — Front-end systems (wide, tall) */}
        <div className="bento-card tall">
          <span className="num">01 / 03</span>
          <span className="label">Premium Front-End Systems</span>
          <h3>Framer-grade interaction, Webflow speed, custom on demand.</h3>
          <p>
            Headless WordPress with Elementor overrides for content velocity. Framer
            for motion-first marketing surfaces. Hand-built React for proprietary UI.
            Every layer auto-scores Lighthouse 95+, ships sub-1s LCP, and survives
            production load without a CDN babysitter.
          </p>
          <div className="tech-row">
            <span className="tech-tag">Framer</span>
            <span className="tech-tag">Webflow</span>
            <span className="tech-tag">Headless WP</span>
            <span className="tech-tag">React 18</span>
            <span className="tech-tag">GSAP</span>
            <span className="tech-tag">Three.js</span>
            <span className="tech-tag">Tailwind</span>
          </div>

          {/* abstract preview */}
          <div style={{
            marginTop:28, padding:20, border:'1px solid var(--line)',
            borderRadius:16, background:'#00000040',
            display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8,
          }}>
            {['Hero', 'Showcase', 'CTA', 'Pricing', 'Bento', 'Footer'].map((b, i) => (
              <div key={b} style={{
                aspectRatio:'4/3', borderRadius:8,
                border:'1px solid var(--line)',
                background: i === 1 ? 'rgba(0,242,254,0.08)' : '#0E0E0C',
                display:'flex', alignItems:'flex-end', padding:8,
                fontFamily:'var(--mono)', fontSize:10, color:'var(--muted)',
                letterSpacing:'0.1em', textTransform:'uppercase',
              }}>{b}</div>
            ))}
          </div>
        </div>

        {/* CARD 2 — Automation Engine */}
        <div className="bento-card">
          <span className="num">02 / 03</span>
          <span className="label">Automation Orchestration Engine</span>
          <h3>n8n · Make · Zapier — pinned to one workflow surface.</h3>
          <p>
            Lead capture → CRM → notification → scoring → routing. End-to-end in
            seconds, observable, and self-healing on failure.
          </p>

          <div className="counter-display">
            <div className="cnt-label">Total automated payloads routed</div>
            <div className="cnt-value"><Counter start={1224} anchorDate="2026-06-11" minStep={10} maxStep={20} /></div>
            <div className="cnt-tail">live · updates daily across studio deployments</div>
          </div>

          <div className="schema">
            <div className="node">Form</div>
            <div className="node acc">n8n</div>
            <div className="node">CRM</div>
            <div className="node">WApp</div>
          </div>
        </div>

        {/* CARD 3 — SaaS / CRM core */}
        <div className="bento-card">
          <span className="num">03 / 03</span>
          <span className="label">SaaS, CRM &amp; Core Infrastructure</span>
          <h3>Multi-tenant data, serverless state, custom dashboards.</h3>
          <p>
            Secure multi-tenant indexing, edge-deployed serverless functions, and
            headless CRM dashboards tailored to operator workflows — not template
            funnels.
          </p>

          <div style={{
            marginTop:22,
            display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:8,
          }}>
            {[
              ['Tenants', '128'],
              ['Edge fns', '042'],
              ['Uptime', '99.97'],
            ].map(([k,v]) => (
              <div key={k} style={{
                border:'1px solid var(--line)', borderRadius:10,
                padding:'12px 10px', background:'#00000050',
              }}>
                <div style={{
                  fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.16em',
                  textTransform:'uppercase', color:'var(--muted)',
                }}>{k}</div>
                <div style={{
                  fontFamily:'var(--serif)', fontSize:28, color:'var(--ink)',
                  marginTop:6, letterSpacing:'-0.02em',
                }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Bento = Bento;