/* global React, Icon, Reveal, SplitText, CountUp */
const { useState: useStateB } = React;

// ---------- Industries (tabs) ----------
function Industries() {
  const tabs = [
    {
      key: 'clinics', tab: 'Clinics & Wellness',
      heading: 'Free your team from paperwork',
      desc: 'Patient intake assistants, appointment reminder bots, MC and report drafting, follow-up sequences for treatments and reviews.',
      bullets: ['Patient intake forms', 'Appointment reminders', 'MC and report generation', 'Treatment follow-up sequences'],
      outcomes: [{ num: 70, suffix: '%', label: 'reduction in admin paperwork' }, { num: 3, suffix: '×', label: 'faster patient response time' }]
    },
    {
      key: 'fnb', tab: 'F&B and Retail',
      heading: 'Run your shop like it never sleeps',
      desc: 'Order chatbots, inventory tracking from photos, staff SOP assistants, customer feedback summarizers.',
      bullets: ['Order-taking bots', 'Photo-based inventory', 'Staff training assistants', 'Review summarizers'],
      outcomes: [{ raw: '24 / 7', label: 'order availability, no extra staff' }, { num: 85, suffix: '%', label: 'of repeat questions handled automatically' }]
    },
    {
      key: 'services', tab: 'Professional Services',
      heading: 'Turn quotes around in minutes, not days',
      desc: 'Quotation drafting, client intake automation, document review, proposal generation.',
      bullets: ['Auto-generated quotations', 'Client intake forms', 'Contract review', 'Proposal drafting'],
      outcomes: [{ num: 10, suffix: '×', label: 'faster quotation turnaround' }, { num: 60, suffix: '%', label: 'reduction in proposal drafting time' }]
    },
    {
      key: 'ecom', tab: 'E-commerce',
      heading: 'Scale customer service without scaling headcount',
      desc: 'Product Q&A bots, review summarizers, customer service triage, inventory alerts.',
      bullets: ['Product Q&A assistants', 'Review summarizers', 'Service triage', 'Inventory alerts'],
      outcomes: [{ num: 50, suffix: '%', label: 'reduction in support tickets to human agents' }, { num: 2, suffix: '×', label: 'increase in pre-purchase question conversions' }]
    },
    {
      key: 'ops', tab: 'Internal Operations',
      heading: 'Kill the busywork',
      desc: 'Excel cleanup, report generation, knowledge assistants, workflow agents that run quietly in the background.',
      bullets: ['Excel cleanup agents', 'Auto-generated reports', 'Knowledge assistants', 'Background workflow agents'],
      outcomes: [{ num: 12, suffix: '+ hrs/week', label: 'saved per admin staff member' }, { num: 100, suffix: '%', label: 'consistency in reporting format' }]
    },
  ];
  const [active, setActive] = useStateB(0);
  const cur = tabs[active];
  return (
    <section id="industries" className="section-blue">
      <div className="wrap">
        <div className="section-head">
          <div>
            <Reveal><p className="eyebrow">Industries</p></Reveal>
            <SplitText
              text="Built for how Malaysian businesses actually work."
              as="h2"
              stagger={45}
              highlight="actually work"
            />
          </div>
          <Reveal delay={200}>
            <p className="lead">We've designed AI installations across these common Malaysian SME categories.</p>
          </Reveal>
        </div>

        <div className="tabs-row">
          {tabs.map((t, i) => (
            <button
              key={t.key}
              className={`tab ${i === active ? 'active' : ''}`}
              onClick={() => setActive(i)}
            >
              {t.tab}
            </button>
          ))}
        </div>

        <div className="ind-panel" key={cur.key}>
          <div>
            <h3 style={{ fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em' }}>{cur.heading}</h3>
            <p style={{ color: 'var(--text-secondary)', fontSize: 16, marginTop: 14, maxWidth: 520 }}>{cur.desc}</p>
            <ul>
              {cur.bullets.map((b, i) => (
                <li key={i}><span className="check"><Icon name="check" size={16} /></span>{b}</li>
              ))}
            </ul>
          </div>
          <div className="ind-outcomes">
            <p style={{ fontSize: 13, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Typical outcomes</p>
            {cur.outcomes.map((o, i) => (
              <div key={i} className="ind-outcome">
                <div className="num">
                  {o.raw ? o.raw : <CountUp to={o.num} suffix={o.suffix || ''} />}
                </div>
                <div className="label">{o.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- How We Work ----------
function HowWeWork() {
  const steps = [
    { n: '01', title: 'Workflow Audit', price: 'RM1,500–3,000 · one-time', body: "We map your workflows, identify 3–5 AI opportunities ranked by ROI, and deliver a written report with effort and cost estimates. Yours to keep, even if you don't continue with us.", deliv: ['AI Opportunity Map', 'ROI Prioritization', 'Written Report'] },
    { n: '02', title: 'Build & Install', price: 'RM5,000–25,000 · one-time', body: 'We build one specific AI system end-to-end, install it, and train your team. Typical timeline: 2–6 weeks. Includes 30 days post-launch support.', deliv: ['Production AI System', 'Documentation', 'Team Training'] },
    { n: '03', title: 'Install & Operate', price: 'RM1,000–4,000 / month', body: 'Ongoing maintenance, optimization, updates, and small tweaks. We monitor your systems and fix issues before you notice. Cancel anytime.', deliv: ['24/7 Monitoring', 'Monthly Updates', 'Direct Support Line'] },
    { n: '04', title: 'AI Partner', price: 'Custom pricing', body: 'Embedded long-term partnership. Multiple systems, quarterly roadmap, priority support. We become your internal AI team.', deliv: ['Quarterly Roadmap', 'Multi-System Build', 'Strategic Sessions'] },
  ];
  return (
    <section id="how" className="section-blue">
      <div className="wrap">
        <div className="section-head">
          <div>
            <Reveal><p className="eyebrow">How we work</p></Reveal>
            <SplitText
              text="How we work."
              as="h2"
              stagger={60}
              highlight="we work."
            />
          </div>
          <Reveal delay={200}>
            <p className="lead">Designed for SMEs, refined across every installation. Start with an audit, scale at your pace.</p>
          </Reveal>
        </div>
        <div className="grid-4">
          {steps.map((s, i) => (
            <Reveal key={i} delay={i * 90}>
              <div className="card step" style={{ height: '100%' }}>
                <div className="step-num">STEP {s.n}</div>
                <h3>{s.title}</h3>
                <div className="price">{s.price}</div>
                <p>{s.body}</p>
                <div className="deliv">
                  <div className="deliv-label">Deliverables</div>
                  <div className="deliv-list">
                    {s.deliv.map((d, j) => <span key={j} className="deliv-chip">{d}</span>)}
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={400}>
          <div style={{ marginTop: 56, textAlign: 'center' }}>
            <a href="#book-call" className="btn btn-primary">
              Ready to get started? Book a consultation
              <Icon name="arrow" size={16} />
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- Cases ----------
function Cases() {
  const cases = [
    {
      label: 'Healthcare', title: 'Clinic Group, Klang Valley',
      problem: 'Front-desk staff overwhelmed with WhatsApp appointment requests, missing 30% of after-hours messages.',
      installed: 'AI patient intake assistant on WhatsApp + automated appointment reminders.',
      stats: [{ n: 100, s: '%', l: 'after-hours messages handled' }, { n: 6, s: ' hrs/day', l: 'saved on front-desk admin' }, { n: 28, s: '%', l: 'fewer no-shows' }]
    },
    {
      label: 'F&B', title: 'F&B Chain, Penang',
      problem: 'New staff spending 2 weeks shadowing seniors to learn SOPs; inconsistent service across outlets.',
      installed: 'Internal knowledge assistant trained on all SOPs, recipes, and procedures.',
      stats: [{ n: 3, s: ' days', l: 'new staff onboarding (down from 2 weeks)' }, { n: 90, s: '%', l: 'SOP questions answered without manager' }, { n: 5, s: ' outlets', l: 'same consistency across all locations' }]
    },
    {
      label: 'Professional services', title: 'Services Firm, KL',
      problem: 'Partners drafting quotations manually from email inquiries, 2-day turnaround losing leads.',
      installed: 'Email-to-quote AI agent — inquiry comes in, draft quotation generated automatically.',
      stats: [{ n: 15, s: ' min', l: 'quotation turnaround (down from 2 days)' }, { n: 40, s: '%', l: 'increase in quote-to-close rate' }, { raw: 'RM35k', l: 'additional monthly revenue captured' }]
    },
  ];
  return (
    <section style={{ borderTop: '1px solid var(--border-subtle)' }}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <Reveal><p className="eyebrow">Recent builds</p></Reveal>
            <SplitText
              text="Real systems running in real businesses."
              as="h2"
              stagger={35}
              highlight="real businesses."
            />
          </div>
          <Reveal delay={200}>
            <p className="lead">Anonymised highlights from recent installations across Malaysia.</p>
          </Reveal>
        </div>
        <div className="grid-3">
          {cases.map((c, i) => (
            <Reveal key={i} delay={i * 100}>
              <div className="card case" style={{ height: '100%' }}>
                <div className="case-head">
                  <span className="case-label">{c.label}</span>
                </div>
                <h3>{c.title}</h3>
                <div className="case-bd">
                  <b>Problem</b>
                  <p>{c.problem}</p>
                  <b>What we installed</b>
                  <p>{c.installed}</p>
                </div>
                <div className="case-stats">
                  {c.stats.map((st, j) => (
                    <div className="case-stat" key={j}>
                      <span className="num">{st.raw ? st.raw : <CountUp to={st.n} suffix={st.s} />}</span>
                      <span className="lbl">{st.l}</span>
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={300}>
          <div style={{ marginTop: 48, textAlign: 'center' }}>
            <a href="#book-call" className="btn btn-ghost">
              View all case studies <Icon name="arrow" size={14} />
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Industries, HowWeWork, Cases });