// about-contact.jsx — About, Differentiators, Contact form, Footer

window.CustomSelect = () => null; // unused — kept for legacy compat

const Differentiators = () => {
  const d = [
    { t: 'Ready to use', d: 'You receive a working system, not a slide deck of recommendations.', icon: '◉' },
    { t: 'Business first', d: 'I optimize for time saved, not for the cleverness of the build.', icon: '◈' },
    { t: 'Tool flexible', d: 'No-code, APIs, AI, custom code — whichever fits the problem.', icon: '⊞' },
    { t: 'Client friendly', d: 'You can use it without needing to read the implementation.', icon: '◷' },
    { t: 'Scalable', d: 'A no-code start can become a custom backend without throwing work away.', icon: '∞' },
    { t: 'Documented', d: 'Every system ships with a clear, plain-language guide.', icon: '▤' },
  ];
  return (
    <section className="section diff">
      <SectionLabel num="08" label="What's different" />
      <h2 className="sec-h">Built for the <em>result</em>, not for a specific tool.</h2>
      <p className="sec-sub">Some workflows want a 30-minute Zapier flow. Some want a custom backend. The right answer is "whichever one your business actually benefits from."</p>
      <div className="diff-grid">
        {d.map((x, i) => (
          <div className="diff-card" key={i}>
            <div className="diff-icon">{x.icon}</div>
            <div className="diff-t">{x.t}</div>
            <div className="diff-d">{x.d}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
const About = () => {
  const skills = [
    'Workflow automation', 'No-code (Make, n8n, Zapier)', 'AI automation', 'API integrations',
    'CRM automation', 'Email workflows', 'Reporting & dashboards', 'Custom backends',
    'Webhooks', 'Databases (Postgres, Airtable)', 'Internal tools', 'Process mapping'
  ];
  return (
    <section className="section about">
      <SectionLabel num="08" label="About" />
      <div className="about-grid">
        <div className="about-l">
          <h2 className="sec-h about-h">I build the system. You run the business.</h2>
          <p>I work with founders and teams who are doing too much by hand. My job is to find the repeating patterns, choose the right tools, and ship a system that quietly handles them.</p>
          <p>Not every business needs a custom backend. Sometimes a 90-minute no-code flow saves five hours a week. Other times the right answer is real code, a database, and a dashboard. I'm comfortable across the whole range — and I'll tell you when something doesn't need to be complicated.</p>
          <div className="about-meta">
            <div><span className="about-k">Based in</span><span className="about-v">Karachi · GMT+5</span></div>
            <div><span className="about-k">Working with</span><span className="about-v">Clients globally</span></div>
            <div><span className="about-k">Response</span><span className="about-v">Within 24h</span></div>
          </div>
        </div>
        <div className="about-r">
          <div className="about-card">
            <div className="about-card-h">Capabilities</div>
            <div className="about-skills">
              {skills.map((s, i) => <span key={i} className="about-skill">{s}</span>)}
            </div>
          </div>
          <div className="about-card">
            <div className="about-card-h">Stack I reach for</div>
            <div className="about-stack">
              {[
                { k: 'No-code', v: 'Make · n8n · Zapier' },
                { k: 'AI', v: 'OpenAI · Claude · custom prompts' },
                { k: 'Backend', v: 'Node · Python · Postgres' },
                { k: 'Glue', v: 'Webhooks · APIs · Cron' },
                { k: 'Dashboards', v: 'Retool · custom React' },
              ].map((row, i) => (
                <div className="about-stack-row" key={i}>
                  <span className="about-stack-k">{row.k}</span>
                  <span className="about-stack-v">{row.v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
const ContactForm = () => {
  const [form, setForm]       = React.useState({ name: '', email: '', automate: '' });
  const [submitted, setSubmitted] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [error, setError]     = React.useState('');
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const submit = async (e) => {
    e.preventDefault();
    setError('');
    // Basic client-side validation
    if (!form.name.trim() || !form.email.trim() || !form.automate.trim()) {
      setError('Please fill in all fields.');
      return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) {
      setError('Please enter a valid email address.');
      return;
    }
    setLoading(true);
    try {
      const fd = new FormData();
      fd.append('name',     form.name.trim());
      fd.append('email',    form.email.trim());
      fd.append('automate', form.automate.trim());
      const res = await fetch('https://formspree.io/f/xpwjngzb', {
        method: 'POST', body: fd, headers: { 'Accept': 'application/json' },
      });
      if (res.ok) { setSubmitted(true); }
      else        { setError('Something went wrong — please try again or message me on WhatsApp.'); }
    } catch (_) {
      setError('Network error — please check your connection and try again.');
    } finally {
      setLoading(false);
    }
  };

  if (submitted) {
    return (
      <div className="form-success">
        <div className="form-success-icon">✓</div>
        <h3>Got it. I'll reply within 24 hours.</h3>
        <p>I'll sketch a rough automation approach and propose a free 30-minute audit call. No commitment.</p>
        <div className="form-success-meta">
          <div><span>Audit length</span><b>30 minutes</b></div>
          <div><span>Cost</span><b>Free</b></div>
          <div><span>Outcome</span><b>A clear automation plan</b></div>
        </div>
      </div>
    );
  }

  return (
    <form className="form" onSubmit={submit} noValidate>
      <div className="form-grid">
        <label className="field">
          <span>Your name</span>
          <input
            value={form.name}
            onChange={e => set('name', e.target.value)}
            placeholder="Jane Smith"
            autoComplete="name"
            required
          />
        </label>
        <label className="field">
          <span>Email</span>
          <input
            type="email"
            value={form.email}
            onChange={e => set('email', e.target.value)}
            placeholder="jane@company.com"
            autoComplete="email"
            required
          />
        </label>
        <label className="field field-wide">
          <span>What do you want to automate?</span>
          <textarea
            value={form.automate}
            onChange={e => set('automate', e.target.value)}
            rows="4"
            placeholder="e.g. Every time we get a new lead I have to manually email them, add them to a spreadsheet, and notify the team on Slack. Takes me 20 min each time..."
            required
          />
        </label>
      </div>

      {error && (
        <p style={{ color: 'var(--error, #f87171)', fontSize: '0.82rem', margin: '4px 0 0' }}
          role="alert">{error}</p>
      )}

      <div className="form-actions" style={{ marginTop: '1.25rem' }}>
        <button type="submit" className="btn-primary" disabled={loading} style={{ width: '100%', justifyContent: 'center' }}>
          {loading ? 'Sending…' : 'Book a free audit →'}
        </button>
      </div>

      <p style={{ textAlign: 'center', fontSize: '0.78rem', color: 'var(--muted)', marginTop: '0.75rem' }}>
        Free · No commitment · Reply within 24 h
      </p>
    </form>
  );
};

const Contact = () => (
  <section className="section contact" id="contact">
    <Reveal><SectionLabel num="09" label="Get in touch" /></Reveal>
    <div className="contact-grid">
      <Reveal x={-24} y={0} className="contact-l">
        <h2 className="sec-h">Tell me what you do manually. <em>I'll show you how to automate it.</em></h2>
        <p>Send a few details about the work that's eating your week. I'll reply within 24 hours with a rough automation approach and an invite to a free 30-minute audit.</p>
        <div className="contact-bullets">
          <div className="contact-bullet"><span className="contact-bi">◷</span><div><b>30 minutes</b><span>One call, no slides.</span></div></div>
          <div className="contact-bullet"><span className="contact-bi">◉</span><div><b>Free audit</b><span>You leave with a real plan.</span></div></div>
          <div className="contact-bullet"><span className="contact-bi">→</span><div><b>No pressure</b><span>Hire me or take the plan and run.</span></div></div>
        </div>
        <div className="contact-quick-links">
          <a className="contact-quick-link contact-quick-wa"
            href="https://wa.me/923021044751" target="_blank" rel="noopener">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.126.553 4.122 1.523 5.855L.057 23.882l6.255-1.44A11.945 11.945 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-1.882 0-3.643-.488-5.176-1.346l-.37-.219-3.844.885.916-3.72-.241-.384A9.953 9.953 0 012 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z"/></svg>
            WhatsApp me
          </a>
          <a className="contact-quick-link contact-quick-gmb"
            href="https://g.page/r/CSjMNqTcONYFEBI/review" target="_blank" rel="noopener">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
            Leave a Google review
          </a>
        </div>
      </Reveal>
      <Reveal x={24} y={0} delay={120} className="contact-r">
        <ContactForm />
      </Reveal>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer">
    <div className="footer-grid">
      <div className="footer-brand">
        <div className="brand-mark">
          <span className="brand-glyph">⌬</span>
          <span>Jawwad Automation</span>
        </div>
        <p>Ready-to-use automation systems for businesses that want to save time and grow faster.</p>
      </div>
      <div>
        <div className="footer-h">Systems</div>
        <a>Lead capture</a><a>Client onboarding</a><a>AI inbox</a><a>Reporting</a><a>CRM pipeline</a>
      </div>
      <div>
        <div className="footer-h">Engagement</div>
        <a>Starter automation</a><a>Business workflow</a><a>Custom system</a><a>Free audit</a>
      </div>
      <div>
        <div className="footer-h">Contact</div>
        <a>hello@jawwadautomation.org</a>
        <a>jawwadautomation.org</a>
        <a>Karachi · GMT+5</a>
      </div>
    </div>
    <div className="footer-base">
      <span>© 2026 Jawwad Automation</span>
      <span className="footer-mono">Built with the same systems I sell.</span>
    </div>
  </footer>
);

window.Differentiators = Differentiators;
window.About = About;
window.Contact = Contact;
window.Footer = Footer;