/* ContactPage — inquiry form plus direct contact details. */
function ContactPage() {
  const { Input, Select, Checkbox, Button, Eyebrow } = window.DomumDesignSystem_84ba75;
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState('');

  const onSubmit = (e) => {
    e.preventDefault();
    const form = e.currentTarget;
    setSending(true); setError('');
    window.submitNetlifyForm('contact', form)
      .then(() => { setSent(true); form.reset(); })
      .catch(() => setError('Something went wrong. Please email info@springstreetbuild.com or call 501.733.5253.'))
      .finally(() => setSending(false));
  };

  const details = [
    ['Email', 'info@springstreetbuild.com'],
    ['Phone', '501.733.5253'],
  ];

  const socials = [
    ['Instagram', '@springstreetbuild', 'https://instagram.com/springstreetbuild'],
    ['Facebook', 'Spring Street Design & Build', 'https://facebook.com/springstreetbuild'],
  ];

  if (sent) {
    return (
      <section style={{ padding: 'var(--space-11) var(--gutter)', maxWidth: '620px', margin: '0 auto', textAlign: 'center' }}>
        <Eyebrow color="muted">Thank You</Eyebrow>
        <h1 style={{ fontSize: 'clamp(2.2rem, 4.2vw, 3.2rem)', margin: '18px 0 20px' }}>We'll be in touch.</h1>
        <p style={{ fontSize: 'var(--fs-lead)', color: 'var(--text-secondary)', lineHeight: 1.7 }}>
          Thank you for reaching out. One of us will respond within two business days to arrange a first
          conversation about your home.
        </p>
        <div style={{ marginTop: '36px' }}>
          <Button variant="secondary" onClick={() => setSent(false)}>Send another</Button>
        </div>
      </section>
    );
  }

  const { PageHeader, SectionFrame } = window;

  return (
    <div>
      <section style={{
        background: 'var(--site-ground)',
        padding: 'var(--space-8) var(--gutter) var(--space-9)',
      }}>
      <div style={{
        maxWidth: 'var(--page-max)', margin: '0 auto',
        background: 'var(--oxblood)', color: 'var(--ivory)',
        '--text-primary': 'var(--ivory)', '--text-secondary': 'var(--cream-88)', '--text-muted': 'var(--cream-70)',
        '--border-strong': 'var(--cream-22)', '--line-soft': 'var(--cream-22)', '--oxblood': '#4A2426',
        position: 'relative', padding: 'var(--space-7)',
        display: 'grid', gridTemplateColumns: '1fr 1.15fr', gap: 'var(--space-8)', alignItems: 'start',
      }}>
      <SectionFrame />
        <div style={{ position: 'relative' }}>
          <p style={{ position: 'relative', fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-eyebrow)', fontWeight: 'var(--w-semi)', letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--text-muted)', margin: 0 }}>Tell Us About the Space</p>
          <h2 style={{ position: 'relative', fontSize: 'clamp(1.7rem, 2.8vw, 2.3rem)', margin: '16px 0 20px', lineHeight: 1.15 }}>
            Share a little, and we'll take it from there.
          </h2>
          <p style={{ position: 'relative', fontSize: 'var(--fs-small)', color: 'var(--text-secondary)', lineHeight: 1.75, maxWidth: '44ch' }}>
            Tell us a little about the house and what you hope to create. We'll follow up to arrange a first
            conversation and talk through whether we're the right fit for the project.
          </p>

          <div style={{ position: 'relative', marginTop: 'var(--space-7)', display: 'flex', flexDirection: 'column', gap: '16px' }}>
            {details.map(([k, v]) => (
              <div key={k} style={{ borderTop: '1px solid var(--line-soft)', paddingTop: '14px' }}>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: '11px', fontWeight: 600, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: '5px' }}>{k}</div>
                <div style={{ fontSize: 'var(--fs-small)', color: 'var(--text-primary)' }}>{v}</div>
              </div>
            ))}
          </div>

          <div style={{ position: 'relative', marginTop: 'var(--space-6)' }}>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: '11px', fontWeight: 600, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: '14px' }}>Socials</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
              {socials.map(([k, v, href]) => (
                <a key={k} href={href} target="_blank" rel="noopener noreferrer"
                   style={{ display: 'flex', alignItems: 'baseline', gap: '12px', paddingTop: '12px', border: 'none', borderTopWidth: '1px', borderTopStyle: 'solid', borderTopColor: 'var(--line-soft)' }}>
                  <span style={{ fontSize: 'var(--fs-small)', color: 'var(--ivory)', minWidth: '86px' }}>{k}</span>
                  <span style={{ fontSize: 'var(--fs-small)', color: 'var(--text-muted)' }}>{v}</span>
                </a>
              ))}
            </div>
          </div>

          <p style={{ position: 'relative', fontSize: 'var(--fs-caption)', color: 'var(--text-muted)', marginTop: 'var(--space-6)', lineHeight: 1.7, maxWidth: '40ch' }}>
            We typically respond within two business days. Design and construction schedules are planned
            several weeks ahead, so earlier conversations give us more room to help.
          </p>
        </div>

        <form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field"
              onSubmit={onSubmit}
              style={{ display: 'flex', flexDirection: 'column', gap: '28px' }}>
          <input type="hidden" name="form-name" value="contact" />
          <p hidden><input name="bot-field" tabIndex={-1} autoComplete="off" /></p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '28px' }}>
            <Input label="Full name" name="name" placeholder="Jane Ellison" required />
            <Input label="Email" name="email" type="email" placeholder="jane@email.com" required />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '28px' }}>
            <Input label="Phone" name="phone" type="tel" placeholder="501.555.0100" />
            <Input label="Where is the home?" name="location" placeholder="Hillcrest, Little Rock" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '28px' }}>
            <Select label="What are you considering?" name="considering" defaultValue="">
              <option value="" disabled>Select…</option>
              <option>Whole-home renovation</option>
              <option>Kitchen or bath</option>
              <option>Addition</option>
              <option>Custom construction</option>
              <option>Design only</option>
              <option>Not sure yet</option>
            </Select>
            <Select label="Timing" name="timing" defaultValue="">
              <option value="" disabled>Select…</option>
              <option>Ready to begin</option>
              <option>Within 3 months</option>
              <option>3–6 months</option>
              <option>Still planning</option>
            </Select>
          </div>
          <Select label="Investment range" name="budget" defaultValue="" hint="Sharing a range early helps us recommend realistic solutions.">
            <option value="" disabled>Select…</option>
            <option>Under $75,000</option>
            <option>$75,000 – $150,000</option>
            <option>$150,000 – $350,000</option>
            <option>$350,000+</option>
            <option>Would like guidance</option>
          </Select>
          <Input label="Tell us about the space" name="message" multiline rows={5}
                 placeholder="Its age, its character, what is working, and what you hope to create…" />
          <Checkbox label="Send me occasional notes on materials, process, and lessons learned." name="newsletter" value="yes" defaultChecked />
          {error && (
            <p role="alert" style={{ margin: 0, fontSize: 'var(--fs-small)', color: 'var(--oxblood)' }}>{error}</p>
          )}
          <div><Button variant="primary" size="lg" type="submit" disabled={sending}>{sending ? 'Sending…' : 'Start a Conversation'}</Button></div>
        </form>
      </div>
      </section>
    </div>
  );
}
window.ContactPage = ContactPage;