// Contact / follow section.

const ContactFollow = () => {
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);

  const onSubmit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    setSubmitted(true);
  };

  return (
    <section id="contact" className="section">
      <div className="container">
        <div className="section__head">
          <Eyebrow>§ Correspondence</Eyebrow>
          <div>
            <h2>Read along, <em>or write back.</em></h2>
          </div>
        </div>

        <div className="contact-grid">
          {/* Left: subscribe */}
          <div className="contact-card">
            <Eyebrow accent style={{ marginBottom: 14 }}>● Field notes · monthly</Eyebrow>
            <h3>One short essay a month, kept plain.</h3>
            <p>
              Field notes go out on the first weekend of the month. No tracking, no
              cross-promotions, no growth tactics. Unsubscribe with one click.
            </p>

            {submitted ? (
              <div style={{
                padding: '14px 16px',
                border: '1px solid var(--accent)',
                borderRadius: 'var(--radius-1)',
                background: 'var(--accent-bg)',
                display: 'flex', alignItems: 'baseline', gap: 12,
              }}>
                <span style={{ width: 7, height: 7, borderRadius: 999, background: 'var(--accent)' }} />
                <div>
                  <div style={{ fontSize: 14, color: 'var(--ink)', fontWeight: 500 }}>Subscribed.</div>
                  <div className="meta" style={{ color: 'var(--ink-2)', marginTop: 2 }}>
                    Confirmation sent to {email}.
                  </div>
                </div>
              </div>
            ) : (
              <form onSubmit={onSubmit} className="subscribe-row">
                <input
                  type="email"
                  className="input"
                  placeholder="you@somewhere.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                />
                <button type="submit" className="btn">
                  Subscribe
                  <Icon name="arrow-right" size={14} />
                </button>
              </form>
            )}

            <div className="meta" style={{ marginTop: 14, color: 'var(--ink-3)' }}>
              Next issue: <em style={{ fontFamily: 'var(--font-display)' }}>Field Note 012 — On the cost of clever tools.</em>
            </div>
          </div>

          {/* Right: links */}
          <div>
            <Eyebrow style={{ marginBottom: 14 }}>Elsewhere</Eyebrow>
            <ul className="contact-links">
              <ContactLink label="MAIL"     value="hello@commonworklab.com"    n="01" />
              <ContactLink label="RSS"      value="/feed.xml"                   n="02" />
              <ContactLink label="GITHUB"   value="github.com/commonworklab"    n="03" />
              <ContactLink label="MASTODON" value="@commonwork@mas.to"          n="04" />
              <ContactLink label="LETTERS"  value="PO Box 1142, Cambridge MA"   n="05" />
            </ul>
            <div className="meta" style={{ marginTop: 18, color: 'var(--ink-3)' }}>
              I read all correspondence. I reply to most within a week, when the project
              tide allows.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const ContactLink = ({ label, value, n }) => (
  <li>
    <a href="#" className="contact-link" onClick={(e) => e.preventDefault()}>
      <span className="contact-link__label">{label} · {n}</span>
      <span className="contact-link__value"><em>{value}</em></span>
      <Icon name="arrow-up-right" size={16} className="row-link__arrow" />
    </a>
  </li>
);

window.ContactFollow = ContactFollow;