// Prodz — Home: Set Moments · Productions (Trending lives only here) · Locations.
function Home() {
  const { L } = useL();
  const nav = useNav();
  const { FeatureCard, Tag, Avatar, Button } = window.ProdzDesignSystem_d0b87b;
  const [loc, setLoc] = useStateS(null);
  const [gearSel, setGearSel] = useStateS(null);

  const railPad = { padding: '14px 16px 4px', margin: '0 -16px' };

  return (
    <div className="pz-screen-enter" style={{ paddingBottom: 28 }}>
      <TopBar />

      {/* ---- SET MOMENTS → 24h Stories from people you follow ---- */}
      <Section title={L('Set Moments', 'Set Moments')} action={L('Vedi tutti', 'View all')} onAction={() => nav.openStories(0)}>
        <div className="hscroll" style={railPad}>
          <div style={{ paddingLeft: 16 }} />
          {/* add-your-moment */}
          <button style={momentCol} onClick={() => nav.goTab('add')}>
            <span style={{ ...momentRing, background: 'var(--surface-raised)', boxShadow: 'inset 0 0 0 2px var(--prodz-gold)', color: 'var(--prodz-gold)' }}>
              <Ic n="Plus" s={26} />
            </span>
            <span style={momentLabel}>{L('Tu', 'You')}</span>
          </button>
          {STORIES.map((st, i) => {
            const person = PEOPLE[st.person];
            return (
              <button key={st.person} style={momentCol} onClick={() => nav.openStories(i)} title={person.name}>
                <span style={{ ...momentRing, boxShadow: `inset 0 0 0 2px var(--prodz-gold)`, padding: 3 }}>
                  <span style={{ display: 'block', width: '100%', height: '100%', borderRadius: '50%', background: `var(--surface-card) url(${person.avatar || st.frames[0].image}) center/cover` }} />
                </span>
                <span style={momentLabel}>{person.name.split(' ')[0]}</span>
              </button>);

          })}
          <div style={{ paddingRight: 8 }} />
        </div>
      </Section>

      {/* ---- TRENDING PRODUCTIONS (Home only) ---- */}
      <Section title={L('Produzioni di tendenza', 'Trending Productions')} action={L('Vedi tutte', 'View all')} onAction={() => nav.openAllProductions()}>
        <div className="hscroll" style={railPad}>
          <div style={{ paddingLeft: 16 }} />
          {PRODUCTIONS.map((p) =>
          <button key={p.id} onClick={() => nav.openProduction(p.id)} style={{ padding: 0, border: 'none', background: 'none', cursor: 'pointer', flexShrink: 0 }}>
            <FeatureCard image={p.image} title={p.title} meta={tr(L, p.meta)} width={262} height={188}
            badge={p.trending ? <Tag tone="solid">{L('Di tendenza', 'Trending')}</Tag> : null} />
          </button>
          )}
          <div style={{ paddingRight: 8 }} />
        </div>
      </Section>

      {/* ---- LOCATIONS — "In evidenza" (sponsorable; brief §1.9 / §2.3) ---- */}
      <Section title={L('Location in evidenza', 'Featured Locations')} action={L('Esplora', 'Explore')} onAction={() => nav.openLocations()}>
        <div className="hscroll" style={railPad}>
          <div style={{ paddingLeft: 16 }} />
          {LOCATIONS.map((lc) =>
          <button key={lc.id} onClick={() => setLoc(lc)} style={{
            position: 'relative', width: 230, height: 250, flexShrink: 0, padding: 0, border: 'none', cursor: 'pointer',
            borderRadius: 'var(--radius-lg)', overflow: 'hidden', textAlign: 'left',
            background: `var(--surface-card) url(${lc.image}) center/cover`, boxShadow: 'var(--ring-inset-hairline)'
          }}>
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(15,15,17,0) 38%, rgba(15,15,17,0.86) 100%)' }} />
              {/* discreet sponsored / featured label */}
              {lc.sponsored &&
            <span style={{ position: 'absolute', top: 12, left: 12, display: 'inline-flex', alignItems: 'center', gap: 5,
              background: 'rgba(10,10,10,0.7)', backdropFilter: 'blur(6px)', color: 'var(--prodz-gold)',
              padding: '4px 9px', borderRadius: 'var(--radius-pill)', fontSize: 9.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
                  <Ic n="Sparkles" s={11} color="var(--prodz-gold)" />{L('In evidenza', 'Featured')}
                </span>
            }
              <div style={{ position: 'absolute', left: 14, right: 14, bottom: 13 }}>
                <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--white)', lineHeight: 1.2 }}>{lc.title}</div>
                <div style={{ fontSize: 11.5, color: 'var(--gray-200)', marginTop: 3 }}>{tr(L, lc.meta)}</div>
                <div style={{ marginTop: 9, display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11.5, fontWeight: 600, color: 'var(--prodz-teal)' }}>
                  <Ic n="Tag" s={13} color="var(--prodz-teal)" />{tr(L, lc.price)}
                </div>
              </div>
            </button>
          )}
          <div style={{ paddingRight: 8 }} />
        </div>
        <div style={{ padding: '14px 16px 0' }}>
          <div style={sponsorPromo}>
            <span style={{ color: 'var(--prodz-gold)', display: 'flex', flexShrink: 0 }}><Ic n="BadgeCheck" s={18} /></span>
            <span style={{ flex: 1, fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.4 }}>
              {L('Gestisci uno spazio? Mettilo in evidenza con Prodz Premium.', 'Manage a space? Feature it with Prodz Premium.')}
            </span>
            <button style={{ border: 'none', background: 'none', cursor: 'pointer', color: 'var(--prodz-teal)', fontSize: 12, fontWeight: 700, whiteSpace: 'nowrap' }}>{L('Scopri', 'Learn')}</button>
          </div>
        </div>
      </Section>

      {/* ---- GEAR — rental / availability rail (brief §2.1) ---- */}
      <Section title={L('Gear in affitto', 'Gear for rent')} action={L('Esplora', 'Explore')} onAction={() => nav.toast(L('Marketplace gear in arrivo', 'Gear marketplace coming soon'), null)}>
        <div className="hscroll" style={railPad}>
          <div style={{ paddingLeft: 16 }} />
          {GEAR.map((g) => {
            const owner = PEOPLE[g.owner];
            return (
              <button key={g.id} onClick={() => setGearSel(g)} style={{
                width: 168, flexShrink: 0, padding: 10, border: 'none', cursor: 'pointer', textAlign: 'left',
                borderRadius: 'var(--radius-lg)', background: 'var(--surface-card)', boxShadow: 'var(--ring-inset-hairline)',
              }}>
                <span style={{ position: 'relative', display: 'block', height: 96, borderRadius: 'var(--radius-md)', overflow: 'hidden', background: g.img ? `var(--surface-raised) url(${g.img}) center/cover` : 'var(--surface-raised)' }}>
                  {!g.img && <span style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Ic n={g.icon} s={30} color="var(--text-muted)" /></span>}
                  <span style={{ position: 'absolute', top: 8, left: 8, padding: '3px 7px', borderRadius: 'var(--radius-pill)', background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(6px)', color: '#fff', fontSize: 8.5, fontWeight: 800, letterSpacing: '0.06em' }}>{g.cat}</span>
                  <span style={{ position: 'absolute', top: 8, right: 8, width: 9, height: 9, borderRadius: '50%', background: g.ready ? 'var(--green)' : 'var(--yellow)', boxShadow: g.ready ? '0 0 8px -1px rgba(74,222,128,0.8)' : 'none' }} />
                </span>
                <span style={{ display: 'block', fontSize: 13, fontWeight: 700, color: 'var(--text-primary)', marginTop: 9, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{g.name}</span>
                <span style={{ display: 'block', fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>{owner.name.split(' ')[0]} · {g.city}</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, marginTop: 8, fontSize: 12, fontWeight: 700, color: 'var(--prodz-teal)' }}>
                  <Ic n="Tag" s={12} color="var(--prodz-teal)" />{tr(L, g.price)}
                </span>
              </button>);

          })}
          <div style={{ paddingRight: 8 }} />
        </div>
      </Section>

      {/* Location detail sheet → routes to a Collab conversation in the Inbox */}
      <Sheet open={!!loc} onClose={() => setLoc(null)}>
        {loc &&
        <div>
            <div style={{ display: 'flex', gap: 12 }}>
              <span style={{ width: 70, height: 70, borderRadius: 14, background: `url(${loc.image}) center/cover`, flexShrink: 0, boxShadow: 'var(--ring-inset-hairline)' }} />
              <div style={{ flex: 1 }}>
                {loc.sponsored && <Eyebrow color="var(--prodz-gold)" style={{ marginBottom: 4 }}>{L('In evidenza · Sponsorizzato', 'Featured · Sponsored')}</Eyebrow>}
                <div style={{ fontSize: 17, fontWeight: 700, color: 'var(--text-primary)' }}>{loc.title}</div>
                <div style={{ fontSize: 12.5, color: 'var(--text-muted)', marginTop: 2 }}>{tr(L, loc.meta)} · {tr(L, loc.price)}</div>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
              <Button variant="secondary" fullWidth leadingIcon={<Ic n="Bookmark" s={16} />}>{L('Salva', 'Save')}</Button>
              <Button variant="primary" glow fullWidth leadingIcon={<Ic n="Send" s={16} />}
            onClick={() => {setLoc(null);nav.openInbox();}}>{L('Contatta', 'Contact')}</Button>
            </div>
          </div>
        }
      </Sheet>

      {/* Gear detail sheet → rent / save */}
      <Sheet open={!!gearSel} onClose={() => setGearSel(null)}>
        {gearSel &&
        <div>
            <div style={{ display: 'flex', gap: 12 }}>
              <span style={{ width: 70, height: 70, borderRadius: 14, background: gearSel.img ? `url(${gearSel.img}) center/cover` : 'var(--surface-raised)', flexShrink: 0, boxShadow: 'var(--ring-inset-hairline)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                {!gearSel.img && <Ic n={gearSel.icon} s={28} color="var(--text-muted)" />}
              </span>
              <div style={{ flex: 1 }}>
                <Eyebrow color="var(--prodz-teal)" style={{ marginBottom: 4 }}>{gearSel.cat} · {tr(L, gearSel.price)}</Eyebrow>
                <div style={{ fontSize: 17, fontWeight: 700, color: 'var(--text-primary)' }}>{gearSel.name}</div>
                <div style={{ fontSize: 12.5, color: 'var(--text-muted)', marginTop: 2 }}>{tr(L, gearSel.kind)} · {PEOPLE[gearSel.owner].name} · {gearSel.city}</div>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
              <Button variant="secondary" fullWidth leadingIcon={<Ic n="Bookmark" s={16} />} onClick={() => { setGearSel(null); nav.toast(L('Salvato negli elementi', 'Saved to your items'), null); }}>{L('Salva', 'Save')}</Button>
              <Button variant="primary" glow fullWidth leadingIcon={<Ic n="Send" s={16} />} onClick={() => { setGearSel(null); nav.openInbox(); }}>{L('Richiedi', 'Request')}</Button>
            </div>
          </div>
        }
      </Sheet>
    </div>);

}

const momentCol = { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, width: 70, flexShrink: 0, background: 'none', border: 'none', cursor: 'pointer', padding: 0 };
const momentRing = { width: 64, height: 64, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 };
const momentLabel = { fontFamily: 'var(--font-ui)', fontSize: 10.5, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', color: 'var(--text-body)', whiteSpace: 'nowrap' };
const sponsorPromo = { display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px', background: 'var(--teal-surface)', borderRadius: 'var(--radius-md)', boxShadow: 'var(--ring-teal)' };

Object.assign(window, { Home });