// ======== FAQ ========
const FAQS = [
  { q: 'How much does a project cost?', a: 'We quote fixed prices after a scoping call, no hourly billing. MVPs start at $1,000 USD, launch-ready products from $5,000, full production apps from $15,000, and platform work $50,000+.' },
  { q: 'Do I need a technical background?', a: 'No. Most of our clients don\'t write code. We translate your idea into a precise product spec during scoping, and we keep every weekly update in plain English.' },
  { q: 'How fast can we start?', a: 'Scoping calls are usually within a week. Most projects kick off the Monday after a signed agreement.' },
  { q: 'Do you only build MVPs?', a: 'No , we build web apps, mobile apps, AI features, and production systems for scaled products. MVPs are one shape of work, not the only shape.' },
  { q: 'Who owns the code?', a: 'You do. Full IP transfer, full source access, full repository handoff on day one. No lock-in.' },
  { q: 'What if I already have developers?', a: 'That works too. We can take on a discrete workstream end-to-end, or hand off a clean, documented codebase for your team to run with.' },
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section page" id="faq">
      <div style={{display:'grid', gridTemplateColumns:'1fr 1.6fr', gap: 80, alignItems:'start'}} className="faq-layout">
        <div style={{position:'sticky', top: 120}}>
          <div className="eyebrow" style={{marginBottom: 32}}>
            <span>[ 07 / FAQ ]</span>
          </div>
          <h2 className="display" style={{fontSize:'clamp(48px, 7vw, 120px)'}}>
            <RevealLine as="span" className="word-block">Honest</RevealLine>
            <RevealLine as="span" className="word-block" delay={100}><span className="serif">answers.</span></RevealLine>
          </h2>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button
                className="faq-q"
                data-cursor="hover"
                onClick={() => setOpen(open === i ? -1 : i)}
                aria-expanded={open === i}
              >
                <span>{f.q}</span>
                <span className="faq-toggle">
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <path d="M7 1V13M1 7H13" stroke="currentColor" strokeWidth="1.5" />
                  </svg>
                </span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{f.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .faq-layout { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
      `}</style>
    </section>
  );
}

// ======== CONTACT ========
function Contact() {
  const SERVICES_CHIPS = ['Web app', 'Mobile', 'AI', 'MVP', 'Not sure'];
  const BUDGET_CHIPS = ['$1,000', '$5,000', '$15,000', '$50,000+'];
  const [service, setService] = React.useState('Web app');
  const [budget, setBudget] = React.useState('$1,000');
  const [submitted, setSubmitted] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState('');

  return (
    <section className="section page" id="contact">
      <div className="contact">
        <div>
          <div className="eyebrow" style={{marginBottom: 32}}>
            <span>[ 08 / Start ]</span>
          </div>
          <h2 className="display" style={{fontSize:'clamp(48px, 7vw, 120px)'}}>
            <RevealLine as="span" className="word-block">Tell us</RevealLine>
            <RevealLine as="span" className="word-block" delay={100}>what you're</RevealLine>
            <RevealLine as="span" className="word-block" delay={200}><span className="serif">building.</span></RevealLine>
          </h2>
          <FadeUp delay={300}>
            <p style={{marginTop: 32, color: 'var(--fg-2)', fontSize: 15, lineHeight: 1.6, maxWidth: 440}}>
              Send us the shape of your idea. We'll reply with what we think and what it takes.
            </p>
          </FadeUp>
          <FadeUp delay={400}>
            <div style={{marginTop: 48, display:'flex', flexDirection:'column', gap: 12, fontFamily:'JetBrains Mono, monospace', fontSize: 12, letterSpacing:'0.08em', color: 'var(--fg-2)'}}>
              <div>RIYADH · DUBAI · REMOTE</div>
            </div>
          </FadeUp>
        </div>
        <div>
          {!submitted ? (
            <form className="contact-form" onSubmit={async (e) => {
              e.preventDefault();
              if (sending) return;
              setError('');
              setSending(true);
              try {
                const fd = new FormData(e.target);
                fd.append('service', service);
                fd.append('budget', budget);
                const res = await fetch('https://formspree.io/f/mnjlrpyz', {
                  method: 'POST',
                  body: fd,
                  headers: { Accept: 'application/json' },
                });
                if (res.ok) { setSubmitted(true); }
                else { setError('Something went wrong. Please try again.'); }
              } catch (err) {
                setError('Network error. Please try again.');
              } finally {
                setSending(false);
              }
            }}>
              <div className="form-field">
                <label className="form-label">01 , Your name</label>
                <input className="form-input" name="name" placeholder="Faisal Al-Saud" required />
              </div>
              <div className="form-field">
                <label className="form-label">02 , Email</label>
                <input className="form-input" type="email" name="email" placeholder="faisal@company.com" required />
              </div>
              <div className="form-field">
                <label className="form-label">03 , Phone <span style={{opacity: 0.5, textTransform:'none', letterSpacing:0}}>(optional)</span></label>
                <input className="form-input" type="tel" name="phone" placeholder="+966 5X XXX XXXX" />
              </div>
              <div className="form-field">
                <label className="form-label">04 , What are you building?</label>
                <div className="form-chips">
                  {SERVICES_CHIPS.map((c) => (
                    <button type="button" key={c} data-cursor="hover"
                            className={`form-chip ${service === c ? 'active' : ''}`}
                            onClick={() => setService(c)}>{c}</button>
                  ))}
                </div>
              </div>
              <div className="form-field">
                <label className="form-label">05 , Budget range</label>
                <div className="form-chips">
                  {BUDGET_CHIPS.map((c) => (
                    <button type="button" key={c} data-cursor="hover"
                            className={`form-chip ${budget === c ? 'active' : ''}`}
                            onClick={() => setBudget(c)}>{c}</button>
                  ))}
                </div>
              </div>
              <div className="form-field">
                <label className="form-label">06 , Tell us more</label>
                <textarea className="form-textarea" name="message" placeholder="What problem are you solving? Who's it for? When do you want to launch?" />
              </div>
              {error && <div style={{color:'#c44', fontSize: 13, fontFamily:'JetBrains Mono, monospace'}}>{error}</div>}
              <div style={{marginTop: 16}}>
                <button type="submit" disabled={sending} className="btn btn-accent" data-cursor="invert" style={{opacity: sending ? 0.6 : 1}}>
                  {sending ? 'Sending...' : 'Send request'}
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{marginLeft: 4}}>
                    <path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.5" />
                  </svg>
                </button>
              </div>
            </form>
          ) : (
            <FadeUp>
              <div style={{border:'1px solid var(--line)', borderRadius: 16, padding: 48, textAlign:'center'}}>
                <div style={{width: 56, height: 56, borderRadius:'50%', background:'var(--accent)', margin:'0 auto 24px', display:'flex', alignItems:'center', justifyContent:'center'}}>
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M5 12L10 17L19 8" stroke="#0E0E0C" strokeWidth="2" />
                  </svg>
                </div>
                <h3 style={{fontSize: 24, fontWeight: 500, letterSpacing:'-0.02em', marginBottom: 12}}>Request received.</h3>
                <p style={{color:'var(--fg-2)', fontSize: 14, lineHeight: 1.6}}>You'll hear from us within 24 hours.</p>
              </div>
            </FadeUp>
          )}
        </div>
      </div>
    </section>
  );
}

// ======== FOOTER ========
function Footer() {
  return (
    <footer className="footer page">
      <h2 className="footer-display">
        <RevealLine as="span" className="word-block">Let's build</RevealLine>
        <RevealLine as="span" className="word-block" delay={100}>the <span className="serif">thing.</span></RevealLine>
      </h2>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginTop: 80, flexWrap:'wrap', gap: 48}}>
        <FadeUp>
          <a href="#contact" className="btn" data-cursor="invert">
            <span className="dot" /> Start a project
          </a>
        </FadeUp>
        <FadeUp delay={100}>
          <div style={{fontFamily:'JetBrains Mono, monospace', fontSize: 11, letterSpacing:'0.08em', color:'var(--fg-2)'}}>
            Riyadh · Dubai
          </div>
        </FadeUp>
      </div>
      <div className="footer-bottom">
        <div>© 2026 VOOTLABS , ALL RIGHTS RESERVED</div>
        <div className="footer-links">
          <a href="#" data-cursor="hover">PRIVACY</a>
          <a href="#" data-cursor="hover">TERMS</a>
          <a href="#" data-cursor="hover">COLOPHON</a>
        </div>
      </div>
    </footer>
  );
}

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