// site-components.jsx — shared UI pieces for Atiye's portfolio.

const { useState, useEffect, useRef, useMemo } = React;

// ───────────────────────── Nav ─────────────────────────

function Nav({ page, setPage }) {
  const { c } = useData();
  const items = [
    { key: 'home',     label: 'Home' },
    { key: 'gallery',  label: 'Gallery' },
    { key: 'shop',     label: 'Shop' },
    { key: 'commission', label: 'Commission' },
  ];
  return (
    <nav className="site-nav">
      <button className="nav-mark" onClick={() => setPage('home')} aria-label="Home">
        <span className="mark-initial">{c('brand.markInitial')}</span>
        <span className="mark-name">
          <span className="mark-first">{c('brand.first')}</span>
          <span className="mark-last">{c('brand.last')}</span>
        </span>
      </button>
      <ul className="nav-links">
        {items.map(it => (
          <li key={it.key}>
            <button
              className={`nav-link ${page === it.key ? 'is-active' : ''}`}
              onClick={() => setPage(it.key)}
            >
              {it.label}
              {page === it.key && <span className="nav-underline" aria-hidden="true" />}
            </button>
          </li>
        ))}
      </ul>
      <div className="nav-meta">
        <span className="nav-meta-dot" /> {c('nav.studioStatus')}
      </div>
    </nav>
  );
}

// ───────────────────────── Footer ─────────────────────────

function Footer({ setPage }) {
  const { c } = useData();
  const ig = c('footer.instagram');
  const arena = c('footer.arena');
  const email = c('footer.email');
  return (
    <footer className="site-footer">
      <div className="footer-inner">
        <div className="footer-mark">
          <div className="footer-script">{c('footer.script')}</div>
          <div className="footer-sub">{c('footer.sub')}</div>
        </div>
        <div className="footer-cols">
          <div className="footer-col">
            <div className="footer-h">Visit</div>
            <button onClick={() => setPage('gallery')}>Gallery</button>
            <button onClick={() => setPage('shop')}>Shop originals</button>
            <button onClick={() => setPage('commission')}>Commission</button>
          </div>
          <div className="footer-col">
            <div className="footer-h">Elsewhere</div>
            {ig && ig !== '#' && <a href={ig} target="_blank" rel="noopener noreferrer">Instagram</a>}
            {arena && arena !== '#' && <a href={arena} target="_blank" rel="noopener noreferrer">Are.na</a>}
            {email && <a href={`mailto:${email}`}>{email}</a>}
          </div>
          <div className="footer-col">
            <div className="footer-h">Letter</div>
            <div className="footer-tiny">{c('footer.letterText')}</div>
            <form className="footer-form" onSubmit={e => e.preventDefault()}>
              <input type="email" placeholder="you@studio.com" />
              <button type="submit">→</button>
            </form>
          </div>
        </div>
      </div>
      <div className="footer-rule">
        <span>{c('footer.copyright')}</span>
        <span className="footer-script-sm">{c('footer.tagline')}</span>
        <span>{c('footer.reserved')}</span>
        <span className="footer-credit">
          Designed by <a href="https://momand.cloud/" target="_blank" rel="noopener noreferrer">Mo Mand</a>
        </span>
      </div>
    </footer>
  );
}

// ───────────────────────── Home / Hero ─────────────────────────

function Home({ setPage, openPainting, t }) {
  const { paintings, c } = useData();
  const featured = paintings.filter(p => p.available).slice(0, 4);
  const P = (id) => paintings.find(x => x.id === id) || paintings[0];
  const pick = ['figure-gold', 'peonies', 'bloom-cloud', 'little-grey'].map(P).filter(Boolean);
  const avail = paintings.filter(p => p.available);
  const collageSrc = (pick.length ? pick : avail.slice(0, 4));
  const collageStyles = [
    { cls: 'hc-1', aspect: '3 / 4', tag: 'newest ·' },
    { cls: 'hc-2', aspect: '1 / 1' },
    { cls: 'hc-3', aspect: '4 / 5' },
    { cls: 'hc-4', aspect: '3 / 4' },
  ];
  const collage = collageStyles.map((s, i) => ({ ...s, p: collageSrc[i] })).filter(x => x.p);

  const seriesDefs = [
    { k: 'Figures',    descKey: 'series.descFigures',    fallback: 'paintings/seated.jpg' },
    { k: 'Florals',    descKey: 'series.descFlorals',    fallback: 'paintings/peonies.jpg' },
    { k: 'Companions', descKey: 'series.descCompanions', fallback: 'paintings/nap.jpg' },
    { k: 'Landscape',  descKey: 'series.descLandscape',  fallback: 'paintings/lake.jpg' },
  ];
  const coverFor = (k, fb) => { const p = paintings.find(x => x.series === k); return (p && p.image) || fb; };
  const countFor = (k) => paintings.filter(x => x.series === k).length;
  return (
    <main className="page page-home">
      {/* Hero */}
      <section className="hero">
        <div className="hero-eyebrow">
          <span className="hero-dot" />
          <span>{c('hero.eyebrow')}</span>
        </div>

        <div className="hero-top">
          <h1 className="hero-title">
            <span className="line-1">{c('hero.titleLine1')}</span>
            <span className="line-2">
              <em className="hero-em">{c('hero.titleEm')}</em>
            </span>
            <span className="line-3">{c('hero.titleLine3')}</span>
          </h1>

          <figure className="hero-portrait">
            <div className="hp-frame">
              <img src={c('hero.portraitImage') || 'assets/artist.jpg'} alt="Atiye, in her studio" />
              <span className="hp-tape hp-tape-tl" aria-hidden="true" />
              <span className="hp-tape hp-tape-tr" aria-hidden="true" />
              <span className="hp-tape hp-tape-bl" aria-hidden="true" />
              <span className="hp-tape hp-tape-br" aria-hidden="true" />
            </div>
            <figcaption className="hp-cap script">
              <MultiLine text={c('hero.portraitCaption')} />
            </figcaption>
          </figure>
        </div>

        <div className="hero-meta">
          <div className="hero-col">
            <div className="hero-kicker">{c('hero.aboutKicker')}</div>
            <p className="hero-lede">{c('hero.lede')}</p>
          </div>
          <div className="hero-col hero-actions">
            <button className="btn btn-dark" onClick={() => setPage('gallery')}>
              {c('hero.ctaPrimary')}
              <span className="btn-arr">→</span>
            </button>
            <button className="btn btn-ghost" onClick={() => setPage('commission')}>
              {c('hero.ctaSecondary')}
            </button>
            <div className="hero-note">
              <span className="script">{c('hero.commissionNote')}</span>
            </div>
          </div>
        </div>

        {/* Hero artwork collage */}
        <div className="hero-collage">
          {collage.map((c, i) => (
            <div key={c.p.id} className={`hc-card ${c.cls}`} onClick={() => openPainting(c.p)}>
              <PaintedPlaceholder
                src={c.p.image}
                palette={c.p.palette}
                aspect={c.aspect}
                alt={c.p.title}
                label={`${c.p.title.toUpperCase()} — ${c.p.medium}`}
                seed={i + 1}
              />
              {c.tag && <div className="hc-tag script">{c.tag}</div>}
            </div>
          ))}
          <div className="hc-tape hc-tape-1" aria-hidden="true" />
          <div className="hc-tape hc-tape-2" aria-hidden="true" />
        </div>
      </section>

      {/* Series strip */}
      <section className="series-strip">
        <div className="series-head">
          <div className="series-kicker">{c('series.kicker')}</div>
          <h2 className="series-title">
            {c('series.titlePre')}<em>{c('series.titleEm')}</em>{c('series.titlePost')}
          </h2>
        </div>
        <div className="series-grid">
          {seriesDefs.map((s, i) => {
            const n = String(countFor(s.k)).padStart(2, '0');
            return (
              <button key={s.k} className="series-card" onClick={() => setPage('gallery')}>
                <PaintedPlaceholder src={coverFor(s.k, s.fallback)} aspect="4 / 5" seed={i + 10} showLabel={false} alt={s.k} />
                <div className="series-card-bar">
                  <div>
                    <div className="series-card-no">№ {n}</div>
                    <div className="series-card-name">{s.k}</div>
                  </div>
                  <span className="series-arrow">→</span>
                </div>
                <div className="series-card-desc">{c(s.descKey)}</div>
              </button>
            );
          })}
        </div>
      </section>

      {/* Featured quiet strip */}
      <section className="featured">
        <div className="featured-head">
          <div className="featured-kicker script">{c('featured.kicker')}</div>
          <h2 className="featured-title">{c('featured.title')}</h2>
          <button className="featured-more" onClick={() => setPage('shop')}>
            {c('featured.more')} <span className="btn-arr">→</span>
          </button>
        </div>
        <div className="featured-grid">
          {featured.map((p, i) => (
            <PaintingCard key={p.id} p={p} onClick={() => openPainting(p)} seed={i + 20} />
          ))}
        </div>
      </section>

      {/* Commission CTA */}
      <section className="home-commission">
        <div className="hc-mark">
          <div className="hc-big script">{c('homeCommission.big')}</div>
          <p className="hc-body">{c('homeCommission.body')}</p>
          <button className="btn btn-dark" onClick={() => setPage('commission')}>
            {c('homeCommission.cta')}
            <span className="btn-arr">→</span>
          </button>
        </div>
        <div className="hc-visual">
          <PaintedPlaceholder src={c('homeCommission.image') || 'paintings/commission-wip.jpg'} palette="floral-peach" aspect="5 / 6" seed={99} alt="A commission in progress on the easel" label="COMMISSION — IN PROGRESS" />
          <div className="hc-label script">
            <MultiLine text={c('homeCommission.caption')} />
          </div>
        </div>
      </section>
    </main>
  );
}

// ───────────────────────── Painting card ─────────────────────────

function PaintingCard({ p, onClick, seed = 0, showPrice = true }) {
  return (
    <article className="card" onClick={onClick}>
      <div className="card-frame">
        <PaintedPlaceholder src={p.image} palette={p.palette} aspect="4 / 5" seed={seed} alt={p.title} label={`${p.title.toUpperCase()} — ${p.medium}`} />
      </div>
      <div className="card-meta">
        <div className="card-row">
          <div className="card-title">{p.title}</div>
          {showPrice && (
            <div className="card-price">
              {p.available ? `€${p.price.toLocaleString()}` : <span className="sold script">sold</span>}
            </div>
          )}
        </div>
        <div className="card-sub">
          <span>{p.medium}</span>
          <span className="dot">·</span>
          <span>{p.size}</span>
          <span className="dot">·</span>
          <span>{p.year}</span>
        </div>
        {p.note && <div className="card-note script">“{p.note}”</div>}
      </div>
    </article>
  );
}

Object.assign(window, { Nav, Footer, Home, PaintingCard });