// Contact.jsx — ZhuZhu Website Contact & Footer Section

const Contact = () => {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', message: '' });

  const handleSubmit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  return (
    <section id="contact" style={contactStyles.section}>
      <div style={contactStyles.inner}>
        <div style={contactStyles.top}>
          <div style={contactStyles.left}>
            <div style={contactStyles.sectionLabel}>Contact</div>
            <h2 style={contactStyles.h2}>Let's talk.</h2>
            <p style={contactStyles.p}>
              I'm currently open to internship and full-time opportunities in global health, market strategy, and healthcare analytics. Based in London.
            </p>
            <div style={contactStyles.links}>
              <a href="mailto:zhujuju1006@gmail.com" style={contactStyles.link}>
                zhujuju1006@gmail.com
              </a>
              <span style={contactStyles.sep}>·</span>
              <span style={contactStyles.linkText}>+44 07874 328727</span>
              <span style={contactStyles.sep}>·</span>
              <span style={contactStyles.linkText}>London, UK</span>
            </div>
            <div style={contactStyles.links}>
              <a
                href="https://www.linkedin.com/in/zhu-zhu-955aa8383"
                target="_blank"
                rel="noopener noreferrer"
                style={contactStyles.link}
              >
                LinkedIn ↗
              </a>
              <span style={contactStyles.sep}>·</span>
              <a
                href="assets/ZhuZhu-CV.pdf"
                download="ZhuZhu-CV.pdf"
                target="_blank"
                rel="noopener"
                style={contactStyles.link}
              >
                Download CV ↓
              </a>
            </div>
            <div style={contactStyles.illustWrap}>
              <img src="assets/PlantDoodle.svg" alt="" style={contactStyles.illus} />
            </div>
          </div>

          <div style={contactStyles.formCol}>
            {sent ? (
              <div style={contactStyles.thankYou}>
                <div style={contactStyles.thankYouIcon}>✓</div>
                <div style={contactStyles.thankYouTitle}>Message sent!</div>
                <div style={contactStyles.thankYouSub}>I'll get back to you shortly.</div>
              </div>
            ) : (
              <form onSubmit={handleSubmit} style={contactStyles.form}>
                <div style={contactStyles.field}>
                  <label style={contactStyles.label}>Name</label>
                  <input
                    style={contactStyles.input}
                    type="text"
                    placeholder="Your name"
                    value={form.name}
                    onChange={e => setForm({ ...form, name: e.target.value })}
                    onFocus={e => e.target.style.borderColor = '#E8503A'}
                    onBlur={e => e.target.style.borderColor = '#000'}
                    required
                  />
                </div>
                <div style={contactStyles.field}>
                  <label style={contactStyles.label}>Email</label>
                  <input
                    style={contactStyles.input}
                    type="email"
                    placeholder="your@email.com"
                    value={form.email}
                    onChange={e => setForm({ ...form, email: e.target.value })}
                    onFocus={e => e.target.style.borderColor = '#E8503A'}
                    onBlur={e => e.target.style.borderColor = '#000'}
                    required
                  />
                </div>
                <div style={contactStyles.field}>
                  <label style={contactStyles.label}>Message</label>
                  <textarea
                    style={contactStyles.textarea}
                    placeholder="What's on your mind?"
                    value={form.message}
                    onChange={e => setForm({ ...form, message: e.target.value })}
                    onFocus={e => e.target.style.borderColor = '#E8503A'}
                    onBlur={e => e.target.style.borderColor = '#000'}
                    rows={5}
                    required
                  />
                </div>
                <button
                  type="submit"
                  style={contactStyles.btn}
                  onMouseEnter={e => { e.currentTarget.style.background = '#E8503A'; e.currentTarget.style.borderColor = '#E8503A'; }}
                  onMouseLeave={e => { e.currentTarget.style.background = '#000'; e.currentTarget.style.borderColor = '#000'; }}
                >
                  Send message
                </button>
              </form>
            )}
          </div>
        </div>

        {/* Footer */}
        <div style={contactStyles.footer}>
          <div style={contactStyles.footerName}>
            Zhu<span style={{ color: '#E8503A' }}>Zhu</span>
          </div>
          <div style={contactStyles.footerRight}>
            <span style={contactStyles.footerLink}>© 2026</span>
          </div>
        </div>
      </div>
    </section>
  );
};

const contactStyles = {
  section: { borderTop: '2px solid #000', padding: '96px 48px 0', background: '#F5F5F0' },
  inner: { maxWidth: '1280px', margin: '0 auto' },
  top: { display: 'flex', gap: '80px', flexWrap: 'wrap', marginBottom: '80px' },
  left: { flex: '1 1 320px', display: 'flex', flexDirection: 'column', gap: '20px' },
  sectionLabel: {
    fontFamily: "'Space Grotesk', sans-serif", fontSize: '12px', fontWeight: 700,
    letterSpacing: '0.15em', textTransform: 'uppercase', color: '#E8503A',
  },
  h2: {
    fontFamily: "'Space Grotesk', sans-serif", fontWeight: 800,
    fontSize: 'clamp(40px, 5vw, 64px)', lineHeight: 1.0,
    letterSpacing: '-0.02em', color: '#000', margin: 0,
  },
  p: {
    fontFamily: "'DM Sans', sans-serif", fontSize: '17px', lineHeight: 1.75,
    color: '#333', fontWeight: 400, margin: 0,
  },
  links: { display: 'flex', alignItems: 'center', gap: '10px', flexWrap: 'wrap' },
  link: {
    fontFamily: "'DM Sans', sans-serif", fontSize: '15px', color: '#000', fontWeight: 600,
    textDecoration: 'none', borderBottom: '2px solid #E8503A',
  },
  linkText: {
    fontFamily: "'DM Sans', sans-serif", fontSize: '15px', color: '#555', fontWeight: 500,
  },
  sep: { color: '#bbb' },
  illustWrap: { marginTop: '8px', opacity: 0.5 },
  illus: { width: '200px', height: 'auto' },
  formCol: { flex: '1 1 380px' },
  form: { display: 'flex', flexDirection: 'column', gap: '20px' },
  field: { display: 'flex', flexDirection: 'column', gap: '6px' },
  label: {
    fontFamily: "'Space Grotesk', sans-serif", fontSize: '11px', fontWeight: 700,
    letterSpacing: '0.12em', textTransform: 'uppercase', color: '#000',
  },
  input: {
    fontFamily: "'DM Sans', sans-serif", fontSize: '15px',
    background: '#fff', border: '2px solid #000', borderRadius: '4px',
    padding: '11px 14px', color: '#000', outline: 'none',
    transition: 'border-color 150ms',
  },
  textarea: {
    fontFamily: "'DM Sans', sans-serif", fontSize: '15px',
    background: '#fff', border: '2px solid #000', borderRadius: '4px',
    padding: '11px 14px', color: '#000', outline: 'none', resize: 'vertical',
    transition: 'border-color 150ms',
  },
  btn: {
    fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: '14px',
    background: '#000', color: '#fff', border: '2px solid #000', borderRadius: '6px',
    padding: '13px 30px', cursor: 'pointer', letterSpacing: '0.02em',
    transition: 'background 150ms, border-color 150ms', alignSelf: 'flex-start',
  },
  thankYou: {
    display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
    border: '2px solid #000', background: '#fff', padding: '48px 32px', gap: '12px',
  },
  thankYouIcon: { fontSize: '40px', color: '#E8503A', fontWeight: 800 },
  thankYouTitle: {
    fontFamily: "'Space Grotesk', sans-serif", fontWeight: 800, fontSize: '28px', color: '#000',
  },
  thankYouSub: {
    fontFamily: "'DM Sans', sans-serif", fontSize: '16px', color: '#555',
  },
  footer: {
    borderTop: '2px solid #000', padding: '24px 0',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '12px',
  },
  footerName: {
    fontFamily: "'Space Grotesk', sans-serif", fontWeight: 800, fontSize: '18px',
    letterSpacing: '-0.02em', color: '#000',
  },
  footerMeta: {
    fontFamily: "'DM Sans', sans-serif", fontSize: '13px', color: '#777',
  },
  footerRight: { display: 'flex', gap: '12px', alignItems: 'center' },
  footerLink: {
    fontFamily: "'Space Grotesk', sans-serif", fontSize: '12px', fontWeight: 700,
    letterSpacing: '0.08em', textTransform: 'uppercase', color: '#000', cursor: 'pointer',
    borderBottom: '2px solid transparent', transition: 'border-color 150ms',
  },
  footerDot: { color: '#ccc' },
};

Object.assign(window, { Contact });