// screens-contact.jsx — public Contact Us page.
const { useState: useStateCT } = React;

function ContactScreen({ go }) {
  const [name, setName]       = useStateCT('');
  const [email, setEmail]     = useStateCT('');
  const [topic, setTopic]     = useStateCT('Creator account');
  const [subject, setSubject] = useStateCT('');
  const [message, setMessage] = useStateCT('');
  const [error, setError]     = useStateCT(null);
  const [sent, setSent]       = useStateCT(false);
  const [busy, setBusy]       = useStateCT(false);
  // The honeypot. Hidden from people, filled in by naive bots; a submission
  // carrying it is answered normally and thrown away server-side.
  const [website, setWebsite] = useStateCT('');

  const TOPICS = ['Creator account', 'Brand partnership', 'Product support', 'Press / media', 'Other'];

  const submit = async () => {
    if (busy) return;
    if (!name.trim() || !email.trim() || !subject.trim() || !message.trim()) {
      setError('Please fill in your name, email, subject and message.');
      return;
    }
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {
      setError('That email doesn’t look right.');
      return;
    }
    setError(null);
    setBusy(true);
    try {
      const resp = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: name.trim(), email: email.trim(), category: topic,
          subject: subject.trim(), message: message.trim(), website,
        }),
      });
      const data = await resp.json().catch(() => ({}));
      setBusy(false);
      if (!resp.ok) {
        // The endpoint says what went wrong in words; fall back to something
        // useful if it couldn't answer at all.
        setError(data.error || 'We couldn’t send that just now. Please email hi@modaboard.com directly.');
        return;
      }
      setSent(true);
    } catch (e) {
      // No backend at all (a static preview) or the network went away.
      setBusy(false);
      setError('We couldn’t reach the server. Please email hi@modaboard.com directly.');
    }
  };

  const cards = [
    { tag: 'Creator support',     body: 'For help with your Studio account, outfits, products, or earnings.',            mail: 'hi@modaboard.com' },
    { tag: 'Brand partnerships',  body: 'For brands who want to work with creators or get featured in outfits.',         mail: 'hi@modaboard.com' },
    { tag: 'General enquiries',   body: 'For anything else related to modaBoard.',                                       mail: 'hi@modaboard.com' },
  ];

  return (
    <div>
      {/* Hero */}
      <section style={{ padding: '72px 40px 32px' }}>
        <div style={{ maxWidth: 1100, marginInline: 'auto' }}>
          <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8a8580' }}>Get in touch</div>
          <h1 style={{ margin: '12px 0 0', fontSize: 'clamp(44px, 6vw, 80px)', lineHeight: 0.98, letterSpacing: '-0.035em', fontWeight: 400 }}>
            Contact <em style={{ fontFamily: "'Instrument Serif',serif", fontStyle: 'italic', fontWeight: 400 }}>modaBoard</em>
          </h1>
          <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.55, maxWidth: '54ch', color: '#3a3a36' }}>
            Questions, partnerships, creator support, or brand enquiries — reach out and we’ll get back to you.
          </p>
        </div>
      </section>

      {/* Form + contact cards */}
      <section style={{ padding: '24px 40px 40px' }}>
        <div style={{ maxWidth: 1100, marginInline: 'auto', display: 'grid', gridTemplateColumns: '1.3fr 0.85fr', gap: 56, alignItems: 'start' }} className="dc-contact-grid">
          {/* Form card */}
          <div style={{
            background: '#FAFAF7', border: '1px solid rgba(20,20,18,0.08)',
            borderRadius: 18, padding: 36,
            boxShadow: '0 20px 60px -32px rgba(20,20,18,0.16)',
          }}>
            {sent ? (
              <div style={{ padding: '40px 8px', textAlign: 'center' }}>
                <div style={{
                  width: 56, height: 56, borderRadius: '50%', marginInline: 'auto',
                  background: '#F2EFE7', display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1a6b3a" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
                </div>
                <h2 style={{ margin: '22px 0 0', fontSize: 28, fontWeight: 400, letterSpacing: '-0.02em', fontFamily: "'Instrument Serif',serif", fontStyle: 'italic' }}>Message received</h2>
                <p style={{ marginTop: 12, fontSize: 15, color: '#3a3a36', lineHeight: 1.6, maxWidth: '38ch', marginInline: 'auto' }}>
                  Thanks — we’ve got your message and will get back to you soon.
                </p>
                <div style={{ marginTop: 26, display: 'flex', gap: 10, justifyContent: 'center' }}>
                  <button onClick={() => { setSent(false); setName(''); setEmail(''); setSubject(''); setMessage(''); setTopic('Creator account'); }} style={btnGhost}>Send another</button>
                  <button onClick={() => go({ name: 'home' })} style={btnPrimary}>Back to home</button>
                </div>
              </div>
            ) : (
              <>
                <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#8a8580', marginBottom: 22 }}>Send us a message</div>
                {error && (
                  <div style={{ padding: '11px 14px', borderRadius: 10, marginBottom: 18, background: 'rgba(168,51,26,0.07)', border: '1px solid rgba(168,51,26,0.25)', fontSize: 12.5, color: '#a8331a' }}>{error}</div>
                )}
                <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                    <Field label="Name" value={name} onChange={setName} placeholder="Your name"/>
                    <Field label="Email" value={email} onChange={setEmail} type="email" placeholder="you@email.com"/>
                  </div>
                  <div>
                    <label style={contactLabel}>I’m contacting about</label>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7 }}>
                      {TOPICS.map(tp => {
                        const on = topic === tp;
                        return (
                          <button key={tp} onClick={() => setTopic(tp)} style={{
                            appearance: 'none', cursor: 'pointer', padding: '8px 14px', borderRadius: 999,
                            fontSize: 12, fontFamily: 'inherit',
                            border: '1px solid', borderColor: on ? '#1a1a18' : 'rgba(20,20,18,0.14)',
                            background: on ? '#1a1a18' : 'transparent', color: on ? '#FAFAF7' : '#1a1a18',
                            transition: 'background .15s, border-color .15s',
                          }}>{tp}</button>
                        );
                      })}
                    </div>
                  </div>
                  <Field label="Subject" value={subject} onChange={setSubject} placeholder="What’s this about?"/>
                  <div>
                    <label style={contactLabel}>Message</label>
                    <textarea value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Tell us a little more…"
                      style={{
                        width: '100%', minHeight: 130, resize: 'vertical',
                        border: '1px solid rgba(20,20,18,0.14)', borderRadius: 10,
                        padding: '12px 14px', fontSize: 14, fontFamily: 'inherit',
                        background: '#fff', outline: 'none', lineHeight: 1.55,
                      }}/>
                  </div>
                  {/* Not display:none — some bots skip those. Off-screen,
                      untabbable, and unannounced to screen readers. */}
                  <div aria-hidden="true" style={{ position: 'absolute', left: -9999, width: 1, height: 1, overflow: 'hidden' }}>
                    <label htmlFor="mb-website">Website</label>
                    <input id="mb-website" name="website" tabIndex={-1} autoComplete="off"
                           value={website} onChange={(e) => setWebsite(e.target.value)}/>
                  </div>
                  <button onClick={submit} disabled={busy} style={{
                    ...btnPrimary, marginTop: 4, alignSelf: 'flex-start',
                    opacity: busy ? 0.6 : 1, cursor: busy ? 'progress' : 'pointer',
                  }}>{busy ? 'Sending…' : 'Send message'}</button>
                </div>
              </>
            )}
          </div>

          {/* Contact cards */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {cards.map(c => (
              <div key={c.tag} style={{
                background: '#FAFAF7', border: '1px solid rgba(20,20,18,0.08)',
                borderRadius: 14, padding: 22,
                transition: 'box-shadow .25s, transform .25s', cursor: 'default',
              }}
                onMouseEnter={(e) => { e.currentTarget.style.boxShadow = '0 16px 40px -24px rgba(20,20,18,0.18)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.transform = 'translateY(0)'; }}>
                <div style={{ fontSize: 15, fontWeight: 500, letterSpacing: '-0.01em' }}>{c.tag}</div>
                <div style={{ marginTop: 8, fontSize: 13.5, color: '#5a5a54', lineHeight: 1.55 }}>{c.body}</div>
                <a href={`mailto:${c.mail}`} style={{
                  marginTop: 14, display: 'inline-flex', alignItems: 'center', gap: 6,
                  fontSize: 12.5, color: '#1a1a18', textDecoration: 'none',
                  fontFamily: 'ui-monospace, monospace',
                }}>{c.mail} <span style={{ fontFamily: 'inherit' }}>→</span></a>
              </div>
            ))}
            <div style={{ padding: '18px 22px', fontSize: 12.5, color: '#8a8580', lineHeight: 1.6 }}>
              <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#8a8580', marginBottom: 8 }}>Studio</div>
              modaBoard AB · Åsögatan 144<br/>118 24 Stockholm, Sweden<br/>
              <span style={{ color: '#5a5a54' }}>Replies within two working days.</span>
            </div>
          </div>
        </div>
      </section>

      <style>{`
        @media (max-width: 820px) {
          .dc-contact-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
        }
      `}</style>

      <Footer/>
    </div>
  );
}

const contactLabel = {
  display: 'block', fontSize: 11, letterSpacing: '0.16em',
  textTransform: 'uppercase', color: '#8a8580', marginBottom: 10,
};

Object.assign(window, { ContactScreen });