/* global React, Icon */
const { useState: useStateCt } = React;

function PageContact({ go, toast }) {
  const [form, setForm] = useStateCt({ name: '', email: '', subject: '', message: '' });
  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) { toast('Please fill in name, email, and message.'); return; }
    const subject = form.subject || `Message from ${form.name}`;
    const body = `Name: ${form.name}\nEmail: ${form.email}\n\n${form.message}`;
    window.location.href = `mailto:hi@8tee.golf?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    toast(`Thanks, ${form.name.split(' ')[0]}. Opening your email to send.`);
    setForm({ name: '', email: '', subject: '', message: '' });
  };

  return (
    <div className="page-enter bg-off-white" style={{ minHeight: '100vh', paddingTop: 'calc(var(--nav-h) + 80px)', paddingBottom: 120 }}>
      <div className="container" style={{ maxWidth: 720, textAlign: 'center' }}>
        <div className="eyebrow" style={{ color: 'var(--camel)', marginBottom: 20 }}>Contact</div>
        <h1 className="h-hero" style={{ marginBottom: 16 }}>
          Let's <em className="serif-italic" style={{ color: 'var(--camel)' }}>talk golf.</em>
        </h1>
        <p className="lead" style={{ margin: '0 auto 64px', maxWidth: '46ch' }}>
          Inquiries, partnerships, press, and general questions.
        </p>

        <form onSubmit={submit} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, textAlign: 'left' }} className="ct-form">
          <div className="field"><label>Name</label><input value={form.name} onChange={upd('name')} placeholder="Your name" /></div>
          <div className="field"><label>Email</label><input type="email" value={form.email} onChange={upd('email')} placeholder="you@email.com" /></div>
          <div className="field" style={{ gridColumn: '1 / -1' }}><label>Subject</label><input value={form.subject} onChange={upd('subject')} placeholder="What's this about?" /></div>
          <div className="field" style={{ gridColumn: '1 / -1' }}><label>Message</label><textarea value={form.message} onChange={upd('message')} /></div>
          <div style={{ gridColumn: '1 / -1', textAlign: 'center', marginTop: 16 }}>
            <button className="btn btn-camel" type="submit">Send Message <Icon.arrow /></button>
          </div>
        </form>

        <div style={{ marginTop: 96, display: 'flex', justifyContent: 'center', gap: 28 }}>
          <a href="https://www.instagram.com/8teegolf" target="_blank" rel="noopener" style={{ color: 'var(--charcoal)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 8 }}><Icon.instagram /> <span className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>Instagram</span></a>
          <a href="https://www.youtube.com/@8teegolf/shorts" target="_blank" rel="noopener" style={{ color: 'var(--charcoal)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 8 }}><Icon.youtube /> <span className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>YouTube</span></a>
        </div>

      </div>
      <style>{`
        @media (max-width: 640px) {
          .ct-form { grid-template-columns: 1fr !important; }
          .ct-meta { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

window.PageContact = PageContact;