// Artist detail, Submit form, About, Email modal

const ArtistDetail = ({ artistId, onOpen, onNav }) => {
  const artist = window.ARTISTS.find(a => a.id === artistId) || window.ARTISTS[0];
  const related = window.ARTISTS
    .filter(a => a.id !== artist.id && (a.medium === artist.medium || a.region === artist.region))
    .slice(0, 3);

  React.useEffect(() => { window.scrollTo(0, 0); }, [artistId]);

  const priceLabel = (window.PRICE_TIERS.find(p => p.id === artist.price_tier) || {}).label || '—';

  return (
    <>
      <div className="container detail-top">
        <div className="detail-crumbs">
          <a onClick={e => { e.preventDefault(); onNav('home'); }} href="#home">Browse</a>
          <span style={{ margin: '0 8px', color: 'var(--muted-2)' }}>/</span>
          <span>{artist.medium.replace('-', ' ')}</span>
          <span style={{ margin: '0 8px', color: 'var(--muted-2)' }}>/</span>
          <span className="ink">{artist.name}</span>
        </div>
        <h1 className="detail-name">{artist.name}</h1>
        <p className="detail-hook">{artist.bio_short}</p>
        <div className="detail-meta-row">
          <div className="cell"><span>Medium</span><span>{artist.medium_secondary || artist.medium}</span></div>
          <div className="cell"><span>Location</span><span>{artist.location || '—'}</span></div>
          <div className="cell"><span>Price</span><span>{priceLabel}</span></div>
          <div className="cell"><span>Status</span>
            <span>{artist.verified ? <><span style={{ color: 'var(--accent)' }}>●</span> Morgan-verified</> : '○ Community'}</span>
          </div>
        </div>

        <div className="detail-hero-grid">
          <div><ArtPlaceholder artist={artist} variant={0} showTag={false} imageField="image_local" /></div>
          <div><ArtPlaceholder artist={artist} variant={2} showTag={false} imageField="image_local_2" /></div>
          <div><ArtPlaceholder artist={artist} variant={4} showTag={false} imageField="image_local_3" /></div>
        </div>

        <div className="detail-body">
          <div className="detail-bio">
            <p style={{ margin: 0 }}>{artist.bio_long}</p>
          </div>
          <aside className="detail-side">
            <div>
              <div className="section-label">Support the artist</div>
              <div className="link-list">
                {artist.shop_url && (
                  <a href={`https://${artist.shop_url}`} target="_blank" rel="noreferrer"
                    onClick={e => { e.preventDefault(); alert('UTM: awo-detail-shop · ' + artist.shop_url); }}>
                    <span>Shop the work</span>
                    <span className="arrow">→</span>
                  </a>
                )}
                {artist.website && (
                  <a href={`https://${artist.website}`} target="_blank" rel="noreferrer"
                    onClick={e => { e.preventDefault(); alert('UTM: awo-detail-site · ' + artist.website); }}>
                    <span>Personal site</span>
                    <span className="arrow">↗</span>
                  </a>
                )}
                <a href={`https://instagram.com/${artist.instagram_handle}`} target="_blank" rel="noreferrer"
                  onClick={e => { e.preventDefault(); alert('UTM: awo-detail-ig · @' + artist.instagram_handle); }}>
                  <span>@{artist.instagram_handle}</span>
                  <span className="arrow">↗</span>
                </a>
              </div>
            </div>
            <div>
              <div className="section-label">Tags</div>
              <div className="tag-list">
                {(artist.tags || []).map(t => <span key={t}>{t}</span>)}
              </div>
            </div>
            {artist.submitted_by && (
              <div className="credit-card">
                Submitted by <strong>@{artist.submitted_by}</strong><br/>
                via the <em>In the age of AI slop…</em> IG post, April 2026.
              </div>
            )}
          </aside>
        </div>

        {related.length > 0 && (
          <>
            <h2 className="related-title">More like this</h2>
            <div className="grid">
              {related.map((a, i) => <ArtistCard key={a.id} artist={a} onOpen={onOpen} variantBase={i+1} />)}
            </div>
          </>
        )}
      </div>
    </>
  );
};

const SubmitPage = ({ onNav }) => {
  const [data, setData] = React.useState({
    name: '', ig: '', medium: '', location: '', link: '', email: '', why: ''
  });
  const [errors, setErrors] = React.useState({});
  const [done, setDone] = React.useState(false);

  const set = (k, v) => setData(d => ({ ...d, [k]: v }));

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!data.name.trim()) errs.name = 'Required';
    if (!data.ig.trim()) errs.ig = 'Required';
    if (!data.medium) errs.medium = 'Pick one';
    if (!data.email.includes('@')) errs.email = 'Valid email required';
    setErrors(errs);
    if (Object.keys(errs).length === 0) setDone(true);
  };

  if (done) {
    return (
      <div className="container success-state">
        <div className="tick">✓</div>
        <h2>Submission received.</h2>
        <p style={{ color: 'var(--ink-soft)', fontSize: 16 }}>
          We review submissions weekly. If <strong>{data.name}</strong> is a fit, they'll appear in the directory within 7 days — credited to <strong>@{data.ig.replace('@', '')}</strong>.
        </p>
        <div style={{ marginTop: 32, display: 'flex', gap: 12, justifyContent: 'center' }}>
          <button className="btn" onClick={() => onNav('home')}>Back to browse</button>
          <button className="btn btn-ghost" onClick={() => { setDone(false); setData({ name: '', ig: '', medium: '', location: '', link: '', email: '', why: '' }); }}>Submit another</button>
        </div>
      </div>
    );
  }

  return (
    <div className="container submit-page">
      <div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--accent-ink)', textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 20 }}>
          // 02 / Submit
        </div>
        <h1>Know an artist?<br/>Tell us.</h1>
        <p className="lede">
          We review every submission personally. Black artists and Black-owned galleries only. The more specific, the better — the best submissions include a link to the artist's shop.
        </p>
      </div>
      <form className="submit-form" onSubmit={submit} noValidate>
        <div className="form-step">Step 01 / The artist</div>
        <div className="field">
          <label className="field-label">Artist name *</label>
          <input className="input" value={data.name} onChange={e => set('name', e.target.value)} placeholder="e.g. Bisa Butler" />
          {errors.name && <div className="field-error">{errors.name}</div>}
        </div>
        <div className="field-row">
          <div className="field">
            <label className="field-label">Instagram handle *</label>
            <input className="input" value={data.ig} onChange={e => set('ig', e.target.value)} placeholder="@handle" />
            {errors.ig && <div className="field-error">{errors.ig}</div>}
          </div>
          <div className="field">
            <label className="field-label">Location</label>
            <input className="input" value={data.location} onChange={e => set('location', e.target.value)} placeholder="City, State" />
          </div>
        </div>
        <div className="field-row">
          <div className="field">
            <label className="field-label">Medium *</label>
            <select className="select" value={data.medium} onChange={e => set('medium', e.target.value)}>
              <option value="">Select…</option>
              {window.MEDIUMS.map(m => <option key={m.id} value={m.id}>{m.label}</option>)}
            </select>
            {errors.medium && <div className="field-error">{errors.medium}</div>}
          </div>
          <div className="field">
            <label className="field-label">Shop / site link</label>
            <input className="input" value={data.link} onChange={e => set('link', e.target.value)} placeholder="https://…" />
          </div>
        </div>

        <div className="form-step" style={{ marginTop: 32 }}>Step 02 / You</div>
        <div className="field">
          <label className="field-label">Your email *</label>
          <input className="input" type="email" value={data.email} onChange={e => set('email', e.target.value)} placeholder="So we can credit you" />
          {errors.email && <div className="field-error">{errors.email}</div>}
        </div>
        <div className="field">
          <label className="field-label">Why this artist? <span style={{ textTransform: 'none', color: 'var(--muted-2)' }}>(optional)</span></label>
          <textarea className="textarea" value={data.why} onChange={e => set('why', e.target.value)} placeholder="One line on what makes their work worth owning." />
        </div>

        <div style={{ marginTop: 32, display: 'flex', gap: 12, alignItems: 'center' }}>
          <button type="submit" className="btn">Submit for review →</button>
          <span className="mono" style={{ fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
            Reviewed weekly
          </span>
        </div>
      </form>
    </div>
  );
};

const AboutPage = () => (
  <div className="container detail-top">
    <div className="detail-crumbs">About / the project</div>
    <h1 className="detail-name" style={{ fontSize: 'clamp(48px, 7vw, 104px)' }}>
      A directory, not<br/>an algorithm.
    </h1>
    <div className="about-body">
      <p>
        In April 2026, Morgan DeBaun posted a simple ask: in the age of AI slop, put your support and dollars behind Black artists you love. Hundreds of people replied, tagging the artists whose work lives on their walls.
      </p>
      <p>
        There was no single place to find them. So we built one.
      </p>
      <p>
        Art Worth Owning is a community-seeded directory of Black artists and Black-owned galleries worth supporting. Every listing links out — to their shop, their site, their Instagram — so your dollars reach the artist, not a middleman. We don't sell art. We don't take commissions. We don't feature a listing because someone paid us to.
      </p>
      <p>
        This is a WorkSmart project. It is free, and it will stay free.
      </p>
    </div>
  </div>
);

const EmailModal = ({ onClose }) => {
  const [email, setEmail] = React.useState('');
  const [done, setDone] = React.useState(false);
  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>×</button>
        {done ? (
          <div style={{ paddingTop: 12 }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent-ink)', textTransform: 'uppercase', letterSpacing: '0.14em' }}>
              // Subscribed
            </div>
            <h2 style={{ fontFamily: 'Instrument Serif, serif', fontSize: 40, lineHeight: 1.05, margin: '12px 0 12px' }}>
              You're on the list.
            </h2>
            <p style={{ color: 'var(--ink-soft)', fontSize: 15 }}>
              Three new Black artists in your inbox every month. First drop goes out soon.
            </p>
            <button className="btn" onClick={onClose} style={{ marginTop: 20 }}>Keep browsing</button>
          </div>
        ) : (
          <>
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent-ink)', textTransform: 'uppercase', letterSpacing: '0.14em' }}>
              // The monthly drop
            </div>
            <h2 style={{ fontFamily: 'Instrument Serif, serif', fontSize: 40, lineHeight: 1.05, margin: '12px 0 12px' }}>
              Three new artists,<br/>every month.
            </h2>
            <p style={{ color: 'var(--ink-soft)', fontSize: 15, marginBottom: 24 }}>
              The best of the month's submissions, sent direct. One email. No spam.
            </p>
            <form onSubmit={e => { e.preventDefault(); if (email.includes('@')) setDone(true); }}>
              <div className="field" style={{ padding: 0 }}>
                <label className="field-label">Email</label>
                <input className="input" type="email" autoFocus value={email} onChange={e => setEmail(e.target.value)} placeholder="you@email.com" required />
              </div>
              <button className="btn" type="submit" style={{ marginTop: 20, width: '100%', justifyContent: 'center' }}>
                Subscribe →
              </button>
              <div style={{ marginTop: 14, fontSize: 12, color: 'var(--muted)', textAlign: 'center' }}>
                Joins the WorkSmart list with a <code className="mono">black-art-list</code> tag.
              </div>
            </form>
          </>
        )}
      </div>
    </div>
  );
};

window.ArtistDetail = ArtistDetail;
window.SubmitPage = SubmitPage;
window.AboutPage = AboutPage;
window.EmailModal = EmailModal;