// Demandscape website — Request a demo (posts to Formspree)
const FORMSPREE_ENDPOINT = 'https://formspree.io/f/xbdvldqo';

function DemoPage() {
  const { Button, Card, Badge, Input, Stat } = window.DemandscapeDesignSystem_0e6a32;
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');

  async function handleSubmit(e) {
    e.preventDefault();
    const f = e.target;
    const get = (n) => (f.elements[n] && f.elements[n].value || '').trim();
    setError('');
    setSubmitting(true);
    try {
      const res = await fetch(FORMSPREE_ENDPOINT, {
        method: 'POST',
        headers: { Accept: 'application/json' },
        body: JSON.stringify({
          name: get('name'),
          email: get('email'),
          company: get('company'),
          _subject: `Demo request — ${get('company') || get('name') || 'Demandscape'}`,
        }),
      });
      if (res.ok) {
        f.reset();
        setSent(true);
      } else {
        const data = await res.json().catch(() => ({}));
        setError((data.errors && data.errors.map((x) => x.message).join(', ')) || 'Something went wrong. Please try again or email us directly.');
      }
    } catch (err) {
      setError('Could not reach the server. Please check your connection or email us directly.');
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <main className="container section">
      <div className="split" style={{ gap: '4rem', alignItems: 'start' }}>
        <div>
          <Badge variant="soft" bracket>Request a demo</Badge>
          <h1 style={{ fontSize: 'var(--fs-display-md)', letterSpacing: '-0.02em', marginTop: 16, color: 'var(--ds-navy)' }}>
            See what your customers will do next
          </h1>
          <p style={{ fontSize: 'var(--fs-lead)', lineHeight: 1.5, color: 'var(--ds-navy)', marginTop: 16 }}>
            A 30-minute walkthrough on your category and your scenarios. We'll show you the digital
            twin in action — and answer a "what if…?" of your choosing.
          </p>
          <p style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-muted)', marginTop: '2.5rem', letterSpacing: '.03em' }}>
            Prefer email? <a href="mailto:hello@rosroe.com">hello@rosroe.com</a>
          </p>
        </div>

        <Card variant="raised" pad="lg" sharp>
          {sent ? (
            <div style={{ padding: '2rem 0', textAlign: 'center' }}>
              <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--ds-blue)', letterSpacing: '.1em', fontSize: 13 }}>[ RECEIVED ]</div>
              <h3 style={{ fontSize: 'var(--fs-h3)', marginTop: 12, color: 'var(--ds-navy)' }}>Thank you — your request is in.</h3>
              <p style={{ color: 'var(--text-muted)', marginTop: 8, lineHeight: 1.6 }}>
                We've received your details and a member of the Rosroe team will be in touch within two
                working days to arrange your demo.
              </p>
              <div style={{ marginTop: 20, display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
                <Button variant="secondary" onClick={() => setSent(false)}>Submit another request</Button>
              </div>
            </div>
          ) : (
            <form onSubmit={handleSubmit}>
              <div className="form-grid">
                <Input name="name" required placeholder="Name" className="span-2" />
                <Input name="email" type="email" required placeholder="Email" className="span-2" />
                <Input name="company" required placeholder="Company" className="span-2" />
              </div>
              <div style={{ marginTop: '1.5rem' }}>
                <Button variant="primary" size="lg" block type="submit" disabled={submitting}>
                  {submitting ? 'Sending…' : 'Request a demo'}
                </Button>
              </div>
              {error ? (
                <p style={{ fontSize: 13, color: 'var(--ds-red)', marginTop: 14, textAlign: 'center', lineHeight: 1.5 }}>{error}</p>
              ) : null}
              <p style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 14, textAlign: 'center', lineHeight: 1.5 }}>
                Demandscape is a Rosroe technology. We'll only use your details to arrange your demo.
              </p>
            </form>
          )}
        </Card>
      </div>
    </main>
  );
}
window.DemoPage = DemoPage;