// Statement (gray -> accent wipe), Solutions card stack, Work showcase

function StatementText({ duplicate }) {
  const pill = duplicate
    ? <span className="st-pill">Get instant quote<Arrow /></span>
    : <QuoteLink className="st-pill">Get instant quote</QuoteLink>;
  return (
    <p className="statement-text">
      We transform your idea{' '}
      <span className="st-imgs" aria-hidden="true">
        <img src="/uploads/process_discover.webp" alt="" width="1024" height="1024" style={{ '--r': '-6deg' }} loading="lazy" />
        <img src="/uploads/process_build.webp" alt="" width="1024" height="1024" style={{ '--r': '5deg' }} loading="lazy" />
      </span>{' '}
      into a reliable, fully functional live system, ready to{' '}
      <span className="st-arrow" aria-hidden="true"><Arrow /></span>{' '}
      launch, scale, and create impact. {pill}
    </p>
  );
}

function Statement() {
  const reduced = useReducedMotion();
  const sectionRef = React.useRef(null);
  const stickyRef = React.useRef(null);

  useScrollFrame(() => {
    const section = sectionRef.current;
    const sticky = stickyRef.current;
    if (!section || !sticky) return;
    const p = reduced ? 0 : pinProgress(section);
    sticky.style.setProperty('--wipe', clamp01((p - 0.42) / 0.5).toFixed(4));
  }, [reduced]);

  return (
    <section ref={sectionRef} className="statement" id="about" aria-label="About Next Horizon">
      <div ref={stickyRef} className="statement-sticky">
        <div className="statement-layer">
          <StatementText />
        </div>
        <div className="statement-layer statement-layer--accent" aria-hidden="true">
          <StatementText duplicate />
        </div>
      </div>
    </section>
  );
}

const SERVICES = [
  { t: 'Dashboards & Reporting', d: 'Live numbers for sales, operations and finance, plus daily, weekly and monthly reports that build themselves instead of waiting for an Excel update.' },
  { t: 'Internal Systems', d: 'Orders, purchasing, approvals and job tracking in one lightweight system built around how your team already works.' },
  { t: 'Inventory & Orders', d: 'Stock movement, orders, deliveries, barcode scans and reorder alerts in one place, across every branch or warehouse.' },
  { t: 'Booking & Payments', d: 'Online booking, payments, reminders and customer self-service that replace the WhatsApp-and-spreadsheet routine.' },
  { t: 'Workflow Automation', d: 'Forms, checklists, approvals and handovers moved off paper and chat groups, with a clear record of who did what.' },
  { t: 'Integrations', d: 'Connect accounting, e-commerce, WhatsApp Business and the tools you already pay for, so nobody re-types the same data.' },
  { t: 'AI Assistants', d: 'AI that reads documents, answers staff questions, drafts replies and checks photos, added where it removes real work.' },
];

// Original line illustrations, one per service. Drawn on a 400x220 canvas.
function ServiceArt({ i }) {
  const a = 'var(--accent)';
  const w = 'rgba(255,255,255,0.85)';
  const m = 'rgba(255,255,255,0.22)';
  const g = 'rgba(255,255,255,0.08)';
  const arts = [
    // 0 dashboard: bars + trend line
    <g key="0">
      {[0, 1, 2, 3, 4, 5, 6, 7].map((k) => {
        const h = [60, 92, 74, 120, 104, 138, 116, 150][k];
        return <rect key={k} x={52 + k * 38} y={182 - h} width="22" height={h} rx="4" fill={k === 7 ? a : m} />;
      })}
      <path d="M60 128 L98 104 L136 116 L174 82 L212 92 L250 60 L288 70 L326 40" stroke={w} strokeWidth="3" fill="none" strokeLinejoin="round" />
      <circle cx="326" cy="40" r="7" fill={a} />
    </g>,
    // 1 ERP: connected modules
    <g key="1">
      {[[60, 40], [60, 136], [170, 88], [280, 40], [280, 136]].map(([x, y], k) => (
        <rect key={k} x={x} y={y} width="70" height="46" rx="10" fill={k === 2 ? a : g} stroke={k === 2 ? 'none' : m} strokeWidth="2" />
      ))}
      <path d="M130 63 H150 V111 H170 M130 159 H150 V111 M240 111 H260 V63 H280 M260 111 V159 H280" stroke={w} strokeWidth="2.5" fill="none" />
    </g>,
    // 2 inventory: shelving with boxes
    <g key="2">
      {[56, 118, 180].map((y) => <line key={y} x1="60" y1={y} x2="340" y2={y} stroke={m} strokeWidth="3" />)}
      {[
        [56, [[70, 40], [118, 30], [156, 46], [212, 36], [258, 28], [296, 38]]],
        [118, [[74, 34], [116, 46], [172, 30], [212, 48], [270, 34]]],
        [180, [[68, 38], [114, 30], [152, 44], [206, 34], [250, 48], [306, 28]]],
      ].map(([shelf, boxes], r) => boxes.map(([x, s], k) => {
        const hot = r === 1 && k === 3;
        return <rect key={`${r}-${k}`} x={x} y={shelf - s - 2} width={s} height={s} rx="4" fill={hot ? a : g} stroke={hot ? 'none' : w} strokeOpacity="0.5" strokeWidth="2" />;
      }))}
    </g>,
    // 3 booking: calendar with booked slots
    <g key="3">
      <rect x="70" y="26" width="260" height="170" rx="12" fill={g} stroke={m} strokeWidth="2" />
      <rect x="88" y="39" width="70" height="8" rx="4" fill={w} />
      <rect x="250" y="33" width="64" height="20" rx="10" fill={a} />
      <text x="266" y="47" fontSize="10" fontFamily="Inter Tight, sans-serif" fontWeight="600" fill="#0b0b0b">PAID</text>
      <line x1="70" y1="62" x2="330" y2="62" stroke={m} strokeWidth="2" />
      {Array.from({ length: 21 }, (_, k) => {
        const booked = [2, 5, 9, 10, 15, 19].includes(k);
        return <rect key={k} x={88 + (k % 7) * 34} y={76 + Math.floor(k / 7) * 38} width="24" height="24" rx="6" fill={booked ? (k === 10 ? a : w) : m} fillOpacity={booked && k !== 10 ? 0.75 : 1} />;
      })}
    </g>,
    // 4 workflow: checklist
    <g key="4">
      {[0, 1, 2, 3].map((k) => (
        <g key={k}>
          <rect x="96" y={34 + k * 42} width="26" height="26" rx="7" fill={k === 2 ? 'none' : a} stroke={k === 2 ? '#ff6b5e' : 'none'} strokeWidth="2.5" />
          {k !== 2 && <path d={`M102 ${47 + k * 42} l6 6 l10 -12`} stroke="#0b0b0b" strokeWidth="3" fill="none" strokeLinecap="round" />}
          {k === 2 && <path d="M103 125 l12 12 M115 125 l-12 12" stroke="#ff6b5e" strokeWidth="2.5" strokeLinecap="round" />}
          <rect x="138" y={42 + k * 42} width={[150, 120, 164, 104][k]} height="10" rx="5" fill={k === 2 ? w : m} />
        </g>
      ))}
    </g>,
    // 5 integrations: hub and spokes
    <g key="5">
      {[[84, 56], [84, 164], [316, 56], [316, 164], [200, 30], [200, 190]].map(([x, y], k) => (
        <g key={k}>
          <line x1="200" y1="110" x2={x} y2={y} stroke={k === 2 ? w : m} strokeWidth="2.5" strokeDasharray={k === 2 ? 'none' : '6 6'} />
          <rect x={x - 20} y={y - 18} width="40" height="36" rx="9" fill="#0f1012" stroke={k === 2 ? w : m} strokeWidth="2" />
        </g>
      ))}
      <circle cx="200" cy="110" r="30" fill={a} />
      <path d="M188 110 h24 M204 102 l8 8 l-8 8" stroke="#0b0b0b" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </g>,
    // 6 AI assistant: chat exchange
    <g key="6">
      <rect x="60" y="30" width="196" height="58" rx="16" fill={g} stroke={m} strokeWidth="2" />
      <rect x="80" y="49" width="132" height="8" rx="4" fill={w} />
      <rect x="80" y="65" width="92" height="8" rx="4" fill={m} />
      <rect x="140" y="106" width="200" height="80" rx="16" fill={a} />
      {[146, 128, 84].map((wd, k) => <rect key={k} x="160" y={126 + k * 16} width={wd} height="8" rx="4" fill="#0b0b0b" fillOpacity={k === 0 ? 0.75 : 0.45} />)}
      <path d="M96 116 L102 134 L120 140 L102 146 L96 164 L90 146 L72 140 L90 134 Z" fill={w} />
      <path d="M300 40 L303 50 L313 53 L303 56 L300 66 L297 56 L287 53 L297 50 Z" fill={a} />
    </g>,
  ];
  return (
    <svg viewBox="0 0 400 220" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
      <rect width="400" height="220" fill="#0f1012" />
      {arts[i]}
    </svg>
  );
}

function Solutions() {
  const reduced = useReducedMotion();
  const sectionRef = React.useRef(null);
  const [active, setActive] = React.useState(0);
  const n = SERVICES.length;

  useScrollFrame(() => {
    const section = sectionRef.current;
    if (!section || reduced) return;
    const p = pinProgress(section);
    const idx = Math.min(n - 1, Math.floor(p * n * 0.999));
    setActive((prev) => (prev === idx ? prev : idx));
  }, [reduced]);

  return (
    <section ref={sectionRef} className="solutions" id="solutions" style={{ '--n': n }} aria-labelledby="solutions-title">
      <div className="solutions-sticky">
        <div className="solutions-copy">
          <h2 id="solutions-title" className="solutions-lead">
            Proven methods and streamlined processes that take your idea from first workshop to live system.
          </h2>
          <div className="solutions-foot">
            <p>Start with the one that hurts most. Every module connects to the next when you are ready.</p>
            {!reduced && (
              <span className="solutions-count" aria-hidden="true">
                {String(active + 1).padStart(2, '0')} / {String(n).padStart(2, '0')}
              </span>
            )}
          </div>
        </div>
        <ol className="card-stack">
          {SERVICES.map((s, i) => {
            const d = i - active;
            const cls = d < 0 ? ' is-gone' : '';
            return (
              <li
                key={s.t}
                className={`svc-card${cls}`}
                style={{ '--d': Math.max(0, Math.min(d, 3)), opacity: d > 3 ? 0 : undefined }}
              >
                <span className="svc-num">{String(i + 1).padStart(2, '0')}.</span>
                <div className="svc-body">
                  <h3 className="svc-title">{s.t}</h3>
                  <p className="svc-desc">{s.d}</p>
                </div>
                <div className="svc-art"><ServiceArt i={i} /></div>
              </li>
            );
          })}
        </ol>
      </div>
    </section>
  );
}

// Example builds: drawn sample screens, one per kind of system. Not client work; all figures are sample data.

function WsSide({ active }) {
  return (
    <div className="ws-side">
      <span className="ws-logo" />
      {[0, 1, 2, 3, 4].map((k) => <span key={k} className={`ws-nav${k === active ? ' is-on' : ''}`} />)}
    </div>
  );
}

function WsTop({ title, chip }) {
  return (
    <div className="mock-top">
      <span className="mock-dot" /><span className="mock-dot" /><span className="mock-dot" />
      <span className="mock-title">{title}</span>
      <span className="ws-chip">{chip}</span>
    </div>
  );
}

function ScreenDashboard() {
  const bars = [34, 52, 46, 70, 62, 84, 58, 76, 92, 66, 48, 30];
  const branches = [['Branch A', 'On track', 'ok', 92], ['Branch B', 'Busy', 'warn', 71], ['Branch C', 'Delayed', 'bad', 48], ['Branch D', 'On track', 'ok', 88], ['Online store', 'On track', 'ok', 95]];
  return (
    <>
      <WsTop title="Operations overview" chip="All branches · Today" />
      <div className="ws-body">
        <WsSide active={0} />
        <div className="ws-main ws-dash">
          <div className="ws-kpis">
            <div className="ws-kpi"><small>Orders</small><b>1,248</b><i className="ok">+8% vs last week</i></div>
            <div className="ws-kpi"><small>In progress</small><b>36</b><i>12 due today</i></div>
            <div className="ws-kpi"><small>Overdue</small><b>4</b><i className="bad">2 need follow-up</i></div>
            <div className="ws-kpi ws-kpi--accent"><small>On time</small><b>94%</b><i>Target 90%</i></div>
          </div>
          <div className="ws-card ws-chart">
            <div className="ws-card-head"><b>Orders by hour</b><span>Live</span></div>
            <div className="ws-bars">{bars.map((h, k) => <span key={k} className={k === 8 ? 'is-peak' : ''} style={{ height: `${h}%` }} />)}</div>
            <div className="ws-axis"><span>8am</span><span>12pm</span><span>4pm</span><span>7pm</span></div>
          </div>
          <div className="ws-card ws-list">
            <div className="ws-card-head"><b>Branch status</b></div>
            {branches.map(([n, s, c, v]) => (
              <div key={n} className="ws-branch">
                <span>{n}</span><em className={`ws-badge ${c}`}>{s}</em>
                <span className="ws-meter"><span className={c} style={{ width: `${v}%` }} /></span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

function ScreenOrders() {
  const cols = [
    ['New', 12, [['SO-2291', '24 items', ''], ['SO-2292', '6 items', ''], ['SO-2293', '11 items', '']]],
    ['Needs approval', 5, [['SO-2287', 'Discount 12%', 'approve'], ['SO-2288', 'Credit limit', 'approve']]],
    ['Packing', 8, [['SO-2280', 'Picked 18/24', 'warn', 75], ['SO-2283', 'Picked 9/9', 'ok', 100], ['SO-2284', 'Picked 3/12', 'warn', 25]]],
    ['Out for delivery', 6, [['SO-2276', 'ETA 3:40pm', 'ok', 100], ['SO-2278', 'ETA 5:10pm', 'ok', 100], ['SO-2279', 'ETA 6:00pm', 'ok', 100]]],
  ];
  const stages = [['New', 12], ['Approval', 5], ['Packing', 8], ['On the road', 6], ['Delivered', 41]];
  return (
    <>
      <WsTop title="Orders → delivery" chip="This week" />
      <div className="ws-body">
        <WsSide active={1} />
        <div className="ws-main ws-orders">
          <div className="ws-stages">
            {stages.map(([s, n], k) => <div key={s} className={`ws-stage${k === 4 ? ' is-done' : ''}`}><b>{n}</b><small>{s}</small></div>)}
          </div>
          <div className="ws-board">
            {cols.map(([name, total, cards]) => (
              <div key={name} className="ws-col">
                <div className="ws-col-head"><b>{name}</b><span>{total}</span></div>
                {cards.map(([id, sub, state, pct]) => (
                  <div key={id} className="ws-ticket">
                    <div className="ws-ticket-top"><b>{id}</b><span className="ws-ava" /></div>
                    <small>{sub}</small>
                    {state === 'approve'
                      ? <div className="ws-ticket-act"><em className="ws-badge warn">Awaiting manager</em><span className="ws-btn">Approve</span></div>
                      : state && <div className="ws-ticket-act"><span className="ws-meter"><span className={state} style={{ width: `${pct}%` }} /></span></div>}
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

function ScreenBooking() {
  const days = Array.from({ length: 35 }, (_, k) => k - 2);
  const slots = [['9:00', 'taken'], ['9:30', ''], ['10:00', 'taken'], ['10:30', 'is-on'], ['11:00', ''], ['11:30', ''], ['2:00', 'taken'], ['2:30', ''], ['3:00', '']];
  return (
    <>
      <WsTop title="Book a visit" chip="Customer view" />
      <div className="ws-body ws-body--portal">
        <div className="ws-main ws-book">
          <ol className="ws-steps">
            <li className="is-done">Service</li><li className="is-on">Date &amp; time</li><li>Pay deposit</li><li>Confirmed</li>
          </ol>
          <div className="ws-card ws-cal">
            <div className="ws-card-head"><b>October</b><span>‹ ›</span></div>
            <div className="ws-cal-grid">
              {['M', 'T', 'W', 'T', 'F', 'S', 'S'].map((d, k) => <small key={`h${k}`}>{d}</small>)}
              {days.map((d) => <span key={d} className={d === 23 ? 'is-on' : d === 21 ? 'is-today' : d < 1 || d > 31 ? 'is-off' : ''}>{d < 1 || d > 31 ? '' : d}</span>)}
            </div>
          </div>
          <div className="ws-stack">
            <div className="ws-card ws-slots">
              <div className="ws-card-head"><b>Thu, 23 Oct</b><span>6 open</span></div>
              <div className="ws-slot-grid">{slots.map(([t, c]) => <span key={t} className={c}>{t}</span>)}</div>
            </div>
            <div className="ws-toast"><span className="ws-bell" /><div><b>Reminder scheduled</b><small>WhatsApp and email, 1 day before</small></div></div>
          </div>
          <div className="ws-card ws-summary">
            <div className="ws-card-head"><b>Your booking</b></div>
            <dl>
              <div><dt>Service</dt><dd>Consultation · 60 min</dd></div>
              <div><dt>When</dt><dd>Thu 23 Oct, 10:30am</dd></div>
              <div><dt>Staff</dt><dd>Any available</dd></div>
              <div><dt>Deposit</dt><dd>RM 50.00</dd></div>
            </dl>
            <small className="ws-fine">Free to reschedule up to 24 hours before.</small>
            <span className="ws-pay">Pay deposit</span>
            <div className="ws-methods"><span>FPX</span><span>Card</span><span>E-wallet</span></div>
          </div>
        </div>
      </div>
    </>
  );
}

function ScreenInventory() {
  const rows = [
    ['Packaging boxes (M)', 'PK-104', 1840, 82, 'ok', 'In stock'],
    ['Thermal labels', 'LB-220', 96, 18, 'bad', 'Reorder'],
    ['Cleaning kit', 'CL-031', 240, 46, 'warn', 'Low'],
    ['Printer toner', 'TN-512', 6, 9, 'bad', 'Reorder'],
    ['Shipping tape', 'TP-077', 610, 74, 'ok', 'In stock'],
    ['Gloves (box)', 'GL-210', 58, 14, 'bad', 'Reorder'],
    ['Bubble wrap roll', 'BW-118', 320, 66, 'ok', 'In stock'],
    ['Receipt paper', 'RP-045', 410, 58, 'ok', 'In stock'],
  ];
  return (
    <>
      <WsTop title="Stock levels" chip="Main warehouse" />
      <div className="ws-body">
        <WsSide active={2} />
        <div className="ws-main ws-inv">
          <div className="ws-alert"><span className="ws-alert-dot" /><b>3 items below reorder point.</b><span>Purchase orders drafted for review.</span><span className="ws-btn">Review POs</span></div>
          <div className="ws-kpis ws-kpis--3">
            <div className="ws-kpi"><small>Active SKUs</small><b>842</b><i>Across 2 sites</i></div>
            <div className="ws-kpi"><small>Low stock</small><b>4</b><i className="bad">3 at reorder point</i></div>
            <div className="ws-kpi"><small>Incoming</small><b>5 POs</b><i className="ok">2 arrive today</i></div>
          </div>
          <div className="ws-card ws-table">
            <div className="ws-tr ws-th"><span>Item</span><span>SKU</span><span>On hand</span><span>Level</span><span>Status</span></div>
            {rows.map(([n, sku, q, lvl, c, s]) => (
              <div key={sku} className="ws-tr">
                <span>{n}</span><span className="ws-mono">{sku}</span><span>{q.toLocaleString('en-US')}</span>
                <span className="ws-meter"><span className={c} style={{ width: `${lvl}%` }} /></span>
                <span><em className={`ws-badge ${c}`}>{s}</em></span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

const WORK_ITEMS = [
  { t: 'Live operations view across branches', tag: 'Dashboard', bg: '/uploads/process_scale.webp', Screen: ScreenDashboard, label: 'Sample dashboard screen: orders, on-time rate, orders by hour and status for each branch' },
  { t: 'Order to delivery tracking with approvals', tag: 'Internal system', bg: '/uploads/process_design.webp', Screen: ScreenOrders, label: 'Sample internal system screen: orders moving from new to approval, packing and delivery' },
  { t: 'Online booking, payments and reminders', tag: 'Customer portal', bg: '/uploads/process_discover.webp', Screen: ScreenBooking, label: 'Sample customer portal screen: pick a date and time slot, pay a deposit and get a reminder' },
  { t: 'Stock levels with automatic reorder alerts', tag: 'Inventory', bg: '/uploads/process_build.webp', Screen: ScreenInventory, label: 'Sample inventory screen: stock levels per item with reorder alerts and drafted purchase orders' },
];

function WorkMedia({ children, className = '' }) {
  const ref = React.useRef(null);
  const reduced = useReducedMotion();
  useScrollFrame(() => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const vh = window.innerHeight;
    if (r.bottom < 0 || r.top > vh) return;
    const centre = (r.top + r.height / 2 - vh / 2) / vh; // -1..1 roughly
    el.style.setProperty('--par', reduced ? '0px' : `${(centre * -60).toFixed(1)}px`);
    el.style.setProperty('--sc', reduced ? '1' : (1 - Math.min(0.06, Math.abs(centre) * 0.08)).toFixed(3));
  }, [reduced]);
  return <div ref={ref} className={`work-media ${className}`.trim()}>{children}</div>;
}

function Work() {
  return (
    <section className="work" id="work" aria-labelledby="work-title">
      <div className="work-head">
        <h2 id="work-title" className="t-display reveal">Discover our work.</h2>
        <p className="reveal r-d-1">What your system can look like</p>
      </div>

      <div className="work-item">
        <WorkMedia className="work-media--feature">
          <div className="work-media-inner" aria-hidden="true" />
          <div className="work-screen-wrap">
            <figure className="work-shot">
              <div className="mock-top" aria-hidden="true">
                <span className="mock-dot" /><span className="mock-dot" /><span className="mock-dot" />
                <span className="mock-title">quote.nexthorizon.my</span>
              </div>
              <img
                src="/uploads/work_quote_app.webp"
                alt="Next Horizon project estimate app: get a quotation for your custom system in about 5 minutes"
                width="1600" height="1000" loading="lazy"
              />
            </figure>
          </div>
        </WorkMedia>
        <div className="work-caption">
          <h3>Instant project estimator, built and run by Next Horizon</h3>
          <p><a href={QUOTE_URL}>quote.nexthorizon.my</a> · Live</p>
        </div>
      </div>

      {WORK_ITEMS.map(({ t, tag, bg, Screen, label }) => (
        <div className="work-item" key={t}>
          <WorkMedia>
            <div className="work-media-inner" aria-hidden="true"><img src={bg} alt="" width="1024" height="1024" loading="lazy" /></div>
            <div className="work-screen-wrap">
              <figure className="work-shot ws" role="img" aria-label={label}>
                <div className="ws-inner" aria-hidden="true"><Screen /></div>
              </figure>
            </div>
          </WorkMedia>
          <div className="work-caption">
            <h3>{t}</h3>
            <p>{tag} · Example build</p>
          </div>
        </div>
      ))}

      <p className="work-note">Example builds are shown as sample screens with sample data to help you picture the scope. Client systems stay private.</p>
    </section>
  );
}

Object.assign(window, { Statement, Solutions, Work });