/* Home / landing page for The Handify. Hero has 3 layout variants via tweak. */

const FIELD_HUES = {
  Painting: 18, Sculpture: 150, Photography: 235, Digital: 285, Printmaking: 200,
  Ceramics: 95, Textile: 35, "Mixed Media": 340, Illustration: 320, Installation: 260,
};

function HomePage({ data, navigate, addToCart, cart, dark, homeLayout }) {
  const featured = data.artists.filter((a) => a.featured);
  // just for now: feature the artist with the shortest tagline so the hero headline fits
  const heroArtist = featured.reduce((s, a) => (a.tagline.length < s.tagline.length ? a : s), featured[0]);
  const heroWork = heroArtist.works[0];
  const forSale = data.allWorks.filter((w) => w.forSale && !w.sold);
  const inCart = (id) => cart.some((c) => c.id === id);

  return (
    <div className="home">
      {/* ---- HERO ---- */}
      {homeLayout === "grid" && <HeroGrid data={data} navigate={navigate} dark={dark} />}
      {homeLayout === "poster" && (
        <HeroPoster heroArtist={heroArtist} heroWork={heroWork} navigate={navigate} dark={dark} />
      )}
      {(!homeLayout || homeLayout === "editorial") && (
        <HeroEditorial
          heroArtist={heroArtist}
          heroWork={heroWork}
          featured={featured}
          navigate={navigate}
          dark={dark}
        />
      )}

      {/* ---- FEATURED ARTISTS ---- */}
      <section className="home-section">
        <div className="section-head">
          <h2 className="section-title">
            Featured <span className="title-num">artists</span>
          </h2>
          <button className="section-link" onClick={() => navigate({ name: "directory" })}>
            All artists <ArrowIcon />
          </button>
        </div>
        <div className="artist-grid">
          {featured.slice(0, 6).map((a) => (
            <ArtistCard key={a.id} artist={a} navigate={navigate} dark={dark} />
          ))}
        </div>
      </section>

      {/* ---- NEW & NOTEWORTHY ---- */}
      <section className="home-section alt-band">
        <div className="section-head">
          <h2 className="section-title">
            New <span className="title-num">&amp; noteworthy</span>
          </h2>
          <button className="section-link" onClick={() => navigate({ name: "news" })}>
            All news <ArrowIcon />
          </button>
        </div>
        <div className="news-grid-home">
          <div className="news-feat-col">
            {data.news[0] && (
              <NewsCard
                item={data.news[0]}
                artist={data.artists.find((a) => a.id === data.news[0].artistId)}
                navigate={navigate}
                dark={dark}
                feature
              />
            )}
            <div className="news-feat-pair">
              {data.news.slice(1, 3).map((n) => (
                <NewsCard
                  key={n.id}
                  item={n}
                  artist={data.artists.find((a) => a.id === n.artistId)}
                  navigate={navigate}
                  dark={dark}
                />
              ))}
            </div>
          </div>
          <div className="news-grid-rest">
            {data.news.slice(3, 5).map((n) => (
              <NewsCard
                key={n.id}
                item={n}
                artist={data.artists.find((a) => a.id === n.artistId)}
                navigate={navigate}
                dark={dark}
              />
            ))}
          </div>
        </div>
      </section>

      {/* ---- IN THE SHOP ---- */}
      <section className="home-section">
        <div className="section-head">
          <h2 className="section-title">
            In the <span className="title-num">shop</span>
          </h2>
          <button className="section-link" onClick={() => navigate({ name: "shop" })}>
            Shop all <ArrowIcon />
          </button>
        </div>
        <div className="work-grid">
          {forSale.slice(0, 8).map((w) => (
            <WorkCard
              key={w.id}
              work={w}
              navigate={navigate}
              addToCart={addToCart}
              inCart={inCart(w.id)}
              dark={dark}
            />
          ))}
        </div>
      </section>

      {/* ---- BROWSE BY FIELD ---- */}
      <section className="home-section alt-band">
        <div className="section-head">
          <h2 className="section-title">
            Browse by <span className="title-num">field</span>
          </h2>
          <span className="section-link static">{data.FIELDS.length} disciplines</span>
        </div>
        <div className="field-tiles">
          {data.FIELDS.map((f, i) => {
            const count = data.artists.filter((a) => a.field === f).length;
            const hue = FIELD_HUES[f] != null ? FIELD_HUES[f] : i * 36;
            const tones = hueToTones(hue, dark);
            return (
              <button
                key={f}
                className={"field-tile" + (count >= 2 ? " ft-span-2" : "")}
                style={{ "--tb": tones.base, "--th": tones.hatch, "--ti": tones.ink, "--te": tones.edge }}
                onClick={() => navigate({ name: "directory", field: f })}
              >
                <span className="ft-num">{String(i + 1).padStart(2, "0")}</span>
                <span className="ft-name">{f}</span>
                <span className="ft-meta">
                  <span className="ft-count">{count} artist{count === 1 ? "" : "s"}</span>
                  <span className="ft-arrow"><ArrowIcon /></span>
                </span>
              </button>
            );
          })}
        </div>
      </section>
    </div>
  );
}

// ---- hero variants -------------------------------------------------------
function HeroEditorial({ heroArtist, heroWork, featured, navigate, dark }) {
  return (
    <section className="hero-ed">
      <div className="hero-ed-text">
        <Eyebrow>Featured this week · {heroArtist.field}</Eyebrow>
        <h1 className="hero-ed-title">{heroArtist.tagline}</h1>
        <p className="hero-ed-desc">{heroArtist.bio}</p>
        <div className="hero-ed-actions">
          <button className="btn-primary" onClick={() => navigate({ name: "profile", slug: heroArtist.slug })}>
            {heroArtist.name} →
          </button>
          <button className="btn-ghost" onClick={() => navigate({ name: "directory" })}>
            Explore all artists
          </button>
        </div>
        <div className="hero-ed-mini">
          {featured.filter((a) => a.id !== heroArtist.id).slice(0, 3).map((a) => (
            <button key={a.id} className="hero-mini" onClick={() => navigate({ name: "profile", slug: a.slug })}>
              <Portrait artist={a} dark={dark} round style={{ width: 40, height: 40 }} />
              <span className="hero-mini-name">{a.name}</span>
              <span className="hero-mini-field">{a.field}</span>
            </button>
          ))}
        </div>
      </div>
      <button className="hero-ed-media" onClick={() => navigate({ name: "artwork", id: heroWork.id })}>
        <ArtImage work={heroWork} dark={dark} captionVisible={false} ratio="4 / 5" />
        <span className="hero-credit">
          {heroArtist.name} — <em>{heroWork.title}</em>, {heroWork.year}
        </span>
      </button>
    </section>
  );
}

function HeroGrid({ data, navigate, dark }) {
  const picks = data.allWorks.slice(0, 7);
  return (
    <section className="hero-grid">
      <div className="hero-grid-masthead">
        <Eyebrow>A world of handmade art</Eyebrow>
        <h1 className="hero-grid-title">
          THE WORLD&apos;S<br />ARTISTS, INDEXED
        </h1>
        <button className="btn-primary" onClick={() => navigate({ name: "directory" })}>
          Start exploring →
        </button>
      </div>
      <div className="hero-grid-wall">
        {picks.map((w, i) => (
          <button
            key={w.id}
            className={"hgw-item hgw-" + i}
            onClick={() => navigate({ name: "artwork", id: w.id })}
          >
            <ArtImage work={w} dark={dark} captionVisible={false} ratio="auto" style={{ height: "100%" }} />
            <span className="hgw-cap">{w.artist.name}</span>
          </button>
        ))}
      </div>
    </section>
  );
}

function HeroPoster({ heroArtist, heroWork, navigate, dark }) {
  return (
    <section className="hero-poster">
      <div className="poster-type">
        <span className="poster-the">the</span>
        <span className="poster-word">HANDIFY</span>
        <span className="poster-slogan">A world of handmade art</span>
      </div>
      <button className="poster-media" onClick={() => navigate({ name: "artwork", id: heroWork.id })}>
        <ArtImage work={heroWork} dark={dark} captionVisible={false} ratio="3 / 4" />
      </button>
      <div className="poster-foot">
        <Eyebrow>Featured · {heroArtist.city}, {heroArtist.country}</Eyebrow>
        <button className="poster-name" onClick={() => navigate({ name: "profile", slug: heroArtist.slug })}>
          {heroArtist.name} →
        </button>
        <p className="poster-tag">{heroArtist.tagline}</p>
      </div>
    </section>
  );
}

Object.assign(window, { HomePage });