function Mobile() {
  const [tab, setTab] = React.useState('about');
  const [expandedWriting, setExpandedWriting] = React.useState(null);
  const [contactName, setContactName] = React.useState('');
  const [contactEmail, setContactEmail] = React.useState('');
  const [contactMessage, setContactMessage] = React.useState('');
  const [sending, setSending] = React.useState(false);
  const [sendResult, setSendResult] = React.useState(null);

  const submitContact = () => {
    if (!contactName || !contactMessage) {
      setSendResult({ ok: false, msg: 'Please fill in your name and a message.' });
      return;
    }
    setSending(true);
    setSendResult(null);
    fetch('https://api.staticforms.dev/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        apiKey: 'sf_649ba0d023f3ad7f60623de6',
        subject: 'Contact form submission (mobile)',
        name: contactName,
        email: contactEmail,
        message: contactMessage,
        replyTo: contactEmail,
      }),
    }).then(r => r.json()).then(data => {
      setSending(false);
      if (data.success) {
        setSendResult({ ok: true, msg: 'Message sent. Thanks, ' + contactName + '!' });
        setContactName(''); setContactEmail(''); setContactMessage('');
      } else {
        setSendResult({ ok: false, msg: 'Could not send. Please email david@bestdavid.com.' });
      }
    }).catch(() => {
      setSending(false);
      setSendResult({ ok: false, msg: 'Could not send. Please email david@bestdavid.com.' });
    });
  };

  return (
    <div className="mobile-root">
      <div className="m-header">
        <img className="m-header-icon" src="/img/about me.png?v=14" alt="" />
        <div className="m-header-title">David Ciaffoni</div>
      </div>

      <div className="m-tabs">
        <button className={'m-tab ' + (tab === 'about' ? 'active' : '')} onClick={() => setTab('about')}>About</button>
        <button className={'m-tab ' + (tab === 'cases' ? 'active' : '')} onClick={() => setTab('cases')}>Cases</button>
        <button className={'m-tab ' + (tab === 'side' ? 'active' : '')} onClick={() => setTab('side')}>Side</button>
        <button className={'m-tab ' + (tab === 'writings' ? 'active' : '')} onClick={() => setTab('writings')}>Writing</button>
        <button className={'m-tab ' + (tab === 'contact' ? 'active' : '')} onClick={() => setTab('contact')}>Contact</button>
      </div>

      <div className="m-content">
        {tab === 'about' && (
          <div className="m-panel">
            <img className="m-avatar" src="/img/dc.jpg" alt="David Ciaffoni" />
            <h1 className="m-name">David Ciaffoni</h1>
            <div className="m-role">UX / UI Designer Extraordinaire</div>
            <p className="m-bio">
              Welcome to David's webpage. Founding designer, lead designer,
              fractional head of product — shipping products at Lime, Avail,
              Anchorage, Polywork, Fizz, Titan, Favorited and beyond.
            </p>
            <p className="m-bio">
              This site is best viewed on desktop — that's where you'll find
              the full Windows 95 experience.
            </p>
            <div className="m-links">
              <a className="m-link" href="https://www.linkedin.com/in/david-ciaffoni/" target="_blank" rel="noopener noreferrer">LinkedIn</a>
              <a className="m-link" href="https://github.com/davidkc0" target="_blank" rel="noopener noreferrer">GitHub</a>
              <a className="m-link" href="https://dribbble.com/davidkc0" target="_blank" rel="noopener noreferrer">Dribbble</a>
              <a className="m-link" href="https://www.dropbox.com/scl/fi/9k7w8xd2ofp641cjlyez9/David-Ciaffoni_Senior-Designer_20260128_updated.pdf?rlkey=tiregmq2ha6ynh0a21lheam1a&st=x6ntt9dj&dl=0" target="_blank" rel="noopener noreferrer">Resume.pdf</a>
              <a className="m-link" href="mailto:david@bestdavid.com">Email</a>
            </div>
          </div>
        )}

        {tab === 'cases' && (
          <div className="m-panel">
            <h2 className="m-section-title">Case Studies</h2>
            {PROJECTS.map(p => (
              <a key={p.id} className="m-card" href={p.url} target={p.url.startsWith('http') ? '_blank' : '_self'} rel="noopener noreferrer">
                <img className="m-card-icon" src={p.icon} alt="" />
                <div className="m-card-body">
                  <div className="m-card-name">{p.name}</div>
                  <div className="m-card-role">{p.role}</div>
                  <div className="m-card-blurb">{p.blurb}</div>
                </div>
              </a>
            ))}
          </div>
        )}

        {tab === 'side' && (
          <div className="m-panel">
            <h2 className="m-section-title">Side Projects</h2>
            <a className="m-card" href="https://cicadaresearch.io" target="_blank" rel="noopener noreferrer">
              <img className="m-card-icon" src="/icons/icon-cicada.svg?v=14" alt="" />
              <div className="m-card-body">
                <div className="m-card-name">Cicada</div>
                <div className="m-card-role">Personal Project · 2024 – Present</div>
                <div className="m-card-blurb">Designed and worked on the front end of an AI-powered financial news and research tool.</div>
              </div>
            </a>
            <a className="m-card" href="https://illusion.ai" target="_blank" rel="noopener noreferrer">
              <img className="m-card-icon" src="/img/illusion_icon.png?v=14" alt="" />
              <div className="m-card-body">
                <div className="m-card-name">Illusion.ai</div>
                <div className="m-card-role">Founder · 2026</div>
                <div className="m-card-blurb">AI SEO platform for GEO (Generative Engine Optimization) and AEO (Answer Engine Optimization).</div>
              </div>
            </a>
          </div>
        )}

        {tab === 'writings' && (
          <div className="m-panel">
            <h2 className="m-section-title">Writings</h2>
            {WRITINGS.map(w => w.pdfUrl ? (
              <a key={w.id} className="m-writing" href={w.externalUrl || w.pdfUrl} target="_blank" rel="noopener noreferrer" style={{display:'block', textDecoration:'none'}}>
                <div className="m-writing-head">
                  <span className="m-writing-name">{w.name}</span>
                  <span className="m-writing-chev">↗</span>
                </div>
              </a>
            ) : (
              <div key={w.id} className="m-writing">
                <button className="m-writing-head" onClick={() => setExpandedWriting(expandedWriting === w.id ? null : w.id)}>
                  <span className="m-writing-name">{w.name}</span>
                  <span className="m-writing-chev">{expandedWriting === w.id ? '−' : '+'}</span>
                </button>
                {expandedWriting === w.id && (
                  <div className="m-writing-body">
                    <h3>{w.title}</h3>
                    <div style={{whiteSpace: 'pre-wrap'}}>{w.body}</div>
                  </div>
                )}
              </div>
            ))}
          </div>
        )}

        {tab === 'contact' && (
          <div className="m-panel">
            <h2 className="m-section-title">Contact David</h2>
            <div className="m-field">
              <label>Name</label>
              <input type="text" value={contactName} onChange={e => setContactName(e.target.value)} placeholder="Your name" />
            </div>
            <div className="m-field">
              <label>Email</label>
              <input type="email" value={contactEmail} onChange={e => setContactEmail(e.target.value)} placeholder="you@example.com" />
            </div>
            <div className="m-field">
              <label>Message</label>
              <textarea value={contactMessage} onChange={e => setContactMessage(e.target.value)} placeholder="What's up?" rows={6} />
            </div>
            <button className="m-send" disabled={sending} onClick={submitContact}>
              {sending ? 'Sending...' : 'Send Message'}
            </button>
            {sendResult && (
              <div className={'m-result ' + (sendResult.ok ? 'ok' : 'err')}>{sendResult.msg}</div>
            )}
          </div>
        )}
      </div>

      <div className="m-footer">
        Made by David Ciaffoni in Santa Monica, California · 2026
      </div>
    </div>
  );
}