// Onboarding/Welcome + PDF song-detail (convert affordance). Reuses NT theme.

const PT2 = window.NT;
const PR = window.ET_R || 12;

// ============================================================
// ONBOARDING / WELCOME
// ============================================================
const SOURCES = [
  { name:"ChordPro",      ext:".cho · .pro · .chopro" },
  { name:"Songbook Pro",  ext:".spb" },
  { name:"OnSong",        ext:".onsong" },
  { name:"Plain text",    ext:".txt" },
  { name:"PDF chart",     ext:".pdf" },
];

function Onboarding() {
  const Status = window.IPadStatus;
  return (
    <div style={{ width:"100%", height:"100%", background:PT2.bg, color:PT2.ink, display:"flex", flexDirection:"column", overflow:"hidden", fontFamily:PT2.fontUI, position:"relative" }}>
      <Status T={PT2} dark/>
      <header style={{ flexShrink:0, padding:"14px 36px 16px", display:"flex", alignItems:"center", justifyContent:"space-between", borderBottom:`1px solid ${PT2.lineStrong}` }}>
        <div style={{ display:"flex", alignItems:"center", gap:12 }}>
          {window.SBM_LOGOS && <window.SBM_LOGOS.Glyph size={28} fg={PT2.ink} accent={PT2.chord} strokeWidth={26} stringWidth={6}/>}
          <span style={{ fontFamily:PT2.fontDisplay, fontStyle:"italic", fontSize:22, whiteSpace:"nowrap" }}>Songbook Master</span>
        </div>
        <span style={{ fontFamily:PT2.fontUI, fontSize:11, fontWeight:800, letterSpacing:"0.26em", textTransform:"uppercase", color:PT2.inkMuted }}>Welcome</span>
      </header>

      <div style={{ flex:1, overflowY:"auto", padding:"40px 44px 24px" }}>
        <div style={{ fontFamily:PT2.fontUI, fontSize:11, fontWeight:800, letterSpacing:"0.28em", textTransform:"uppercase", color:PT2.chord, marginBottom:16 }}>Get Started</div>
        <div style={{ margin:0, fontFamily:PT2.fontDisplay, fontWeight:400, fontSize:62, lineHeight:0.96, letterSpacing:"-0.02em", maxWidth:560 }}>
          Bring your <span style={{ fontStyle:"italic" }}>whole</span> songbook across.
        </div>
        <p style={{ margin:"20px 0 0", maxWidth:560, fontFamily:PT2.fontUI, fontSize:16, lineHeight:1.6, color:PT2.inkSoft }}>
          Drop in files from Songbook Pro, OnSong, ChordPro and PDF charts. Original chord positions, sections and formatting all stay intact — exactly the way you wrote them.
        </p>

        <div style={{ fontFamily:PT2.fontUI, fontSize:11, fontWeight:800, letterSpacing:"0.26em", textTransform:"uppercase", color:PT2.inkMuted, margin:"40px 0 8px" }}>Supported sources</div>
        <div>
          {SOURCES.map((s,i)=>(
            <div key={s.name} style={{ display:"flex", alignItems:"center", gap:16, padding:"17px 0", borderTop: i===0 ? "none" : `1px solid ${PT2.line}` }}>
              <span style={{ flex:1, fontFamily:PT2.fontDisplay, fontSize:26 }}>{s.name}</span>
              <span style={{ fontFamily:PT2.fontMono, fontSize:13, color:PT2.chord, letterSpacing:"0.02em" }}>{s.ext}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ flexShrink:0, padding:"18px 44px 26px", borderTop:`1px solid ${PT2.lineStrong}`, background:PT2.bgRaise, display:"flex", flexDirection:"column", gap:12 }}>
        <button style={{ ...obBtn, background:PT2.paper, color:"#1A1714", border:"none" }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1A1714" strokeWidth="2.4" strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          Get Started
        </button>
        <button style={{ ...obBtn, background:"transparent", color:PT2.inkSoft, border:`1px solid ${PT2.lineStrong}` }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 5a2 2 0 0 1 2-2h7v18H6a2 2 0 0 1-2-2V5z"/><path d="M13 3h5a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-5"/></svg>
          Sample Songbook
        </button>
      </div>
    </div>
  );
}
const obBtn = { display:"flex", alignItems:"center", justifyContent:"center", gap:10, padding:"16px", borderRadius:PR, fontFamily:PT2.fontUI, fontSize:13, fontWeight:800, letterSpacing:"0.16em", textTransform:"uppercase", cursor:"pointer", width:"100%" };

// ============================================================
// PDF SONG DETAIL — convert affordance
// ============================================================
const LT = { pageBg:"#FBFAF5", ink:"#1A1814", soft:"#6B6557", chord:"#B5651D", line:"rgba(26,24,20,0.12)" };
const STRUCT = [
  { l:"Intro·4×", c:"#C9A227" }, { l:"V1", c:"#3A7A9A" }, { l:"PC1", c:"#B58A2A" },
  { l:"Int·4×", c:"#C0533F" }, { l:"C1", c:"#C44D8A" }, { l:"R1·6×", c:"#3F9A5D" },
  { l:"INS1·8×", c:"#C03A3A" }, { l:"Int·2×", c:"#C0533F" }, { l:"C2", c:"#C44D8A" },
  { l:"O·2×", c:"#3F9A5D" }, { l:"END", c:"#6B6557" },
];

function PageLine({ pairs, size = 12 }) {
  return (
    <div style={{ display:"flex", alignItems:"flex-end", fontFamily:PT2.fontMono, fontSize:size, lineHeight:1.3, whiteSpace:"pre", marginBottom:2 }}>
      {pairs.map((p,i)=>{
        const minW = p.c ? p.c.length + 1 : 0;
        const text = p.l || " ";
        const padded = text.length < minW ? text + " ".repeat(minW - text.length) : text;
        return (
          <div key={i} style={{ display:"flex", flexDirection:"column" }}>
            {p.c ? <span style={{ color:LT.chord, fontWeight:700, fontSize:size*0.92 }}>{p.c}</span> : <span style={{ height:size*0.92*1.3 }}>&nbsp;</span>}
            <span style={{ color:LT.ink }}>{padded}</span>
          </div>
        );
      })}
    </div>
  );
}

function PageSection({ label, color, lines }) {
  return (
    <div style={{ marginBottom:14 }}>
      <div style={{ display:"flex", alignItems:"center", gap:7, marginBottom:5 }}>
        <span style={{ width:3, height:13, background:color, borderRadius:2 }}/>
        <span style={{ fontFamily:PT2.fontUI, fontSize:9.5, fontWeight:800, letterSpacing:"0.14em", textTransform:"uppercase", color:LT.ink }}>{label}</span>
      </div>
      {lines.map((ln,i)=><PageLine key={i} pairs={ln}/>)}
    </div>
  );
}

function PdfSongDetail() {
  const Status = window.IPadStatus;
  const subTab = (label, active) => (
    <span style={{ fontFamily:PT2.fontUI, fontSize:12.5, fontWeight:800, letterSpacing:"0.16em", textTransform:"uppercase",
      color: active ? PT2.bg : PT2.inkSoft, background: active ? PT2.accent : "transparent",
      border: active ? "none" : `1px solid ${PT2.lineStrong}`, padding:"9px 15px", borderRadius:PR,
      display:"inline-flex", alignItems:"center", gap:8 }}>{label}</span>
  );
  return (
    <div style={{ width:"100%", height:"100%", background:PT2.bg, color:PT2.ink, display:"flex", flexDirection:"column", overflow:"hidden", fontFamily:PT2.fontUI, position:"relative" }}>
      <Status T={PT2} dark/>

      {/* top bar */}
      <header style={{ flexShrink:0, padding:"12px 28px", borderBottom:`1px solid ${PT2.lineStrong}`, display:"flex", alignItems:"center", gap:14 }}>
        <span style={{ fontFamily:PT2.fontUI, fontSize:12.5, fontWeight:800, letterSpacing:"0.16em", textTransform:"uppercase", color:PT2.inkSoft, display:"inline-flex", alignItems:"center", gap:7 }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M15 6l-6 6 6 6"/></svg>Library
        </span>
        <div style={{ flex:1 }}/>
        <span style={{ fontFamily:PT2.fontMono, fontSize:11, fontWeight:700, letterSpacing:"0.1em", color:PT2.teal, background:PT2.tealBg, padding:"7px 12px", borderRadius:PR }}>PDF · 3 PAGES</span>
        {subTab("Stage")}
        {subTab("Convert", true)}
      </header>

      {/* compact song header */}
      <div style={{ flexShrink:0, padding:"20px 28px 18px", borderBottom:`1px solid ${PT2.line}` }}>
        <div style={{ fontFamily:PT2.fontUI, fontSize:10.5, fontWeight:800, letterSpacing:"0.26em", textTransform:"uppercase", color:PT2.inkMuted, marginBottom:8 }}>Anonymous · Maverick City Music</div>
        <div style={{ margin:0, fontFamily:PT2.fontDisplay, fontWeight:400, fontSize:48, lineHeight:0.92 }}>i thank god</div>
      </div>

      {/* PDF page area */}
      <div style={{ flex:1, overflowY:"auto", padding:"26px 28px 30px", display:"flex", justifyContent:"center" }}>
        <div style={{ width:"100%", maxWidth:560, background:LT.pageBg, borderRadius:10, boxShadow:"0 24px 60px rgba(0,0,0,0.5)", padding:"30px 32px", color:LT.ink }}>
          <div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom:2 }}>
            <span style={{ fontFamily:PT2.fontUI, fontSize:9.5, color:LT.soft }}>worshiponline.com</span>
            <span style={{ fontFamily:PT2.fontUI, fontSize:9.5, color:LT.soft }}>Page 1 of 3</span>
          </div>
          <h2 style={{ margin:"4px 0 2px", fontFamily:PT2.fontDisplay, fontSize:30, color:LT.ink }}>I Thank God</h2>
          <div style={{ fontFamily:PT2.fontUI, fontSize:11, color:LT.soft }}>Maverick City Music | Move Your Heart</div>
          <div style={{ fontFamily:PT2.fontMono, fontSize:11, color:LT.ink, marginTop:6, letterSpacing:"0.04em" }}>KEY C    BPM 130    TIME SIG 4/4</div>

          <div style={{ fontFamily:PT2.fontUI, fontSize:9, fontWeight:800, letterSpacing:"0.18em", textTransform:"uppercase", color:LT.soft, margin:"18px 0 8px" }}>Song Structure</div>
          <div style={{ display:"flex", flexWrap:"wrap", gap:6, marginBottom:18 }}>
            {STRUCT.map((p,i)=>(
              <span key={i} style={{ fontFamily:PT2.fontMono, fontSize:9.5, fontWeight:700, color:p.c, border:`1.5px solid ${p.c}`, borderRadius:999, padding:"3px 9px" }}>{p.l}</span>
            ))}
          </div>

          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:24, borderTop:`1px solid ${LT.line}`, paddingTop:16 }}>
            <div>
              <PageSection label="Verse 1" color="#3A7A9A" lines={[
                [{c:"C",l:"Wandering into the night"}],
                [{c:"C",l:"Wanting a place to "},{c:"F",l:"hide"}],
                [{c:"C",l:"This weary soul, this bag of bones"}],
              ]}/>
              <PageSection label="Pre Chorus 1" color="#B58A2A" lines={[
                [{c:"Am",l:"And just when I ran out of "},{c:"F",l:"road"}],
                [{c:"G",l:"I met a man I didn't "},{c:"C/E",l:"know"}],
                [{c:"F",l:"And He told me I was not alone"}],
              ]}/>
            </div>
            <div>
              <PageSection label="Chorus 1" color="#C44D8A" lines={[
                [{c:"C",l:"He picked me up "},{c:"Dm",l:"turned me round"}],
                [{c:"C/E",l:"Placed my feet on solid "},{c:"F",l:"ground"}],
                [{c:"Am",l:"I thank the Master, "},{c:"F",l:"thank God"}],
              ]}/>
              <PageSection label="Interlude · 2×" color="#C0533F" lines={[
                [{c:"C",l:""},{c:"Csus4",l:"   "},{c:"C",l:"   "},{c:"Csus4",l:""}],
              ]}/>
            </div>
          </div>
        </div>
      </div>

      {/* convert popover anchored top-right */}
      <div style={{ position:"absolute", top:112, right:28, width:340, background:PT2.bgRaise, border:`1px solid ${PT2.lineStrong}`, borderRadius:16, boxShadow:"0 24px 60px rgba(0,0,0,0.6)", overflow:"hidden", zIndex:6 }}>
        <div style={{ padding:"14px 18px 10px", fontFamily:PT2.fontUI, fontSize:10.5, fontWeight:800, letterSpacing:"0.22em", textTransform:"uppercase", color:PT2.inkMuted, borderBottom:`1px solid ${PT2.line}` }}>Convert this PDF</div>
        {[
          { t:"Convert locally", s:"Rule-based, on-device. Always free.", ai:false },
          { t:"Convert with AI", s:"Gemini-powered. Reads complex layouts.", ai:true },
        ].map((o,i)=>(
          <div key={i} style={{ display:"flex", alignItems:"center", gap:14, padding:"15px 18px", borderTop: i>0?`1px solid ${PT2.line}`:"none" }}>
            <span style={{ width:38, height:38, borderRadius:11, flexShrink:0, display:"inline-flex", alignItems:"center", justifyContent:"center",
              background: o.ai ? "rgba(95,194,172,0.14)" : "rgba(236,231,219,0.06)", color: o.ai ? PT2.teal : PT2.inkSoft, border:`1px solid ${o.ai?"rgba(95,194,172,0.3)":PT2.lineStrong}` }}>
              {o.ai
                ? <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.6 5.4L19 9l-5.4 1.6L12 16l-1.6-5.4L5 9l5.4-1.6z"/><circle cx="18.5" cy="17.5" r="1.6"/></svg>
                : <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21l3-1 11-11-2-2L4 18z"/><path d="M14 7l3 3"/></svg>}
            </span>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontFamily:PT2.fontUI, fontSize:15, fontWeight:700, color:PT2.ink }}>{o.t}</div>
              <div style={{ fontFamily:PT2.fontUI, fontSize:12.5, color:PT2.inkMuted, marginTop:2 }}>{o.s}</div>
            </div>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={PT2.inkMuted} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 6l6 6-6 6"/></svg>
          </div>
        ))}
      </div>

      {/* page nav */}
      <div style={{ flexShrink:0, padding:"12px 28px", borderTop:`1px solid ${PT2.lineStrong}`, background:PT2.bgRaise, display:"flex", alignItems:"center", justifyContent:"center", gap:16 }}>
        <span style={pageNavBtn}>‹</span>
        <span style={{ fontFamily:PT2.fontUI, fontSize:12, fontWeight:700, letterSpacing:"0.14em", textTransform:"uppercase", color:PT2.inkSoft }}>Page 1 of 3</span>
        <span style={pageNavBtn}>›</span>
      </div>
    </div>
  );
}
const pageNavBtn = { width:40, height:40, borderRadius:PR, border:`1px solid ${PT2.lineStrong}`, display:"inline-flex", alignItems:"center", justifyContent:"center", fontFamily:PT2.fontDisplay, fontSize:22, color:PT2.ink };

Object.assign(window, { Onboarding, PdfSongDetail });