/* global React, Icon, Reveal, SplitText, CountUp */
const { useEffect, useRef, useState } = React;

// ---------- Nav ----------
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="nav-inner">
        <a className="brand" href="#top">
          <span className="brand-mark"><img src="assets/logo-mark.png" alt="" /></span>
          <span>Eight AI</span>
        </a>
        <nav className="nav-links">
          <a href="#solutions">Solutions</a>
          <a href="#how">How We Work</a>
          <a href="#industries">Industries</a>
          <a href="#why">About</a>
          <a href="#book-call">Contact</a>
        </nav>
        <a className="btn btn-primary" href="#book-call" style={{ padding: '10px 18px', fontSize: 14 }}>
          Book a call
        </a>
      </div>
    </header>
  );
}

// ---------- Hero ----------
function Hero() {
  // ticking number for "live" feel
  const [conv, setConv] = useState(847);
  useEffect(() => {
    const id = setInterval(() => setConv(c => c + Math.floor(Math.random() * 2)), 4200);
    return () => clearInterval(id);
  }, []);
  return (
    <section className="hero" id="top">
      <div className="wrap hero-grid">
        <div>
          <Reveal>
            <p className="eyebrow">AI installation for Malaysian businesses</p>
          </Reveal>
          <SplitText
            text="Your AI partner for the work software should be doing."
            as="h1"
            stagger={45}
            highlight="AI partner"
            underline="partner"
          />
          <Reveal delay={300}>
            <p className="lead" style={{ marginTop: 28 }}>
              We design and install custom AI systems for Malaysian SMEs — Excel automation, document workflows, customer chatbots, and internal knowledge assistants. Built on Anthropic Claude and enterprise AI infrastructure, installed on your systems, maintained on retainer.
            </p>
          </Reveal>
          <Reveal delay={400}>
            <div className="hero-cta-row">
              <a className="btn btn-primary" href="#book-call">
                Book a free audit call
                <Icon name="arrow" size={16} />
              </a>
              <a className="btn btn-secondary" href="#solutions">
                See what we install
              </a>
            </div>
          </Reveal>
        </div>
        <Reveal delay={250}>
          <div className="live-card">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span className="dot"></span>
                <span style={{ fontSize: 13, fontWeight: 600, letterSpacing: '-0.005em' }}>AI Agent Active</span>
              </div>
              <span style={{ fontSize: 11, color: 'var(--text-muted)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>Production</span>
            </div>
            <div style={{ borderTop: '1px solid var(--border-subtle)', paddingTop: 4 }}>
              <div className="row"><span className="k">System</span><span className="v">Customer Intake Assistant</span></div>
              <div className="row"><span className="k">Environment</span><span className="v">eightai.my / prod</span></div>
              <div className="row"><span className="k">Channels</span><span className="v">WhatsApp · Web · Email</span></div>
              <div className="row"><span className="k">Conversations this week</span><span className="v tnum">{conv.toLocaleString()}</span></div>
              <div className="row"><span className="k">Avg. response</span><span className="v">11s</span></div>
              <div className="row"><span className="k">Last deploy</span><span className="v">2h ago · v1.4.2</span></div>
            </div>
            <div style={{ marginTop: 18, padding: '14px 16px', background: 'var(--accent-soft)', borderRadius: 8, fontSize: 12.5, color: 'var(--accent)', display: 'flex', alignItems: 'center', gap: 8 }}>
              <Icon name="check" size={14} />
              All systems nominal. Next health check in 14 min.
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- Trust strip ----------
function TrustStrip() {
  const tools = ['Anthropic', 'Claude', 'n8n', 'Supabase', 'Vercel', 'Cloudflare', 'OpenAI', 'AWS'];
  const items = [...tools, ...tools]; // double for seamless loop
  return (
    <section style={{ paddingTop: 40, paddingBottom: 60 }}>
      <div className="wrap">
        <Reveal>
          <p style={{ textAlign: 'center', fontSize: 13, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 28 }}>
            Built with tools enterprises trust
          </p>
        </Reveal>
        <div className="marquee">
          <div className="marquee-track">
            {items.map((t, i) => (
              <div key={i} className="logo-chip"><span className="glyph"></span>{t}</div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Problem ----------
function Problem() {
  const cards = [
    { icon: 'file', title: 'Reports that should take minutes take days', body: 'Staff manually pulling data from Excel, copy-pasting into Word, emailing to managers. Hours per week, lost to copy-paste.', stat: 12, suffix: '+ hours/week', label: 'Average admin time wasted on manual reporting' },
    { icon: 'msg', title: 'Customer messages pile up', body: 'WhatsApp, email, web chat — all the same questions, all answered by hand. Customers wait. Leads go cold.', stat: 4, suffix: ' hours', label: 'Average response time for SME inbound inquiries' },
    { icon: 'book', title: "Knowledge lives in one person's head", body: 'When senior staff are out, the rest of the team is stuck. SOPs exist but nobody reads them.', stat: 60, suffix: '%', label: 'Of SME staff queries are repeat questions to senior team' },
    { icon: 'coin', title: "Software you don't use", body: 'You bought tools last year. They don\'t fit how you actually work. Subscriptions keep auto-renewing.', stat: 2400, suffix: '/year', prefix: 'RM', label: 'Average wasted SaaS spend per Malaysian SME' },
  ];
  return (
    <section style={{ borderTop: '1px solid var(--border-subtle)' }}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <Reveal><p className="eyebrow">The reality</p></Reveal>
            <SplitText
              text="Your team is drowning in work software should handle."
              as="h2"
              stagger={35}
              highlight="software should handle"
            />
          </div>
          <Reveal delay={200}>
            <p className="lead">
              Most Malaysian SMEs face the same obstacles. The difference between success and failure isn't the latest AI tool — it's having a partner who actually installs it.
            </p>
          </Reveal>
        </div>
        <div className="grid-2">
          {cards.map((c, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="card problem-card" style={{ height: '100%' }}>
                <span className="icon-box"><Icon name={c.icon} size={20} /></span>
                <h3>{c.title}</h3>
                <p style={{ color: 'var(--text-secondary)', marginTop: 12, fontSize: 15 }}>{c.body}</p>
                <div className="data">
                  <div className="num"><CountUp to={c.stat} prefix={c.prefix || ''} suffix={c.suffix} /></div>
                  <div className="label">{c.label}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Solutions ----------
function Solutions() {
  const sols = [
    { n: '01', icon: 'file', title: 'Document & Spreadsheet Automation', body: 'Clean messy Excel files, generate reports from raw data, extract invoice and receipt data, auto-create quotations and contracts.', best: 'admin-heavy teams, finance, operations' },
    { n: '02', icon: 'bot', title: 'Customer Chatbots', body: 'AI assistants embedded on your website, WhatsApp, or Instagram that answer FAQs, qualify leads, and escalate to humans when needed. Multilingual: BM, English, Mandarin.', best: 'e-commerce, services, clinics, education' },
    { n: '03', icon: 'book', title: 'Internal Knowledge Assistant', body: 'Upload your SOPs, manuals, and policies — your staff ask questions in plain language and get instant answers. Replace "go ask the senior staff."', best: 'training-heavy teams, F&B chains, clinics, retail' },
    { n: '04', icon: 'inbox', title: 'Inbox & Workflow Automation', body: 'Email triage, draft replies, automated follow-ups, CRM updates — so your sales and admin teams focus on humans, not inboxes.', best: 'sales teams, agencies, consultants' },
    { n: '05', icon: 'sparkles', title: 'Custom AI Agents', body: "Got a repetitive workflow we didn't list? We scope, build, and install it. Quarterly roadmap included.", best: 'any business with a specific operational bottleneck' },
  ];
  return (
    <section id="solutions">
      <div className="wrap">
        <div className="section-head">
          <div>
            <Reveal><p className="eyebrow">Our solutions</p></Reveal>
            <SplitText
              text="AI built for how Malaysian businesses actually work."
              as="h2"
              stagger={30}
              highlight="actually work"
            />
          </div>
          <Reveal delay={200}>
            <p className="lead">
              Five core systems we design, install, and maintain. Pick one, or combine them into a workflow that runs itself.
            </p>
          </Reveal>
        </div>
        <div className="grid-3">
          {sols.slice(0, 3).map((s, i) => (
            <Reveal key={i} delay={i * 80}>
              <SolutionCard {...s} />
            </Reveal>
          ))}
        </div>
        <div className="grid-2" style={{ marginTop: 24 }}>
          {sols.slice(3).map((s, i) => (
            <Reveal key={i} delay={i * 80}>
              <SolutionCard {...s} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function SolutionCard({ n, icon, title, body, best }) {
  return (
    <div className="card solution-card" style={{ height: '100%' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span className="num">{n}</span>
        <span style={{ color: 'var(--text-muted)' }}><Icon name={icon} size={20} /></span>
      </div>
      <h3>{title}</h3>
      <p>{body}</p>
      <div className="best"><b>Best for:</b> {best}</div>
    </div>
  );
}

Object.assign(window, { Nav, Hero, TrustStrip, Problem, Solutions });