// Interests page — themes kids get into

function InterestsPage({ interests = [], onOpenProduct = () => {}, onOpenActivity = () => {} }) {
  const [opened, setOpened] = useState(null);
  const skillsMap = (window.ACTIVITY_SKILLS || []).reduce((m, s) => { m[s.id] = s.label; return m; }, {});

  if (opened) {
    const it = interests.find(x => x.id === opened);
    if (!it) return null;
    const products = (window.productsForInterest ? window.productsForInterest(it) : []);
    const actIds = (window.INTEREST_TO_ACTIVITY || {})[it.id] || [];
    const acts = actIds.map(id => (window.ACTIVITIES || []).find(a => a.id === id)).filter(Boolean);
    return (
      <div className="page">
        <button className="back-btn" onClick={() => setOpened(null)}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 18l-6-6 6-6"/></svg>
          <span>Back to interests</span>
        </button>
        <div className="interest-detail">
          <div className="interest-detail-img"><img src={it.img} alt="" /></div>
          <div className="interest-detail-body">
            <div className="page-eyebrow">{it.tag} \u00B7 ages {it.ageRange}</div>
            <h1 className="page-title" style={{ fontSize: 'clamp(40px, 4.5vw, 56px)' }}>{it.name}</h1>
            <p className="page-sub" style={{ marginBottom: 32 }}>{it.blurb}</p>
            <div style={{ borderTop: '1px solid var(--rule)', paddingTop: 24 }}>
              <div className="page-eyebrow" style={{ marginBottom: 12 }}>The world of {it.name.toLowerCase()}</div>
              <ul className="interest-elements">
                {it.elements.map((e, i) => (
                  <li key={i}>
                    <span className="interest-el-num">{String(i + 1).padStart(2, '0')}</span>
                    <span>{e}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>

        {products.length > 0 && (
          <section className="int-section">
            <div className="int-section-head">
              <div className="page-eyebrow">Toys for this phase</div>
              <h2 className="int-section-h">A shelf for {it.name.toLowerCase()}</h2>
            </div>
            <div className="int-products">
              {products.map(p => (
                <button key={p.id} className="int-product" onClick={() => onOpenProduct(p)}>
                  <div className="int-product-img">{p.img ? <img src={p.img} alt="" loading="lazy" /> : null}</div>
                  <div className="int-product-body">
                    <div className="int-product-brand">{p.brand}</div>
                    <h4 className="int-product-name">{p.name}</h4>
                    <div className="int-product-price">{`$${p.price}`}</div>
                  </div>
                </button>
              ))}
            </div>
          </section>
        )}

        {acts.length > 0 && (
          <section className="int-section">
            <div className="int-section-head">
              <div className="page-eyebrow">Activities to try</div>
              <h2 className="int-section-h">Things to do that fit the phase</h2>
            </div>
            <div className="int-activities">
              {acts.map(a => (
                <button key={a.id} className="int-activity" onClick={() => onOpenActivity(a.id)}>
                  <div className="int-activity-img"><img src={a.img} alt="" loading="lazy" /></div>
                  <div className="int-activity-body">
                    <div className="int-activity-meta">
                      {a.ageMin >= 12 ? `${Math.floor(a.ageMin/12)}\u2013${Math.floor(a.ageMax/12)} yrs` : `${a.ageMin}\u2013${a.ageMax} mo`} \u00B7 {a.duration} min
                    </div>
                    <h4 className="int-activity-name">{a.name}</h4>
                    <p className="int-activity-blurb">{a.blurb}</p>
                    <div className="int-activity-skills">
                      {(a.skills || []).slice(0, 3).map(s => (
                        <span key={s} className="int-activity-skill">{skillsMap[s] || s}</span>
                      ))}
                    </div>
                  </div>
                </button>
              ))}
            </div>
          </section>
        )}
      </div>
    );
  }

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-eyebrow">Interests</div>
          <h1 className="page-title">The phases<br/><em>they fall in love with.</em></h1>
          <p className="page-sub">Some last a week, some a lifetime. The fairies, the dinosaurs, the dragons — each opens a whole world. Pick a thread and follow it.</p>
        </div>
      </div>

      <div className="interests-grid">
        {interests.map((it, i) => (
          <button key={it.id} className={`interest-card${i === 0 ? ' is-feature' : ''}`} onClick={() => setOpened(it.id)}>
            <div className="interest-card-img"><img src={it.img} alt="" loading="lazy" /></div>
            <div className="interest-card-body">
              <div className="interest-card-tag">{it.tag} · {it.ageRange}</div>
              <h3 className="interest-card-name">{it.name}</h3>
              <p className="interest-card-blurb">{it.blurb}</p>
              <div className="interest-card-foot">
                <span>Explore</span>
                <span className="arrow">{'→'}</span>
              </div>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}

window.InterestsPage = InterestsPage;