/* ============================================================
   Drafting Sheet — page bodies
   Home · Projects · Career · Writing · Reading · About · Article · ProjectDetail
   ============================================================ */
const D = window.OD;

// ---- Project BOM (Bill of Projects) ----
function ProjectBOM({ projects, showAll }){
  return (
    <div className="bom pbom">
      <div className="bom__cap">
        <span>Bill of Projects</span>
        {showAll
          ? <a href="#/projects">See all projects →</a>
          : <span>QTY · AS BUILT</span>}
      </div>
      <div className="bom__head">
        <div>Item</div><div>Project</div><div>Description</div><div>Link</div>
      </div>
      {projects.map((p)=>{
        const isExt = !!p.ext;
        const isInternal = !isExt && !p.link;
        const rowClass = "bom__row" + (isInternal?" bom__row--internal":"");
        const handleClick = isInternal
          ? ()=>{ window.location.hash="#/project/"+p.id; }
          : isExt ? ()=>{ window.open(p.link,"_blank","noopener"); } : undefined;
        return (
          <div key={p.id} className={rowClass} onClick={handleClick}>
            <div className="bom__item">{p.no}</div>
            <div className="bom__name">
              {p.title}{isExt && <span style={{opacity:.55,fontSize:"11px"}}> ↗</span>}
              {/* mobile: description stacked below title */}
              <span className="pbom__detail">{p.kicker}</span>
              <span className="pbom__meta">{p.role} · {p.org} · {p.year}</span>
            </div>
            <div className="bom__desc">
              {p.kicker}
              <br/><span style={{fontFamily:"var(--mono)",fontSize:"10px",color:"var(--dim)",letterSpacing:".06em"}}>{p.role} · {p.org} · {p.year}</span>
            </div>
            <div className="bom__link">
              {isExt
                ? <a href={p.link} target="_blank" rel="noopener" onClick={e=>e.stopPropagation()}>Open ↗</a>
                : isInternal
                  ? <span style={{color:"var(--accent)"}}>Detail →</span>
                  : <span className="bom__na">—</span>}
              {isInternal && p.repo && <><br/><a href={p.repo} target="_blank" rel="noopener" onClick={e=>e.stopPropagation()} style={{marginTop:"4px",display:"inline-block"}}>GitHub ↗</a></>}
            </div>
          </div>
        );
      })}
    </div>
  );
}

// page intro heading shared by interior pages
function PageHead({ kicker, title, sub }){
  return (
    <section className="hero hero--page">
      <div className="hero__tick"><span className="a">{kicker}</span><span>SCALE 1:1</span><span>SIZE A1</span></div>
      <h1 className="lede">{title}</h1>
      {sub && <p className="hero__sub" style={{marginTop:"24px"}}>{sub}</p>}
    </section>
  );
}

// ---- Bill of What I'm Doing Now ----
function NowBOM(){
  return (
    <div className="bom nowbom">
      <div className="bom__cap"><span>Bill of What I'm Doing Now</span><span>QTY · CURRENT</span></div>
      <div className="bom__head"><div>Item</div><div>Activity</div><div>Detail</div><div>Link</div></div>
      {D.NOW.map((r,i)=>(
        <div className="bom__row" key={r.k}>
          <div className="bom__item">{String(i+1).padStart(2,"0")}</div>
          <div className="bom__name">
            {r.k}
            {/* mobile: show detail inline below activity label */}
            <span className="nowbom__detail" dangerouslySetInnerHTML={{__html:r.v}}/>
            {r.link && <span className="nowbom__link--inline">
              <a href={r.link.href} target={r.link.ext?"_blank":undefined} rel={r.link.ext?"noopener":undefined}>{r.link.label} {r.link.ext?"↗":"→"}</a>
            </span>}
          </div>
          <div className="bom__desc" dangerouslySetInnerHTML={{__html:r.v}}/>
          <div className="bom__link">
            {r.link
              ? <a href={r.link.href} target={r.link.ext?"_blank":undefined} rel={r.link.ext?"noopener":undefined}>{r.link.label} {r.link.ext?"↗":"→"}</a>
              : <span className="bom__na">—</span>}
          </div>
        </div>
      ))}
    </div>
  );
}

// ---- Home ----
function Home(){
  return (
    <>
      <section className="hero">
        <div className="hero__tick"><span className="a">PROJ — SID.PORTFOLIO</span><span>SCALE 1:1</span><span>SIZE A1</span><span>SHEET 1</span></div>
        <h1 className="lede">Building for the <em>offline</em>, <em>physical</em>, and <em>built</em> world.</h1>
        <p className="hero__sub">Industrial engineer by training. Most recently ran a home-remodeling franchise as Owner Operator — sixty-plus bathrooms and kitchens, $0 to $500K. Currently on sabbatical: building open APIs for industrial standards, an interactive map of Gujarati literature, and the occasional essay. Before that: launching assembly lines and analytics at Ford, vehicle-imaging admin software at Cox Automotive, and a manufacturing execution system at a YC startup.</p>
      </section>

      <section className="sec">
        <SecHead no="01" title="Selected projects"/>
        <ProjectBOM projects={D.PROJECTS} showAll={true}/>
      </section>

      <section className="sec">
        <SecHead no="02" title="Recent writing" more="Go to all writing →" moreHref="#/writing"/>
        <WritingList items={D.WRITING.slice(0,1)}/>
      </section>

      <section className="sec">
        <SecHead no="03" title="Now" more="Updated weekly-ish"/>
        <NowBOM/>
      </section>
    </>
  );
}

// ---- Writing list (shared home + archive) ----
function WritingList({ items }){
  return (
    <div className="wlist">
      {items.map((a)=>(
        <a className="witem" key={a.slug} href={"#/writing/"+a.slug}>
          <div className="wmeta">{a.date} · {a.reading}</div>
          <div className="wtitle">{a.title}</div>
          <div className="wsub">{a.subtitle}</div>
          <div className="wexc">{a.excerpt}</div>
          <div className="wtags">{a.tags.map(x=><span key={x}>{x}</span>)}</div>
        </a>
      ))}
    </div>
  );
}

// ---- Projects page (frozen to pencil cards) with drafting filters ----
function ProjectsPage(){
  const [bucket,setBucket] = useState("all");
  const [tags,setTags] = useState([]);

  const tagCounts = useMemo(()=>{
    const c={};
    D.PROJECTS.forEach(p=>{ if(bucket!=="all"&&p.bucket!==bucket)return; p.tags.forEach(t=>c[t]=(c[t]||0)+1); });
    return Object.entries(c).sort((a,b)=>b[1]-a[1]||a[0].localeCompare(b[0]));
  },[bucket]);

  const filtered = useMemo(()=>D.PROJECTS.filter(p=>{
    if(bucket!=="all"&&p.bucket!==bucket)return false;
    if(tags.length&&!tags.every(t=>p.tags.includes(t)))return false;
    return true;
  }),[bucket,tags]);

  const toggle = (t)=>setTags(prev=>prev.includes(t)?prev.filter(x=>x!==t):[...prev,t]);

  return (
    <>
      <PageHead kicker="INDEX — PROJECTS" title={<>Projects, sorted <em>by tag.</em></>}
        sub="Some are work, some are personal. Filter by bucket or hashtag — everything's the same kind of thing if you squint: shipping software near physical systems."/>

      <section className="sec sec--tight">
        <div className="chips">
          {D.BUCKETS.map(b=>(
            <button key={b.id} className={"chip chip--bucket"+(bucket===b.id?" is-active":"")} onClick={()=>setBucket(b.id)}>{b.label}</button>
          ))}
        </div>
        <div className="chips">
          {tagCounts.map(([t,n])=>(
            <button key={t} className={"chip"+(tags.includes(t)?" is-active":"")} onClick={()=>toggle(t)}>{t} <span className="chip__count">{n}</span></button>
          ))}
          {tags.length>0 && <button className="chip chip--clear" onClick={()=>setTags([])}>Clear</button>}
        </div>
        <div className="lbl idx__count">
          {filtered.length} {filtered.length===1?"project":"projects"}
          {bucket!=="all"?" in "+bucket:""}{tags.length?" · tagged "+tags.join(" + "):""}
        </div>
        <ProjectBOM projects={filtered}/>
      </section>
    </>
  );
}

// ---- Career timeline ----
function CareerPage(){
  const byId = useMemo(()=>Object.fromEntries(D.PROJECTS.map(p=>[p.id,p])),[]);
  return (
    <>
      <PageHead kicker="REVISION HISTORY" title={<>Career, <em>in order.</em></>}
        sub={<>Roles I've held, in reverse-chronological order. Each role links to the specific products that shipped during it — those live on the <a href="#/projects" style={{borderBottom:"1px solid var(--line-2)"}}>Projects</a> page.</>}/>

      <section className="sec sec--tight">
        <ol className="timeline">
          {D.ROLES.map((r,i)=>{
            const linked = (r.projectIds||[]).map(id=>byId[id]).filter(Boolean);
            return (
              <li className="trow" key={r.id}>
                <div className="trow__rev">R{String(D.ROLES.length-i).padStart(2,"0")}</div>
                <div className="trow__when">
                  <div className="trow__period">{r.period}</div>
                  <div className="trow__loc">{r.location}</div>
                  <div className="trow__title">{r.title}</div>
                </div>
                <div className="trow__main">
                  <h2 className="trow__org">{r.org}{r.orgMeta && <span className="trow__orgmeta"> · {r.orgMeta}</span>}</h2>
                  <p className="trow__summary">{r.summary}</p>
                  {r.bullets.length>0 && <ul className="trow__bullets">{r.bullets.map((b,j)=><li key={j}>{b}</li>)}</ul>}
                  {linked.length>0 && (
                    <div className="trow__shipped">
                      <span className="lbl">Shipped</span>
                      <div className="trow__chips">
                        {linked.map(p=>(
                          <a key={p.id} className="shipchip" href={p.link||"#/projects"} target={p.link?"_blank":undefined} rel={p.link?"noopener":undefined}>
                            <span className="shipchip__name">{p.title}</span>
                            <span className="shipchip__kick">{p.kicker}</span>
                            <span className="shipchip__arrow">{p.link?"↗":"→"}</span>
                          </a>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              </li>
            );
          })}
        </ol>

        <div className="edu">
          <div className="edu__cap">Education</div>
          {D.EDUCATION.map(e=>(
            <div className="edu__row" key={e.id}>
              <div className="edu__year">{e.year}</div>
              <div className="edu__main">
                <div className="edu__school">{e.school}</div>
                <div className="edu__degree">{e.degree} · {e.location}</div>
              </div>
            </div>
          ))}
        </div>

        <p className="career__cv"><a href="mailto:hello@siddh.it">Email for resume PDF →</a></p>
      </section>
    </>
  );
}

// ---- Writing archive ----
function WritingPage(){
  return (
    <>
      <PageHead kicker="ARCHIVE — WRITING" title={<>Writing.</>} sub="Long-form when something's worth working out on paper."/>
      <section className="sec sec--tight">
        <WritingList items={D.WRITING}/>
      </section>
    </>
  );
}

// ---- Reading shelf page ----
function ReadingPage(){
  return (
    <>
      <PageHead kicker="REF — BOOKSHELF" title={<>Reading.</>} sub="The shelf, by category. What shaped the way I think — stories first, ideas second."/>
      <section className="sec sec--tight">
        <div className="rgrid">
          {D.READING.map(c=>(
            <div className="rcol" key={c.cat}>
              <div className="rcol__h">{c.cat}</div>
              <ul className="rlist">
                {c.books.map(b=>(
                  <li className="ritem" key={b.t}>
                    <span className="rbook">{b.t}</span>
                    <span className="rauth">{b.a}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}

// ---- About ----
function AboutPage(){
  return (
    <>
      <PageHead kicker="GENERAL NOTES — ABOUT" title={<>I'm <em>Sid.</em></>}/>
      <section className="sec sec--tight">
        <div className="reader__body about__body">
          {D.ABOUT.map((b,i)=>{
            if(b.type==="lede") return <p key={i} className="lede" dangerouslySetInnerHTML={{__html:b.html}}/>;
            if(b.type==="h2") return <h2 key={i} dangerouslySetInnerHTML={{__html:b.html}}/>;
            return <p key={i} dangerouslySetInnerHTML={{__html:b.html}}/>;
          })}
        </div>
      </section>
    </>
  );
}

// ---- Article reader (Echoes) ----
function Article({ slug }){
  const article = D.WRITING.find(a=>a.slug===slug);
  const body = D.ARTICLE_BODIES[slug];
  if(!article||!body){
    return <section className="sec sec--tight"><p style={{padding:"2rem 0"}}>Not found. <a href="#/writing" style={{color:"var(--accent)"}}>Back to writing</a></p></section>;
  }
  let fn=0;
  return (
    <section className="sec sec--tight reader">
      <a className="reader__back" href="#/writing">← Writing</a>
      <div className="reader__tick lbl">{article.date} · {article.reading}</div>
      <h1 className="reader__title">{article.title}</h1>
      <p className="reader__sub">{article.subtitle}</p>
      <div className="reader__meta">
        <span>By Sid Sanghavi</span>
        {article.tags.slice(0,3).map(t=><span key={t}>{t}</span>)}
      </div>
      <div className="reader__body">
        {body.map((block,i)=>{
          if(block.type==="lede") return <p key={i} className="lede">{block.text}</p>;
          if(block.type==="h2") return <h2 key={i}>{block.text}</h2>;
          if(block.type==="ol") return <ol key={i}>{block.items.map((it,j)=><li key={j}>{it}</li>)}</ol>;
          if(block.type==="ul") return <ul key={i}>{block.items.map((it,j)=><li key={j}>{it}</li>)}</ul>;
          if(block.type==="callout") return <p key={i} className="callout">{block.text}</p>;
          if(block.note){
            fn+=1;
            return (
              <p key={i}>{block.text}
                <sup className="fnote">{fn}</sup>
                <span className="marginnote"><span className="num">{fn}.</span>{block.note.text}</span>
              </p>
            );
          }
          return <p key={i}>{block.text}</p>;
        })}
      </div>
      <div className="reader__end lbl">End</div>
      <p className="reader__sign">Thanks for reading. If this resonated, write back: <a href="mailto:hello@siddh.it" style={{color:"var(--accent)"}}>hello[at]siddh[dot]it</a>.</p>
    </section>
  );
}

// ---- Project detail page ----
function ProjectDetailPage({ id }){
  const p = D.PROJECTS.find(x=>x.id===id);
  if(!p||!p.detail){
    return <section className="sec sec--tight"><p style={{padding:"2rem 0"}}>Not found. <a href="#/projects" style={{color:"var(--accent)"}}>Back to projects</a></p></section>;
  }
  const det = p.detail;
  return (
    <section className="sec sec--tight">
      <a className="pdetail__back" href="#/projects">← Projects</a>
      <div className="pdetail__hero">
        <div className="pdetail__no">{p.no} · {p.bucket.toUpperCase()}</div>
        <h1 className="lede">{p.title}</h1>
        <p className="pdetail__kicker">{p.kicker}</p>
        <div className="pdetail__tags">{p.tags.map(t=><span key={t} className="pdetail__tag">{t}</span>)}</div>
        {(p.repo||p.link) && (
          <div className="pdetail__links">
            {p.repo && <a href={p.repo} target="_blank" rel="noopener">GitHub ↗</a>}
            {p.link && <a href={p.link} target="_blank" rel="noopener">Live site ↗</a>}
          </div>
        )}
      </div>
      <div className="pdetail">
        <div className="pdetail__body">
          {det.sections.map((s,i)=>(
            <div key={i} className="pdetail__section">
              <h2>{s.heading}</h2>
              {s.body.map((b,j)=>{
                if(b.type==="p") return <p key={j}>{b.text}</p>;
                if(b.type==="ul") return <ul key={j}>{b.items.map((it,k)=><li key={k}>{it}</li>)}</ul>;
                if(b.type==="ol") return <ol key={j}>{b.items.map((it,k)=><li key={k}>{it}</li>)}</ol>;
                return null;
              })}
            </div>
          ))}
        </div>
        <div className="pdetail__sidebar">
          <div className="pdetail__card">
            <div className="pdetail__card__cap">Project Meta</div>
            {[
              {k:"Role", v:det.meta.role},
              {k:"Org", v:det.meta.org},
              {k:"Timeline", v:det.meta.timeline},
              det.meta.team && {k:"Team", v:det.meta.team},
            ].filter(Boolean).map(r=>(
              <div key={r.k} className="pdetail__card__row">
                <div className="pdetail__card__k">{r.k}</div>
                <div className="pdetail__card__v">{r.v}</div>
              </div>
            ))}
          </div>
          {det.meta.tools && (
            <div className="pdetail__card">
              <div className="pdetail__card__cap">Tools & Stack</div>
              <div className="pdetail__card__row">
                <div className="pdetail__card__v">{det.meta.tools}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  Home, ProjectsPage, CareerPage, WritingPage, ReadingPage, AboutPage, Article, NowBOM, WritingList, PageHead,
  ProjectBOM, ProjectDetailPage,
});