// Project Plan page — modules, sprints, principles, roadmap
const Plan = ({ setPage }) => {
  const [tab, setTab] = React.useState('overview');
  return (
    <div className="page">
      <PlanHero/>

      {/* Sticky tab bar */}
      <div style={{position:'sticky', top:68, zIndex:40, background:'rgba(10,10,10,0.85)', backdropFilter:'blur(18px)', WebkitBackdropFilter:'blur(18px)', borderBottom:'1px solid var(--line)'}}>
        <div className="container" style={{display:'flex', gap:4, padding:'12px 0'}}>
          {[
            ['overview','Overview'],
            ['modules','Modules'],
            ['sprints','Sprints'],
            ['principles','Principles'],
            ['stack','Stack'],
          ].map(([id,l]) => (
            <button key={id} onClick={()=>setTab(id)} style={{
              padding:'8px 14px', borderRadius:8, fontSize:13,
              color: tab===id ? '#0a0a0a' : 'var(--ink-2)',
              background: tab===id ? 'var(--accent)' : 'transparent',
              fontWeight: tab===id ? 500 : 400,
              transition:'all .15s ease'
            }}>{l}</button>
          ))}
          <div style={{flex:1}}/>
          <button onClick={()=>setPage('home')} className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em',padding:'8px 12px'}}>
            ← BACK TO SITE
          </button>
        </div>
      </div>

      <div className="container" style={{padding:'56px 0 100px'}}>
        {tab === 'overview' && <PlanOverview/>}
        {tab === 'modules' && <PlanModules/>}
        {tab === 'sprints' && <PlanSprints/>}
        {tab === 'principles' && <PlanPrinciples/>}
        {tab === 'stack' && <PlanStack/>}
      </div>
    </div>
  );
};

const PlanHero = () => (
  <section style={{padding:'80px 0 40px', borderBottom:'1px solid var(--line)'}}>
    <div className="container">
      <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:24}}>
        <span className="eyebrow"><span className="dot"/>Internal · v0.4</span>
        <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>LAST UPDATED MAY 13, 2026</span>
      </div>
      <h1 style={{fontSize:'clamp(48px,7vw,96px)', lineHeight:0.95, letterSpacing:'-0.04em', fontWeight:500, marginBottom:28}}>
        SolidAtoms <span className="serif" style={{color:'var(--accent)'}}>Build</span> Plan
      </h1>
      <p style={{fontSize:'clamp(17px,1.6vw,21px)', lineHeight:1.5, color:'var(--ink-2)', maxWidth:760}}>
        The full module breakdown, sprint roadmap, and engineering principles
        for the SolidAtoms website. Living document. Updates after every retro.
      </p>

      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:0,marginTop:48,border:'1px solid var(--line)',borderRadius:'var(--radius)',overflow:'hidden'}}>
        {[
          ['Modules done', '13 of 14', '93% complete'],
          ['Sprints shipped', '13 of 14', '336 of 362 pts'],
          ['Active sprint', 'SP12', 'W44–W45 · Analytics'],
          ['Target launch', 'W45', 'Nov 2026'],
        ].map(([l,v,sub],i) => (
          <div key={l} style={{padding:'24px 28px', borderLeft: i>0 ? '1px solid var(--line)' : 'none', background:'var(--bg-2)'}}>
            <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:10}}>{l.toUpperCase()}</div>
            <div style={{fontSize:32,letterSpacing:'-0.025em',fontWeight:500,marginBottom:4}}>{v}</div>
            <div className="mono" style={{fontSize:11,color: i<2 ? 'var(--accent)' : 'var(--ink-3)',letterSpacing:'0.04em'}}>{sub.toUpperCase()}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// OVERVIEW
const PlanOverview = () => (
  <div style={{display:'grid', gridTemplateColumns:'minmax(0,2fr) 320px', gap:48, alignItems:'start'}}>
    <div>
      <h2 style={{fontSize:'clamp(28px,3.4vw,40px)',letterSpacing:'-0.03em',fontWeight:500,marginBottom:24}}>
        How we'll actually build this.
      </h2>
      <div style={{fontSize:17,lineHeight:1.65,color:'var(--ink-2)',display:'flex',flexDirection:'column',gap:18,maxWidth:680}}>
        <p>The SolidAtoms site is split into <strong style={{color:'var(--ink)'}}>fourteen modules</strong>, sequenced across <strong style={{color:'var(--ink)'}}>fourteen two-week sprints</strong>. Each module is scoped, documented, and reviewed before any code is written.</p>
        <p>We don't ship monoliths. <span style={{color:'var(--accent)'}}>Every feature is its own folder</span> — components, data, and tests — with hard limits: no file over 300 lines, no component doing more than one job, and no copy-paste duplication of logic.</p>
        <p>Progress is tracked sprint-by-sprint with velocity, burndown, and a retro after every closing Friday. New ideas don't derail the current sprint — they go into the backlog and get prioritised at the next planning session.</p>
      </div>

      <div style={{marginTop:48, padding:'28px 32px', border:'1px solid var(--line)', borderRadius:'var(--radius)', background:'var(--bg-2)'}}>
        <div className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.06em',marginBottom:16}}>● THIS WEEK · SPRINT 12 · ANALYTICS STUDIO</div>
        <h3 style={{fontSize:22,letterSpacing:'-0.02em',fontWeight:500,marginBottom:18}}>Analytics — event pipeline, dashboards, cohorts, alerts</h3>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:20}}>
          <div>
            <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:10}}>IN PROGRESS</div>
            <ul style={{listStyle:'none',display:'flex',flexDirection:'column',gap:8}}>
              {['Cohort retention heatmap', 'Funnel drop-off labels', 'Alert routing to Slack', 'Scheduled PDF reports'].map(i => (
                <li key={i} style={{display:'flex',alignItems:'center',gap:10,fontSize:14,color:'var(--ink-2)'}}>
                  <span style={{color:'var(--accent)'}}>{Icon.dot()}</span>{i}
                </li>
              ))}
            </ul>
          </div>
          <div>
            <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:10}}>DONE THIS SPRINT</div>
            <ul style={{listStyle:'none',display:'flex',flexDirection:'column',gap:8}}>
              {['Event pipeline scaffolding', 'Realtime visitor stream', 'Overview dashboard + sparklines', 'Events catalog + tracking SDK'].map(i => (
                <li key={i} style={{display:'flex',alignItems:'center',gap:10,fontSize:14,color:'var(--ink-3)',textDecoration:'line-through'}}>
                  <span style={{color:'var(--ok)'}}>{Icon.check()}</span>{i}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>

    {/* Side panel */}
    <aside style={{position:'sticky', top:140, display:'flex', flexDirection:'column', gap:16}}>
      <div className="card" style={{padding:'22px 24px'}}>
        <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:14}}>OWNERS</div>
        <div style={{display:'flex',flexDirection:'column',gap:10}}>
          {[['Hassan A.','Engineering lead'],['Sana R.','Design lead'],['Amir Q.','Backend lead']].map(([n,r]) => (
            <div key={n} style={{display:'flex',justifyContent:'space-between',alignItems:'center',fontSize:13}}>
              <span>{n}</span>
              <span style={{color:'var(--ink-3)',fontSize:12}}>{r}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="card" style={{padding:'22px 24px'}}>
        <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:14}}>RITUALS</div>
        <div style={{display:'flex',flexDirection:'column',gap:10,fontSize:13}}>
          {[['Mon 10:00','Planning'],['Daily 09:30','Standup (15m)'],['Wed 14:00','Design review'],['Fri 16:00','Demo + retro']].map(([t,r]) => (
            <div key={t} style={{display:'flex',justifyContent:'space-between'}}>
              <span className="mono" style={{color:'var(--ink-3)',fontSize:11,letterSpacing:'0.04em'}}>{t}</span>
              <span>{r}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="card" style={{padding:'22px 24px', background:'linear-gradient(135deg, rgba(212,255,58,0.06), transparent)'}}>
        <div className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.06em',marginBottom:12}}>NEW IDEAS QUEUE</div>
        <div style={{fontSize:13,color:'var(--ink-2)',lineHeight:1.5,marginBottom:14}}>
          14 items in the backlog. Prioritised at next planning.
        </div>
        <button className="btn btn-ghost" style={{padding:'7px 12px',fontSize:12,width:'100%',justifyContent:'center'}}>Open backlog →</button>
      </div>
    </aside>
  </div>
);

// MODULES
const PlanModules = () => {
  const StatusBadge = ({ s }) => {
    const map = {
      'in-progress': ['var(--accent)', '#0a0a0a', 'In progress'],
      'planned': ['var(--line-2)', 'var(--ink-2)', 'Planned'],
      'future': ['rgba(255,255,255,0.06)', 'var(--ink-3)', 'Future'],
      'done': ['var(--ok)', '#0a0a0a', 'Done'],
    };
    const [bg, c, label] = map[s] || map.planned;
    return <span style={{padding:'4px 9px', borderRadius:6, fontSize:10, fontFamily:'var(--mono)', letterSpacing:'0.04em', background:bg, color:c, textTransform:'uppercase'}}>{label}</span>;
  };
  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:32}}>
        <h2 style={{fontSize:'clamp(28px,3.4vw,40px)',letterSpacing:'-0.03em',fontWeight:500}}>Modules</h2>
        <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>14 modules · 13 shipped, 1 active</span>
      </div>

      <div style={{display:'grid',gap:1,background:'var(--line)',border:'1px solid var(--line)',borderRadius:'var(--radius)',overflow:'hidden'}}>
        {MODULES.map(m => (
          <div key={m.id} style={{padding:'24px 28px', background:'var(--bg-2)', display:'grid', gridTemplateColumns:'80px 1fr 140px 140px 60px', gap:24, alignItems:'center'}}>
            <span className="mono" style={{fontSize:12,color:'var(--ink-3)',letterSpacing:'0.06em'}}>{m.id}</span>
            <div>
              <div style={{fontSize:18,fontWeight:500,letterSpacing:'-0.01em',marginBottom:8}}>{m.name}</div>
              <div style={{display:'flex',flexWrap:'wrap',gap:6}}>
                {m.scope.map(s => <Tag key={s}>{s}</Tag>)}
              </div>
            </div>
            <span className="mono" style={{fontSize:11,color: m.priority==='P0' ? 'var(--accent)' : 'var(--ink-3)',letterSpacing:'0.06em'}}>{m.priority} priority</span>
            <StatusBadge s={m.status}/>
            <span style={{color:'var(--ink-3)',justifySelf:'end'}}>{Icon.arrow()}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

// SPRINTS
const PlanSprints = () => {
  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:32}}>
        <h2 style={{fontSize:'clamp(28px,3.4vw,40px)',letterSpacing:'-0.03em',fontWeight:500}}>Sprints</h2>
        <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>2-week cadence · 362 total points · W18 → W45</span>
      </div>

      {/* Gantt-ish timeline */}
      <div style={{border:'1px solid var(--line)',borderRadius:'var(--radius)',padding:'24px 28px',background:'var(--bg-2)',marginBottom:32,overflowX:'auto'}}>
        <div style={{minWidth:1100}}>
          <div style={{display:'grid',gridTemplateColumns:'140px repeat(28,1fr)',gap:0,marginBottom:14}}>
            <div/>
            {Array.from({length:28}, (_,i)=>(
              <div key={i} className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.04em',textAlign:'center',borderLeft: i===0 ? 'none' : '1px solid var(--line)',padding:'0 2px'}}>W{18+i}</div>
            ))}
          </div>
          {SPRINTS.map(sp => {
            const startW = parseInt(sp.weeks.split('–')[0].slice(1));
            const endW = parseInt(sp.weeks.split('–')[1].slice(1));
            const startCol = startW - 18 + 2;
            const span = endW - startW + 1;
            const colorMap = {done:'var(--ink-3)', active:'var(--accent)', next:'#7c9bff', planned:'var(--line-2)'};
            return (
              <div key={sp.id} style={{display:'grid',gridTemplateColumns:'140px repeat(28,1fr)',gap:0,alignItems:'center',padding:'8px 0',borderTop:'1px dashed var(--line)'}}>
                <div style={{paddingRight:12}}>
                  <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:2}}>{sp.id}</div>
                  <div style={{fontSize:13,fontWeight:500,letterSpacing:'-0.005em'}}>{sp.name}</div>
                </div>
                <div style={{gridColumn:`${startCol} / span ${span}`, position:'relative', height:26,borderRadius:4,background:colorMap[sp.status],opacity: sp.status==='planned' ? 0.4 : 1, display:'flex',alignItems:'center',padding:'0 10px'}}>
                  <span className="mono" style={{fontSize:10, color: sp.status==='active'||sp.status==='done' ? '#0a0a0a' : 'var(--ink)', letterSpacing:'0.04em', whiteSpace:'nowrap'}}>{sp.points}P</span>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(320px,1fr))',gap:16}}>
        {SPRINTS.map(sp => (
          <div key={sp.id} className="card" style={{padding:'22px 24px', borderColor: sp.status==='active' ? 'var(--accent)' : 'var(--line)', background: sp.status==='active' ? 'linear-gradient(135deg, rgba(212,255,58,0.05), var(--bg-2))' : 'var(--bg-2)'}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:14}}>
              <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>{sp.id} · {sp.weeks}</div>
              <span style={{padding:'3px 8px', borderRadius:6, fontSize:10, fontFamily:'var(--mono)', letterSpacing:'0.04em', textTransform:'uppercase',
                background: sp.status==='active' ? 'var(--accent)' : sp.status==='done' ? 'rgba(126,231,135,0.15)' : 'transparent',
                color: sp.status==='active' ? '#0a0a0a' : sp.status==='done' ? 'var(--ok)' : 'var(--ink-3)',
                border: sp.status==='next' || sp.status==='planned' ? '1px solid var(--line-2)' : 'none'
              }}>{sp.status}</span>
            </div>
            <h4 style={{fontSize:18,fontWeight:500,letterSpacing:'-0.01em',marginBottom:14}}>{sp.name}</h4>
            <ul style={{listStyle:'none',display:'flex',flexDirection:'column',gap:6,marginBottom:16}}>
              {sp.items.map(it => (
                <li key={it} style={{fontSize:13,color:'var(--ink-2)',display:'flex',alignItems:'center',gap:8}}>
                  <span style={{width:4,height:4,borderRadius:'50%',background:'var(--ink-3)'}}/>{it}
                </li>
              ))}
            </ul>
            <div style={{paddingTop:14,borderTop:'1px solid var(--line)',display:'flex',justifyContent:'space-between',fontSize:12}}>
              <span className="mono" style={{color:'var(--ink-3)',letterSpacing:'0.06em'}}>{sp.points} STORY POINTS</span>
              <span className="mono" style={{color: sp.status==='active' ? 'var(--accent)' : 'var(--ink-3)',letterSpacing:'0.06em'}}>{sp.items.length} STORIES</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// PRINCIPLES
const PlanPrinciples = () => (
  <div>
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:32}}>
      <h2 style={{fontSize:'clamp(28px,3.4vw,40px)',letterSpacing:'-0.03em',fontWeight:500}}>Engineering principles</h2>
      <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>5 rules we don't bend</span>
    </div>

    <div style={{display:'grid',gap:1,background:'var(--line)',border:'1px solid var(--line)',borderRadius:'var(--radius)',overflow:'hidden'}}>
      {PRINCIPLES.map(p => (
        <div key={p.n} style={{padding:'32px 36px', background:'var(--bg-2)', display:'grid', gridTemplateColumns:'120px 1fr', gap:32, alignItems:'start'}}>
          <div className="serif" style={{fontSize:64,letterSpacing:'-0.04em',color:'var(--accent)',lineHeight:1}}>{p.n}</div>
          <div>
            <h3 style={{fontSize:24,letterSpacing:'-0.02em',fontWeight:500,marginBottom:12}}>{p.t}</h3>
            <p style={{fontSize:16,color:'var(--ink-2)',lineHeight:1.55,maxWidth:680}}>{p.d}</p>
          </div>
        </div>
      ))}
    </div>

    <div style={{marginTop:48, padding:'32px 36px', border:'1px solid var(--line)', borderRadius:'var(--radius)', background:'var(--bg-2)'}}>
      <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:16}}>FOLDER CONVENTION</div>
      <pre style={{fontSize:13, fontFamily:'var(--mono)', color:'var(--ink-2)', lineHeight:1.7, overflow:'auto'}}>{`src/
  modules/
    marketing/        ← M02 marketing site
      components/     ← max 300 lines each
      data/
      hooks/
      index.tsx
    portfolio/        ← M03
    team/             ← M04
    blog/             ← M05
    tools/            ← M06
    cms/              ← M07
    payments/         ← M08
    portal/           ← M09
  shared/             ← cross-module primitives
    components/
    tokens/
    utils/
  app/                ← routing only`}</pre>
    </div>
  </div>
);

// STACK
const PlanStack = () => {
  const stack = [
    {layer:'Frontend', items:[['Next.js 15','Framework'],['React 19','UI'],['TypeScript','Type safety'],['Tailwind v4','Styling'],['Framer Motion','Animation']]},
    {layer:'Backend', items:[['Next.js Route Handlers','API'],['tRPC','Type-safe RPC'],['Drizzle ORM','Database'],['Postgres (Neon)','DB hosting'],['Upstash Redis','Cache + queue']]},
    {layer:'CMS', items:[['Payload CMS 3','Headless CMS'],['MDX','Long-form posts'],['UploadThing','Media'],['Resend','Email']]},
    {layer:'AI', items:[['Vercel AI SDK','LLM client'],['OpenAI / Anthropic','Models'],['Pinecone','Vector DB']]},
    {layer:'Payments', items:[['Stripe','Payments + Connect'],['Stripe Tax','Tax handling'],['Webhooks via Inngest','Reliable events']]},
    {layer:'Infra', items:[['Vercel','Hosting'],['Sentry','Errors'],['PostHog','Product analytics'],['GitHub Actions','CI/CD'],['Linear','Project management']]},
  ];
  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:32}}>
        <h2 style={{fontSize:'clamp(28px,3.4vw,40px)',letterSpacing:'-0.03em',fontWeight:500}}>The stack</h2>
        <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>Boring where it matters, sharp where it counts</span>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(360px,1fr))',gap:16}}>
        {stack.map(s => (
          <div key={s.layer} className="card" style={{padding:'24px 28px'}}>
            <div className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.06em',marginBottom:18}}>● {s.layer.toUpperCase()}</div>
            <div style={{display:'flex',flexDirection:'column',gap:0}}>
              {s.items.map(([n,r],i) => (
                <div key={n} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'12px 0',borderTop: i>0 ? '1px solid var(--line)' : 'none'}}>
                  <span style={{fontSize:14,fontWeight:500}}>{n}</span>
                  <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.04em'}}>{r}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

window.Plan = Plan;
