// SONARA — Profilo page (artista) — toggle Anteprima / Modifica
const PfIcons = window.SonaraIcons;

const PROFILE = {
  name: "Luca Marini",
  handle: "@lucamarini",
  initials: "LM",
  verified: true,
  active: true,
  location: "Milano, IT",
  joined: "Aprile 2024",
  followers: 1248,
  rating: 4.9,
  ratingCount: 12,
  completed: 12,
  experience: "3 anni",
  availability: "open",
  bio: "Cantautore italiano, mixo cantautorato e produzione moderna. Lavoro su un EP per uscita 2026 — cerco producer per beat melodici, mix engineer e vocal coach per ampliare il sound.",
  genres: ["Trap melodico", "R&B", "Italian indie", "Soul"],
  lookingFor: ["Beat custom", "Mix + Master", "Vocal coaching", "Featuring"],
  socials: { spotify: "lucamarini-official", instagram: "@lucamarini", soundcloud: "luca-marini" },
  tracks: [
    { id: "t1", title: "Notte Lunga", duration: "3:24", plays: "12.4k", grad: "g1", uploaded: "2 settimane fa" },
    { id: "t2", title: "Restami", duration: "2:58", plays: "8.1k", grad: "g3", uploaded: "1 mese fa" },
    { id: "t3", title: "Caduta libera", duration: "3:42", plays: "6.7k", grad: "g4", uploaded: "1 mese fa" },
    { id: "t4", title: "Vento del sud (demo)", duration: "2:12", plays: "2.3k", grad: "g5", uploaded: "2 mesi fa" },
  ],
  privacy: true,
};

const VerifIc = ({ size = 12 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M12 1l2.39 1.73 2.95-.13.13 2.95L19.27 7l-1.73 2.39 1.73 2.39-1.8 2.46-.13 2.95-2.95-.13L12 19l-2.39-1.73-2.95.13-.13-2.95L4.73 12l1.73-2.39L4.73 7l1.8-2.46.13-2.95 2.95.13zM10.5 14.6l5-5-1.1-1.1-3.9 3.9-1.9-1.9-1.1 1.1z"/></svg>;
const PinIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>;
const CalIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>;
const UsersIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/></svg>;
const MsgIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>;
const ShareIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>;
const PlayIc = ({ size = 12 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M5 3l14 9-14 9V3z"/></svg>;
const HeartIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>;
const DotsIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/></svg>;
const EyeIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>;
const EditIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>;
const PlusIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M5 12h14"/></svg>;
const CopyIc = ({ size = 13 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>;
const CheckIc = ({ size = 13 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>;
const StarIc = ({ size = 12, filled = true }) => <svg width={size} height={size} viewBox="0 0 24 24" fill={filled ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1.5"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>;
const BoltIc = ({ size = 12 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L4.09 12.97a.5.5 0 0 0 .38.82h6.03l-1.49 7.42a.5.5 0 0 0 .89.37l8.91-10.97A.5.5 0 0 0 18.42 10h-5.92l1.4-7.45A.5.5 0 0 0 13 2z"/></svg>;
const MusicIc = ({ size = 14 }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="6" cy="18" r="3"/><path d="M9 18V5l9-3v13"/><circle cx="18" cy="15" r="3"/></svg>;

function PublicView() {
  return (
    <>
      <div className="pf-cover">
        <div className="pf-cover-actions">
          <button className="pf-cover-btn"><ShareIc size={13}/> Condividi</button>
        </div>
        <div className="pf-avatar">{PROFILE.initials}</div>
        <div className="pf-cover-badges">
          {PROFILE.verified && (
            <span className="pf-cover-badge violet"><VerifIc size={11}/> Verificato</span>
          )}
          {PROFILE.active && (
            <span className="pf-cover-badge green"><BoltIc size={11}/> Attivo</span>
          )}
        </div>
      </div>

      <div className="pf-hero-info">
        <div className="pf-name-row">
          <h1 className="pf-name">{PROFILE.name}</h1>
          {PROFILE.verified && <span className="pf-verified-badge"><VerifIc size={11}/> Verificato</span>}
          <span className="pf-availability open">Aperto a collaborazioni</span>
        </div>
        <div className="pf-meta-row">
          <span className="item"><span className="icon"><PinIc size={13}/></span> {PROFILE.location}</span>
          <span className="item"><span className="icon"><CalIc size={13}/></span> Su Sonara da {PROFILE.joined}</span>
          <span className="item"><span className="icon"><UsersIc size={13}/></span> <strong>{PROFILE.followers.toLocaleString("it-IT")}</strong> follower</span>
          <span className="item"><StarIc size={12}/> <strong>{PROFILE.rating}</strong> <span style={{ opacity: 0.7 }}>({PROFILE.ratingCount} recensioni)</span></span>
        </div>
        <p className="pf-bio">{PROFILE.bio}</p>

        <div className="pf-quick-facts">
          <div className="pf-fact">
            <span className="l">Generi</span>
            <span className="v">{PROFILE.genres.length} attivi</span>
          </div>
          <div className="pf-fact">
            <span className="l">Tracce showcase</span>
            <span className="v">{PROFILE.tracks.length} / 6</span>
          </div>
          <div className="pf-fact">
            <span className="l">Collaborazioni</span>
            <span className="v">{PROFILE.completed} completate</span>
          </div>
          <div className="pf-fact">
            <span className="l">Su Sonara</span>
            <span className="v">{PROFILE.experience}</span>
          </div>
        </div>

        <div className="pf-tags">
          {PROFILE.genres.map(g => <span key={g} className="pf-tag primary">{g}</span>)}
        </div>
        <div className="pf-cta-row">
          <button className="pf-cta primary"><MsgIc size={13}/> Manda messaggio</button>
          <button className="pf-cta secondary"><HeartIc size={13}/> Segui</button>
          <button className="pf-cta secondary"><ShareIc size={13}/> Condividi</button>
        </div>
      </div>

      <div className="pf-grid">
        <div className="pf-col">
          <section className="pf-panel">
            <header className="pf-panel-head">
              <div className="pf-panel-title">
                Showcase tracks
                <span className="count">{PROFILE.tracks.length} / 6</span>
              </div>
            </header>
            <div className="pf-tracks">
              {PROFILE.tracks.map(t => (
                <div className="pf-track" key={t.id}>
                  <div className="pf-track-art">
                    <div className={`grad ${t.grad}`}/>
                    <button className="pf-track-play"><PlayIc size={11}/></button>
                  </div>
                  <div className="pf-track-info">
                    <div className="pf-track-name">{t.title}</div>
                    <div className="pf-track-meta">
                      <span>{t.duration}</span><span className="sep">·</span>
                      <span>{t.uploaded}</span>
                    </div>
                  </div>
                  <div className="pf-track-plays">
                    <PlayIc size={10}/>
                    {t.plays}
                  </div>
                  <div className="pf-track-actions">
                    <button className="pf-track-icon-btn" title="Salva"><HeartIc size={14}/></button>
                    <button className="pf-track-icon-btn"><DotsIc size={14}/></button>
                  </div>
                </div>
              ))}
            </div>
          </section>

          <section className="pf-panel">
            <header className="pf-panel-head">
              <div className="pf-panel-title">Cosa cerco</div>
            </header>
            <div style={{ padding: "20px 22px", display: "flex", flexWrap: "wrap", gap: 8 }}>
              {PROFILE.lookingFor.map(t => <span key={t} className="pf-tag">{t}</span>)}
            </div>
          </section>
        </div>

        <div className="pf-col">
          <section className="pf-panel">
            <header className="pf-panel-head">
              <div className="pf-panel-title">Stats profilo</div>
              <span className="pf-panel-head-meta">Ultimi 30 giorni</span>
            </header>
            <div className="pf-stats-grid">
              <div className="pf-stat">
                <div className="pf-stat-row1"><span className="ic"><EyeIc size={12}/></span> Visite</div>
                <div className="pf-stat-v">2.4k</div>
                <div className="pf-stat-d pos">+18% vs prec.</div>
              </div>
              <div className="pf-stat">
                <div className="pf-stat-row1"><span className="ic"><PlayIc size={12}/></span> Ascolti</div>
                <div className="pf-stat-v">29.5k</div>
                <div className="pf-stat-d pos">+24%</div>
              </div>
              <div className="pf-stat">
                <div className="pf-stat-row1"><span className="ic"><HeartIc size={12}/></span> Salvataggi</div>
                <div className="pf-stat-v">183</div>
                <div className="pf-stat-d pos">+9%</div>
              </div>
              <div className="pf-stat">
                <div className="pf-stat-row1"><span className="ic"><UsersIc size={12}/></span> Nuovi follower</div>
                <div className="pf-stat-v">+47</div>
                <div className="pf-stat-d">su 1.248 totali</div>
              </div>
            </div>
          </section>

          <section className="pf-panel pa-badges-card">
            <header className="pf-panel-head">
              <div className="pf-panel-title">Badge profilo</div>
            </header>
            <div className="pa-badge-list">
              <div className="pa-badge-row earned">
                <span className="pa-badge-ic verified"><VerifIc size={14}/></span>
                <div className="pa-badge-meta">
                  <div className="t">Verificato</div>
                  <div className="s">Identità confermata</div>
                </div>
                <span className="pa-badge-status">Attivo</span>
              </div>
              <div className="pa-badge-row earned">
                <span className="pa-badge-ic green"><BoltIc size={14}/></span>
                <div className="pa-badge-meta">
                  <div className="t">Artista attivo</div>
                  <div className="s">Login + interazione ultimi 30gg</div>
                </div>
                <span className="pa-badge-status">Attivo</span>
              </div>
              <div className="pa-badge-row">
                <span className="pa-badge-ic locked"><MusicIc size={14}/></span>
                <div className="pa-badge-meta">
                  <div className="t">Top Performer</div>
                  <div className="s">≥10 collab completate, ≥4.5★</div>
                </div>
                <span className="pa-badge-status locked">{PROFILE.completed}/10</span>
              </div>
            </div>
          </section>

          <section className="pf-panel pa-social-card">
            <header className="pf-panel-head">
              <div className="pf-panel-title">Link social</div>
            </header>
            <div className="pa-social-list">
              <a className="pa-social-row" href="#" onClick={(e) => e.preventDefault()}>
                <span className="pa-social-ic sp">SP</span>
                <div className="pa-social-meta">
                  <div className="t">Spotify</div>
                  <div className="s">{PROFILE.socials.spotify}</div>
                </div>
              </a>
              <a className="pa-social-row" href="#" onClick={(e) => e.preventDefault()}>
                <span className="pa-social-ic ig">IG</span>
                <div className="pa-social-meta">
                  <div className="t">Instagram</div>
                  <div className="s">{PROFILE.socials.instagram}</div>
                </div>
              </a>
              <a className="pa-social-row" href="#" onClick={(e) => e.preventDefault()}>
                <span className="pa-social-ic sc">SC</span>
                <div className="pa-social-meta">
                  <div className="t">SoundCloud</div>
                  <div className="s">{PROFILE.socials.soundcloud}</div>
                </div>
              </a>
            </div>
          </section>

          <section className="pf-panel">
            <header className="pf-panel-head">
              <div className="pf-panel-title">Condividi profilo</div>
            </header>
            <ShareBlock/>
          </section>
        </div>
      </div>
    </>
  );
}

function ShareBlock() {
  const [copied, setCopied] = React.useState(false);
  const url = `sonara.it/${PROFILE.handle.replace("@", "")}`;
  return (
    <div className="pf-share">
      <div className="pf-share-url">
        <span className="pf-share-url-text">{url}</span>
        <button className={`pf-share-url-copy ${copied ? "copied" : ""}`} onClick={() => { setCopied(true); setTimeout(() => setCopied(false), 1500); }}>
          {copied ? <><CheckIc size={13}/> Copiato</> : <><CopyIc size={13}/> Copia</>}
        </button>
      </div>
      <div className="pf-share-grid">
        <button className="pf-share-btn">Condividi su WhatsApp</button>
        <button className="pf-share-btn">Condividi su Instagram</button>
      </div>
      <div className="pf-qr">
        <div className="pf-qr-img"/>
        <div className="pf-qr-label">Scansiona o stampa per locandine</div>
      </div>
    </div>
  );
}

function EditView() {
  const [privacy, setPrivacy] = React.useState(PROFILE.privacy);
  const [coverUrl, setCoverUrl] = React.useState(null);
  const [avatarUrl, setAvatarUrl] = React.useState(null);
  const coverRef = React.useRef(null);
  const avatarRef = React.useRef(null);

  const onCover = (e) => {
    const f = e.target.files?.[0];
    if (f) setCoverUrl(URL.createObjectURL(f));
  };
  const onAvatar = (e) => {
    const f = e.target.files?.[0];
    if (f) setAvatarUrl(URL.createObjectURL(f));
  };

  return (
    <div className="pf-grid">
      <div className="pf-col">
        <section className="pf-panel">
          <header className="pf-panel-head">
            <div className="pf-panel-title">Foto & copertina</div>
          </header>
          <div className="pf-media">
            <div className="pf-media-cover-wrap">
              <div className="pf-media-cover" style={coverUrl ? { backgroundImage: `url(${coverUrl})`, backgroundSize: "cover", backgroundPosition: "center" } : null}/>
              <div className="pf-media-cover-overlay">
                <button className="pf-action-btn primary" onClick={() => coverRef.current?.click()}>
                  <EditIc size={13}/> Cambia copertina
                </button>
                {coverUrl && (
                  <button className="pf-action-btn" onClick={() => setCoverUrl(null)}>Rimuovi</button>
                )}
                <input ref={coverRef} type="file" accept="image/*" hidden onChange={onCover}/>
              </div>
              <div className="pf-media-avatar-slot">
                <div className="pf-media-avatar" style={avatarUrl ? { backgroundImage: `url(${avatarUrl})`, backgroundSize: "cover", backgroundPosition: "center" } : null}>
                  {!avatarUrl && PROFILE.initials}
                </div>
                <button className="pf-media-av-edit" onClick={() => avatarRef.current?.click()} title="Cambia foto profilo">
                  <EditIc size={14}/>
                </button>
                <input ref={avatarRef} type="file" accept="image/*" hidden onChange={onAvatar}/>
              </div>
            </div>
            <div className="pf-media-tips">
              <div className="tip">
                <strong>Copertina</strong>
                <span>JPG o PNG, almeno 1500 × 500 px. Max 5 MB.</span>
              </div>
              <div className="tip">
                <strong>Foto profilo</strong>
                <span>Quadrata, almeno 400 × 400 px. Max 2 MB.</span>
              </div>
            </div>
          </div>
        </section>

        <section className="pf-panel">
          <header className="pf-panel-head">
            <div className="pf-panel-title">Info profilo</div>
          </header>
          <div className="pf-form">
            <div className="pf-form-row">
              <label className="pf-label">Nome d'arte <span className="hint">come appare in alto</span></label>
              <input className="pf-input" defaultValue={PROFILE.name}/>
            </div>
            <div className="pf-form-row two">
              <div className="pf-form-row">
                <label className="pf-label">Handle</label>
                <input className="pf-input" defaultValue={PROFILE.handle}/>
              </div>
              <div className="pf-form-row">
                <label className="pf-label">Città</label>
                <input className="pf-input" defaultValue={PROFILE.location}/>
              </div>
            </div>
            <div className="pf-form-row">
              <label className="pf-label">Bio <span className="hint">320 caratteri max</span></label>
              <textarea className="pf-textarea" defaultValue={PROFILE.bio}/>
            </div>
            <div className="pf-form-row">
              <label className="pf-label">Generi</label>
              <div className="pf-chip-input">
                {PROFILE.genres.map(g => (
                  <span key={g} className="pf-chip">
                    {g}
                    <button className="x">×</button>
                  </span>
                ))}
                <button className="pf-chip-add">+ Aggiungi genere</button>
              </div>
            </div>
            <div className="pf-form-row">
              <label className="pf-label">Cosa cerco</label>
              <div className="pf-chip-input">
                {PROFILE.lookingFor.map(g => (
                  <span key={g} className="pf-chip">
                    {g}
                    <button className="x">×</button>
                  </span>
                ))}
                <button className="pf-chip-add">+ Aggiungi tag</button>
              </div>
            </div>
          </div>
        </section>

        <section className="pf-panel">
          <header className="pf-panel-head">
            <div className="pf-panel-title">
              Showcase tracks
              <span className="count">{PROFILE.tracks.length} / 6</span>
            </div>
          </header>
          <div className="pf-tracks">
            {PROFILE.tracks.map(t => (
              <div className="pf-track" key={t.id}>
                <div className="pf-track-art">
                  <div className={`grad ${t.grad}`}/>
                  <button className="pf-track-play"><PlayIc size={11}/></button>
                </div>
                <div className="pf-track-info">
                  <div className="pf-track-name">{t.title}</div>
                  <div className="pf-track-meta">
                    <span>{t.duration}</span><span className="sep">·</span>
                    <span>{t.plays} ascolti</span><span className="sep">·</span>
                    <span>{t.uploaded}</span>
                  </div>
                </div>
                <div className="pf-track-plays" style={{ color: "var(--muted-foreground)" }}>Ordina</div>
                <div className="pf-track-actions">
                  <button className="pf-track-icon-btn" title="Modifica"><EditIc size={13}/></button>
                  <button className="pf-track-icon-btn"><DotsIc size={14}/></button>
                </div>
              </div>
            ))}
          </div>
          {PROFILE.tracks.length < 6 && (
            <button className="pf-track-add">
              <PlusIc size={14}/>
              Carica nuova traccia ({6 - PROFILE.tracks.length} slot disponibili)
            </button>
          )}
        </section>

        <section className="pf-panel">
          <header className="pf-panel-head">
            <div className="pf-panel-title">Link social</div>
          </header>
          <div className="pf-form">
            <div className="pf-form-row two">
              <div className="pf-form-row">
                <label className="pf-label">Spotify</label>
                <input className="pf-input" defaultValue={PROFILE.socials.spotify} placeholder="username Spotify"/>
              </div>
              <div className="pf-form-row">
                <label className="pf-label">Instagram</label>
                <input className="pf-input" defaultValue={PROFILE.socials.instagram} placeholder="@username"/>
              </div>
            </div>
            <div className="pf-form-row">
              <label className="pf-label">SoundCloud</label>
              <input className="pf-input" defaultValue={PROFILE.socials.soundcloud} placeholder="username SoundCloud"/>
            </div>
          </div>
        </section>
      </div>

      <div className="pf-col">
        <section className="pf-panel">
          <header className="pf-panel-head">
            <div className="pf-panel-title">Privacy & visibilità</div>
          </header>
          <div className="pf-privacy">
            <div className="meta">
              <div className="t">
                Profilo pubblico
                <span className={`pill ${privacy ? "on" : "off"}`}>{privacy ? "On" : "Off"}</span>
              </div>
              <div className="s">{privacy
                ? "Il tuo profilo appare in ricerche, suggerimenti e directory. Producer possono trovarti e contattarti."
                : "Profilo nascosto. Visibile solo ai producer con cui hai già una chat o un progetto aperto."}
              </div>
            </div>
            <button className={`pf-switch ${privacy ? "on" : ""}`} onClick={() => setPrivacy(!privacy)}/>
          </div>
        </section>

        <section className="pf-panel">
          <header className="pf-panel-head">
            <div className="pf-panel-title">Verifica account</div>
          </header>
          <div style={{ padding: 22, display: "flex", flexDirection: "column", gap: 14 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, color: "var(--violet-bright,#7b55d0)", fontWeight: 600, fontSize: 14 }}>
              <VerifIc size={16}/> Sei verificato
            </div>
            <p style={{ margin: 0, fontSize: 13, color: "var(--muted-foreground)", lineHeight: 1.5 }}>
              Account verificato il 12 marzo 2025. Il badge ti dà più visibilità in directory e accesso a richieste premium.
            </p>
          </div>
        </section>

        <section className="pf-panel">
          <header className="pf-panel-head">
            <div className="pf-panel-title">Condividi profilo</div>
          </header>
          <ShareBlock/>
        </section>
      </div>
    </div>
  );
}

function ProfiloPage() {
  const [mode, setMode] = React.useState("preview");

  return (
    <main className="page" data-screen-label="Profilo pubblico">
      <div className="pf-mode-bar">
        <div className="pf-mode-toggle">
          <button className={`pf-mode-btn ${mode === "preview" ? "active" : ""}`} onClick={() => setMode("preview")}>
            <EyeIc size={13}/> Anteprima
          </button>
          <button className={`pf-mode-btn ${mode === "edit" ? "active" : ""}`} onClick={() => setMode("edit")}>
            <EditIc size={13}/> Modifica
          </button>
        </div>
        <div className="pf-mode-actions">
          {mode === "edit" ? (
            <>
              <button className="pf-action-btn">Annulla</button>
              <button className="pf-action-btn primary"><CheckIc size={13}/> Salva modifiche</button>
            </>
          ) : (
            <>
              <button className="pf-action-btn"><ShareIc size={13}/> Condividi</button>
              <button className="pf-action-btn primary" onClick={() => setMode("edit")}><EditIc size={13}/> Modifica profilo</button>
            </>
          )}
        </div>
      </div>

      {mode === "preview" ? <PublicView/> : <EditView/>}
    </main>
  );
}

window.ProfiloPage = ProfiloPage;
