/* global React */
const { useState, useEffect, useRef } = React;

function HomePage({ navigate }) {
  return (
    <div className="page page-enter">
      <section className="container hero">
        <div className="reveal-stagger">
          <span className="eyebrow">AI Automation Studio · Kuala Lumpur</span>
          <h1 style={{ marginTop: 18 }}>
            We ship <span className="accent-line">AI that actually works</span><br />
            for Malaysian businesses.
          </h1>
          <p className="lead" style={{ marginTop: 22 }}>
            Workflow automation, custom AI agents, technical advisory and bespoke web builds — designed
            for SMEs and enterprise teams ready to move beyond the demo.
          </p>
          <div className="hero-cta">
            <a href="#/contact" onClick={(e) => {e.preventDefault();navigate("contact");}} className="btn btn-accent">
              Book a discovery call <span className="arrow">→</span>
            </a>
            <a href="#/stories" onClick={(e) => {e.preventDefault();navigate("stories");}} className="btn btn-ghost">
              See success stories
            </a>
          </div>
        </div>
        <div className="hero-meta reveal">
          <div className="stat"><div className="num">42+</div><div className="lbl">Workflows shipped</div></div>
          <div className="stat"><div className="num">9.4×</div><div className="lbl">Avg productivity gain</div></div>
          <div className="stat"><div className="num">17</div><div className="lbl">Active client teams</div></div>
          <div className="stat"><div className="num">2.1m</div><div className="lbl">Tasks automated / yr</div></div>
        </div>
      </section>

      <section className="marquee" aria-hidden="true">
        <div className="marquee-track">
          <span>Process automation</span>
          <span>AI agents</span>
          <span>RAG pipelines</span>
          <span>Custom websites</span>
          <span>Tech talks</span>
          <span>Process automation</span>
          <span>AI agents</span>
          <span>RAG pipelines</span>
          <span>Custom websites</span>
          <span>Tech talks</span>
        </div>
      </section>

      <section className="container block">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">What we do</span>
            <h2 style={{ marginTop: 14 }}>Four practices, one outcome.</h2>
          </div>
          <p className="lead">We embed with your team, identify the highest-leverage workflows, and ship measurable wins inside 30 days. No 12-month transformations.</p>
        </div>
        <div className="svc-list reveal-stagger">
          {[
          { idx: "01", t: "Process Automation", d: "Replace spreadsheet-and-email workflows with reliable, auditable pipelines." },
          { idx: "02", t: "Custom AI Agents", d: "Domain-trained agents that handle inbound, research, ops and customer ops 24/7." },
          { idx: "03", t: "Tech Talks & Workshops", d: "Bring your leadership and engineering teams up to speed on production AI." },
          { idx: "04", t: "Custom Websites & Tools", d: "Hand-crafted internal tools and marketing sites that don't feel templated." }].
          map((s) =>
          <div key={s.idx} className="svc-row">
              <div className="idx">{s.idx} /</div>
              <div className="title">{s.t}</div>
              <div className="desc">{s.d}</div>
              <div className="go">→</div>
            </div>
          )}
        </div>
      </section>

      <section className="container block">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">How we engage</span>
            <h2 style={{ marginTop: 14 }}>A 30-day path from idea to in-production.</h2>
          </div>
          <p className="lead">We work in tight, weekly cycles. Every engagement begins with a free 60-minute scoping session.</p>
        </div>
        <div className="cards cols-3 reveal-stagger">
          {[
          { n: "Week 1", t: "Discovery", d: "Process audit, data review, and a written opportunity map ranked by ROI." },
          { n: "Week 2", t: "Prototype", d: "A working slice in your environment — not a slide deck. We invite feedback early." },
          { n: "Week 3-4", t: "Ship & train", d: "Production rollout, runbooks, and a workshop so your team owns the system." }].
          map((c) =>
          <div key={c.n} className="card">
              <div className="num">{c.n}</div>
              <h3>{c.t}</h3>
              <p>{c.d}</p>
            </div>
          )}
        </div>
      </section>

      <section className="container">
        <div className="cta-banner reveal" style={{ backgroundColor: "rgb(61, 58, 58)", width: "942px", opacity: "1" }}>
          <div>
            <h2>Ready to put a workflow on autopilot?</h2>
            <p className="lead" style={{ marginTop: 12 }}>Tell us where the bottleneck is. We'll tell you, on the call, whether we can fix it.</p>
          </div>
          <div className="actions">
            <a href="#/contact" onClick={(e) => {e.preventDefault();navigate("contact");}} className="btn btn-accent">
              Book a call <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </section>
    </div>);

}

function AboutPage({ navigate }) {
  return (
    <div className="page page-enter">
      <section className="container hero" style={{ paddingBottom: 40 }}>
        <span className="eyebrow reveal">About</span>
        <h1 className="reveal" style={{ marginTop: 14 }}>
          A small team, <span className="accent-line">built around shipping.</span>
        </h1>
        <p className="lead reveal" style={{ marginTop: 22 }}>
          We're a Kuala Lumpur–based studio of engineers, designers and AI practitioners.
          We started in 2023 with one belief: most companies don't need an AI strategy — they need
          someone to actually wire it up.
        </p>
      </section>

      <section className="container block">
        <div className="about-grid">
          <div className="reveal">
            <span className="eyebrow">Our story</span>
            <h2 style={{ marginTop: 14, marginBottom: 24 }}>From a side project to fifteen production deployments.</h2>
            <div className="timeline">
              <div className="timeline-item">
                <div className="yr">2023 · Q2</div>
                <h3>Founded in KL</h3>
                <p>Two engineers, a borrowed conference room, and a stubborn belief that AI tooling was outpacing the consulting around it.</p>
              </div>
              <div className="timeline-item">
                <div className="yr">2024 · Q1</div>
                <h3>First enterprise contract</h3>
                <p>Automated three internal-ops workflows for a regional logistics company. They saved a headcount in three months.</p>
              </div>
              <div className="timeline-item">
                <div className="yr">2024 · Q4</div>
                <h3>Tech talks practice launches</h3>
                <p>After the fifth client asked us to "just train our team", we made it a real offering.</p>
              </div>
              <div className="timeline-item">
                <div className="yr">2026</div>
                <h3>17 active engagements</h3>
                <p>Across logistics, fintech, hospitality and SaaS. Still small on purpose.</p>
              </div>
            </div>
          </div>
          <div className="reveal" style={{ position: "sticky", top: 88 }}>
            <div className="values">
              {[
              { k: "Principle 01", t: "Ship in weeks", d: "If it can't go to production in 30 days, we redesign the scope." },
              { k: "Principle 02", t: "Plain language", d: "No jargon walls. We explain trade-offs your CFO can act on." },
              { k: "Principle 03", t: "Owned by you", d: "Every system we build is documented, runbook-ready, and yours." },
              { k: "Principle 04", t: "Fewer, better", d: "We cap our active engagements so each one gets real attention." }].
              map((v) =>
              <div key={v.k} className="value">
                  <div className="k">{v.k}</div>
                  <h3>{v.t}</h3>
                  <p>{v.d}</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      <section className="container block">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Team</span>
            <h2 style={{ marginTop: 14 }}>The humans behind the agents.</h2>
          </div>
          <p className="lead">A deliberately small bench. Everyone you meet on the sales call is on the build.</p>
        </div>
        <div className="team reveal-stagger">
          {[
          { n: "Aishah Rahman", r: "Founder · Eng", i: "AR" },
          { n: "Daniel Tan", r: "AI Lead", i: "DT" },
          { n: "Priya Nair", r: "Design & Product", i: "PN" },
          { n: "Marcus Lim", r: "Automation Eng", i: "ML" },
          { n: "Hana Yusof", r: "Client Success", i: "HY" },
          { n: "Wei Jian", r: "Full-stack Eng", i: "WJ" }].
          map((m) =>
          <div key={m.n} className="member">
              <div className="avatar" data-initials={m.i}></div>
              <div className="body">
                <div className="name">{m.n}</div>
                <div className="role">{m.r}</div>
              </div>
            </div>
          )}
        </div>
      </section>

      <section className="container">
        <div className="cta-banner reveal">
          <div>
            <h2>See what we've built lately.</h2>
            <p className="lead" style={{ marginTop: 12 }}>Three case studies covering logistics, fintech, and hospitality.</p>
          </div>
          <div className="actions">
            <a href="#/stories" onClick={(e) => {e.preventDefault();navigate("stories");}} className="btn btn-accent">
              Read stories <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </section>
    </div>);

}

function StoriesPage({ navigate }) {
  const stories = [
  {
    client: "Regional Logistics · MY",
    title: "Cut dispatch coordination from 6 hours to 18 minutes.",
    copy: "Replaced a dispatcher's morning spreadsheet workflow with an AI agent that ingests carrier feeds, confirms slots, and notifies drivers — with full audit trail.",
    quote: "It's the first AI project we've done that actually changed how a team works on Monday morning.",
    author: "COO, Regional Logistics",
    metrics: [{ v: "94%", k: "Reduced manual time" }, { v: "3wk", k: "To production" }, { v: "₂₈k", k: "Annual savings (USD)" }],
    bigNum: "94", bigLabel: "% manual work eliminated",
    chip: "Logistics"
  },
  {
    client: "B2B Fintech · KL",
    title: "An AI underwriting assistant that scales the credit team.",
    copy: "Custom RAG pipeline over five years of underwriting memos and regulatory filings. Analysts now draft a first-pass memo in 20 minutes instead of two days.",
    quote: "We finally have a tool that speaks our compliance language, not just generic AI fluff.",
    author: "Head of Credit, Fintech",
    metrics: [{ v: "24×", k: "Faster first draft" }, { v: "0", k: "Compliance issues" }, { v: "6", k: "Analysts onboarded" }],
    bigNum: "24×", bigLabel: "speed-up on first draft",
    chip: "Fintech"
  },
  {
    client: "Hospitality Group · SEA",
    title: "Multilingual concierge agent across 11 properties.",
    copy: "WhatsApp + web concierge handling reservations, requests and FAQ in 4 languages. Escalates seamlessly to humans with full context attached.",
    quote: "Guests don't realise it's not a person. The team just gets a tidy summary when it matters.",
    author: "GM, Hospitality Group",
    metrics: [{ v: "68%", k: "Self-service resolution" }, { v: "4.8★", k: "Guest CSAT" }, { v: "4", k: "Languages" }],
    bigNum: "68", bigLabel: "% self-service resolution",
    chip: "Hospitality"
  },
  {
    client: "Manufacturing SME · Penang",
    title: "QC report drafting in under a minute.",
    copy: "Vision + LLM pipeline reads inspection photos and emits a structured report in the team's existing template. Floor supervisors stopped dreading Friday paperwork.",
    quote: "Something that used to be a half-day grind is now a coffee break.",
    author: "Plant Manager, Manufacturing",
    metrics: [{ v: "45 min", k: "Saved per report" }, { v: "99.2%", k: "Match accuracy" }, { v: "1", k: "Floor supervisor freed" }],
    bigNum: "45m", bigLabel: "saved per report",
    chip: "Manufacturing"
  }];


  return (
    <div className="page page-enter">
      <section className="container hero" style={{ paddingBottom: 40 }}>
        <span className="eyebrow reveal">Success stories</span>
        <h1 className="reveal" style={{ marginTop: 14 }}>
          Quietly shipped. <span className="accent-line">Loudly measured.</span>
        </h1>
        <p className="lead reveal" style={{ marginTop: 22 }}>
          Four engagements from the last twelve months. All results verified with the client; names available under NDA.
        </p>
      </section>

      <section className="container block" style={{ paddingTop: 0 }}>
        {stories.map((s, i) =>
        <div key={i} className="story reveal">
            <div className={"story-visual"} style={i % 2 === 1 ? { order: 2 } : {}}>
              <span className="chip">{s.chip}</span>
              <div className="big-num">
                {s.bigNum}
                <small>{s.bigLabel}</small>
              </div>
            </div>
            <div className="story-content">
              <div className="client">{s.client}</div>
              <h3>{s.title}</h3>
              <p>{s.copy}</p>
              <blockquote>
                "{s.quote}"
                <cite>— {s.author}</cite>
              </blockquote>
              <div className="metrics">
                {s.metrics.map((m) =>
              <div key={m.k} className="metric">
                    <div className="v">{m.v}</div>
                    <div className="k">{m.k}</div>
                  </div>
              )}
              </div>
            </div>
          </div>
        )}
      </section>

      <section className="container">
        <div className="cta-banner reveal">
          <div>
            <h2>Could yours be next?</h2>
            <p className="lead" style={{ marginTop: 12 }}>Tell us your bottleneck. We'll tell you on the call whether we can fix it.</p>
          </div>
          <div className="actions">
            <a href="#/contact" onClick={(e) => {e.preventDefault();navigate("contact");}} className="btn btn-accent">
              Book a call <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </section>
    </div>);

}

window.Pages = { HomePage, AboutPage, StoriesPage };