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

// ---------- Built On ----------
function BuiltOn() {
  const tools = [
    { mark: 'A', name: 'Anthropic Claude', role: 'Primary reasoning engine' },
    { mark: 'n', name: 'n8n', role: 'Workflow orchestration' },
    { mark: 'S', name: 'Supabase', role: 'Database & auth' },
    { mark: 'V', name: 'Vercel / Cloudflare', role: 'Deployment & delivery' },
    { mark: 'O', name: 'OpenAI / Open-source', role: 'Optional, cost-optimized workloads' },
  ];
  return (
    <section>
      <div className="wrap">
        <div className="section-head">
          <div>
            <Reveal><p className="eyebrow">Built on</p></Reveal>
            <SplitText
              text="Built on infrastructure you can trust."
              as="h2"
              stagger={40}
              highlight="infrastructure you can trust."
            />
          </div>
          <Reveal delay={200}>
            <p className="lead">
              We use the same tools powering Fortune 500 AI systems — tuned for Malaysian SME budgets.
            </p>
          </Reveal>
        </div>
        <Reveal>
          <div className="built-grid">
            {tools.map((t, i) => (
              <div key={i} className="built-cell">
                <div className="built-mark">{t.mark}</div>
                <div className="name">{t.name}</div>
                <div className="role">{t.role}</div>
              </div>
            ))}
          </div>
        </Reveal>
        <Reveal delay={200}>
          <p style={{ marginTop: 32, fontSize: 14.5, color: 'var(--text-secondary)', lineHeight: 1.65, maxWidth: 820 }}>
            Our default stack runs on Anthropic Claude for best-in-class reasoning. For high-volume or cost-sensitive workloads, we can route specific tasks to other models — always through Zero Data Retention infrastructure. Your data is never used to train any model.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- Why Eight AI ----------
function WhyUs() {
  const items = [
    { icon: 'users', title: 'Dedicated engineers', body: 'Your build is handled by senior engineers, not outsourced freelancers. Direct WhatsApp/email line to the team who built your system.', tag: 'Named team, not a ticket queue' },
    { icon: 'chart', title: 'Outcome-aligned pricing', body: 'You pay for installed systems and ongoing maintenance, not billable hours. Our incentives are tied to your results.', tag: 'We win when you win' },
    { icon: 'shield', title: 'Data stays with you', body: 'Every AI provider we use is under Zero Data Retention. No model ever trains on your data. Code, configurations, and prompts are handed over — you own everything we build.', tag: 'You own everything' },
    { icon: 'pin', title: 'Local support, local languages', body: 'A Malaysian team that understands Malaysian business workflows. Native BM, English, and Mandarin support — built in, not bolted on.', tag: 'Built in Malaysia' },
    { icon: 'coin', title: 'Built for SME budgets', body: 'Enterprise-grade tools, SME-grade pricing. No long contracts. No surprise bills. No "enterprise consultation" gatekeeping.', tag: 'Transparent pricing' },
    { icon: 'layers', title: 'Phased implementation', body: "Start small with an audit. Validate before scaling. We don't ask you to bet the company on AI on day one.", tag: 'Prove value first' },
  ];
  return (
    <section id="why" style={{ borderTop: '1px solid var(--border-subtle)' }}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <Reveal><p className="eyebrow">Why Eight AI</p></Reveal>
            <SplitText
              text="Built for businesses who want AI that actually runs."
              as="h2"
              stagger={30}
              highlight="actually runs."
            />
          </div>
          <Reveal delay={200}>
            <p className="lead">
              We're not a side project. We're a registered Malaysian company with one focus: installing AI that works.
            </p>
          </Reveal>
        </div>
        <div className="grid-3">
          {items.map((it, i) => (
            <Reveal key={i} delay={(i % 3) * 80}>
              <div className="card why-card" style={{ height: '100%' }}>
                <span className="ico-box"><Icon name={it.icon} size={18} /></span>
                <h3>{it.title}</h3>
                <p>{it.body}</p>
                <div className="tag">{it.tag}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- FAQ ----------
function FAQ() {
  const items = [
    { q: 'How long does an installation take?', a: 'Audit: 1 week. Build: 2–6 weeks depending on scope. Most clients see their first working system within a month of signing.' },
    { q: 'What happens if the AI gets something wrong?', a: 'Every system we build has human-in-the-loop checkpoints for critical decisions. We also include monitoring and alerts so issues are caught before they affect customers.' },
    { q: 'Who owns the system after you build it?', a: 'You do. Code, configuration, prompts, documentation — all handed over. We just maintain it if you choose the Install & Operate tier.' },
    { q: 'How do you handle our data?', a: "Your data stays in your systems. We use AI providers under Zero Data Retention agreements — meaning no model provider trains on your data, ever. Our default model is Anthropic Claude (US infrastructure). If we use additional models for specific workloads, they're always routed through enterprise infrastructure with the same data guarantees. We sign NDAs as standard." },
    { q: 'Can we cancel the monthly retainer?', a: 'Yes, anytime. No lock-in contracts. If you cancel, you keep the system — we just stop maintaining it.' },
    { q: 'How is this different from buying ChatGPT for the team?', a: 'ChatGPT is a chatbot — someone has to log in and prompt it. We install systems that run automatically inside your workflows. No one needs to remember to use them.' },
    { q: 'Do you support Bahasa Malaysia?', a: 'Yes. Claude handles BM, English, and Mandarin natively. Our chatbots and assistants can be deployed in any combination of these languages.' },
    { q: "What if we don't know what to automate?", a: "That's exactly what the Workflow Audit is for. Most clients don't know until we map it out together — and the audit report is yours to keep regardless of whether you continue with us." },
  ];
  const [open, setOpen] = useStateC(0);
  return (
    <section>
      <div className="wrap" style={{ maxWidth: 900 }}>
        <div className="section-head" style={{ gridTemplateColumns: '1fr', marginBottom: 56 }}>
          <Reveal><p className="eyebrow">FAQ</p></Reveal>
          <SplitText text="Questions we hear before every project." as="h2" stagger={35} />
          <Reveal delay={200}>
            <p className="lead" style={{ marginTop: 16 }}>If you're not sure where to start, you're in the right place.</p>
          </Reveal>
        </div>
        <Reveal>
          <div>
            {items.map((it, i) => (
              <div key={i} className={`acc-item ${open === i ? 'open' : ''}`}>
                <button className="acc-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  <span>{it.q}</span>
                  <span className="ico"><Icon name="plus" size={18} /></span>
                </button>
                <div className="acc-a">
                  <div className="acc-a-inner">{it.a}</div>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- Final CTA ----------
function FinalCTA() {
  return (
    <section id="book-call" className="final-cta section-blue">
      <div className="wrap final-grid">
        <div>
          <Reveal><p className="eyebrow">Get started</p></Reveal>
          <SplitText
            text="Ready to install AI that actually runs in your business?"
            as="h2"
            stagger={25}
            highlight="actually runs"
          />
          <Reveal delay={200}>
            <p className="lead" style={{ marginTop: 24 }}>
              Book a free 30-minute audit call. We'll review your top 3 repetitive workflows and tell you — honestly — whether AI is the right fit. No sales pitch.
            </p>
          </Reveal>
          <Reveal delay={300}>
            <div className="hero-cta-row" style={{ marginTop: 32 }}>
              <a className="btn btn-primary" href="#book-call">
                Book your audit call
                <Icon name="arrow" size={16} />
              </a>
              <a className="btn btn-ghost" href="mailto:hello@eightai.my">
                Or email hello@eightai.my
              </a>
            </div>
          </Reveal>
        </div>
        <Reveal delay={250}>
          <div className="testimonial">
            <span style={{ color: 'var(--accent)', fontSize: 28, lineHeight: 1, display: 'block', marginBottom: 12, fontFamily: 'Georgia, serif' }}>“</span>
            <q>We thought AI was something only big companies could afford. Eight AI showed us otherwise — they installed a system that handles 80% of our patient inquiries automatically.</q>
            <div className="who">
              <span className="avatar-mono">CY</span>
              <div>
                <div style={{ color: 'var(--text-primary)', fontSize: 14, fontWeight: 500 }}>Clinic Owner</div>
                <div style={{ fontSize: 13 }}>Klang Valley · Healthcare</div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-col">
            <a className="brand" href="#top">
              <span className="brand-mark"><img src="assets/logo-mark.png" alt="" /></span>
              <span>Eight AI</span>
            </a>
            <p style={{ color: 'var(--text-secondary)', fontSize: 14, marginTop: 18, maxWidth: 320 }}>
              Your AI partner for the work software should be doing.
            </p>
            <p style={{ color: 'var(--text-muted)', fontSize: 13, marginTop: 24, lineHeight: 1.6 }}>
              EIGHT AI SOLUTIONS<br />
              SSM 202603086688 (PG0585777-P)<br />
              Cyberjaya, Selangor, Malaysia
            </p>
          </div>
          <div className="foot-col">
            <h4>Solutions</h4>
            <ul>
              <li><a href="#solutions">Document Automation</a></li>
              <li><a href="#solutions">Customer Chatbots</a></li>
              <li><a href="#solutions">Knowledge Assistants</a></li>
              <li><a href="#solutions">Inbox Automation</a></li>
              <li><a href="#solutions">Custom AI Agents</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>Company</h4>
            <ul>
              <li><a href="#why">About</a></li>
              <li><a href="#industries">Industries</a></li>
              <li><a href="#book-call">Case Studies</a></li>
              <li><a href="#book-call">Contact</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>Resources</h4>
            <ul>
              <li><a href="#book-call">FAQ</a></li>
              <li><a href="#book-call">Privacy Policy</a></li>
              <li><a href="#book-call">Terms of Service</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 Eight AI Solutions. Registered in Malaysia.</span>
          <div className="foot-social">
            <a href="#" aria-label="LinkedIn"><Icon name="linkedin" size={16} /></a>
            <a href="#" aria-label="YouTube"><Icon name="youtube" size={16} /></a>
            <a href="#" aria-label="Instagram"><Icon name="instagram" size={16} /></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { BuiltOn, WhyUs, FAQ, FinalCTA, Footer });