// Home / Browse page

const Hero = ({ variant, count }) => {
  if (variant === 'editorial') {
    return (
      <section className="hero hero-editorial">
        <div className="container">
          <h1 className="hero-title">
            Art worth<br/><em>owning.</em>
          </h1>
          <div className="hero-sub">
            <div className="hero-tag">
              A directory of Black artists and Black-owned galleries worth your money.
              Seeded by the community, curated by the few.
            </div>
            <div className="hero-stat">
              <span><span className="num">{count}</span> / artists live</span>
              <span><span className="num">8</span> / mediums</span>
              <span><span className="num">weekly</span> / updates</span>
            </div>
          </div>
        </div>
      </section>
    );
  }
  if (variant === 'preview') {
    const picks = [window.ARTISTS[0], window.ARTISTS[6]];
    return (
      <section className="hero">
        <div className="container hero-preview">
          <div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent-ink)', textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 20 }}>
              Discover / support / buy
            </div>
            <h1 className="hero-title">Real artists.<br/>Real art.<br/>Worth owning.</h1>
            <p style={{ fontSize: 17, color: 'var(--ink-soft)', maxWidth: 440, marginTop: 20, lineHeight: 1.5 }}>
              In an age of AI slop, put your support and dollars behind Black artists making something true.
            </p>
          </div>
          <div className="hero-strip">
            {picks.map(a => <div key={a.id}><ArtPlaceholder artist={a} variant={2} showTag={false} /></div>)}
          </div>
        </div>
      </section>
    );
  }
  // manifesto
  return (
    <section className="container hero-manifesto">
      <div className="hero-kicker">// A WorkSmart project · Est. 2026</div>
      <h1 className="hero-title">
        In an age of <span className="strike">AI slop</span>,
        put your money behind <span className="accent">Black artists</span>
        you love.
      </h1>
      <div className="hero-sub">
        <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.14em', paddingTop: 8 }}>
          {count} artists · 8 mediums · updated weekly
        </div>
      </div>
    </section>
  );
};

const SearchBar = ({ query, onChange }) => (
  <div className="container">
    <div className="search-wrap">
      <span className="search-icon">⌕</span>
      <input
        autoComplete="off"
        placeholder="Search name, medium, tag — e.g. 'quilt', 'Lagos', 'woodblock'"
        value={query}
        onChange={e => onChange(e.target.value)}
      />
      {query && (
        <button onClick={() => onChange('')} className="mono"
          style={{ background: 'none', border: 'none', color: 'var(--muted)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.12em' }}>
          Clear
        </button>
      )}
    </div>
  </div>
);

const ChipRow = ({ label, items, active, onToggle, counts }) => (
  <div className="chip-row">
    <div className="chip-row-label">{label}</div>
    {items.map(it => (
      <button
        key={it.id}
        className={`chip ${active.includes(it.id) ? 'active' : ''}`}
        onClick={() => onToggle(it.id)}
      >
        {it.label}
        {counts[it.id] !== undefined && <span className="count">{counts[it.id]}</span>}
      </button>
    ))}
  </div>
);

const Filters = ({ filters, setFilters, counts }) => {
  const toggle = (group, id) => {
    setFilters(f => {
      const cur = f[group];
      return { ...f, [group]: cur.includes(id) ? cur.filter(x => x !== id) : [...cur, id] };
    });
  };
  return (
    <div className="container">
      <div className="chip-rows">
        <ChipRow label="Medium" items={window.MEDIUMS} active={filters.medium}
          onToggle={id => toggle('medium', id)} counts={counts.medium} />
        <ChipRow label="Region" items={window.REGIONS} active={filters.region}
          onToggle={id => toggle('region', id)} counts={counts.region} />
        <ChipRow label="Price" items={window.PRICE_TIERS} active={filters.price_tier}
          onToggle={id => toggle('price_tier', id)} counts={counts.price_tier} />
      </div>
    </div>
  );
};

const ArtistCard = ({ artist, onOpen, variantBase }) => (
  <div className="card" onClick={() => onOpen(artist.id)}>
    <div className="card-img">
      <div className="card-img-inner">
        <ArtPlaceholder artist={artist} variant={variantBase} showTag={false} />
      </div>
      <div className="card-meta-top">
        <span />
        {artist.verified && <span className="verified">Verified</span>}
      </div>
    </div>
    <div className="card-body">
      <div className="card-title">{artist.name}</div>
      <div className="card-meta">
        <span>{artist.medium.replace('-', ' ')}</span>
        {artist.location && <span className="dot">·</span>}
        {artist.location && <span>{artist.location}</span>}
      </div>
      <div className="card-hook">{artist.bio_short}</div>
    </div>
  </div>
);

const InlineSignup = ({ onSubmit }) => {
  const [email, setEmail] = React.useState('');
  const [done, setDone] = React.useState(false);
  return (
    <div className="container">
      <div className="inline-signup">
        <div>
          <h3>Get the monthly drop.</h3>
          <div className="sub">Three new Black artists in your inbox every month. No spam — unsubscribe in one click.</div>
        </div>
        {done ? (
          <div style={{ color: 'var(--accent)', fontFamily: 'JetBrains Mono, monospace', fontSize: 13 }}>
            ✓ You're on the list.
          </div>
        ) : (
          <form onSubmit={e => {
            e.preventDefault();
            if (email.includes('@')) { setDone(true); onSubmit?.(email); }
          }}>
            <input type="email" placeholder="you@email.com" value={email}
              onChange={e => setEmail(e.target.value)} required />
            <button type="submit">Subscribe →</button>
          </form>
        )}
      </div>
    </div>
  );
};

const HomePage = ({ onOpen, heroVariant, triggerEmailModal }) => {
  const [query, setQuery] = React.useState('');
  const [filters, setFilters] = React.useState({ medium: [], region: [], price_tier: [] });

  const anyFilter = query.trim() || filters.medium.length || filters.region.length || filters.price_tier.length;

  const filtered = React.useMemo(() => {
    const q = query.trim().toLowerCase();
    return window.ARTISTS.filter(a => {
      if (filters.medium.length && !filters.medium.includes(a.medium)) return false;
      if (filters.region.length && !filters.region.includes(a.region)) return false;
      if (filters.price_tier.length && !filters.price_tier.includes(a.price_tier)) return false;
      if (!q) return true;
      const hay = [a.name, a.medium, a.location, a.medium_secondary, (a.tags || []).join(' '), a.bio_short].join(' ').toLowerCase();
      return hay.includes(q);
    });
  }, [query, filters]);

  const counts = React.useMemo(() => {
    const buckets = { medium: {}, region: {}, price_tier: {} };
    window.ARTISTS.forEach(a => {
      ['medium', 'region', 'price_tier'].forEach(k => {
        if (!a[k]) return;
        buckets[k][a[k]] = (buckets[k][a[k]] || 0) + 1;
      });
    });
    return buckets;
  }, []);

  const clearAll = () => {
    setQuery('');
    setFilters({ medium: [], region: [], price_tier: [] });
  };

  // Trigger email modal once on scroll
  React.useEffect(() => {
    let fired = false;
    const onScroll = () => {
      if (fired) return;
      if (window.scrollY > 900 && !localStorage.getItem('awo-email-shown')) {
        fired = true;
        localStorage.setItem('awo-email-shown', '1');
        triggerEmailModal();
      }
    };
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, [triggerEmailModal]);

  return (
    <>
      <Hero variant={heroVariant} count={window.ARTISTS.length} />
      <SearchBar query={query} onChange={setQuery} />
      <Filters filters={filters} setFilters={setFilters} counts={counts} />

      <div className="container">
        <div className="results-bar">
          <div className="results-count">
            {filtered.length} {filtered.length === 1 ? 'artist' : 'artists'}
            {anyFilter ? ' matching' : ' total'}
          </div>
          {anyFilter && <button className="clear-all" onClick={clearAll}>Clear all ×</button>}
        </div>

        {filtered.length === 0 ? (
          <div className="empty">
            <h3>No artists here yet.</h3>
            <div>Know one? <a href="#submit" onClick={e => { e.preventDefault(); window.__nav('submit'); }} className="accent" style={{ textDecoration: 'underline' }}>Submit them.</a></div>
          </div>
        ) : (
          <div className="grid">
            {filtered.map((a, i) => (
              <ArtistCard key={a.id} artist={a} onOpen={onOpen} variantBase={i} />
            ))}
          </div>
        )}
      </div>

      <InlineSignup />
    </>
  );
};

window.HomePage = HomePage;