// variations.jsx — 4 distinct portfolio wireframe directions
// All share: asymmetric/editorial layout, text-only, animated typing hero,
// hover-preview project list, Skills section. Violet used as accent only.

// ──────────────────────────────────────────────────────────────
// Shared bits
// ──────────────────────────────────────────────────────────────
const TYPING_STRINGS = [
  "i build things for the web.",
  "developer · student · 16.",
  "currently: shipping side projects.",
  "ping me for freelance ↓"
];

function TypingLine({ strings = TYPING_STRINGS, size = 28, color }) {
  const [i, setI] = React.useState(0);
  const [sub, setSub] = React.useState(0);
  const [del, setDel] = React.useState(false);
  React.useEffect(() => {
    const cur = strings[i % strings.length];
    let t;
    if (!del && sub < cur.length) t = setTimeout(() => setSub(sub + 1), 55);
    else if (!del && sub === cur.length) t = setTimeout(() => setDel(true), 1400);
    else if (del && sub > 0) t = setTimeout(() => setSub(sub - 1), 30);
    else if (del && sub === 0) { setDel(false); setI(i + 1); }
    return () => clearTimeout(t);
  }, [sub, del, i, strings]);
  const cur = strings[i % strings.length].slice(0, sub);
  return (
    <span style={{fontFamily:"'JetBrains Mono', monospace", fontSize:size, color: color || 'var(--ink)'}}>
      {cur}<span className="caret" />
    </span>
  );
}

const SKILLS = [
  { cat: "languages",  items: ["JavaScript", "TypeScript", "Python", "HTML/CSS", "Lua"] },
  { cat: "frameworks", items: ["React", "Next.js", "Tailwind", "Node", "Express"] },
  { cat: "tools",      items: ["Git", "Figma", "VSCode", "Linux", "Vercel"] },
  { cat: "learning",   items: ["Rust", "Go", "ThreeJS", "Postgres"] },
];

const PROJECTS = [
  { n:"01", title:"smm panel",         year:"'26", tag:"web · node",    blurb:"smm panel for boosting social media" },
  { n:"02", title:"backlink/seo",      year:"'25", tag:"service · seo", blurb:"i sell backlink but i not accept gambling niche/porn" },
  { n:"03", title:"telegram bot",      year:"'25", tag:"bot · node",    blurb:"i can build a complex telegram bot" },
  { n:"04", title:"automation script", year:"'25", tag:"bot · python",  blurb:"i learn like puppeteer/playwright/etc for creating automation bot" },
  { n:"05", title:"portofolio",        year:"'26", tag:"web · html",    blurb:"you are here" },
];

// Small reusable project list w/ hover previews
function ProjectList({ tight = false, showPreview = true }) {
  return (
    <div>
      {PROJECTS.map(p => (
        <div className="prj-row" key={p.n} style={tight ? {padding:"10px 8px"} : null}>
          <div className="prj-num">{p.n}</div>
          <div>
            <div className="prj-title">{p.title}</div>
            <div className="prj-meta">{p.blurb}</div>
          </div>
          <div className="prj-meta mono" style={{fontSize:13}}>{p.tag}</div>
          <div className="prj-meta">{p.year} →</div>
          {showPreview && (
            <div className="prj-preview sk-img violet">
              <span>[ preview of {p.title} ]</span>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// VARIATION A — "Index Card"
// editorial left-col ID block, right-col stacked content.
// violet as annotation ink only.
// ──────────────────────────────────────────────────────────────
function VariationA() {
  return (
    <div className="wire-artboard" style={{padding:"40px 48px", background:"var(--paper)", minHeight:"100%"}}>
      {/* top meta bar */}
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:28}}>
        <div className="mono" style={{fontSize:12, color:"var(--ink-faint)"}}>PORTFOLIO / 2026 / v3</div>
        <div style={{display:"flex", gap:16}}>
          <span className="hand" style={{fontSize:20}}>work</span>
          <span className="hand" style={{fontSize:20}}>skills</span>
          <span className="hand under" style={{fontSize:20}}>contact</span>
        </div>
      </div>

      <div style={{display:"grid", gridTemplateColumns:"240px 1fr", gap:40}}>
        {/* left ID card */}
        <aside>
          <div className="sk-box" style={{padding:"18px 16px", marginBottom:18}}>
            <div className="mono" style={{fontSize:11, color:"var(--ink-faint)"}}>NAME</div>
            <div className="arch" style={{fontSize:26, lineHeight:1.1, marginBottom:10}}>Zxkys<br/>aka Rizky</div>
            <div className="mono" style={{fontSize:11, color:"var(--ink-faint)"}}>ROLE</div>
            <div className="hand" style={{fontSize:22, marginBottom:10}}>developer,<br/>student</div>
            <div className="mono" style={{fontSize:11, color:"var(--ink-faint)"}}>AGE · LOC</div>
            <div className="hand" style={{fontSize:20}}>16 · ID 🌏</div>
          </div>
          <div className="sk-dash" style={{padding:14}}>
            <div className="hand" style={{fontSize:19, marginBottom:6}}>status:</div>
            <div className="sk-pill violet">● open to freelance</div>
          </div>
          <div style={{marginTop:20, position:"relative"}}>
            <div className="scribble" style={{top:0, left:40}}>that's me ↑</div>
          </div>
        </aside>

        {/* right content */}
        <main>
          <div className="hand-h1" style={{fontSize:64, lineHeight:1, marginBottom:6}}>
            hi, i'm rizky.
          </div>
          <div style={{marginBottom:28}}>
            <TypingLine size={22} />
          </div>

          <hr className="sk-line" style={{margin:"24px 0"}}/>

          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:32, marginBottom:28}}>
            <div>
              <div className="arch under" style={{fontSize:22, marginBottom:10}}>about</div>
              <p className="hand" style={{fontSize:19, lineHeight:1.35, margin:0}}>
                sixteen. self-taught. i've been
                writing code since i was eleven
                and shipping things on the
                internet since fourteen. available
                for small web projects + tools.
              </p>
            </div>
            <div>
              <div className="arch under" style={{fontSize:22, marginBottom:10}}>what i do</div>
              <ul className="hand" style={{fontSize:19, lineHeight:1.5, margin:0, paddingLeft:20}}>
                <li>frontend web apps</li>
                <li>cli / automation tools</li>
                <li>discord + telegram bots</li>
                <li>landing pages, fast.</li>
              </ul>
            </div>
          </div>

          <div className="arch under" style={{fontSize:22, marginBottom:10}}>selected work <span className="note" style={{marginLeft:8}}>hover for a peek</span></div>
          <ProjectList />

          <div style={{marginTop:36}}>
            <div className="arch under" style={{fontSize:22, marginBottom:14}}>skills</div>
            <div style={{display:"grid", gridTemplateColumns:"repeat(2, 1fr)", gap:"14px 28px"}}>
              {SKILLS.map(s => (
                <div key={s.cat}>
                  <div className="mono" style={{fontSize:12, color:"var(--ink-faint)", marginBottom:6}}>// {s.cat}</div>
                  <div style={{display:"flex", flexWrap:"wrap", gap:6}}>
                    {s.items.map(x => <span className="sk-pill" key={x}>{x}</span>)}
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div style={{marginTop:40, display:"flex", alignItems:"center", gap:20}}>
            <span className="sk-btn violet">say hi →</span>
            <span className="hand" style={{fontSize:20, color:"var(--ink-faint)"}}>or just <span style={{textDecoration:"underline"}}>zxkysikky@gmail.com</span></span>
          </div>
        </main>
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// VARIATION B — "Margin Notes"
// narrow centered column w/ huge margins filled w/ handwritten annotations.
// feels like a journal/zine.
// ──────────────────────────────────────────────────────────────
function VariationB() {
  return (
    <div className="wire-artboard" style={{padding:"40px 60px", background:"var(--paper)", minHeight:"100%", position:"relative"}}>
      {/* margin pins */}
      <div className="scribble" style={{top:30, right:40}}>v3 — apr '26</div>
      <div className="scribble" style={{top:180, left:20, transform:"rotate(-90deg)", transformOrigin:"left top"}}>◉ PORTFOLIO</div>

      <div style={{maxWidth: 520, margin:"0 auto", position:"relative"}}>

        {/* floating margin notes */}
        <div className="note" style={{position:"absolute", left:-150, top:0, width:120, transform:"rotate(-3deg)"}}>
          ↓ start w/ a name.<br/>small, quiet.
        </div>
        <div className="note" style={{position:"absolute", right:-150, top:80, width:120, transform:"rotate(2deg)"}}>
          typing effect<br/>loops thru 4<br/>phrases →
        </div>
        <div className="note" style={{position:"absolute", left:-160, top:340, width:140, transform:"rotate(-2deg)"}}>
          hover any row<br/>to see a preview<br/>card pop out ↗
        </div>
        <div className="note" style={{position:"absolute", right:-160, top:560, width:140, transform:"rotate(3deg)"}}>
          skills = pills.<br/>grouped by<br/>category, not ranked.
        </div>

        {/* hero */}
        <div className="mono" style={{fontSize:12, color:"var(--ink-faint)", letterSpacing:1}}>ZXKYS · RIZKY</div>
        <div className="hand-h1" style={{fontSize:48, lineHeight:1.05, margin:"14px 0 10px"}}>
          a sixteen year old<br/>who writes <span className="under" style={{color:"var(--violet)"}}>code</span>.
        </div>
        <TypingLine size={18} />

        <div className="sk-wavy" style={{margin:"28px 0"}}/>

        {/* about */}
        <p className="hand" style={{fontSize:19, lineHeight:1.4, margin:"0 0 28px"}}>
          i make web apps, cli tools, and the occasional
          bot. currently in highschool, currently taking
          on freelance work. i like things that are <em>fast,
          small, and a little strange</em>.
        </p>

        {/* projects */}
        <div className="arch" style={{fontSize:20, marginBottom:4}}>— works</div>
        <div className="note" style={{marginBottom:10}}>in reverse chrono order. hover.</div>
        <ProjectList tight />

        <div className="sk-wavy" style={{margin:"28px 0"}}/>

        {/* skills */}
        <div className="arch" style={{fontSize:20, marginBottom:14}}>— skills</div>
        {SKILLS.map(s => (
          <div key={s.cat} style={{marginBottom:14}}>
            <div className="mono" style={{fontSize:11, color:"var(--ink-faint)", marginBottom:4}}>{s.cat.toUpperCase()}</div>
            <div style={{display:"flex", flexWrap:"wrap", gap:6}}>
              {s.items.map(x => <span className="sk-pill" key={x}>{x}</span>)}
            </div>
          </div>
        ))}

        <div className="sk-wavy" style={{margin:"28px 0"}}/>

        <div style={{textAlign:"center"}}>
          <div className="hand" style={{fontSize:20, marginBottom:10}}>want to work together?</div>
          <span className="sk-btn violet">zxkysikky@gmail.com</span>
        </div>

        <div className="note" style={{position:"absolute", right:-150, bottom:60, width:130, transform:"rotate(-2deg)"}}>
          ← single CTA.<br/>no form, just mail.
        </div>
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// VARIATION C — "Terminal Zine"
// a mono/code aesthetic inside the hand-drawn shell.
// editorial asymmetry: wide code-block hero, narrow sidebar info.
// ──────────────────────────────────────────────────────────────
function VariationC() {
  return (
    <div className="wire-artboard" style={{padding:"36px 44px", background:"var(--paper)", minHeight:"100%"}}>
      {/* title strip */}
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline", borderBottom:"2px solid var(--ink)", paddingBottom:10, marginBottom:24}}>
        <div className="hand-h1" style={{fontSize:34}}>zxkys<span style={{color:"var(--violet)"}}>.</span>dev</div>
        <div className="mono" style={{fontSize:13, color:"var(--ink-faint)"}}>
          [ about ] [ work ] [ skills ] [ contact ]
        </div>
      </div>

      {/* two-col asymmetric */}
      <div style={{display:"grid", gridTemplateColumns:"1.6fr 1fr", gap:30}}>
        {/* LEFT — big terminal block */}
        <div>
          <div className="sk-box" style={{padding:"16px 18px", background:"#f8f4e7"}}>
            <div className="mono" style={{fontSize:12, color:"var(--ink-faint)", marginBottom:10, display:"flex", justifyContent:"space-between"}}>
              <span>~/portfolio — zsh</span>
              <span>● ● ●</span>
            </div>
            <div className="mono" style={{fontSize:14, lineHeight:1.6}}>
              <div><span style={{color:"var(--violet)"}}>rizky@mbp</span> ~ % whoami</div>
              <div style={{marginBottom:8}}>rizky (zxkys) · 16 · developer</div>
              <div><span style={{color:"var(--violet)"}}>rizky@mbp</span> ~ % cat intro.txt</div>
              <div style={{fontSize:22, lineHeight:1.3, fontFamily:"'Architects Daughter', cursive", margin:"6px 0"}}>
                self-taught dev, five years in.<br/>
                <span className="under">building small, sharp things.</span>
              </div>
              <div><span style={{color:"var(--violet)"}}>rizky@mbp</span> ~ % tail -f status</div>
              <div><TypingLine size={14} /></div>
              <div style={{marginTop:8}}><span style={{color:"var(--violet)"}}>rizky@mbp</span> ~ % <span className="caret"/></div>
            </div>
          </div>

          <div style={{marginTop:24}}>
            <div className="mono" style={{fontSize:13, color:"var(--ink-faint)", marginBottom:6}}>// selected_work.list</div>
            <div className="arch" style={{fontSize:24, marginBottom:8}}>things i built <span className="note" style={{fontSize:15}}>(hover →)</span></div>
            <ProjectList />
          </div>
        </div>

        {/* RIGHT — narrow sidebar */}
        <aside>
          <div className="sk-dash" style={{padding:16, marginBottom:20}}>
            <div className="mono" style={{fontSize:11, color:"var(--ink-faint)", marginBottom:6}}>&gt; AVAILABILITY</div>
            <div className="hand" style={{fontSize:22, lineHeight:1.2, marginBottom:8}}>
              open for<br/>freelance.<br/>~10 hrs/wk.
            </div>
            <span className="sk-pill violet">● available may '26</span>
          </div>

          <div style={{marginBottom:20}}>
            <div className="mono" style={{fontSize:11, color:"var(--ink-faint)", marginBottom:8}}>&gt; SKILLS</div>
            {SKILLS.map(s => (
              <div key={s.cat} style={{marginBottom:12}}>
                <div className="arch" style={{fontSize:18, marginBottom:4}}>{s.cat}</div>
                <div className="mono" style={{fontSize:13, lineHeight:1.6, color:"var(--ink-soft)"}}>
                  {s.items.join(" · ")}
                </div>
                <hr className="sk-line thin" style={{margin:"8px 0"}}/>
              </div>
            ))}
          </div>

          <div className="sk-box" style={{padding:14, background:"var(--violet-wash)", borderColor:"var(--violet)"}}>
            <div className="mono" style={{fontSize:11, color:"oklch(0.35 var(--v-chroma) var(--v-hue))", marginBottom:6}}>&gt; CONTACT</div>
            <div className="arch" style={{fontSize:18, marginBottom:4}}>zxkysikky@gmail.com</div>
            <div className="hand" style={{fontSize:17, color:"var(--ink-soft)"}}>@zenith6666 on telegram</div>
          </div>
        </aside>
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// VARIATION D — "Sticker Sheet"
// playful scrapbook: content blocks taped at odd angles on a big sheet.
// more asymmetric, more annotations, same structure.
// ──────────────────────────────────────────────────────────────
function Tape({ style }) {
  return <div style={{
    position:"absolute",
    width:60, height:16,
    background:"oklch(0.88 0.04 80 / 0.7)",
    border:"1px solid rgba(0,0,0,0.15)",
    ...style
  }}/>;
}
function VariationD() {
  return (
    <div className="wire-artboard" style={{padding:"28px 40px 60px", background:"var(--paper)", minHeight:"100%", position:"relative"}}>
      {/* header */}
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:30}}>
        <div className="hand-h1" style={{fontSize:30}}>rizky's<br/>portfolio.</div>
        <div className="mono" style={{fontSize:12, color:"var(--ink-faint)", textAlign:"right"}}>
          scroll · hover · click<br/>v3 / apr 2026
        </div>
      </div>

      {/* row 1: hero + status */}
      <div style={{display:"grid", gridTemplateColumns:"1.4fr 1fr", gap:30, marginBottom:50, alignItems:"start"}}>
        <div style={{position:"relative", transform:"rotate(-1.5deg)"}}>
          <Tape style={{top:-8, left:30}} />
          <Tape style={{top:-8, right:30, transform:"rotate(8deg)"}} />
          <div className="sk-box" style={{padding:"28px 26px"}}>
            <div className="mono" style={{fontSize:12, color:"var(--ink-faint)"}}>HELLO!</div>
            <div className="hand-h1" style={{fontSize:50, lineHeight:0.95, margin:"8px 0 12px"}}>
              i'm <span style={{color:"var(--violet)"}}>rizky</span>.<br/>
              i build stuff.
            </div>
            <TypingLine size={18} />
          </div>
          <div className="scribble" style={{top:-28, right:20, transform:"rotate(6deg)"}}>16 years old btw</div>
        </div>

        <div style={{position:"relative", transform:"rotate(2deg)", marginTop:20}}>
          <Tape style={{top:-6, left:10}}/>
          <div className="sk-box" style={{padding:"14px 18px"}}>
            <div className="hand" style={{fontSize:18, marginBottom:2}}>status:</div>
            <div className="sk-pill violet">● freelance open</div>
            <hr className="sk-line thin" style={{margin:"12px 0 8px"}}/>
            <div className="mono" style={{fontSize:11, color:"var(--ink-faint)"}}>available may '26</div>
          </div>
        </div>
      </div>

      {/* row 2: about (right-aligned, tilted) */}
      <div style={{display:"flex", justifyContent:"flex-end", marginBottom:50}}>
        <div style={{position:"relative", width:360, transform:"rotate(1deg)"}}>
          <Tape style={{top:-7, left:40}} />
          <div className="sk-dash" style={{padding:"18px 20px", background:"#fffdf5"}}>
            <div className="arch under" style={{fontSize:22, marginBottom:8}}>about me</div>
            <p className="hand" style={{fontSize:18, lineHeight:1.35, margin:0}}>
              sixteen, indonesian, self-taught.
              five years of writing code for the
              love of it. now taking on small
              freelance gigs between school.
            </p>
            <div className="mono" style={{fontSize:12, color:"var(--ink-faint)", marginTop:10}}>
              stack · js / ts / react / node
            </div>
          </div>
        </div>
      </div>

      {/* row 3: work (left-aligned, big) */}
      <div style={{position:"relative", width:"88%", marginBottom:60, transform:"rotate(-0.8deg)"}}>
        <Tape style={{top:-8, left:50}} />
        <Tape style={{top:-8, right:50, transform:"rotate(-6deg)"}} />
        <div className="sk-box" style={{padding:"20px 24px"}}>
          <div style={{display:"flex", alignItems:"baseline", justifyContent:"space-between", marginBottom:6}}>
            <div className="arch under" style={{fontSize:24}}>work</div>
            <div className="note">5 selected · hover for preview</div>
          </div>
          <ProjectList />
        </div>
        <div className="scribble" style={{bottom:-32, left:60}}>my fav → #03</div>
      </div>

      {/* row 4: skills (right, tilted) */}
      <div style={{display:"flex", justifyContent:"flex-end", marginBottom:50}}>
        <div style={{position:"relative", width:400, transform:"rotate(1.5deg)"}}>
          <Tape style={{top:-8, left:40}} />
          <div className="sk-box" style={{padding:"18px 20px"}}>
            <div className="arch under" style={{fontSize:22, marginBottom:10}}>skills</div>
            {SKILLS.map(s => (
              <div key={s.cat} style={{marginBottom:10}}>
                <div className="mono" style={{fontSize:11, color:"var(--ink-faint)", marginBottom:4}}>{s.cat}</div>
                <div style={{display:"flex", flexWrap:"wrap", gap:5}}>
                  {s.items.map(x => <span className="sk-pill" key={x} style={{fontSize:15, padding:"1px 9px"}}>{x}</span>)}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* row 5: contact */}
      <div style={{display:"flex", alignItems:"center", gap:40, flexWrap:"wrap"}}>
        <div style={{position:"relative", transform:"rotate(-3deg)"}}>
          <Tape style={{top:-7, left:20}}/>
          <div className="sk-box" style={{padding:"14px 20px", background:"var(--violet-wash)", borderColor:"var(--violet)"}}>
            <div className="hand" style={{fontSize:20}}>want to say hi? →</div>
            <div className="arch" style={{fontSize:22, marginTop:4}}>zxkysikky@gmail.com</div>
          </div>
          <div className="scribble" style={{top:-28, left:30}}>(i do reply!)</div>
        </div>

        <div className="note" style={{transform:"rotate(-2deg)", maxWidth:180}}>
          p.s — all content is<br/>placeholder, swap for<br/>real copy later ✌
        </div>
      </div>
    </div>
  );
}

// export
Object.assign(window, { VariationA, VariationB, VariationC, VariationD });