// variations.jsx — 4 portfolio wireframe directions, fully responsive

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>
  );
}

function useBreakpoint() {
  const get = () => {
    const w = typeof window !== 'undefined' ? window.innerWidth : 1200;
    return w < 640 ? 'mobile' : w < 1024 ? 'tablet' : 'desktop';
  };
  const [bp, setBp] = React.useState(get);
  React.useEffect(() => {
    const h = () => setBp(get());
    window.addEventListener('resize', h);
    return () => window.removeEventListener('resize', h);
  }, []);
  return {
    bp,
    isMobile:  bp === 'mobile',
    isTablet:  bp === 'tablet',
    isDesktop: bp === 'desktop',
    isSmall:   bp !== 'desktop',
  };
}

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:"sell backlinks, no gambling/adult niche" },
  { n:"03", title:"telegram bot",      year:"'25", tag:"bot · node",    blurb:"complex telegram bots, custom builds" },
  { n:"04", title:"automation script", year:"'25", tag:"bot · python",  blurb:"puppeteer/playwright automation scripts" },
  { n:"05", title:"portofolio",        year:"'26", tag:"web · html",    blurb:"you are here" },
];

function ProjectList({ tight = false }) {
  const { isMobile } = useBreakpoint();
  return (
    <div>
      {PROJECTS.map(p => (
        <div className={isMobile ? 'prj-row prj-row--mobile' : 'prj-row'} key={p.n}
          style={tight ? {padding: isMobile ? "8px 4px" : "10px 8px"} : undefined}>
          <div className="prj-num">{p.n}</div>
          <div style={{minWidth:0}}>
            <div className="prj-title" style={{fontSize: isMobile ? 16 : 22}}>{p.title}</div>
            <div className="prj-meta" style={{fontSize: isMobile ? 14 : undefined}}>{p.blurb}</div>
          </div>
          {!isMobile && <div className="prj-meta mono" style={{fontSize:13}}>{p.tag}</div>}
          <div className="prj-meta" style={{whiteSpace:'nowrap'}}>{p.year} →</div>
          {!isMobile && (
            <div className="prj-preview sk-img violet">
              <span>[ preview of {p.title} ]</span>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// VARIATION A — "Index Card"
// ──────────────────────────────────────────────────────────────
function VariationA() {
  const { isMobile, isTablet } = useBreakpoint();
  const pad = isMobile ? "18px 14px" : isTablet ? "28px 28px" : "40px 48px";
  return (
    <div className="wire-artboard" style={{padding:pad, background:"var(--paper)", minHeight:"100%"}}>

      {/* top meta bar */}
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:18, flexWrap:"wrap", gap:8}}>
        <div className="mono" style={{fontSize:11, color:"var(--ink-faint)"}}>PORTFOLIO / 2026 / v3</div>
        {!isMobile && (
          <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: isMobile ? "1fr" : "220px 1fr",
        gap: isMobile ? 18 : 36,
      }}>
        {/* hero first on mobile via order */}
        <main style={{order: isMobile ? 1 : 2}}>
          <div className="hand-h1" style={{
            fontSize: isMobile ? 34 : isTablet ? 48 : 64,
            lineHeight:1, marginBottom:6
          }}>
            hi, i'm rizky.
          </div>
          <div style={{marginBottom:20}}>
            <TypingLine size={isMobile ? 15 : 22} />
          </div>

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

          <div style={{
            display:"grid",
            gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
            gap: isMobile ? 14 : 32,
            marginBottom:20,
          }}>
            <div>
              <div className="arch under" style={{fontSize:20, marginBottom:8}}>about</div>
              <p className="hand" style={{fontSize:17, lineHeight:1.4, 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:20, marginBottom:8}}>what i do</div>
              <ul className="hand" style={{fontSize:17, lineHeight:1.5, margin:0, paddingLeft:18}}>
                <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:20, marginBottom:8}}>
            selected work{!isMobile && <span className="note" style={{marginLeft:8}}>hover for a peek</span>}
          </div>
          <ProjectList />

          <div style={{marginTop:28}}>
            <div className="arch under" style={{fontSize:20, marginBottom:12}}>skills</div>
            <div style={{
              display:"grid",
              gridTemplateColumns: isMobile ? "1fr" : "repeat(2,1fr)",
              gap: isMobile ? "12px" : "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:28, display:"flex", alignItems:"center", gap:14, flexWrap:"wrap"}}>
            <span className="sk-btn violet">say hi →</span>
            <span className="hand" style={{fontSize:17, color:"var(--ink-faint)"}}>
              or <span style={{textDecoration:"underline"}}>zxkysikky@gmail.com</span>
            </span>
          </div>
        </main>

        {/* ID card */}
        <aside style={{order: isMobile ? 2 : 1}}>
          <div className="sk-box" style={{padding:"16px 14px", marginBottom:14}}>
            <div className="mono" style={{fontSize:11, color:"var(--ink-faint)"}}>NAME</div>
            <div className="arch" style={{fontSize:24, 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:20, marginBottom:10}}>developer,<br/>student</div>
            <div className="mono" style={{fontSize:11, color:"var(--ink-faint)"}}>AGE · LOC</div>
            <div className="hand" style={{fontSize:18}}>16 · ID 🌏</div>
          </div>
          <div className="sk-dash" style={{padding:12}}>
            <div className="hand" style={{fontSize:17, marginBottom:6}}>status:</div>
            <div className="sk-pill violet">● open to freelance</div>
          </div>
        </aside>
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// VARIATION B — "Margin Notes"
// ──────────────────────────────────────────────────────────────
function VariationB() {
  const { isMobile, isTablet } = useBreakpoint();
  const showMarginNotes = !isMobile && !isTablet;
  const pad = isMobile ? "20px 16px" : isTablet ? "28px 24px" : "40px 60px";
  return (
    <div className="wire-artboard" style={{padding:pad, background:"var(--paper)", minHeight:"100%", position:"relative"}}>

      {/* margin pins — desktop only */}
      {showMarginNotes && (
        <>
          <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 — desktop only */}
        {showMarginNotes && (
          <>
            <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>
            <div className="note" style={{position:"absolute", right:-150, bottom:60, width:130, transform:"rotate(-2deg)"}}>
              ← single CTA.<br/>no form, just mail.
            </div>
          </>
        )}

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

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

        <p className="hand" style={{fontSize:17, lineHeight:1.4, margin:"0 0 22px"}}>
          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>

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

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

        <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:"22px 0"}}/>

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

// ──────────────────────────────────────────────────────────────
// VARIATION C — "Terminal Zine"
// ──────────────────────────────────────────────────────────────
function VariationC() {
  const { isMobile, isTablet } = useBreakpoint();
  const pad = isMobile ? "14px 12px" : isTablet ? "24px 28px" : "36px 44px";
  return (
    <div className="wire-artboard" style={{padding:pad, background:"var(--paper)", minHeight:"100%"}}>

      {/* title strip */}
      <div style={{
        display:"flex", justifyContent:"space-between", alignItems:"baseline",
        borderBottom:"2px solid var(--ink)", paddingBottom:10, marginBottom:18,
        flexWrap:"wrap", gap:8,
      }}>
        <div className="hand-h1" style={{fontSize: isMobile ? 22 : 34}}>
          zxkys<span style={{color:"var(--violet)"}}>.</span>dev
        </div>
        {!isMobile && (
          <div className="mono" style={{fontSize: isTablet ? 11 : 13, color:"var(--ink-faint)"}}>
            [ about ] [ work ] [ skills ] [ contact ]
          </div>
        )}
      </div>

      {/* two-col → single col on mobile */}
      <div style={{
        display:"grid",
        gridTemplateColumns: isMobile ? "1fr" : "1.6fr 1fr",
        gap: isMobile ? 18 : 30,
      }}>
        {/* LEFT */}
        <div>
          <div className="sk-box" style={{padding: isMobile ? "12px" : "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: isMobile ? 11 : 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: isMobile ? 16 : 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={isMobile ? 11 : 14} /></div>
              <div style={{marginTop:8}}>
                <span style={{color:"var(--violet)"}}>rizky@mbp</span> ~ % <span className="caret"/>
              </div>
            </div>
          </div>

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

        {/* RIGHT sidebar */}
        <aside>
          <div className="sk-dash" style={{padding: isMobile ? 12 : 16, marginBottom:16}}>
            <div className="mono" style={{fontSize:11, color:"var(--ink-faint)", marginBottom:6}}>&gt; AVAILABILITY</div>
            <div className="hand" style={{fontSize: isMobile ? 18 : 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:16}}>
            <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:17, marginBottom:4}}>{s.cat}</div>
                <div className="mono" style={{fontSize: isMobile ? 11 : 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: isMobile ? 13 : 17, marginBottom:4}}>zxkysikky@gmail.com</div>
            <div className="hand" style={{fontSize:16, color:"var(--ink-soft)"}}>@zenith6666 on telegram</div>
          </div>
        </aside>
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// VARIATION D — "Sticker Sheet"
// ──────────────────────────────────────────────────────────────
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() {
  const { isMobile, isTablet } = useBreakpoint();
  const flat = isMobile;
  const pad = isMobile ? "14px 12px 40px" : isTablet ? "20px 24px 50px" : "28px 40px 60px";
  return (
    <div className="wire-artboard" style={{padding:pad, background:"var(--paper)", minHeight:"100%", position:"relative"}}>

      {/* header */}
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom: isMobile ? 18 : 30, flexWrap:"wrap", gap:8}}>
        <div className="hand-h1" style={{fontSize: isMobile ? 22 : 30}}>rizky's<br/>portfolio.</div>
        <div className="mono" style={{fontSize:12, color:"var(--ink-faint)", textAlign:"right"}}>
          {isMobile ? "v3 / apr 2026" : "scroll · hover · click\nv3 / apr 2026"}
        </div>
      </div>

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

        {/* status card — always shown, inline on mobile */}
        <div style={{
          position:"relative",
          transform: flat ? "none" : "rotate(2deg)",
          marginTop: flat ? 0 : 20,
        }}>
          {!flat && <Tape style={{top:-6, left:10}}/>}
          <div className="sk-box" style={{padding: isMobile ? "12px 14px" : "14px 18px"}}>
            <div className="hand" style={{fontSize:17, marginBottom:4}}>status:</div>
            <div className="sk-pill violet">● freelance open</div>
            <hr className="sk-line thin" style={{margin:"10px 0 8px"}}/>
            <div className="mono" style={{fontSize:11, color:"var(--ink-faint)"}}>available may '26</div>
          </div>
        </div>
      </div>

      {/* row 2: about */}
      <div style={{marginBottom: isMobile ? 20 : 50, display:"flex", justifyContent: flat ? "stretch" : "flex-end"}}>
        <div style={{
          position:"relative",
          width: flat ? "100%" : 360,
          transform: flat ? "none" : "rotate(1deg)",
        }}>
          {!flat && <Tape style={{top:-7, left:40}} />}
          <div className="sk-dash" style={{padding: isMobile ? "14px 12px" : "18px 20px", background:"#fffdf5"}}>
            <div className="arch under" style={{fontSize: isMobile ? 18 : 22, marginBottom:8}}>about me</div>
            <p className="hand" style={{fontSize:17, 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 */}
      <div style={{
        position:"relative",
        width: flat ? "100%" : "88%",
        marginBottom: isMobile ? 20 : 60,
        transform: flat ? "none" : "rotate(-0.8deg)",
      }}>
        {!flat && <Tape style={{top:-8, left:50}} />}
        {!flat && <Tape style={{top:-8, right:50, transform:"rotate(-6deg)"}} />}
        <div className="sk-box" style={{padding: isMobile ? "14px 12px" : "20px 24px"}}>
          <div style={{display:"flex", alignItems:"baseline", justifyContent:"space-between", marginBottom:6, flexWrap:"wrap", gap:4}}>
            <div className="arch under" style={{fontSize: isMobile ? 18 : 24}}>work</div>
            {!isMobile && <div className="note">5 selected · hover for preview</div>}
          </div>
          <ProjectList />
        </div>
        {!flat && <div className="scribble" style={{bottom:-32, left:60}}>my fav → #03</div>}
      </div>

      {/* row 4: skills */}
      <div style={{marginBottom: isMobile ? 20 : 50, display:"flex", justifyContent: flat ? "stretch" : "flex-end"}}>
        <div style={{
          position:"relative",
          width: flat ? "100%" : 400,
          transform: flat ? "none" : "rotate(1.5deg)",
        }}>
          {!flat && <Tape style={{top:-8, left:40}} />}
          <div className="sk-box" style={{padding: isMobile ? "14px 12px" : "18px 20px"}}>
            <div className="arch under" style={{fontSize: isMobile ? 18 : 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",
        flexDirection: flat ? "column" : "row",
        alignItems: flat ? "flex-start" : "center",
        gap: isMobile ? 12 : 40,
        flexWrap:"wrap",
      }}>
        <div style={{position:"relative", transform: flat ? "none" : "rotate(-3deg)"}}>
          {!flat && <Tape style={{top:-7, left:20}}/>}
          {!flat && <div className="scribble" style={{top:-28, left:30}}>(i do reply!)</div>}
          <div className="sk-box" style={{padding: isMobile ? "12px 14px" : "14px 20px", background:"var(--violet-wash)", borderColor:"var(--violet)"}}>
            <div className="hand" style={{fontSize: isMobile ? 16 : 20}}>want to say hi? →</div>
            <div className="arch" style={{fontSize: isMobile ? 15 : 22, marginTop:4}}>zxkysikky@gmail.com</div>
          </div>
        </div>

        {!isMobile && (
          <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>
  );
}

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