// Contact + RFP form (interactive, multi-step feel)
const Contact = () => {
  const [form, setForm] = React.useState({
    projectType: '',
    budget: '',
    location: '',
    timeline: '',
    name: '',
    org: '',
    email: '',
    notes: '',
  });
  const [submitted, setSubmitted] = React.useState(false);

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const projectTypes = ['Ground-up hotel / resort', 'Renovation / PIP', 'F&B / Amenity buildout', 'Master-plan or feasibility'];
  const budgets = ['$500K – $2M', '$2M – $10M', '$10M – $50M', '$50M+'];
  const timelines = ['Breaking ground < 6 mo', '6 – 12 months', '12 – 24 months', 'Early stage / feasibility'];

  const onSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <section id="contact" style={{ background: 'var(--navy-900)', color: 'var(--bone-100)', padding: 'var(--sp-10) 0' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--page-pad-x)' }}>
        <div className="reveal" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, alignItems: 'end', marginBottom: 96, paddingBottom: 32, borderBottom: '1px solid rgba(242,237,228,0.18)' }}>
          <div className="eyebrow eyebrow--light">── (09) · Start a Project</div>
          <h2 style={{ fontSize: 'var(--fs-4xl)', lineHeight: 1, letterSpacing: '-0.025em' }}>
            Tell us about<br /><em style={{ fontStyle: 'italic', color: 'var(--brass-400)' }}>the work.</em>
          </h2>
        </div>

        <div className="contact-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80, alignItems: 'start' }}>
          {/* Left — offices */}
          <div className="reveal">
            <p style={{ fontSize: 'var(--fs-lg)', lineHeight: 1.55, opacity: 0.85, marginBottom: 48, maxWidth: '34ch' }}>
              We respond to every qualified inquiry within two business days. Project minimum is $500K construction value.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
              {[
                { city: 'Savannah, GA', role: 'Headquarters', addr: '402 Factors Walk · Savannah, GA 31401', tel: '+1 912.555.0118', email: 'savannah@palmettobuild.co' },
                { city: 'Naples, FL', role: 'Regional Office', addr: '3280 Gulf Shore Blvd · Naples, FL 34103', tel: '+1 239.555.0146', email: 'naples@palmettobuild.co' },
                { city: 'Hilton Head, SC', role: 'Regional Office', addr: '18 Executive Park Rd · Hilton Head, SC 29928', tel: '+1 843.555.0172', email: 'hiltonhead@palmettobuild.co' },
              ].map(o => (
                <div key={o.city} style={{ paddingTop: 20, borderTop: '1px solid rgba(242,237,228,0.15)' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
                    <div style={{ fontSize: 'var(--fs-lg)' }}>{o.city}</div>
                    <div className="mono" style={{ fontSize: 10, color: 'var(--brass-400)' }}>{o.role}</div>
                  </div>
                  <div style={{ fontSize: 13, opacity: 0.7, lineHeight: 1.6 }}>
                    {o.addr}<br />
                    {o.tel}<br />
                    <a href={`mailto:${o.email}`} style={{ borderBottom: '1px solid rgba(242,237,228,0.3)' }}>{o.email}</a>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Right — form */}
          <div className="reveal" style={{ '--reveal-delay': '120ms' }}>
            {submitted ? (
              <div style={{ padding: 80, background: 'var(--navy-700)', borderLeft: '3px solid var(--brass-500)', textAlign: 'center' }}>
                <div style={{ fontSize: 48, fontFamily: 'var(--font-display)', color: 'var(--brass-400)', marginBottom: 16 }}>✓</div>
                <h3 style={{ fontSize: 'var(--fs-2xl)', marginBottom: 16 }}>Inquiry received.</h3>
                <p style={{ fontSize: 'var(--fs-base)', opacity: 0.8, maxWidth: '40ch', margin: '0 auto' }}>
                  A principal will be in touch within two business days. We will send you our project intake checklist in the same email.
                </p>
              </div>
            ) : (
              <form onSubmit={onSubmit}>
                <FormGroup label="Project type" num="01">
                  <div className="contact-chips-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
                    {projectTypes.map(t => (
                      <ChipBtn key={t} active={form.projectType === t} onClick={() => update('projectType', t)}>{t}</ChipBtn>
                    ))}
                  </div>
                </FormGroup>

                <FormGroup label="Construction budget" num="02">
                  <div className="contact-chips-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
                    {budgets.map(b => (
                      <ChipBtn key={b} active={form.budget === b} onClick={() => update('budget', b)}>{b}</ChipBtn>
                    ))}
                  </div>
                </FormGroup>

                <FormGroup label="Timeline" num="03">
                  <div className="contact-chips-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
                    {timelines.map(t => (
                      <ChipBtn key={t} active={form.timeline === t} onClick={() => update('timeline', t)}>{t}</ChipBtn>
                    ))}
                  </div>
                </FormGroup>

                <FormGroup label="Project location" num="04">
                  <TextInput placeholder="City, State — e.g. Hilton Head, SC" value={form.location} onChange={v => update('location', v)} />
                </FormGroup>

                <div className="contact-form-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
                  <FormGroup label="Your name" num="05">
                    <TextInput value={form.name} onChange={v => update('name', v)} />
                  </FormGroup>
                  <FormGroup label="Organization" num="06">
                    <TextInput value={form.org} onChange={v => update('org', v)} />
                  </FormGroup>
                </div>

                <FormGroup label="Email" num="07">
                  <TextInput type="email" value={form.email} onChange={v => update('email', v)} />
                </FormGroup>

                <FormGroup label="Brief" num="08">
                  <textarea
                    value={form.notes}
                    onChange={e => update('notes', e.target.value)}
                    rows={4}
                    placeholder="Anything relevant about the project, ownership structure, or brand relationship..."
                    style={{
                      width: '100%',
                      background: 'transparent',
                      border: 'none',
                      borderBottom: '1px solid rgba(242,237,228,0.3)',
                      color: 'var(--bone-100)',
                      padding: '12px 0',
                      fontSize: 'var(--fs-base)',
                      fontFamily: 'inherit',
                      outline: 'none',
                      resize: 'vertical',
                    }}
                  />
                </FormGroup>

                <button
                  type="submit"
                  style={{
                    marginTop: 48,
                    padding: '20px 36px',
                    background: 'var(--brass-500)',
                    color: 'var(--navy-900)',
                    fontSize: 13,
                    letterSpacing: '0.14em',
                    textTransform: 'uppercase',
                    fontFamily: 'var(--font-body)',
                    transition: 'all 0.3s',
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: 12,
                  }}
                  onMouseEnter={e => { e.currentTarget.style.background = 'var(--brass-400)'; }}
                  onMouseLeave={e => { e.currentTarget.style.background = 'var(--brass-500)'; }}
                >
                  Submit inquiry <span style={{ fontSize: 16 }}>→</span>
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

const FormGroup = ({ label, num, children }) => (
  <div style={{ marginBottom: 32 }}>
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 16 }}>
      <span className="mono" style={{ color: 'var(--brass-400)', fontSize: 10 }}>{num}</span>
      <label className="mono" style={{ fontSize: 10, opacity: 0.7 }}>{label}</label>
    </div>
    {children}
  </div>
);

const ChipBtn = ({ active, onClick, children }) => (
  <button
    type="button"
    onClick={onClick}
    style={{
      padding: '14px 16px',
      border: active ? '1px solid var(--brass-500)' : '1px solid rgba(242,237,228,0.2)',
      background: active ? 'rgba(184,151,90,0.15)' : 'transparent',
      color: active ? 'var(--brass-400)' : 'var(--bone-100)',
      fontSize: 13,
      textAlign: 'left',
      transition: 'all 0.3s',
    }}
  >
    {children}
  </button>
);

const TextInput = ({ value, onChange, type = 'text', placeholder = '' }) => (
  <input
    type={type}
    value={value}
    onChange={e => onChange(e.target.value)}
    placeholder={placeholder}
    style={{
      width: '100%',
      background: 'transparent',
      border: 'none',
      borderBottom: '1px solid rgba(242,237,228,0.3)',
      color: 'var(--bone-100)',
      padding: '12px 0',
      fontSize: 'var(--fs-base)',
      fontFamily: 'inherit',
      outline: 'none',
    }}
  />
);

window.Contact = Contact;