// Prodz — Add (+): single creation point for every content type (brief §1.4).
function AddScreen() {
  const { L } = useL();
  const nav = useNav();
  const { Button, Input } = window.ProdzDesignSystem_d0b87b;
  const [sheet, setSheet] = useStateS(null);
  const [prod, setProd] = useStateS('noir');

  const items = [
    { id: 'production', icon: 'Clapperboard', tint: 'var(--prodz-teal)', title: L('Produzione', 'Production'), desc: L('Importa un progetto: genera Moments e Thread collegati.', 'Import a project — auto-creates linked Moments & Threads.') },
    { id: 'moment',     icon: 'Camera',       tint: 'var(--prodz-gold)', title: L('Set Moment', 'Set Moment'), desc: L('Uno scatto dal set, collegato a una produzione.', 'A shot from set, bound to a production.'), bind: true },
    { id: 'thread',     icon: 'MessageCircle',tint: 'var(--blue)',       title: 'Thread', desc: L('Apri una discussione legata a una produzione.', 'Open a discussion bound to a production.'), bind: true },
    { id: 'jobcall',    icon: 'Megaphone',    tint: 'var(--prodz-gold)', title: 'Job Call', desc: L('Collab Proposal con allegato job call: candidature e chat unificate.', 'A Collab Proposal with a job-call attachment — applicants & chat unified.') },
    { id: 'collab',     icon: 'Handshake',    tint: 'var(--prodz-teal)', title: 'Collab Proposal', desc: L('Proponi una collaborazione: conversa nell’Inbox.', 'Propose a collaboration — talk in the Inbox.') },
    { id: 'location',   icon: 'MapPin',       tint: 'var(--purple)',     title: 'Location', desc: L('Pubblica uno spazio. Mettilo in evidenza con Premium.', 'List a space. Feature it with Premium.'), premium: true },
  ];
  const current = items.find((i) => i.id === sheet);

  return (
    <div className="pz-screen-enter" style={{ paddingBottom: 28 }}>
      <TopBar />
      <div style={{ padding: '18px 16px 4px' }}>
        <h1 style={pageTitle}>{L('Crea', 'Create')}</h1>
        <p style={pageSub}>{L('Cosa vuoi creare oggi?', 'What would you like to create?')}</p>
      </div>

      <div style={{ padding: '14px 16px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {items.map((it) => (
          <button key={it.id} onClick={() => setSheet(it.id)} style={createCard}>
            <span style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--surface-raised)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--ring-inset-hairline)' }}>
              <Ic n={it.icon} s={22} color={it.tint} />
            </span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 12 }}>
              <span style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--text-primary)' }}>{it.title}</span>
              {it.premium && <span style={premiumPill}>PRO</span>}
            </span>
            <span style={{ fontSize: 11.5, color: 'var(--text-muted)', lineHeight: 1.4, marginTop: 4 }}>{it.desc}</span>
          </button>
        ))}
      </div>

      <Sheet open={!!sheet} onClose={() => setSheet(null)}>
        {current && (
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <span style={{ width: 38, height: 38, borderRadius: 11, background: 'var(--surface-raised)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--ring-inset-hairline)' }}>
                <Ic n={current.icon} s={19} color={current.tint} />
              </span>
              <div>
                <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>{current.title}</div>
                {current.bind && <Eyebrow color="var(--text-subtle)" style={{ marginTop: 2 }}>{L('Collegato a una produzione', 'Bound to a production')}</Eyebrow>}
              </div>
            </div>

            {current.bind && (
              <div style={{ marginBottom: 12 }}>
                <Eyebrow style={{ marginBottom: 8 }}>{L('Produzione', 'Production')}</Eyebrow>
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  {PRODUCTIONS.map((p) => (
                    <button key={p.id} onClick={() => setProd(p.id)} style={{
                      border: 'none', cursor: 'pointer', padding: '8px 12px', borderRadius: 'var(--radius-pill)',
                      background: prod === p.id ? 'var(--teal-surface)' : 'var(--surface-raised)',
                      color: prod === p.id ? 'var(--prodz-teal)' : 'var(--text-muted)',
                      boxShadow: prod === p.id ? 'var(--ring-teal)' : 'var(--ring-inset-hairline)',
                      fontSize: 12.5, fontWeight: 600,
                    }}>{p.title}</button>
                  ))}
                </div>
              </div>
            )}

            <Input placeholder={current.id === 'jobcall' || current.id === 'collab' ? L('Titolo dell’opportunità…', 'Opportunity title…') : L('Aggiungi una descrizione…', 'Add a description…')} />

            {(current.id === 'jobcall' || current.id === 'collab') && (
              <p style={{ fontSize: 11.5, color: 'var(--text-subtle)', margin: '10px 2px 0', lineHeight: 1.4, display: 'flex', gap: 6 }}>
                <Ic n="Info" s={14} color="var(--text-subtle)" />
                {L('Andrà nei Shoutouts di chi cerca opportunità e ogni risposta apre una conversazione nell’Inbox.', 'It lands in others’ Shoutouts and every reply opens a conversation in the Inbox.')}
              </p>
            )}

            <div style={{ marginTop: 16 }}>
              <Button variant="primary" glow fullWidth leadingIcon={<Ic n="Check" s={17} />}
                onClick={() => { setSheet(null); nav.toast(L('Pubblicato', 'Published'), null); if (current.id === 'jobcall' || current.id === 'collab') nav.goTab('shoutouts'); }}>
                {L('Pubblica', 'Publish')}
              </Button>
            </div>
          </div>
        )}
      </Sheet>
    </div>
  );
}

const createCard = { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', textAlign: 'left', padding: 16, minHeight: 138, background: 'var(--surface-card)', border: 'none', cursor: 'pointer', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--ring-inset-hairline)' };
const premiumPill = { fontSize: 8.5, fontWeight: 800, letterSpacing: '0.06em', color: 'var(--prodz-gold)', background: 'rgba(212,175,55,0.14)', padding: '2px 6px', borderRadius: 'var(--radius-pill)' };

Object.assign(window, { AddScreen });