/* VE GAMERZ — Contact (validation + inline errors + success + mailto + honeypot). */
const { Button, Eyebrow, Badge, Input, Textarea } = window.VEGAMERZDesignSystem_63bcb5;
const CD = window.VG_DATA;
const CS = window.VG;

const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
function validate(f) {
  const e = {};
  if (!f.name.trim()) e.name = 'Tell us your gamer tag or name.';
  else if (f.name.trim().length < 2) e.name = 'That looks a little short.';
  if (!f.email.trim()) e.email = 'We need an email to reply.';
  else if (!EMAIL_RE.test(f.email.trim())) e.email = 'That email doesn\u2019t look right.';
  if (!f.message.trim()) e.message = 'Drop us a message first.';
  else if (f.message.trim().length < 10) e.message = 'A few more words, please (10+).';
  return e;
}

function FieldError({ id, msg }) {
  if (!msg) return null;
  return <p id={id} role="alert" style={{ margin: '8px 0 0', color: 'var(--c-yt)', fontFamily: 'var(--f-data)', fontSize: 12, letterSpacing: '.04em', display: 'flex', gap: 7, alignItems: 'center' }}><span aria-hidden="true">◢</span>{msg}</p>;
}

function ContactForm() {
  const [f, setF] = React.useState({ name: '', email: '', message: '', company: '' });
  const [errors, setErrors] = React.useState({});
  const [tried, setTried] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  const set = (k) => (e) => {
    const v = e.target.value; const nf = { ...f, [k]: v }; setF(nf);
    if (tried) setErrors(validate(nf));
  };
  const mailtoHref = () => {
    const subject = encodeURIComponent('VE GAMERZ — Message from ' + (f.name.trim() || 'the site'));
    const body = encodeURIComponent((f.message || '') + '\n\n— ' + (f.name || '') + (f.email ? ' (' + f.email + ')' : ''));
    return 'mailto:' + CD.SITE.email + '?subject=' + subject + '&body=' + body;
  };
  const onSubmit = (e) => {
    e.preventDefault(); setTried(true);
    const errs = validate(f); setErrors(errs);
    if (Object.keys(errs).length) { const first = document.getElementById('vg-' + Object.keys(errs)[0]); first && first.focus(); return; }
    if (f.company) return; /* honeypot tripped — silently drop */
    setSent(true);
  };

  if (sent) {
    return (
      <div role="status" style={{ background: 'var(--grad-panel)', border: '1px solid var(--c-line-strong)', clipPath: 'polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))', padding: 'clamp(28px,4vw,40px)', boxShadow: 'var(--glow-md)' }}>
        <div style={{ width: 56, height: 56, display: 'grid', placeItems: 'center', borderRadius: '50%', border: '1px solid var(--c-success)', color: 'var(--c-success)', fontSize: 26, boxShadow: '0 0 20px rgba(43,245,160,.4)', marginBottom: 20 }}>✓</div>
        <h3 style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 24, textTransform: 'uppercase', letterSpacing: '-.01em', margin: '0 0 10px' }}>Message Locked In</h3>
        <p style={{ color: 'var(--c-muted)', fontSize: 16, lineHeight: 1.6, margin: '0 0 8px', maxWidth: '48ch' }}>Thanks, {f.name.trim().split(' ')[0] || 'gamer'} — the squad got it and we\u2019ll get back to you soon.</p>
        <p style={{ color: 'var(--c-dim)', fontFamily: 'var(--f-data)', fontSize: 12, letterSpacing: '.08em', margin: '0 0 24px' }}>// Prefer email? Send it straight from your own mail app below.</p>
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <Button variant="primary" href={mailtoHref()}>Also Email Us Directly</Button>
          <Button variant="ghost" onClick={() => { setSent(false); setF({ name: '', email: '', message: '', company: '' }); setTried(false); setErrors({}); }}>Send Another</Button>
        </div>
      </div>
    );
  }

  return (
    <form onSubmit={onSubmit} noValidate style={{ display: 'grid', gap: 20 }}>
      <div>
        <Input id="vg-name" label="Your Name" placeholder="Enter your gamer tag" value={f.name} onChange={set('name')} style={{ maxWidth: 'none' }} />
        <FieldError id="err-name" msg={tried && errors.name} />
      </div>
      <div>
        <Input id="vg-email" label="Email" type="email" placeholder="you@example.com" value={f.email} onChange={set('email')} style={{ maxWidth: 'none' }} />
        <FieldError id="err-email" msg={tried && errors.email} />
      </div>
      <div>
        <Textarea id="vg-message" label="Message" rows={5} placeholder="Business inquiry, collab, or just say hi..." value={f.message} onChange={set('message')} style={{ maxWidth: 'none' }} />
        <FieldError id="err-message" msg={tried && errors.message} />
      </div>
      {/* honeypot — hidden from humans, catches bots */}
      <div aria-hidden="true" style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, overflow: 'hidden' }}>
        <label>Company<input tabIndex={-1} autoComplete="off" value={f.company} onChange={set('company')} /></label>
      </div>
      <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center' }}>
        <Button type="submit" variant="primary">Send Message</Button>
        <a href={mailtoHref()} style={{ fontFamily: 'var(--f-data)', fontSize: 12, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--c-muted)' }}>or email us directly →</a>
      </div>
    </form>
  );
}

function BusinessBlock() {
  const { Panel, SocialRow } = CS;
  return (
    <div style={{ display: 'grid', gap: 20 }}>
      <Panel>
        <div style={{ marginBottom: 12 }}><Badge variant="new">Business & Collabs</Badge></div>
        <h3 style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 20, textTransform: 'uppercase', letterSpacing: '-.01em', margin: '0 0 10px' }}>Work With VE GAMERZ</h3>
        <p style={{ color: 'var(--c-muted)', fontSize: 15, lineHeight: 1.65, margin: '0 0 16px', maxWidth: '44ch' }}>Sponsorships, brand deals, game features, or creator collabs — send the details and we\u2019ll get back with rates and availability.</p>
        <a href={'mailto:' + CD.SITE.email} style={{ fontFamily: 'var(--f-data)', fontSize: 14, color: 'var(--c-primary)', letterSpacing: '.04em', wordBreak: 'break-all' }}>{CD.SITE.email}</a>
      </Panel>
      <Panel>
        <h3 style={{ fontFamily: 'var(--f-data)', fontSize: 12, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--c-dim)', margin: '0 0 14px' }}>// Find the Squad</h3>
        <SocialRow size="lg" />
      </Panel>
      <Panel>
        <h3 style={{ fontFamily: 'var(--f-data)', fontSize: 12, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--c-dim)', margin: '0 0 12px' }}>// Response Time</h3>
        <p style={{ color: 'var(--c-muted)', fontSize: 15, lineHeight: 1.6, margin: 0 }}>We read everything. Business inquiries usually get a reply within a few days — community messages, whenever we surface from the grind.</p>
      </Panel>
    </div>
  );
}

function ContactScreen() {
  const { wrap, SectionHead } = CS;
  return (
    <main style={{ padding: '40px 0 20px' }}>
      <div style={{ ...wrap }}>
        <SectionHead eyebrow="Get In Touch" title="Collab or Just Say Hi" sub="Business inquiries, collabs, or a shout from the community — drop a line and the squad will get back to you." />
        <div className="vg-contact-grid" style={{ display: 'grid', gridTemplateColumns: '1.15fr .85fr', gap: 44, alignItems: 'start' }}>
          <ContactForm />
          <BusinessBlock />
        </div>
      </div>
    </main>
  );
}
window.ContactScreen = ContactScreen;