// Vision (about), Services list, Process accordion, Stats band

function Vision() {
  return (
    <section className="sec" id="about">
      <div className="wrap">
        <div style={{ marginBottom: 64 }} className="reveal"><SlashTag>OUR VISION</SlashTag></div>
        <div className="reveal r-d-1">
          <h2 className="h-section serif" style={{ maxWidth: '14ch' }}>
            Built for SMEs who are<br />
            <span className="italic">tired of</span> shelfware.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, marginTop: 80 }} className="vision-grid">
          <div className="reveal r-d-2">
            <p className="lede">
              Most AI projects in this region die in pilot. Decks, demos, vendors. Six months later, nothing in production.
            </p>
            <p className="lede" style={{ marginTop: 18 }}>
              We do the opposite. Senior team. Fixed cadence. Working systems live in your business in weeks — not quarters.
            </p>
          </div>
          <div className="reveal r-d-3" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
            <Stat n="120+" l="Workflows shipped" />
            <Stat n="32K" l="Hours automated / mo" />
            <Stat n="6 wks" l="Avg first system live" />
            <Stat n="98%" l="Client retention" />
          </div>
        </div>
        <style>{`@media (max-width: 880px) { .vision-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }`}</style>
      </div>
    </section>
  );
}

function Stat({ n, l }) {
  return (
    <div style={{ borderTop: '1px solid var(--line)', paddingTop: 18 }}>
      <div className="serif" style={{ fontSize: 'clamp(40px, 4.6vw, 64px)', lineHeight: 1, letterSpacing: '-0.02em' }}>{n}</div>
      <div className="mono" style={{ fontSize: 12, color: 'var(--mute)', marginTop: 12, letterSpacing: '0.02em' }}>{l}</div>
    </div>
  );
}

function Services() {
  const items = [
    { n: '01', t: 'Custom System Development', d: 'Bespoke ERP, CRM, inventory, HR, and workflow systems engineered from scratch — shaped around how your SME actually works, not the other way around.' },
    { n: '02', t: 'AI-Powered Intelligence', d: 'AI embedded directly into your systems — demand forecasting, anomaly detection, intelligent reporting, and decision-support trained on your own business data.' },
    { n: '03', t: 'Digital Transformation', d: 'We audit your existing workflows, identify inefficiencies, and migrate your operations into modern, scalable digital infrastructure — zero disruption.' },
    { n: '04', t: 'Mobile & Web Applications', d: 'Customer-facing apps, internal tools, and field ops platforms — optimised for Malaysia, multi-language, ready for iOS, Android, and web.' },
    { n: '05', t: 'System Integration & API', d: 'Connect accounting software, e-commerce platforms, payment gateways, and government APIs into a single automated pipeline — no more double-entry.' },
    { n: '06', t: 'Analytics & BI', d: 'Real-time dashboards, custom KPI tracking, and AI-generated insights that give you a complete picture of your business — act fast, with confidence.' },
    { n: '07', t: 'Data Management & Migration', d: 'Scalable data architectures, lossless historical migration, and clean, secure data ready to power AI-driven insights.' },
    { n: '08', t: 'Support & Managed Services', d: 'Ongoing technical support, system monitoring, performance optimisation, and feature enhancements — your system grows with your business.' },
  ];
  return (
    <section className="sec" id="services" style={{ background: 'var(--bg-2)' }}>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 80, flexWrap: 'wrap', gap: 24 }} className="reveal">
          <div>
            <SlashTag>SERVICES</SlashTag>
            <h2 className="h-section serif" style={{ marginTop: 28, maxWidth: '16ch' }}>
              What we build, <span className="italic">end to end.</span>
            </h2>
          </div>

        </div>
        <div className="services-list" style={{ borderTop: '1px solid var(--line)' }}>
          {items.map((it, i) => <ServiceRow key={i} {...it} />)}
        </div>
        <style>{`
          .services-list:hover .service-row:not(:hover) {
            opacity: 0.25;
            filter: blur(2px);
          }
        `}</style>
      </div>
    </section>
  );
}

function ServiceRow({ n, t, d }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      className="reveal service-row"
      style={{
        borderBottom: '1px solid var(--line)',
        padding: hover ? '40px 0' : '32px 0',
        transition: 'padding 400ms cubic-bezier(0.2,0.8,0.2,1), background 300ms, opacity 400ms ease, filter 400ms ease',
        background: hover ? 'rgba(20,19,15,0.03)' : 'transparent',
        cursor: 'default',
      }}>
      <div className="wrap service-row-inner" style={{ padding: 0, display: 'grid', gridTemplateColumns: '80px 1fr 1.2fr 60px', gap: 32, alignItems: 'center' }}>
        <div className="mono service-row-number" style={{ fontSize: 13, color: 'var(--mute)' }}>{n}</div>
        <div className="serif service-row-title" style={{ fontSize: 'clamp(28px, 3.4vw, 48px)', lineHeight: 1.05, letterSpacing: '-0.02em', transform: hover ? 'translateX(16px)' : 'translateX(0)', transition: 'transform 400ms cubic-bezier(0.2,0.8,0.2,1)' }}>{t}</div>
        <div className="service-row-description" style={{ color: 'var(--mute)', fontSize: 16, lineHeight: 1.55, maxWidth: 480 }}>{d}</div>
        <div className="service-row-action" style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <span style={{
            width: 44, height: 44, borderRadius: '50%',
            border: '1px solid var(--line-2)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: hover ? 'var(--ink)' : 'transparent',
            color: hover ? 'var(--bg)' : 'var(--ink)',
            transition: 'all 300ms',
          }}>
            <svg width="13" height="13" viewBox="0 0 13 13" fill="none"><path d="M3 10 L10 3 M4 3 L10 3 L10 9" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </span>
        </div>
      </div>
    </div>
  );
}

function Process() {
  const [activeStep, setActiveStep] = React.useState(0);
  const stepRefs = React.useRef([]);

  const steps = [
    { n: '01', t: 'Discover', wk: 'Week 1–2', d: 'Two-week deep dive into your operation. We map the actual workflow — not the org chart — and quantify the hours bleeding from each step. You get a written audit and a ranked list of what to automate first.', img: 'https://images.unsplash.com/photo-1777042575928-366908c3ee3f?q=80&w=2400&auto=format&fit=crop' },
    { n: '02', t: 'Design', wk: 'Week 3', d: 'A prioritized roadmap with ROI per workflow, vendor calls and architecture decisions made. You pick what ships first. We hand you a plan you could run yourself.', img: 'https://images.unsplash.com/photo-1655474396177-e727349f44dc?q=80&w=2400&auto=format&fit=crop' },
    { n: '03', t: 'Build', wk: 'Week 4–8', d: 'We ship in 2–4 week increments. Real systems in production, not slide decks. Friday demos. Production access from day one. Your team sees progress every week.', img: 'https://images.unsplash.com/photo-1629904853716-f0bc54eea481?q=80&w=2400&auto=format&fit=crop' },
    { n: '04', t: 'Scale', wk: 'Week 9 onward', d: 'Hand-off, training, runbooks, SOPs. Optional retainer to keep iterating with your team. We stay on call as you grow.', img: 'https://images.unsplash.com/photo-1466692476868-aef1dfb1e735?q=80&w=2400&auto=format&fit=crop' },
  ];

  React.useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const index = Number(entry.target.getAttribute('data-index'));
            setActiveStep(index);
          }
        });
      },
      { rootMargin: '-40% 0px -40% 0px', threshold: 0 }
    );

    stepRefs.current.forEach((ref) => {
      if (ref) observer.observe(ref);
    });

    return () => observer.disconnect();
  }, []);

  return (
    <section className="sec" id="process" style={{ position: 'relative' }}>
      {/* Full Section Sticky Background */}
      <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, zIndex: 0 }}>
        <div style={{ position: 'sticky', top: 0, width: '100%', height: '100vh', overflow: 'hidden' }}>
          {steps.map((s, i) => (
            <img 
              key={i}
              src={s.img} 
              alt={s.t}
              style={{
                position: 'absolute',
                top: 0, left: 0, width: '100%', height: '100%',
                objectFit: 'cover',
                filter: 'grayscale(100%)',
                opacity: activeStep === i ? 1 : 0,
                transform: activeStep === i ? 'scale(1)' : 'scale(1.05)',
                transition: 'opacity 800ms ease-in-out, transform 1000ms ease-in-out',
                zIndex: activeStep === i ? 1 : 0
              }}
            />
          ))}
          <div style={{
            position: 'absolute', top: 0, left: 0, width: '100%', height: '100%',
            background: 'linear-gradient(to right, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.3) 100%)',
            zIndex: 2
          }}></div>
        </div>
      </div>

      <div className="wrap process-grid" style={{ position: 'relative', zIndex: 10, display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: '80px', alignItems: 'flex-start' }}>
        <div style={{ position: 'sticky', top: '140px' }} className="reveal">
          <SlashTag>PROCESS</SlashTag>
          <h2 className="h-section serif" style={{ marginTop: 28, maxWidth: '14ch' }}>
            From first call <span className="italic">to live in</span> 4–6 weeks.
          </h2>
          <p className="lede" style={{ marginTop: 24, maxWidth: '40ch', marginBottom: 40 }}>
            We don't do endless discovery phases. We locate the bleeding, build a tourniquet, and ship it to production.
          </p>
        </div>
        <div style={{ borderTop: '1px solid var(--line)' }}>
          {steps.map((s, i) => (
            <div 
              key={i} 
              ref={(el) => (stepRefs.current[i] = el)}
              data-index={i}
              style={{
                opacity: activeStep === i ? 1 : 0.3,
                transform: activeStep === i ? 'translateX(0)' : 'translateX(-10px)',
                transition: 'opacity 500ms ease, transform 500ms ease'
              }}
            >
              <ProcessStep n={s.n} t={s.t} wk={s.wk} d={s.d} />
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) { 
          .process-grid { grid-template-columns: 1fr !important; gap: 40px !important; } 
          .process-grid > div:first-child { position: relative !important; top: 0 !important; } 
        }
      `}</style>
    </section>
  );
}

function ProcessStep({ n, t, wk, d }) {
  return (
    <div className="reveal" style={{ borderBottom: '1px solid var(--line)', padding: '64px 0', display: 'flex', flexDirection: 'column', gap: 24 }}>
      <div className="mono" style={{ fontSize: 13, color: 'var(--accent)' }}>
        {n} <span style={{ color: 'var(--mute)' }}>— {wk}</span>
      </div>
      <h3 className="serif" style={{ fontSize: 'clamp(32px, 4.5vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.02em', margin: 0 }}>
        {t}
      </h3>
      <p style={{ color: 'var(--mute)', fontSize: 'clamp(16px, 1.4vw, 18px)', lineHeight: 1.6, margin: 0, maxWidth: 540 }}>
        {d}
      </p>
    </div>
  );
}

Object.assign(window, { Vision, Services, Process });