/* 6ix Mela — "Work with us" hub: smart contact form with reason selector.
   All submissions are wired to GoHighLevel later (see handleSubmit note). */
const REASONS = [
  { id: 'vip', ic: 'crown', t: 'VIP & Box Suite', d: 'Box suites, premium VIP floor, group bookings.' },
  { id: 'sponsor', ic: 'briefcase', t: 'Sponsorship', d: 'Brand activations, booths, stage & on-site presence.' },
  { id: 'partner', ic: 'handshake', t: 'Partners & Creators', d: 'Content creators, promoters, recruiters, media, vendors.' },
  { id: 'other', ic: 'sparkles', t: 'Something Else', d: 'Press, general enquiries, working with us any other way.' },
];

const EXTRA_FIELDS = {
  vip: [
    { name: 'party', label: 'Party size', placeholder: 'e.g. 6–10 guests', type: 'text' },
    { name: 'arrival', label: 'Arrival time', type: 'select', options: ['No preference', 'At doors (6 PM)', 'Early evening', 'Late / headliner sets'] },
  ],
  sponsor: [
    { name: 'company', label: 'Company / brand', placeholder: 'Brand name', type: 'text' },
    { name: 'interest', label: 'Interest', type: 'select', options: ['Title sponsor', 'Stage sponsor', 'On-site activation / booth', 'Food & beverage', 'Media / digital', 'Not sure yet'] },
  ],
  partner: [
    { name: 'role', label: "You're a…", type: 'select', options: ['Content creator', 'Promoter', 'Recruiter', 'Media / press', 'Vendor', 'Other'] },
    { name: 'handle', label: 'Link / handle', placeholder: '@yourhandle or URL', type: 'text' },
  ],
  other: [],
};

const GHL_HOOKS = {
  vip:     'https://services.leadconnectorhq.com/hooks/w3wfodCcYtM88V7A3DGR/webhook-trigger/fd03bbe6-d4c5-4ba6-8f28-06d1951cc98a',
  sponsor: 'https://services.leadconnectorhq.com/hooks/w3wfodCcYtM88V7A3DGR/webhook-trigger/004eea8a-09f1-4993-b43a-0f8bc9cf786b',
  partner: 'https://services.leadconnectorhq.com/hooks/w3wfodCcYtM88V7A3DGR/webhook-trigger/eb628734-71f9-4799-80a7-010bb4e4049f',
  other:   'https://services.leadconnectorhq.com/hooks/3EB3P4lGiKfN4zAxsSbL/webhook-trigger/f4d471a4-9c7b-4ce2-9a81-21c4bd2962fb',
};

function Connect({ reason, onReason }) {
  const [sent, setSent] = React.useState(false);
  const cur = REASONS.find((r) => r.id === reason) || REASONS[0];
  const handleSubmit = (e) => {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(e.target));
    data.enquiry_type = reason;
    data.hook = (['vip','sponsor','partner','other'].includes(reason)) ? reason : 'subscribers';
    fetch('/wp-json/6ixmela/v1/ghl', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    }).catch(() => {});
    setSent(true);
  };
  return (
    <section className="section connect grain" id="connect">
      <div className="maxw connect-grid">
        <div>
          <div className="eyebrow">Work with the 6ix</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(2.2rem,4.5vw,3.6rem)', textTransform: 'uppercase', lineHeight: .95, margin: '14px 0 0' }}>Let's Build<br />The Mela</h2>
          <p className="sec-sub">Tables, brands, creators, vendors, media — if you want in, start here. Tell us what you've got in mind and the right person on our team picks it up.</p>
          <div className="reason-list">
            {REASONS.map((r) => (
              <button key={r.id} className={'reason' + (reason === r.id ? ' on' : '')} onClick={() => { onReason(r.id); setSent(false); }}>
                <span className="r-ic"><Icon name={r.ic} size={22} /></span>
                <span>
                  <span className="r-t" style={{ display: 'block' }}>{r.t}</span>
                  <span className="r-d" style={{ display: 'block' }}>{r.d}</span>
                </span>
                <span className="r-ar"><Icon name="chevron-right" size={20} /></span>
              </button>
            ))}
          </div>
        </div>

        <div className="form-card">
          {sent ? (
            <div className="form-success">
              <span className="ok-ic"><Icon name="check" size={32} /></span>
              <h3>You're In The Inbox</h3>
              <p>Thanks for reaching out about <strong style={{ color: 'var(--fg-1)' }}>{cur.t.toLowerCase()}</strong>. The right person on our team will hit you back shortly. Talk soon — the 6ix is calling.</p>
              <button className="btn btn-ghost" style={{ marginTop: 22 }} onClick={() => setSent(false)}>Send another <Icon name="arrow-right" size={16} /></button>
            </div>
          ) : (
            <form onSubmit={handleSubmit}>
              <div className="eyebrow eyebrow-cyan" style={{ marginBottom: 8 }}>{cur.t}</div>
              <div className="fc-head">{cur.t}</div>
              <p className="fc-sub">{cur.d}</p>
              <div className="field-grid">
                <div className="field">
                  <label>Name</label>
                  <input type="text" name="name" placeholder="Your name" required />
                </div>
                <div className="field">
                  <label>Email</label>
                  <input type="email" name="email" placeholder="you@email.ca" required />
                </div>
                {EXTRA_FIELDS[reason].map((f) => (
                  <div className="field" key={f.name}>
                    <label>{f.label}</label>
                    {f.type === 'select' ? (
                      <select name={f.name}>{f.options.map((o) => <option key={o} value={o}>{o}</option>)}</select>
                    ) : (
                      <input type={f.type} name={f.name} placeholder={f.placeholder} />
                    )}
                  </div>
                ))}
                <div className="field full">
                  <label>Message</label>
                  <textarea name="message" placeholder="Tell us what you've got in mind…"></textarea>
                </div>
              </div>
              <div className="submit-row">
                <button className="btn btn-primary btn-lg" type="submit">Send It <Icon name="arrow-up-right" size={18} /></button>
                <span className="ghl-note">We reply within 2 business days · no spam, ever.</span>
              </div>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}
window.Connect = Connect;