// Sections: Hero (3 variants), About, Experience, Skills (stickers), Contact
const { useState, useEffect, useRef } = React;

// ---------- HERO VARIANTS ----------

const HeroRansom = () =>
<section id="top" style={{ paddingTop: '140px', paddingBottom: '60px' }}>
    <div className="container">
      <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginBottom: 28, gap: 24, flexWrap: 'wrap' }}>
        <div className="footer-bits">◉ REC · side A · track 01</div>
      </div>

      <h1 className="ransom" style={{ fontSize: 'clamp(64px, 12vw, 150px)', lineHeight: .82, margin: 0, letterSpacing: '-0.02em' }}>
        <span className="r1">Tell</span>{' '}
        <span className="r2 tilt-l">a</span>{' '}
        <span className="r1 acid">story,</span>{' '}
        <br />
        <span className="r3 inv">morning</span>{' '}
        <span className="r1 tilt-r out">glory.</span>
      </h1>

      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr .9fr', gap: 48, marginTop: 40, alignItems: 'end' }}>
        <div>
          <p style={{ fontSize: 18, lineHeight: 1.55, maxWidth: 560, fontFamily: 'var(--typewriter)' }}>
            Hi, I'm <b>Varun Shukla</b>, a B2B SaaS marketer who uses content and outbound plays to
            turn interest into qualified demos. Marketing is <b>psychological warfare</b>, and I don't
            mind the trenches. <span className="slash">Don't forget your helmet!</span>
          </p>
          <div style={{ display: 'flex', gap: 14, marginTop: 28, flexWrap: 'wrap' }}>
            <a href="#work" className="btn">▶ See the tape</a>
            <a href="#contact" className="btn ghost">✎ Book a call</a>
          </div>
          <div style={{ marginTop: 26, display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap' }}>
            <span className="chip acid">$750K pipeline · 2025</span>
          </div>
        </div>

        <div style={{ position: 'relative' }}>
          <div className="xerox photo-card" style={{ padding: 18, transform: 'rotate(2deg)', width: '100%' }}>
            <span className="tape tl"></span>
            <span className="tape tr pink"></span>
            <div style={{ aspectRatio: '1/1', background: 'var(--ink)', border: '2px solid var(--ink)', overflow: 'hidden', position: 'relative' }}>
              <img src="assets/varun.jpg" alt="Varun Shukla" style={{ width: '100%', height: '100%', display: 'block', objectFit: 'cover', filter: 'contrast(1.05) saturate(0.9)' }} />
              <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 1px 1px, rgba(14,14,16,0.22) 1px, transparent 1.2px)', backgroundSize: '4px 4px', mixBlendMode: 'multiply', pointerEvents: 'none' }}></div>
              <div aria-hidden="true" style={{ position: 'absolute', inset: 0, boxShadow: 'inset 0 0 60px rgba(14,14,16,0.35)', pointerEvents: 'none' }}></div>
              <div style={{ position: 'absolute', right: 10, bottom: 10, background: 'var(--ink)', color: 'var(--cream)', fontFamily: 'var(--mono)', fontSize: 10, padding: '2px 6px' }}>Side A / No.07</div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, fontFamily: 'var(--typewriter)', fontSize: 12 }}>
              <span>▌ENTERPRISE GTM</span>
              <span>NO. 07</span>
            </div>
          </div>
          <div className="burst" style={{ position: 'absolute', right: -30, top: -30, transform: 'rotate(12deg)' }}>
            <div>NEW!<br />2026<br />EDITION</div>
          </div>
        </div>
      </div>
    </div>
  </section>;


const HeroFlyer = () =>
<section id="top" style={{ paddingTop: '130px', paddingBottom: '40px' }}>
    <div className="container" style={{ position: 'relative', minHeight: 620 }}>
      <div style={{ textAlign: 'center', maxWidth: 900, margin: '0 auto' }}>
        <span className="stamp" style={{ marginBottom: 16, display: 'inline-block' }}>▬ ONE NIGHT ONLY ▬</span>
        <h1 style={{ fontFamily: 'var(--fatface)', fontSize: 'clamp(56px, 11vw, 150px)', margin: 0, lineHeight: .88, letterSpacing: '-0.02em' }}>
          <span style={{ fontFamily: 'var(--shrikhand)', display: 'block', transform: 'rotate(-2deg)' }}>VARUN</span>
          <span style={{ display: 'inline-block', background: 'var(--ink)', color: 'var(--cream)', padding: '0 .2em' }}>SHUKLA</span>
        </h1>
        <p style={{ fontFamily: 'var(--typewriter)', fontSize: 17, maxWidth: 560, margin: '22px auto' }}>
          Enterprise GTM & demand-gen. I write the emails, build the automations,
          and ghost-write the CEO's LinkedIn so good that it becomes a warm inbound channel.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a className="btn" href="#work">▶ Play the reel</a>
          <a className="btn ghost" href="#contact">✎ Say hi</a>
        </div>
      </div>

      {/* scattered flyers */}
      <div className="xerox" style={{ position: 'absolute', left: 20, top: 120, width: 180, padding: 10, transform: 'rotate(-8deg)' }}>
        <span className="tape tl pink"></span>
        <div className="ph" style={{ height: 140 }}><span>[ FLYER · 01 ]</span></div>
        <div style={{ fontFamily: 'var(--black)', fontSize: 11, marginTop: 6, textTransform: 'uppercase' }}>$750K · 4 MONTHS</div>
      </div>
      <div className="xerox" style={{ position: 'absolute', right: 20, top: 180, width: 200, padding: 10, transform: 'rotate(6deg)' }}>
        <span className="tape tr"></span>
        <div style={{ fontFamily: 'var(--fatface)', fontSize: 28, lineHeight: 1, padding: '14px 6px' }}>"Scaled CEO to 718K impressions."</div>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 10, textAlign: 'right' }}>— the numbers</div>
      </div>
      <div className="xerox dark" style={{ position: 'absolute', left: 60, bottom: -20, width: 210, padding: 12, transform: 'rotate(3deg)' }}>
        <div style={{ fontFamily: 'var(--condensed)', fontSize: 22, lineHeight: 1 }}>60% OPEN RATE</div>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 11, marginTop: 4 }}>AI UXR report, 2025</div>
      </div>
      <div className="burst" style={{ position: 'absolute', right: 60, bottom: 30, transform: 'rotate(-10deg)' }}>
        <div>HIRE<br />ME<br />2026</div>
      </div>
    </div>
  </section>;


const HeroSplit = () =>
<section id="top" style={{ paddingTop: 100, paddingBottom: 0 }}>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 720, borderBottom: '3px solid var(--ink)' }}>
      <div style={{ padding: '80px 40px 40px 48px', borderRight: '3px solid var(--ink)', background: 'var(--cream)', position: 'relative' }}>
        <span className="stamp">Side A · 01</span>
        <h1 style={{ fontFamily: 'var(--fatface)', fontSize: 'clamp(54px, 7vw, 110px)', margin: '18px 0 0', lineHeight: .9, letterSpacing: '-0.02em' }}>
          Hi, I'm <br />
          <span style={{ fontFamily: 'var(--shrikhand)' }}>Varun.</span><br />
          <span style={{ fontFamily: 'var(--black)', fontSize: '.5em', textTransform: 'uppercase', letterSpacing: '.04em' }}>I do GTM, <span className="slash">loudly</span>.</span>
        </h1>
        <p style={{ marginTop: 28, fontSize: 16, maxWidth: 460, fontFamily: 'var(--typewriter)' }}>
          Demand gen, content, executive brand. I'm the one who turns a cold
          outbound list into enterprise demos before your AE finishes their coffee.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 24, flexWrap: 'wrap' }}>
          <a className="btn" href="#work">▶ The work</a>
          <a className="btn ghost" href="#contact">✎ Get in touch</a>
        </div>
        <div style={{ position: 'absolute', bottom: 24, left: 48, right: 48, display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--mono)', fontSize: 11, textTransform: 'uppercase', opacity: .7 }}>
          <span>◉ REC 04:23</span>
          <span>33⅓ RPM</span>
        </div>
      </div>
      <div style={{ padding: '80px 48px 40px 40px', background: 'var(--ink)', color: 'var(--cream)', position: 'relative', overflow: 'hidden' }}>
        <div className="halftone-acid" style={{ position: 'absolute', inset: 0, opacity: .18 }}></div>
        <span className="stamp" style={{ color: 'var(--acid)', borderColor: 'var(--acid)' }}>Side B · 02</span>
        <div style={{ fontFamily: 'var(--condensed)', fontSize: 90, lineHeight: .9, marginTop: 18, color: 'var(--acid)' }}>
          $750K<br />PIPELINE
        </div>
        <div style={{ fontFamily: 'var(--typewriter)', fontSize: 13, marginTop: 8, opacity: .8 }}>generated in 4 months, outbound, 2025.</div>
        <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          <Stat big="718K" label="CEO impressions / yr" />
          <Stat big="60%" label="open rate · cornerstone asset" />
          <Stat big="49%" label="CTR · report funnel" />
          <Stat big="10 hrs" label="saved / week via AI stack" />
        </div>
      </div>
    </div>
  </section>;


const Stat = ({ big, label }) =>
<div style={{ borderTop: '2px solid var(--cream)', paddingTop: 10 }}>
    <div style={{ fontFamily: 'var(--fatface)', fontSize: 42, lineHeight: 1, color: 'var(--acid)' }}>{big}</div>
    <div style={{ fontFamily: 'var(--mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '.08em', marginTop: 4, opacity: .85 }}>{label}</div>
  </div>;


// ---------- MARQUEE ----------
const Marquee = () => {
  const items = ["HUBSPOT", "CLAY", "N8N", "SMARTLEAD", "CLAUDE COWORK", "ADOBE SUITE", "TABLEAU",
  "OUTBOUND", "DEMAND GEN", "CONTENT STRATEGY", "EXEC BRAND", "B2B SAAS", "ABM", "NEWSLETTERS", "AI AUTOMATIONS"];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {[...items, ...items].map((t, i) => <React.Fragment key={i}><span>{t}</span><span className="dot">✦</span></React.Fragment>)}
      </div>
    </div>);

};

// ---------- ABOUT ----------
const About = () =>
<section id="about" style={{ padding: '100px 0' }}>
    <div className="container">
      <div className="sec-head">
        <div>
          <span className="num">01 / ABOUT</span>
          <h2 style={{ marginTop: 14 }}>The <span style={{ fontFamily: 'var(--shrikhand)', color: 'var(--acid-dark)' }}>short</span> version.</h2>
        </div>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 12, textTransform: 'uppercase', maxWidth: 260, textAlign: 'right', opacity: .5 }}></div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr .8fr', gap: 48, alignItems: 'start' }}>
        <div className="xerox" style={{ padding: '36px 36px', position: 'relative' }}>
          <span className="tape tl"></span>
          <span className="tape br pink"></span>
          <p style={{ fontFamily: 'var(--typewriter)', fontSize: 17, lineHeight: 1.65, margin: 0 }}>
            I've spent a decade helping companies sound less stuffier than they normally are, using
            narrative framing and thought leadership to build trust in their products. My start at
            agencies allowed me to work across a range of names like <b>Airbus</b>, <b>Samsung</b>,{' '}
            <b>Perfetti van Melle</b> and <b>ByteDance</b> — and some of that work led to industry awards.
          </p>
          <p style={{ fontFamily: 'var(--typewriter)', fontSize: 17, lineHeight: 1.65, marginTop: 18 }}>
            I co-founded a creative studio and ran it for 5 years, making cool written, design and
            video work for enterprise clients like <b>Intel</b> and a few AI startups.
          </p>
          <p style={{ fontFamily: 'var(--typewriter)', fontSize: 17, lineHeight: 1.65, marginTop: 18 }}>
            At <b>Looppanel</b>, I helped build their GTM engine (outbound, content and exec brand)
            which turned outbound from a dormant channel to{' '}
            <span style={{ background: 'var(--acid)', padding: '0 4px', fontWeight: 700 }}>$750K in enterprise pipeline</span>{' '}
            over four months.
          </p>
          <p style={{ fontFamily: 'var(--typewriter)', fontSize: 17, lineHeight: 1.65, marginTop: 18 }}>
            Now at <b>Zuddl</b>, I'm sharpening their public POV through content and making the buying decision easier for their ICP.
          
        </p>
          <p style={{ fontFamily: 'var(--typewriter)', fontSize: 17, lineHeight: 1.65, marginTop: 18 }}>
            I love it when a plan comes together, especially if it's based on a solid foundation of
            knowing your customer so well you're practically <span className="slash">inside their head</span>.
          </p>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div className="xerox dark" style={{ padding: 22, transform: 'rotate(-1.5deg)' }}>
            <div style={{ fontFamily: 'var(--black)', fontSize: 12, textTransform: 'uppercase', letterSpacing: '.12em', color: 'var(--acid)' }}>CURRENTLY</div>
            <div style={{ fontFamily: 'var(--fatface)', fontSize: 28, lineHeight: 1.05, marginTop: 6 }}>
              Content Marketing Lead @ Zuddl
            </div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 12, marginTop: 6, opacity: .7 }}>May 2026 — present · Remote</div>
          </div>

          <div className="xerox" style={{ padding: 22, transform: 'rotate(1deg)', background: 'var(--acid)' }}>
            <div style={{ fontFamily: 'var(--black)', fontSize: 12, textTransform: 'uppercase', letterSpacing: '.12em' }}>DOES WELL</div>
            <ul style={{ fontFamily: 'var(--typewriter)', fontSize: 14, margin: '8px 0 0', paddingLeft: 18, lineHeight: 1.6 }}>
              <li>Outbound campaigns that book you demos</li>
              <li>AI to help scale what works</li>
              <li>Founder-led content that won't end up on r/LinkedInLunatics</li>
              <li>All the usual content bits</li>
            </ul>
          </div>

          <div className="xerox" style={{ padding: 22, transform: 'rotate(-2deg)' }}>
            <div style={{ fontFamily: 'var(--black)', fontSize: 12, textTransform: 'uppercase', letterSpacing: '.12em', color: 'var(--red)' }}>DOES NOT</div>
            <ul style={{ fontFamily: 'var(--typewriter)', fontSize: 14, margin: '8px 0 0', paddingLeft: 18, lineHeight: 1.6 }}>
              <li>Write "synergy" unironically</li>
              <li>Use up all your AI tokens in 1 day</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>;


// ---------- EXPERIENCE ----------
const experiences = [
{
  when: "MAY '26 — NOW",
  role: "Content Marketing Lead",
  co: "ZUDDL · B2B SaaS · Remote",
  bullets: [
  { t: "Setting up content and editorial systems across demand gen, product marketing, events and marketing ops that make buyers seriously consider ", m: "Zuddl", r: "" }],

  tag: "current"
},
{
  when: "MAR '25 — APR '26",
  role: "Marketing Manager",
  co: "LOOPPANEL · B2B SaaS · Remote",
  bullets: [
  { t: "Ran 4 multi-channel outbound campaigns generating ", m: "15 enterprise demos worth $750k", r: " within 4 months" },
  { t: "Built AI automations on Clay, n8n & Claude for sequencing and personalization, reducing campaign execution time by ", m: "10 hours/week", r: "" },
  { t: "Created the AI UXR Industry Report as cornerstone asset: ", m: "60% open rate, 49.64% CTR", r: ", lead to $250k in pipeline" },
  { t: "Scaled CEO's LinkedIn (Top Voice account) to ", m: "718K impressions over the year", r: " through strategic content, leading to warm enterprise interest" },
  { t: "Achieved ", m: "~50% email open rates", r: " across product updates and newsletter programs" }]

},
{
  when: "MAR '20 — MAR '25",
  role: "Co-Founder",
  co: "CENYA · Creative Content & Video Studio · New Delhi",
  bullets: [
  { t: "Built a full-service content studio from scratch, achieving ", m: "$20k revenue on average every year", r: "" },
  { t: "Led partnership with ", m: "Intel", r: " to develop content for flagship AI education program reaching 10,000+ students annually" },
  { t: "Designed an outreach campaign with a ", m: "4% reply rate", r: ", leading to 5 new agency clients" },
  { t: "Managed client relations, contracts, project scoping and delivery for ", m: "12 clients", r: " like Intel, Sustainable Living Lab, Kollegio AI, Vala AI" }]

},
{
  when: "OCT '17 — JAN '20",
  role: "Content Production Manager",
  co: "ADFACTORS PR · New Delhi",
  bullets: [
  { t: "Managed production process from scripting to post-production for ", m: "35+ clients", r: ", supervising a team of 5 editors, animators and graphic designers" },
  { t: "Managed customers worth ", m: "$77,000 in revenue", r: ", leading content production and servicing for clients like Samsung, Perfetti van Melle, Massive Restaurants, and ByteDance" }]

},
{
  when: "MAY '16 — OCT '17",
  role: "Jr. Account Executive",
  co: "AVIAN WE · New Delhi",
  bullets: [
  { t: "Managed content development for enterprise clients including ", m: "Airbus Group", r: "" },
  { t: "Contributed to award-winning campaigns — ", m: "2 Sabre Gold awards", r: "" }]

}];


const Experience = () =>
<section id="work" style={{ padding: '100px 0', background: 'var(--ink)', color: 'var(--cream)', position: 'relative' }}>
    <div className="halftone-acid" style={{ position: 'absolute', inset: 0, opacity: .08, pointerEvents: 'none' }}></div>
    <div className="container" style={{ position: 'relative' }}>
      <div className="sec-head">
        <div>
          <span className="num" style={{ color: 'var(--ink)' }}>02 / TOUR DATES</span>
          <h2 style={{ marginTop: 14, color: 'var(--cream)' }}>
            The{' '}
            <span style={{ textDecoration: 'line-through', textDecorationColor: 'var(--red)' }}>storey</span>{' '}
            story<br />
            <span style={{ fontFamily: 'var(--shrikhand)', color: 'var(--acid)' }}>so far.</span>
          </h2>
        </div>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 12, textTransform: 'uppercase', opacity: .7, maxWidth: 260, textAlign: 'right' }}>
          ◉ The stops I've been on and a snapshot of what I did there
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 0, border: '2px solid var(--cream)', background: 'var(--ink-2)' }}>
        {experiences.map((e, i) =>
      <div key={i} className="exp" style={{
        borderBottom: i < experiences.length - 1 ? '2px dashed var(--cream)' : 'none',
        position: 'relative'
      }}>
            <div>
              <div className="when" style={{ background: 'transparent', color: 'var(--acid)', borderColor: 'var(--acid)' }}>{e.when}</div>
              {e.tag === 'current' &&
          <div style={{ marginTop: 10, display: 'inline-block' }}>
                  <span className="chip acid" style={{ color: 'var(--ink)' }}>● NOW PLAYING</span>
                </div>
          }
            </div>
            <div>
              <h3 style={{ color: 'var(--cream)' }}>{e.role}</h3>
              <div className="co" style={{ color: 'var(--acid)' }}>{e.co}</div>
              <ul style={{ listStyle: 'none', paddingLeft: 0, marginTop: 16 }}>
                {e.bullets.map((b, j) =>
            <li key={j} style={{ paddingLeft: 22, position: 'relative', marginBottom: 10 }}>
                    <span style={{ position: 'absolute', left: 0, top: 2, color: 'var(--acid)', fontFamily: 'var(--black)' }}>✦</span>
                    {b.t}{b.m && <span className="metric" style={{ color: 'var(--ink)' }}>{b.m}</span>}{b.r}
                  </li>
            )}
              </ul>
            </div>
          </div>
      )}
      </div>
    </div>
  </section>;


// ---------- SKILLS (draggable stickers) ----------
const SKILLS_LAYOUT = [
{ t: "HUBSPOT", sub: "CRM + ops", k: "acid", x: 4, y: 8, r: -4 },
{ t: "CLAY", sub: "enrichment engine", k: "", x: 26, y: 4, r: 3 },
{ t: "N8N", sub: "workflow brain", k: "ink", x: 48, y: 10, r: -2 },
{ t: "CLAUDE", sub: "drafting + research", k: "", x: 70, y: 6, r: 4 },
{ t: "CLAUDE CODE", sub: "automations + scripts", k: "acid", x: 86, y: 30, r: -4 },
{ t: "ADOBE SUITE", sub: "pr, ps, ae", k: "ink", x: 62, y: 34, r: 3 },
{ t: "SMARTLEAD", sub: "sequencer", k: "pink", x: 10, y: 26, r: 5 },
{ t: "INSTANTLY", sub: "sequencer", k: "", x: 38, y: 30, r: -3 },
{ t: "TABLEAU", sub: "dashboards", k: "acid", x: 64, y: 24, r: 2 },
{ t: "OUTBOUND", sub: "email + linkedin", k: "", x: 4, y: 46, r: 2 },
{ t: "DEMAND GEN", sub: "pipeline math", k: "ink", x: 26, y: 50, r: -4 },
{ t: "CONTENT STRATEGY", sub: "angles, formats, briefs", k: "acid", x: 48, y: 44, r: 3 },
{ t: "EXEC BRAND", sub: "ghostwriting for CEOs", k: "pink", x: 2, y: 66, r: -2 },
{ t: "NEWSLETTERS", sub: "open rates that pop", k: "", x: 28, y: 72, r: 4 },
{ t: "ABM", sub: "tight lists, loud asks", k: "", x: 54, y: 68, r: -3 },
{ t: "COPY", sub: "emdashes, earned", k: "ink", x: 76, y: 50, r: 2 }];


const Skills = ({ stickersEnabled }) => {
  const stageRef = useRef(null);
  const [pos, setPos] = useState(() => SKILLS_LAYOUT.map((s) => ({ x: s.x, y: s.y, r: s.r })));
  const drag = useRef({ i: -1, dx: 0, dy: 0 });

  const onPointerDown = (e, i) => {
    e.preventDefault();
    const rect = stageRef.current.getBoundingClientRect();
    const el = e.currentTarget;
    const er = el.getBoundingClientRect();
    drag.current = {
      i,
      offX: e.clientX - er.left,
      offY: e.clientY - er.top,
      stageLeft: rect.left,
      stageTop: rect.top,
      stageW: rect.width,
      stageH: rect.height,
      w: er.width, h: er.height
    };
    el.setPointerCapture?.(e.pointerId);
    el.classList.add('dragging');
  };
  const onPointerMove = (e) => {
    const d = drag.current;
    if (d.i < 0) return;
    const rect = stageRef.current.getBoundingClientRect();
    const x = e.clientX - rect.left - d.offX;
    const y = e.clientY - rect.top - d.offY;
    const xp = Math.max(0, Math.min(100 - d.w / rect.width * 100, x / rect.width * 100));
    const yp = Math.max(0, Math.min(100 - d.h / rect.height * 100, y / rect.height * 100));
    setPos((p) => p.map((s, i) => i === d.i ? { ...s, x: xp, y: yp } : s));
  };
  const onPointerUp = (e) => {
    const d = drag.current;
    if (d.i >= 0) {
      e.currentTarget.querySelectorAll('.sticker').forEach((el) => el.classList.remove('dragging'));
    }
    drag.current = { i: -1 };
  };

  return (
    <section id="skills" style={{ padding: '100px 0' }}>
      <div className="container">
        <div className="sec-head">
          <div>
            <span className="num">03 / THE STACK</span>
            <h2 style={{ marginTop: 14 }}>Drag 'em <span style={{ fontFamily: 'var(--shrikhand)' }}>around.</span></h2>
          </div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 12, textTransform: 'uppercase', maxWidth: 260, textAlign: 'right' }}>
            ◉ These are the tools on my pedalboard. Rearrange to taste.
          </div>
        </div>

        <div
          ref={stageRef}
          className="sticker-stage"
          onPointerMove={stickersEnabled ? onPointerMove : undefined}
          onPointerUp={stickersEnabled ? onPointerUp : undefined}
          onPointerLeave={stickersEnabled ? onPointerUp : undefined}>
          
          {!stickersEnabled &&
          <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', padding: 40, pointerEvents: 'none' }}>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, maxWidth: 800, justifyContent: 'center' }}>
                {SKILLS_LAYOUT.map((s, i) =>
              <span key={i} className={"chip " + (s.k === 'acid' ? 'acid' : s.k === 'ink' ? 'dark' : 'ghost')}>{s.t}</span>
              )}
              </div>
            </div>
          }
          {stickersEnabled && SKILLS_LAYOUT.map((s, i) => {
            const p = pos[i];
            return (
              <div
                key={i}
                className={"sticker " + (s.k || "")}
                style={{
                  left: `${p.x}%`,
                  top: `${p.y}%`,
                  transform: `rotate(${p.r}deg)`
                }}
                onPointerDown={(e) => onPointerDown(e, i)}>
                
                {s.t}
                {s.sub && <small>{s.sub}</small>}
              </div>);

          })}
          <div style={{ position: 'absolute', left: 14, bottom: 10, fontFamily: 'var(--mono)', fontSize: 11, textTransform: 'uppercase', opacity: .6 }}>
            ▚ grip & drag · stickers peel don't tear
          </div>
        </div>

      </div>
    </section>);

};

// ---------- CONTACT ----------
const Contact = () => {
  const [copied, setCopied] = useState(false);
  const email = "varun@gwaithimirdain.com";
  const copy = () => {navigator.clipboard?.writeText(email);setCopied(true);setTimeout(() => setCopied(false), 1600);};

  // barcode bars
  const bars = "3121231312312313212312131223121331213213".split("").map((n) => parseInt(n, 10));

  return (
    <section id="contact" style={{ padding: '100px 0 40px', background: 'var(--ink)', color: 'var(--cream)', position: 'relative', overflow: 'hidden' }}>
      <div className="halftone-acid" style={{ position: 'absolute', inset: 0, opacity: .06, pointerEvents: 'none' }}></div>
      <div className="container" style={{ position: 'relative' }}>
        <div className="sec-head">
          <div>
            <span className="num" style={{ background: 'var(--acid)', color: 'var(--ink)' }}>04 / ENCORE</span>
            <h2 style={{ marginTop: 14, color: 'var(--cream)', lineHeight: 1.0 }}>
              <span style={{ display: 'inline-block' }}>Start a{' '}
                <span style={{ fontFamily: 'var(--shrikhand)', color: 'var(--acid)' }}>riot</span>
              </span>{' '}
              <span style={{ display: 'inline-block' }}>
                with{' '}
                <span style={{ background: 'var(--acid)', color: 'var(--ink)', padding: '.04em .12em', display: 'inline-block' }}>me.</span>
              </span>
            </h2>
          </div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 12, textTransform: 'uppercase', opacity: .7, maxWidth: 260, textAlign: 'right' }}>
            ◉ Get in touch for GTM, outbound or content work
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr .7fr', gap: 40, alignItems: 'start' }}>
          <div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 8 }}>
              <button className="btn" style={{ cursor: 'none' }} onClick={copy}>
                {copied ? "✓ COPIED" : "✎ COPY EMAIL"}
              </button>
              <a className="btn ink" href={`mailto:${email}`}>▶ OPEN MAIL APP</a>
              <a className="btn ghost" style={{ color: 'var(--cream)', borderColor: 'var(--cream)' }} href="https://www.linkedin.com/in/varun-shukla-68092b253/" target="_blank" rel="noreferrer">↗ LINKEDIN</a>
            </div>

            <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, maxWidth: 520 }}>
              <InfoCell k="Location" v="New Delhi, IN" />
              <InfoCell k="Response" v="< 24 hrs" />
            </div>
          </div>

          <div className="xerox" style={{ padding: 20, background: 'var(--cream)', color: 'var(--ink)', transform: 'rotate(-2deg)' }}>
            <span className="tape tl pink"></span>
            <div style={{ fontFamily: 'var(--black)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '.12em' }}>ADMIT ONE</div>
            <div style={{ fontFamily: 'var(--fatface)', fontSize: 30, lineHeight: 1, marginTop: 6 }}>Coffee<br />with Varun</div>
            <div style={{ marginTop: 10, fontFamily: 'var(--mono)', fontSize: 12 }}>
              <div>Date: TBD — you pick</div>
              <div>Venue: calendly / zoom</div>
              <div>Dress code: smart casual or band tee</div>
            </div>
            <div style={{ marginTop: 14, borderTop: '2px dashed var(--ink)', paddingTop: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
              <div className="barcode" style={{ color: 'var(--ink)' }}>
                {bars.map((w, i) => <i key={i} style={{ width: w + 'px', height: 30 + i % 3 * 6 + 'px' }} />)}
              </div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10, textAlign: 'right' }}>SEAT<br />A-07</div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 70, display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '2px solid var(--cream)', paddingTop: 20, flexWrap: 'wrap', gap: 14 }}>
          <div className="footer-bits">© {new Date().getFullYear()} Varun Shukla · All wrongs reversed</div>
          <div className="footer-bits">▚ VARUN/S · side B · fade out</div>
        </div>
      </div>
    </section>);

};

const InfoCell = ({ k, v }) =>
<div style={{ borderTop: '1.5px solid var(--cream)', paddingTop: 8 }}>
    <div style={{ fontFamily: 'var(--mono)', fontSize: 10, textTransform: 'uppercase', opacity: .6, letterSpacing: '.1em' }}>{k}</div>
    <div style={{ fontFamily: 'var(--black)', fontSize: 14, marginTop: 2 }}>{v}</div>
  </div>;


Object.assign(window, { HeroRansom, HeroFlyer, HeroSplit, Marquee, About, Experience, Skills, Contact });