// DGContact.jsx — contact section: info left, dark form right

const { useState: useConSt } = React;

const ContactForm = () => {
  const [f, setF] = useConSt({ name: '', email: '', subject: '', message: '' });
  const [done, setDone] = useConSt(false);
  const set = (k) => (e) => setF((p) => ({ ...p, [k]: e.target.value }));
  const submit = () => {
    if (!f.name || !f.email || !f.message) return;
    const subject = f.subject ? `Contact Form: ${f.subject}` : 'Contact Form Submission';
    const body = [
      `Name: ${f.name}`,
      `Email: ${f.email}`,
      `Subject: ${f.subject || 'Not specified'}`,
      ``,
      `Message:`,
      f.message,
    ].join('\n');
    window.open(`mailto:dashinggentbitters@gmail.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`);
    setDone(true);
  };

  return done ?
  <p style={conSt.success}>✦&nbsp; Message received — we'll get back to you soon.</p> :

  <div>
      <div style={conSt.fg}><label style={conSt.lbl}>Your Name</label>
        <input style={conSt.input} value={f.name} onChange={set('name')} placeholder="Jane Smith" /></div>
      <div style={conSt.fg}><label style={conSt.lbl}>Email Address</label>
        <input type="email" style={conSt.input} value={f.email} onChange={set('email')} placeholder="jane@example.com" /></div>
      <div style={conSt.fg}>
        <label style={conSt.lbl}>What can we help with?</label>
        <select style={conSt.input} value={f.subject} onChange={set('subject')}>
          <option value="">Select a topic</option>
          <option>Cocktail Class Inquiry</option>
          <option>Custom Flavor Request</option>
          <option>Press or Media</option>
          <option>Product Question</option>
          <option>Something Else</option>
          <option>Wholesale / Carrying Our Bitters</option>
        </select>
      </div>
      <div style={conSt.fg}><label style={conSt.lbl}>Message</label>
        <textarea style={{ ...conSt.input, minHeight: 110, resize: 'vertical' }}
      value={f.message} onChange={set('message')} placeholder="What's on your mind?" /></div>
      <button style={conSt.submitBtn} onClick={submit}
    onMouseEnter={(e) => e.currentTarget.style.background = '#D4B070'}
    onMouseLeave={(e) => e.currentTarget.style.background = '#B8904A'}>
        Send Message
      </button>
    </div>;

};

const DGContact = () =>
<section id="contact" style={conSt.root}>
    <div style={conSt.inner} className="dg-contact-grid">

      <div style={conSt.infoCol}>
        <p style={conSt.label}>Get in Touch</p>
        <h2 style={conSt.heading}>We'd love to hear<br />from you.</h2>
        <div style={conSt.orn}><div style={conSt.ornLine} /><span style={conSt.ornStar}>✦</span><div style={conSt.ornLine} /></div>
        <p style={conSt.body}>
          Whether you're a home bartender with a question, a restaurant owner interested in carrying our bitters, or someone looking to book a class — reach out. We respond to every message.
        </p>

        <ul style={conSt.detailList}>
          <li style={conSt.detailItem}>
            <span style={conSt.detailIcon}>
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#B8904A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" /><polyline points="22,6 12,13 2,6" />
              </svg>
            </span>
            <a href="mailto:dashinggentbitters@gmail.com" style={conSt.detailLink}>
              dashinggentbitters@gmail.com
            </a>
          </li>
          <li style={conSt.detailItem}>
            <span style={conSt.detailIcon}>
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#B8904A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" /><circle cx="12" cy="10" r="3" />
              </svg>
            </span>
            <span style={conSt.detailText}>Knoxville, Tennessee</span>
          </li>
        </ul>


      </div>

      <div style={conSt.formPanel}>
        <h3 style={conSt.formTitle}>Send a Message</h3>
        <ContactForm />
      </div>

    </div>
  </section>;

const conSt = {
  root: { background: '#F2ECDC', borderTop: '1px solid rgba(184,144,74,0.15)' },
  inner: {
    maxWidth: 1100, margin: '0 auto', padding: '96px 48px',
    display: 'grid', gridTemplateColumns: '1fr 440px', gap: '72px', alignItems: 'start'
  },
  infoCol: {},
  label: {
    fontFamily: 'Arial, sans-serif', fontSize: '0.63rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.2em', color: '#B8904A', margin: '0 0 14px'
  },
  heading: {
    fontFamily: 'Georgia, serif', fontSize: 'clamp(1.8rem, 3vw, 2.6rem)', fontWeight: 700,
    lineHeight: 1.18, color: '#1A1A1A', margin: '0 0 24px'
  },
  orn: { display: 'flex', alignItems: 'center', gap: 12, margin: '0 0 28px' },
  ornLine: { height: 1, width: 40, background: 'rgba(184,144,74,0.5)' },
  ornStar: { color: '#B8904A', fontSize: '0.85rem' },
  body: {
    fontFamily: 'Georgia, serif', fontSize: '0.93rem',
    color: '#3A3A3A', lineHeight: 1.7, margin: '0 0 28px', maxWidth: '52ch'
  },
  detailList: { listStyle: 'none', padding: 0, margin: '0 0 36px' },
  detailItem: {
    display: 'flex', alignItems: 'center', gap: 14,
    padding: '12px 0', borderBottom: '1px solid rgba(184,144,74,0.2)',
    fontFamily: 'Georgia, serif', fontSize: '0.9rem', color: '#3A3A3A'
  },
  detailIcon: { display: 'flex', alignItems: 'center', flexShrink: 0 },
  detailLink: { color: '#3A3A3A', textDecoration: 'none' },
  detailText: {},
  pullquote: { borderLeft: '2px solid rgba(184,144,74,0.5)', paddingLeft: 20 },
  pqRule: { width: 32, height: 1, background: '#B8904A', marginBottom: 14, opacity: 0.6 },
  pqText: {
    fontFamily: 'Georgia, serif', fontStyle: 'italic', fontSize: '1.05rem',
    color: '#1A1A1A', lineHeight: 1.6, margin: '0 0 10px'
  },
  pqAttr: {
    fontFamily: 'Arial, sans-serif', fontSize: '0.6rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.14em', color: '#B8904A', margin: 0
  },
  formPanel: {
    background: '#1A1A1A', padding: '36px',
    border: '1px solid rgba(184,144,74,0.22)'
  },
  formTitle: {
    fontFamily: 'Georgia, serif', fontSize: '1.35rem', fontWeight: 700,
    color: '#F2ECDC', margin: '0 0 24px'
  },
  fg: { marginBottom: 14 },
  lbl: {
    display: 'block', fontFamily: 'Arial, sans-serif', fontSize: '0.57rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.16em', color: '#B8904A', marginBottom: 6
  },
  input: {
    width: '100%', background: 'rgba(242,236,220,0.05)',
    border: '1px solid rgba(184,144,74,0.28)', color: '#F2ECDC',
    padding: '10px 12px', fontFamily: 'Georgia, serif', fontSize: '0.87rem',
    outline: 'none', boxSizing: 'border-box'
  },
  submitBtn: {
    width: '100%', background: '#B8904A', color: '#1A1A1A', border: 'none',
    padding: '13px', marginTop: 4,
    fontFamily: 'Arial, sans-serif', fontSize: '0.65rem', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.18em',
    cursor: 'pointer', transition: 'background 0.2s'
  },
  success: {
    fontFamily: 'Georgia, serif', fontStyle: 'italic', fontSize: '1rem',
    color: '#D4B070', textAlign: 'center', padding: '24px 0'
  }
};

Object.assign(window, { DGContact });