// ── Full homepage sections for the AI Avatar site (dark + green) ─────
const { useState: useStateS, useEffect: useEffectS } = React;

const AV_SERVICES = [
  { n: '01', name: 'Web Development', desc: 'Fast, secure, responsive sites — engineered around your business and built to convert.' },
  { n: '02', name: 'Enhanced CRM', desc: 'AI-assisted CRM with automation across sales, marketing and customer support.' },
  { n: '03', name: 'Mobile & Web Apps', desc: 'Native-feeling apps with seamless UX across iOS, Android and the web.' },
  { n: '04', name: 'Loyalty Software', desc: 'Conso & Allyy — loyalty, rewards and marketing in one connected platform.' },
  { n: '05', name: 'Turnkey Solutions', desc: 'Access control to facial recognition — end-to-end systems we own start to finish.' },
  { n: '06', name: 'Product Engineering', desc: 'A team that ships — discovery, design and delivery under one roof in Singapore.' },
];
const AV_WORK = [
  { id: 'market', client: 'frame the folks', kind: 'Talent Marketplace', tag: 'Profiles · Jobs · Reviews', img: 'assets/work-framethefolks.png', desc: 'A talent marketplace app connecting creators, models and producers with jobs, portfolios and reviews.' },
  { id: 'wallet', client: 'SpedGrow', kind: 'Fintech · Mobile', tag: 'NYC-funded · Smart wallet', img: 'assets/work-spedgrow.png', desc: 'A smart wallet helping special-needs adults transact independently — funded by the National Youth Council.' },
  { id: 'book', client: 'TiggieKids', kind: 'EdTech · Accessibility', tag: 'ELI grant · Special needs', img: 'assets/work-tiggiekids.png', desc: 'Tech-abled dialogical reading storybooks for children with special needs — awarded an ELI grant.' },
];

const WORK_ICONS = {
  market: <path d="M3 9h18M3 9l1.5-5h15L21 9M5 9v10h14V9M9 13h6" />,
  wallet: <path d="M3 7h15a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7zm0 0V6a2 2 0 0 1 2-2h11M16 13h2" />,
  shield: <path d="M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3zm-3 9l2 2 4-4" />,
  layers: <path d="M12 3l9 5-9 5-9-5 9-5zM3 13l9 5 9-5M3 17l9 5 9-5" />,
  book: <path d="M12 6c-2-1.5-5-1.5-7-1v13c2-.5 5-.5 7 1m0-13c2-1.5 5-1.5 7-1v13c-2-.5-5-.5-7 1m0-13v13" />,
  access: <path d="M14 7a4 4 0 1 0-3.5 6.9L9 16l-1.5 1.5L9 19l-1.5 1.5L9 22l-4 .5.5-4 6-6A4 4 0 0 0 14 7zm1.5-.5h.01" />,
};
const AV_STEPS = [
  { n: 'A', t: 'Discover', d: 'We map the problem, the users and the business case before a line of code.' },
  { n: 'B', t: 'Design & build', d: 'Design and engineering work as one team, shipping in tight, visible increments.' },
  { n: 'C', t: 'Launch & grow', d: 'We deploy, measure and keep improving — long after go-live.' },
];
const AV_STATS = [
  { v: '75+', l: 'Firms run on EnQuote' },
  { v: '15min', l: 'To build a quote (was 3–4 hrs)' },
  { v: '2017', l: 'Building in Singapore since' },
  { v: 'SG', l: 'Singapore software studio' },
];
const AV_NAV = [['Services', '#services'], ['EnQuote', '#enquote'], ['Work', '#work'], ['Playground', 'index.html']];

function EnQuoteSpotlight() {
  const metrics = [
    { v: '75+', l: 'Built-environment firms' },
    { v: '15 min', l: 'Per quote, error-free' },
    { v: '10+ hrs', l: 'Saved per month' },
    { v: 'EDG', l: 'Grant-claimable' },
  ];
  return (
    <section id="enquote" className="av-sec av-sec--alt">
      <div className="enq-wrap">
        <div className="enq-copy">
          <p className="av-eyebrow">Flagship product</p>
          <img className="enq-logo" src="uploads/enquote-logo.png" alt="EnQuote" />
          <h2 className="enq-h">The ERP we built — and run — for renovation &amp; service firms.</h2>
          <p className="enq-desc">EnQuote is Leaptech&rsquo;s own product: the go-to ERP scaling interior-design and built-environment businesses across Singapore. Launched in 2024, it won <strong>75+ firms</strong> in its first two years — instant, error-free quoting, full project clarity, and financials synced with Xero &amp; QuickBooks. Proof we don&rsquo;t just build software — we ship and grow it.</p>
          <div className="enq-metrics">
            {metrics.map((m) => (
              <div key={m.l} className="enq-metric"><div className="enq-metric-v">{m.v}</div><div className="enq-metric-l">{m.l}</div></div>
            ))}
          </div>
          <div className="enq-cta-row">
            <a href="https://enquote.io" target="_blank" rel="noopener" className="cine-cta"><span>Visit enquote.io</span><span className="cine-cta-dot"><IconArrow size={17} /></span></a>
            <a href="https://wa.me/6584955583?text=Hi%20Leaptech%2C%20I%27d%20like%20a%20demo%20of%20EnQuote." target="_blank" rel="noopener" className="av-ghost-btn">Book a demo</a>
          </div>
        </div>

        <div className="enq-mock">
          <div className="enq-screen">
            <div className="enq-screen-top">
              <img className="enq-screen-logo" src="uploads/enquote-logo.png" alt="EnQuote" />
              <span className="enq-chip">Quote · #2480</span>
            </div>
            <div className="enq-rows">
              {[['Carpentry — kitchen', '$ 12,400'], ['Flooring — vinyl plank', '$ 4,850'], ['Electrical rewiring', '$ 3,200'], ['Painting — 4 rooms', '$ 2,150']].map(([a, b], i) => (
                <div key={i} className="enq-row"><span className="enq-row-dot" /><span className="enq-row-name">{a}</span><span className="enq-row-val">{b}</span></div>
              ))}
            </div>
            <div className="enq-total"><span>Total</span><b>$ 22,600</b></div>
            <div className="enq-screen-foot"><span className="enq-sync">● Synced to Xero</span><span className="enq-time">Built in 12 min</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function MobileMenu() {
  const [open, setOpen] = useStateS(false);
  useEffectS(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  const links = [['Services', '#services'], ['EnQuote', '#enquote'], ['Work', '#work'], ['Approach', '#approach'], ['Contact', '#contact'], ['Playground', 'index.html']];
  return (
    <React.Fragment>
      <button className={'mnav-burger' + (open ? ' open' : '')} aria-label="Menu" aria-expanded={open} onClick={() => setOpen((o) => !o)}>
        <span /><span /><span />
      </button>
      <div className={'mnav-overlay' + (open ? ' show' : '')} onClick={() => setOpen(false)}>
        <nav className="mnav-panel" onClick={(e) => e.stopPropagation()}>
          {links.map(([l, h], i) => (
            <a key={h} href={h} className="mnav-link" style={{ transitionDelay: (open ? 0.06 + i * 0.05 : 0) + 's' }} onClick={() => setOpen(false)}>{l}</a>
          ))}
          <a href="https://wa.me/6584955583?text=Hi%20Leaptech%2C%20I%27d%20like%20to%20talk%20about%20a%20project." target="_blank" rel="noopener" className="mnav-cta" onClick={() => setOpen(false)}>
            Chat on WhatsApp <IconArrow size={18} />
          </a>
          <div className="mnav-meta">28 Tai Seng Street, Singapore · (+65) 8495 5583</div>
        </nav>
      </div>
    </React.Fragment>
  );
}

function StickyNav() {
  const [show, setShow] = useStateS(false);
  useEffectS(() => {
    const onScroll = () => setShow(window.scrollY > window.innerHeight * 0.7);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className={'sticky-nav' + (show ? ' show' : '')}>
      <a href="#top" className="sn-logo-wrap"><img className="nav-logo" src="uploads/logo-1B7340.png" alt="Leaptechnology" /></a>
      <nav>{AV_NAV.map(([l, h]) => <a key={h} href={h} className="cine-nav">{l}</a>)}</nav>
      <a href="#contact" className="cine-cta cine-cta--sm"><span>Start a project</span></a>
    </div>
  );
}

function AvServices() {
  return (
    <section id="services" className="av-sec">
      <div className="av-sec-head">
        <div>
          <p className="av-eyebrow">What we do</p>
          <h2 className="av-h2">One team,<br />every layer.</h2>
        </div>
        <p className="av-lead">Two decades shipping software in Singapore — from marketing sites to access-control systems we own end to end.</p>
      </div>
      <div className="av-svc-grid">
        {AV_SERVICES.map((s) => (
          <div key={s.n} className="av-svc">
            <span className="av-svc-n">{s.n}</span>
            <h3>{s.name}</h3>
            <p>{s.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function AvStats() {
  return (
    <section className="av-stats">
      {AV_STATS.map((s) => (
        <div key={s.l}><div className="av-stat-v">{s.v}</div><div className="av-stat-l">{s.l}</div></div>
      ))}
    </section>
  );
}

function AvWork() {
  return (
    <section id="work" className="av-sec">
      <p className="av-eyebrow">Selected work</p>
      <h2 className="av-h2" style={{ marginBottom: 'clamp(36px,5vw,56px)' }}>Built &amp; shipped.</h2>
      <div className="av-portfolio">
        {AV_WORK.map((w, i) => (
          <div key={w.client} className="pf-card">
            <div className={'pf-shot pf-gen pf-gen-' + (i % 3) + (w.img ? ' pf-has-img' : '')}>
              {w.img
                ? <img className="pf-img" src={w.img} alt={w.client} loading="lazy" />
                : (
                  <div className="pf-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">{WORK_ICONS[w.id]}</svg>
                  </div>
                )}
              <div className="pf-overlay" />
              <div className="pf-motif" />
              <span className="pf-tag">{w.tag}</span>
              <span className="pf-kind">{w.kind}</span>
            </div>
            <div className="pf-body">
              <h3>{w.client}</h3>
              <p>{w.desc}</p>
            </div>
          </div>
        ))}

        <div className="pf-feature">
          <div className="pf-feat-shot">
            <img src="assets/work-ayambrand.png" alt="Ayam Brand project-management portal" loading="lazy" />
            <div className="pf-overlay" />
            <span className="pf-kind">Case study · Project Management</span>
          </div>
          <div className="pf-feat-body">
            <h3>Ayam Brand</h3>
            <p>A custom project-management portal for the heritage food manufacturer — replacing scattered spreadsheets with one source of truth.</p>
            <div className="pf-ba">
              <div className="pf-ba-col">
                <span className="pf-ba-label">Before</span>
                <p>Projects tracked across Excel sheets. Management had no clear, real-time overview.</p>
              </div>
              <div className="pf-ba-col pf-ba-col--out">
                <span className="pf-ba-label">Outcome</span>
                <p>Full visibility across every stage — from ideation through to manufacturing.</p>
              </div>
            </div>
          </div>
        </div>

        <div className="pf-feature pf-feature--rev">
          <div className="pf-feat-body">
            <h3>Radin Mas CC</h3>
            <p>Keyless, remote door access for the People&rsquo;s Association Smart CC initiative at Radin Mas Community Club.</p>
            <div className="pf-ba">
              <div className="pf-ba-col">
                <span className="pf-ba-label">Before</span>
                <p>Every room needed a key — staff travelled back and forth to lock and unlock doors through the day.</p>
              </div>
              <div className="pf-ba-col pf-ba-col--out">
                <span className="pf-ba-label">Outcome</span>
                <p>One keyless system opens and locks every door remotely — cutting manpower and lifting productivity.</p>
              </div>
            </div>
          </div>
          <div className="pf-feat-shot">
            <img src="assets/work-radinmas.png" alt="Radin Mas Community Club" loading="lazy" />
            <div className="pf-overlay" />
            <span className="pf-kind">Case study · Smart Access</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function AvApproach() {
  return (
    <section id="approach" className="av-sec">
      <div className="av-appr">
        <div>
          <p className="av-eyebrow">How we work</p>
          <h2 className="av-h2">A clear<br />path to<br />launch.</h2>
        </div>
        {AV_STEPS.map((s) => (
          <div key={s.n} className="av-step">
            <div className="av-step-n">{s.n}</div>
            <h3>{s.t}</h3>
            <p>{s.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function AvContact() {
  return (
    <section id="contact" className="av-contact">
      <p className="av-eyebrow" style={{ color: 'var(--glow)' }}>Take a leap with us</p>
      <h2 className="av-cta-h"><WordsPullUp text="Let's build your leap." style={{ justifyContent: 'center' }} /></h2>
      <p className="av-cta-sub">Tell us what you&rsquo;re trying to ship. We&rsquo;ll tell you how we&rsquo;d build it.</p>
      <div className="av-cta-row">
        <a href="https://wa.me/6584955583?text=Hi%20Leaptech%2C%20I%27d%20like%20to%20talk%20about%20a%20project." target="_blank" rel="noopener" className="cine-cta"><span>Chat on WhatsApp</span><span className="cine-cta-dot"><IconArrow size={17} /></span></a>
        <a href="mailto:hello@leaptech.sg" className="av-ghost-btn">hello@leaptech.sg</a>
      </div>
      <div className="av-footer">
        <img className="nav-logo" src="uploads/logo-1B7340.png" alt="Leaptechnology" />
        <div className="av-foot-meta">
          <span>28 Tai Seng Street, Singapore 534106</span>
          <span>(+65) 8495 5583</span>
          <span>© 2026 Leaptechnology Pte Ltd</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { StickyNav, MobileMenu, AvServices, AvStats, AvWork, AvApproach, AvContact, EnQuoteSpotlight });