// Testimonials, FAQ, Outro CTA, Footer

const contactMailto = `mailto:sales@nexthorizon.my?subject=${encodeURIComponent('Book a 30-min call with Next Horizon')}&body=${encodeURIComponent(`Hi Next Horizon team,

I'd like to book a 30-minute call to discuss how AI automation could help my business.

Name:
Company:
Preferred date/time:
What we'd like to explore:

Thanks!`)}`;

function Testimonials() {
  const items = [
    { q: "They shipped a working WhatsApp ordering system in five weeks. Five. We'd been quoted six months by two other vendors.", n: 'Aida', r: 'COO, F&B chain (14 outlets)' },
    { q: "The dashboard surfaced RM 320k of margin we were leaking across marketplaces. Paid for the engagement in a single quarter.", n: 'Marcus Tan', r: 'Founder, cross-border e-commerce' },
    { q: "We hired them as a fractional CTO and ended up rebuilding our whole stack. No regrets — they say no more than they say yes.", n: 'Priya', r: 'CEO, logistics SME' },
  ];
  return (
    <section className="sec" style={{ background: 'var(--bg-2)' }}>
      <div className="wrap">
        <div style={{ marginBottom: 64 }} className="reveal">
          <SlashTag>TESTIMONIALS</SlashTag>
          <h2 className="h-section serif" style={{ marginTop: 28, maxWidth: '14ch' }}>
            Words from <span className="italic">the operators</span> we work with.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }} className="t-grid">
          {items.map((t, i) => (
            <div key={i} className={`reveal r-d-${i + 1}`} style={{ background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 18, padding: 32, display: 'flex', flexDirection: 'column' }}>
              <div className="serif" style={{ fontSize: 'clamp(20px, 1.8vw, 24px)', lineHeight: 1.4, letterSpacing: '-0.015em', flex: 1 }}>"{t.q}"</div>
              <div style={{ marginTop: 28, display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 40, height: 40, borderRadius: '50%', background: `linear-gradient(135deg, hsl(${i * 60 + 20} 30% 45%), hsl(${i * 60 + 60} 35% 35%))`, flex: '0 0 40px' }} />
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>{t.n}</div>
                  <div style={{ fontSize: 12, color: 'var(--mute)', marginTop: 2 }}>{t.r}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <style>{`@media (max-width: 980px) { .t-grid { grid-template-columns: 1fr !important; } }`}</style>
      </div>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const qs = [
    { q: 'How is this different from a software agency?', a: 'We focus exclusively on AI-leveraged systems. Senior team only. Subscription pricing instead of statements of work. We ship in weeks, not quarters, and we stay embedded after launch.' },
    { q: 'Do we need technical staff to use what you build?', a: 'No. Every system ships with runbooks, training, and a hand-off. Most clients run their automations indefinitely without touching code. We stay on call for anything that breaks.' },
    { q: "What if we don't know what to automate first?", a: "That's the Discover phase. Two weeks. We map your workflow, quantify the hours bleeding from each step, and rank the top opportunities by ROI. You leave with a roadmap whether you continue with us or not." },
    { q: 'Can you work with our existing tools?', a: 'Almost certainly yes. We integrate with POS, ERP, CRM, marketplaces, accounting, WhatsApp Business and most modern SaaS. If something needs a custom connector, we build it.' },
    { q: 'How do I know the hours are real?', a: 'We do not ask you to blindly buy hours. We agree on deliverables, estimate effort upfront, and show progress transparently.' },
    { q: 'Will you work slowly to consume hours?', a: 'Each task has an agreed expected output and effort estimate before we start.' },
    { q: 'What if the task takes longer than expected?', a: 'We will inform you before continuing if the scope exceeds the estimate.' },
    { q: 'Will there be surprise charges?', a: 'No extra work or extra charges without prior approval.' },
    { q: 'What happens if we want to pause or stop?', a: 'Subscriptions pause or cancel at the end of any quarter. You keep everything we built, including source code and documentation. No lock-in.' },
    { q: 'Where are you based and who actually does the work?', a: 'Kuala Lumpur. Eight senior people, no offshore. The person who scopes your project is the one who builds it.' },
  ];
  return (
    <section className="sec" id="faq">
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'flex-start' }} className="faq-grid">
          <div className="reveal">
            <SlashTag>FAQ</SlashTag>
            <h2 className="h-section serif" style={{ marginTop: 28 }}>
              Common <span className="italic">questions.</span>
            </h2>
            <p className="lede" style={{ marginTop: 24 }}>
              {"Can't find what you're looking for? "}<a href="#contact" style={{ color: 'var(--ink)', textDecoration: 'underline', textUnderlineOffset: 4 }}>Drop us a note.</a>
            </p>
          </div>
          <div style={{ borderTop: '1px solid var(--line)' }} className="reveal r-d-1">
            {qs.map((q, i) => (
              <div key={i} style={{ borderBottom: '1px solid var(--line)' }}>
                <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                  appearance: 'none', background: 'transparent', border: 0, width: '100%', textAlign: 'left',
                  padding: '24px 0', cursor: 'default', font: 'inherit', color: 'inherit',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
                }}>
                  <span style={{ fontSize: 18, fontWeight: 500, letterSpacing: '-0.01em' }}>{q.q}</span>
                  <span style={{
                    width: 32, height: 32, borderRadius: '50%', border: '1px solid var(--line-2)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 32px',
                    transform: open === i ? 'rotate(45deg)' : 'none', transition: 'transform 400ms',
                  }}>
                    <svg width="11" height="11" viewBox="0 0 11 11" fill="none"><path d="M5.5 1 V10 M1 5.5 H10" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" /></svg>
                  </span>
                </button>
                <div style={{ display: 'grid', gridTemplateRows: open === i ? '1fr' : '0fr', transition: 'grid-template-rows 500ms cubic-bezier(0.2,0.8,0.2,1)' }}>
                  <div style={{ overflow: 'hidden' }}>
                    <div style={{ paddingBottom: 24, paddingRight: 64, color: 'var(--mute)', fontSize: 16, lineHeight: 1.6, maxWidth: 600 }}>{q.a}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <style>{`@media (max-width: 880px) { .faq-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
      </div>
    </section>
  );
}

function Outro() {
  return (
    <section className="sec-dark" id="contact" style={{ padding: '160px 0 100px', position: 'relative', overflow: 'hidden' }}>
      <div className="wrap" style={{ position: 'relative' }}>
        <div className="reveal"><SlashTag dark>GET IN TOUCH</SlashTag></div>
        <h2 className="reveal r-d-1" style={{
          fontFamily: 'Geist, sans-serif', fontWeight: 600,
          fontSize: 'clamp(56px, 11vw, 168px)', lineHeight: 0.92, letterSpacing: '-0.035em',
          color: 'var(--dark-text)', margin: '40px 0 64px',
        }}>
          <SplitWords>{"Let's build"}</SplitWords><br />
          <SplitWords delay={250}><span className="italic">something</span></SplitWords><br />
          <SplitWords delay={500}>that ships.</SplitWords>
        </h2>
        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }} className="reveal r-d-3">
          <a href={contactMailto} className="btn btn-light" style={{ background: 'var(--bg)', color: 'var(--ink)' }}>
            Book a 30-min call
            <span className="arr"><svg width="11" height="11" viewBox="0 0 11 11" fill="none"><path d="M2 9 L9 2 M3.5 2 L9 2 L9 7.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg></span>
          </a>
          <a href="mailto:sales@nexthorizon.my" className="btn" style={{ borderColor: 'var(--dark-line)', color: 'var(--dark-text)' }}>sales@nexthorizon.my</a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="sec-dark" style={{ padding: '0 0 32px', borderTop: '1px solid var(--dark-line)' }}>
      <div className="wrap" style={{ paddingTop: 64 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48 }} className="foot-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
              <img className="nav-logo" src="uploads/next-horizon-logo.png" alt="Next Horizon logo" />
              <span style={{ fontSize: 17, fontWeight: 500, color: 'var(--dark-text)' }}>Next Horizon<span style={{ color: 'var(--dark-mute)' }}>®</span></span>
            </div>
            <p style={{ fontSize: 14, color: 'var(--dark-mute)', lineHeight: 1.55, maxWidth: 320, margin: 0 }}>
              An AI consulting partner for Malaysian SMEs ready to operate at the next horizon.
            </p>
          </div>
          {[
            { h: 'Sitemap', l: ['Services', 'Process', 'Work', 'Pricing', 'FAQ'] },
            { h: 'Contact', l: ['sales@nexthorizon.my', 'KLCC, Kuala Lumpur'] },
            { h: 'Social', l: ['LinkedIn', 'X / Twitter', 'GitHub'] },
          ].map(c => (
            <div key={c.h}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--dark-mute)', marginBottom: 16, letterSpacing: '0.04em' }}>{c.h}</div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {c.l.map(item => (
                  <li key={item}><a href="#" style={{ color: 'var(--dark-text)', textDecoration: 'none', fontSize: 14, opacity: 0.85 }}>{item}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        {/* big lockup */}
        <div className="serif" style={{
          fontSize: 'clamp(80px, 18vw, 280px)', lineHeight: 0.85, letterSpacing: '-0.04em',
          color: 'var(--dark-text)', marginTop: 80, paddingBottom: 24,
          borderBottom: '1px solid var(--dark-line)',
        }}>
          Next Horizon<span style={{ color: 'var(--accent)' }}>®</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12, marginTop: 24, fontSize: 12, color: 'var(--dark-mute)' }} className="mono">
          <div>© 2026 Next Horizon Sdn Bhd · 202401008469</div>
          <div style={{ display: 'flex', gap: 24 }}>
            <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Privacy</a>
            <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Terms</a>
            <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Security</a>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
    </footer>
  );
}

Object.assign(window, { Testimonials, FAQ, Outro, Footer });