/* ============================================================
   Drafting Sheet — shared shell components
   Sketches · pencil cards · masthead (+ lamp switch) · title block
   ============================================================ */
const { useState, useEffect, useMemo, useRef } = React;

// ---- nav helper ----
function go(hash){ window.location.hash = hash; window.scrollTo({top:0}); }

// ---- well-defined drafting geometry (instrument lines, not freehand) ----
function polar(cx,cy,r,deg){ const a=deg*Math.PI/180; return [cx+r*Math.cos(a), cy+r*Math.sin(a)]; }
function arcPath(cx,cy,r,a0,a1){
  const [x0,y0]=polar(cx,cy,r,a0), [x1,y1]=polar(cx,cy,r,a1);
  const large = Math.abs(a1-a0)>180?1:0, sweep = a1>a0?1:0;
  return `M ${x0.toFixed(2)} ${y0.toFixed(2)} A ${r} ${r} 0 ${large} ${sweep} ${x1.toFixed(2)} ${y1.toFixed(2)}`;
}

function Sketch({ kind }){
  const ink = { fill:"none", stroke:"var(--pencil)", strokeWidth:1.5, strokeLinecap:"round", strokeLinejoin:"round" };
  const con = { fill:"none", stroke:"var(--line-2)", strokeWidth:.7 };
  const mot = { fill:"none", stroke:"var(--accent)", strokeWidth:1, strokeDasharray:"4 3", strokeLinecap:"round" };
  const dot = { fill:"var(--pencil)" };
  const num = { fill:"var(--dim)", fontFamily:"var(--mono)", fontSize:"7px" };
  return (
    <svg viewBox="0 0 124 104" shapeRendering="geometricPrecision">
      {kind==="gujarat" && <g>
        <path d="M76 16 L90 28 L95 44 L90 64 L84 90 L79 86 L73 68 L69 55 L63 67 L58 82 L44 89 L30 84 L18 72 L12 58 L17 50 L40 47 L26 40 L14 36 L8 30 L12 20 L36 14 L54 16 Z" {...ink}/>
        <circle cx="64" cy="42" r="2.6" {...dot}/>
        <path d="M64 33v18 M55 42h18" {...con}/>
        <path d="M104 30 L104 16" {...con}/>
        <path d="M104 13 l-3 6 l3 -2 l3 2 z" {...ink}/>
      </g>}
      {kind==="modapts" && (()=>{
        const P=[18,86];
        return <g>
          {[46,56,66].map((r,i)=><path key={i} d={arcPath(P[0],P[1],r,-60,-20)} {...mot}/>)}
          <path d="M76.5 59.8 L81 64 L75.8 64.3" fill="none" stroke="var(--accent)" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M18 86 L42 64 L68 44" {...ink}/>
          <path d="M68 44 L82 37 L100 27" {...ink}/>
          <path d="M82 37 L97 40" {...ink}/>
          <path d="M68 44 L88 51" {...ink}/>
          {[[42,64],[68,44],[82,37],[100,27],[97,40],[88,51]].map((p,i)=><circle key={i} cx={p[0]} cy={p[1]} r="2.1" {...dot}/>)}
          <circle cx="18" cy="86" r="3.2" fill="none" stroke="var(--pencil)" strokeWidth="1.1"/>
          <path d="M18 79.5v13 M11.5 86h13" {...con}/>
          <text x="38.5" y="51" {...num}>1</text>
          <text x="44.5" y="42" {...num}>2</text>
          <text x="50.5" y="33" {...num}>3</text>
        </g>;
      })()}
      {kind==="waveform" && <g>
        <rect x="14" y="28" width="96" height="48" rx="3" {...ink}/>
        <path d="M22 52 L30 52 L34 40 L40 64 L46 34 L52 60 L58 44 L64 56 L70 38 L76 62 L82 46 L88 52 L102 52" {...ink}/>
        <path d="M14 86h96 M14 81v10 M110 81v10" {...con}/>
      </g>}
      {kind==="clipboard" && <g>
        <rect x="10" y="9" width="44" height="47" rx="2" {...ink}/>
        <rect x="25" y="5" width="14" height="7" rx="1.5" {...ink}/>
        <path d="M16 23 H48" {...con}/>
        <rect x="16" y="29" width="7" height="7" {...ink}/>
        <rect x="16" y="40" width="7" height="7" {...ink}/>
        <rect x="16" y="51" width="7" height="7" {...ink}/>
        <path d="M17.4 32.6 l1.8 1.8 l3.2 -3.9 M17.4 43.6 l1.8 1.8 l3.2 -3.9" fill="none" stroke="var(--accent)" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="M27 32.5 H49 M27 43.5 H49 M27 54.5 H49" {...con}/>
        <circle cx="20" cy="82" r="8" {...ink}/>
        <circle cx="104" cy="82" r="8" {...ink}/>
        <path d="M20 74 H104 M20 90 H104" {...ink}/>
        <circle cx="42" cy="82" r="2.6" {...ink}/>
        <circle cx="62" cy="82" r="2.6" {...ink}/>
        <circle cx="82" cy="82" r="2.6" {...ink}/>
        <rect x="36" y="60" width="16" height="14" {...ink}/>
        <rect x="72" y="62" width="15" height="12" {...ink}/>
        <path d="M46 52 H70" {...mot}/>
        <path d="M70 52 l-5 -2.4 M70 52 l-5 2.4" fill="none" stroke="var(--accent)" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
      </g>}
      {kind==="tunnel" && <g>
        <path d="M20 80 L20 56 Q20 32 62 32 Q104 32 104 56 L104 80" {...ink}/>
        <path d="M14 80h96" {...ink}/>
        <path d="M40 74 L46 62 L78 62 L84 74 Z" {...ink}/>
        <circle cx="50" cy="76" r="4" {...ink}/>
        <circle cx="74" cy="76" r="4" {...ink}/>
        <rect x="56" y="19" width="12" height="8" rx="1.5" {...ink}/>
        <path d="M62 27v5" {...con}/>
      </g>}
      {kind==="mic" && <g>
        <rect x="50" y="14" width="24" height="42" rx="12" {...ink}/>
        <path d="M56 24h12 M56 31h12 M56 38h12 M56 45h12" {...con}/>
        <path d="M42 40 L42 58 Q42 73 62 73 Q82 73 82 58 L82 40" {...ink}/>
        <path d="M62 73 L62 87 M48 90 H76" {...ink}/>
      </g>}
    </svg>
  );
}

function PencilFrame(){
  return (
    <svg className="pcard__frame" viewBox="0 0 400 230" preserveAspectRatio="none">
      <rect x="3" y="3" width="394" height="224" fill="none" stroke="var(--pencil)" strokeWidth="1.4"/>
      <rect x="7" y="7" width="386" height="216" fill="none" stroke="var(--line-2)" strokeWidth=".6"/>
    </svg>
  );
}

function PencilCard({ p }){
  const inner = (
    <>
      <PencilFrame/>
      <div className="pcard__top">
        <span className="pcard__no">{p.no}</span>
        <span className="pcard__year">{p.year}</span>
      </div>
      <div className="pcard__body">
        <div>
          <div className="pcard__title">{p.title}{p.ext && <span className="pcard__ext"> ↗</span>}</div>
          <div className="pcard__kick">{p.kicker}</div>
          <div className="pcard__meta"><b>{p.role}</b><br/>{p.org}</div>
          <div className="pcard__tags">{p.tags.slice(0,4).map(t=><span className="ptag" key={t}>{t}</span>)}</div>
          {p.repo && (
            <a className="pcard__repo" href={p.repo} target="_blank" rel="noopener"
               onClick={e=>e.stopPropagation()}>GitHub ↗</a>
          )}
        </div>
        <div className="pcard__sketch">
          {p.thumb
            ? <img src={p.thumb} alt={p.title} className="pcard__thumb"/>
            : <Sketch kind={p.sketch}/>}
        </div>
      </div>
    </>
  );
  return p.link
    ? <a className="pcard pcard--link" href={p.link} target="_blank" rel="noopener">{inner}</a>
    : <div className="pcard">{inner}</div>;
}

function PencilCards({ projects }){
  return (
    <div className="pgrid">
      {projects.map((p)=><PencilCard key={p.no} p={p}/>)}
    </div>
  );
}

// dimension-line link
function DimLink({ label, href="#" }){
  return (
    <a className="dim" href={href}>
      <span className="dim__t">{label}</span>
      <svg className="dim__a" viewBox="0 0 120 9" preserveAspectRatio="none" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
        <path d="M2 0.5 V8.5 M118 0.5 V8.5" vectorEffect="non-scaling-stroke"/>
        <path d="M2 4.5 H118" vectorEffect="non-scaling-stroke"/>
        <path d="M9 1.9 L2 4.5 L9 7.1" vectorEffect="non-scaling-stroke"/>
        <path d="M111 1.9 L118 4.5 L111 7.1" vectorEffect="non-scaling-stroke"/>
      </svg>
    </a>
  );
}

function Pencil(){
  return <img src="assets/pencil.png" alt="" draggable="false"/>;
}

// ---- Lamp switch: a line-art desk lamp icon, inline with the nav.
// Click toggles dark (lamp on) / light (lamp off). Lights up + glows when on. ----
function LampSwitch({ dark, onToggle }){
  return (
    <button
      type="button"
      className={"lampsw" + (dark ? " is-on" : "")}
      onClick={onToggle}
      aria-pressed={dark}
      aria-label={dark ? "Lamp on — switch to daylight" : "Switch the lamp on"}
      title={dark ? "Lamp on · click for daylight" : "Click to switch the lamp on"}
    >
      <svg className="lampicon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        {/* base */}
        <path d="M4.6 21 L11.4 21 L10.3 19.2 L5.7 19.2 Z"/>
        {/* arm */}
        <path d="M8 19.2 L6.1 12.4"/>
        <path d="M6.1 12.4 L12.6 9.7"/>
        <circle cx="6.1" cy="12.4" r=".5" fill="currentColor" stroke="none"/>
        {/* shade */}
        <path d="M10.9 6.9 L17.1 9.2 L15.7 13.2 L9.5 10.9 Z"/>
        {/* light rays — only when on */}
        <g className="lampsw__rays" stroke="var(--accent)">
          <path d="M12.4 14.4 L11.6 16.6"/>
          <path d="M14.7 15.2 L14.2 17.2"/>
          <path d="M10 13.4 L9.1 15.3"/>
        </g>
      </svg>
    </button>
  );
}

// ---- Masthead ----
function Masthead({ route, dark, onToggleDark }){
  const NavLink = ({ to, label, accent }) => {
    const active = route && (route.name === to || (to==="projects" && route.name==="project") || (to==="writing" && route.name==="article"));
    return (
      <a href={"#/"+to} className={active ? "is-active" : ""} style={accent?{color:"var(--accent)"}:undefined}>{label}</a>
    );
  };
  return (
    <header>
      <a className="brand" href="#" aria-label="Home">
        <span className="brand__no">DWG 001 · REV 02</span>
        <span className="brand__name">Siddhit Sanghavi</span>
      </a>
      <div className="masthead__right">
        <nav>
          <NavLink to="projects" label="Projects"/>
          <NavLink to="career" label="Career"/>
          <NavLink to="writing" label="Writing"/>
          <NavLink to="about" label="About"/>
          <a href="mailto:hello@siddh.it" style={{color:"var(--accent)"}}>Contact</a>
        </nav>
      </div>
      <LampSwitch dark={dark} onToggle={onToggleDark}/>
    </header>
  );
}

// ---- Title block (bottom-right) with the set square resting on its left ----
function TitleBlock({ sheetNum="1" }){
  return (
    <div className="tbwrap">
      <img className="setsquare" src="assets/setsquare.png" alt="" draggable="false"/>
      <div className="titleblock">
        <div className="tb__title">
          <span className="t">SID SANGHAVI</span>
          <span className="d">Portfolio</span>
        </div>
        <div className="tb__r tb-3">
          <div className="tb__c"><div className="tb__k">Drawn by</div><div className="tb__v">S. Sanghavi</div></div>
          <div className="tb__c"><div className="tb__k">Updated</div><div className="tb__v">Q2 2026</div></div>
          <div className="tb__c"><div className="tb__k">Rev.</div><div className="tb__v">02</div></div>
        </div>
        <div className="tb__r tb-3">
          <div className="tb__c"><div className="tb__k">Scale</div><div className="tb__v">1 : 1</div></div>
          <div className="tb__c"><div className="tb__k">Sheet</div><div className="tb__v">{sheetNum}</div></div>
          <div className="tb__c"><div className="tb__k">Status</div><div className="tb__v" style={{color:"var(--accent)"}}>Open to next</div></div>
        </div>
        <div className="tb__r tb-3">
          <div className="tb__c"><div className="tb__k">GitHub</div><div className="tb__cv"><a href="https://github.com/siddhit" target="_blank" rel="noopener">/siddhit</a></div></div>
          <div className="tb__c"><div className="tb__k">LinkedIn</div><div className="tb__cv"><a href="https://linkedin.com/in/SiddhitSanghavi" target="_blank" rel="noopener">/in/SiddhitSanghavi</a></div></div>
          <div className="tb__c"><div className="tb__k">Email</div><div className="tb__cv tb__cv--em"><a className="em" href="mailto:hello@siddh.it">hello[at]siddh[dot]it</a></div></div>
        </div>
        <div className="tb__r tb__projrow" title="Projection">
          <span className="tb__projlbl">Projection</span>
          <svg viewBox="0 0 134 56" fill="none" strokeLinejoin="round" strokeLinecap="round">
            <path d="M4 28 H130" stroke="var(--line-2)" strokeWidth=".7" strokeDasharray="9 3 2 3"/>
            <path d="M32 3 V53" stroke="var(--line-2)" strokeWidth=".7" strokeDasharray="9 3 2 3"/>
            <circle cx="32" cy="28" r="20.5" stroke="var(--ink-2)" strokeWidth="1.2"/>
            <circle cx="32" cy="28" r="10.5" stroke="var(--ink-2)" strokeWidth="1.2"/>
            <path d="M88 7 L88 49 L122 41 L122 15 Z" stroke="var(--ink-2)" strokeWidth="1.2"/>
          </svg>
        </div>
      </div>
    </div>
  );
}

// ---- Sheet chrome (frame, corners, zones, smudges, dogear, pencil) ----
function SheetChrome({ drawingBorder, paperMarks }){
  return (
    <>
      {drawingBorder && <>
        <div className="frame"></div>
        <span className="corner tl"></span><span className="corner tr"></span>
        <span className="corner bl"></span><span className="corner br"></span>
        <div className="zones"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span></div>
      </>}
      {paperMarks && <div className="penholder"><Pencil/></div>}
      <div className="smudges">
        <div className="smudge" style={{top:"150px",right:"118px",width:"130px",height:"30px",transform:"rotate(-24deg)"}}></div>
        <div className="smudge" style={{top:"45%",left:"110px",width:"96px",height:"24px",transform:"rotate(7deg)"}}></div>
        <div className="smudge smudge--e" style={{bottom:"230px",right:"32%",width:"84px",height:"22px",transform:"rotate(-10deg)"}}></div>
      </div>
      <div className="dogear"></div>
    </>
  );
}

// ---- Section header ----
function SecHead({ no, title, more, moreHref, moreOnClick }){
  return (
    <div className="sec__head">
      <div className="sec__title">{no && <span className="no">{no}</span>}{title}</div>
      {more && (moreHref
        ? <a className="sec__more" href={moreHref}>{more}</a>
        : <span className="sec__more" onClick={moreOnClick} style={moreOnClick?{cursor:"pointer"}:undefined}>{more}</span>)}
    </div>
  );
}

Object.assign(window, {
  go, Sketch, PencilFrame, PencilCard, PencilCards, DimLink, Pencil,
  LampSwitch, Masthead, TitleBlock, SheetChrome, SecHead,
});