// Variation C — Full scrolling landing page
// Hero + About + Services + Subscribe + Social + Footer
// Dark navy + neon blue/purple accents, rich motion throughout.

function VariationC({ width, height }) {
  
  const scrollRef = React.useRef(null);
  const [countdown, setCountdown] = React.useState({ d: 0, h: 0, m: 0, s: 0 });
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  const [scrollY, setScrollY] = React.useState(0);
  const [mouse, setMouse] = React.useState({ x: 0, y: 0 });
  const canvasRef = React.useRef(null);
  const [printHud, setPrintHud] = React.useState({ layer: 0, total: 60, pct: 0, elapsed: 0, eta: 0 });

  // Countdown
  React.useEffect(() => {
    const target = new Date('2026-05-25T00:00:00').getTime();
    const tick = () => {
      const diff = Math.max(0, target - Date.now());
      setCountdown({
        d: Math.floor(diff / 86400000),
        h: Math.floor((diff % 86400000) / 3600000),
        m: Math.floor((diff % 3600000) / 60000),
        s: Math.floor((diff % 60000) / 1000),
      });
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  // Bambu Lab-style 3D printer scene: frame, build plate, X/Y gantry,
  // print head, and a vase being built layer-by-layer. HUD stats published
  // out via setPrintHud (throttled).
  React.useEffect(() => {
    const c = canvasRef.current;
    if (!c) return;
    const ctx = c.getContext('2d');
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    c.width = c.clientWidth * dpr;
    c.height = c.clientHeight * dpr;
    ctx.scale(dpr, dpr);
    const W = c.clientWidth, H = c.clientHeight;
    let raf, t = 0;
    let hudTick = 0;

    const iso = (x, y, z, cx, cy, s) => {
      const ix = (x - y) * Math.cos(Math.PI / 6) * s;
      const iy = ((x + y) * Math.sin(Math.PI / 6) - z) * s;
      return [cx + ix, cy + iy];
    };

    const TOTAL = 60;
    // Vase-ish profile
    const radiusAt = (i) => {
      const u = i / TOTAL;
      return 0.95 + 0.45 * Math.sin(u * Math.PI * 1.4) - 0.15 * u;
    };

    // Simulated print: ~45 seconds total (for demo). Pretend total print time is 3h 12m.
    const CYCLE_SEC = 45;
    const FAKE_TOTAL_MIN = 192; // 3h 12m

    const draw = () => {
      t += 0.016;
      ctx.clearRect(0, 0, W, H);

      const cx = W * 0.62;
      const cy = H * 0.62;
      const s = Math.min(W, H) * 0.075;

      const phase = ((t % CYCLE_SEC) / CYCLE_SEC);
      const built = Math.min(TOTAL, Math.floor(phase * (TOTAL + 6)));
      const pct = Math.min(100, (built / TOTAL) * 100);
      const elapsedMin = (phase * FAKE_TOTAL_MIN);
      const etaMin = FAKE_TOTAL_MIN - elapsedMin;

      // ── Printer frame (open-frame, Bambu A1-ish: base + rails + overhead beam)
      const frameW = 2.6;
      const frameD = 2.6;
      const frameH = 3.8;

      const corners = [
        iso(-frameW, -frameD, 0, cx, cy, s),
        iso(frameW, -frameD, 0, cx, cy, s),
        iso(frameW, frameD, 0, cx, cy, s),
        iso(-frameW, frameD, 0, cx, cy, s),
        iso(-frameW, -frameD, frameH, cx, cy, s),
        iso(frameW, -frameD, frameH, cx, cy, s),
        iso(frameW, frameD, frameH, cx, cy, s),
        iso(-frameW, frameD, frameH, cx, cy, s),
      ];
      // base rails
      ctx.strokeStyle = 'rgba(232,232,236,0.22)';
      ctx.lineWidth = 1.2;
      const rail = (a, b) => { ctx.beginPath(); ctx.moveTo(...corners[a]); ctx.lineTo(...corners[b]); ctx.stroke(); };
      rail(0, 1); rail(1, 2); rail(2, 3); rail(3, 0);
      // verticals
      ctx.strokeStyle = 'rgba(232,232,236,0.18)';
      rail(0, 4); rail(1, 5); rail(2, 6); rail(3, 7);
      // top beam (the A1 has a single horizontal gantry across the back-top)
      ctx.strokeStyle = 'rgba(110,168,255,0.35)';
      ctx.lineWidth = 1.4;
      rail(4, 5); // back top
      rail(5, 6); // right top (thin)
      rail(4, 7); rail(7, 6);

      // ── Build plate (hot bed)
      const plate = 2.0;
      const p = [
        iso(-plate, -plate, 0, cx, cy, s),
        iso(plate, -plate, 0, cx, cy, s),
        iso(plate, plate, 0, cx, cy, s),
        iso(-plate, plate, 0, cx, cy, s),
      ];
      ctx.fillStyle = 'oklch(0.25 0.03 280 / 0.6)';
      ctx.beginPath();
      ctx.moveTo(...p[0]); ctx.lineTo(...p[1]); ctx.lineTo(...p[2]); ctx.lineTo(...p[3]); ctx.closePath();
      ctx.fill();
      ctx.strokeStyle = 'rgba(110,168,255,0.35)';
      ctx.lineWidth = 1;
      ctx.stroke();
      // plate grid
      ctx.strokeStyle = 'rgba(110,168,255,0.09)';
      for (let g = -plate + 0.4; g < plate; g += 0.4) {
        const a = iso(g, -plate, 0, cx, cy, s);
        const b = iso(g, plate, 0, cx, cy, s);
        ctx.beginPath(); ctx.moveTo(...a); ctx.lineTo(...b); ctx.stroke();
        const a2 = iso(-plate, g, 0, cx, cy, s);
        const b2 = iso(plate, g, 0, cx, cy, s);
        ctx.beginPath(); ctx.moveTo(...a2); ctx.lineTo(...b2); ctx.stroke();
      }

      // ── Model being printed
      const layerH = 0.055;
      const layers = built;
      for (let i = 0; i < layers; i++) {
        const r = radiusAt(i);
        const z = i * layerH;
        const top = z + layerH;
        const segs = 32;
        const bot = [], topPts = [];
        for (let k = 0; k <= segs; k++) {
          const a = (k / segs) * Math.PI * 2;
          bot.push(iso(Math.cos(a) * r, Math.sin(a) * r, z, cx, cy, s));
          topPts.push(iso(Math.cos(a) * r, Math.sin(a) * r, top, cx, cy, s));
        }
        const u = i / TOTAL;
        const hue = 260 + u * 40;
        ctx.fillStyle = `oklch(${0.55 + u * 0.18} 0.14 ${hue} / ${0.18 + u * 0.12})`;
        ctx.beginPath();
        ctx.moveTo(...bot[0]);
        for (let k = 0; k < bot.length; k++) ctx.lineTo(...bot[k]);
        for (let k = topPts.length - 1; k >= 0; k--) ctx.lineTo(...topPts[k]);
        ctx.closePath();
        ctx.fill();

        const isTopLayer = i === layers - 1;
        ctx.strokeStyle = isTopLayer
          ? `oklch(0.9 0.18 ${hue} / 0.95)`
          : `oklch(${0.65 + u * 0.1} 0.14 ${hue} / ${0.3 + u * 0.2})`;
        ctx.lineWidth = isTopLayer ? 1.6 : 0.7;
        ctx.beginPath();
        for (let k = 0; k < topPts.length; k++) {
          const [px, py] = topPts[k];
          if (k === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
        }
        ctx.stroke();
        if (isTopLayer) {
          ctx.save();
          ctx.shadowColor = `oklch(0.85 0.18 ${hue})`;
          ctx.shadowBlur = 18;
          ctx.stroke();
          ctx.restore();
        }
      }

      // ── Gantry + print head (moves in X across a Y rail that moves across the bed)
      if (layers > 0 && layers <= TOTAL) {
        const z = (layers - 1) * layerH + layerH + 0.05;
        // Y position of gantry rail (slow sweep)
        const yPos = Math.sin(t * 0.9) * plate * 0.95;
        // X position of print head (fast sweep)
        const xPos = Math.sin(t * 3.1) * plate * 0.95;

        // Y gantry rail (runs along X at current Y, above the plate)
        const gA = iso(-plate, yPos, z + 0.5, cx, cy, s);
        const gB = iso(plate, yPos, z + 0.5, cx, cy, s);
        ctx.strokeStyle = 'rgba(232,232,236,0.5)';
        ctx.lineWidth = 2;
        ctx.beginPath(); ctx.moveTo(...gA); ctx.lineTo(...gB); ctx.stroke();
        // Rail shadow-line on bed
        ctx.strokeStyle = 'oklch(0.75 0.14 260 / 0.4)';
        ctx.lineWidth = 1;
        const sA = iso(-plate, yPos, 0.01, cx, cy, s);
        const sB = iso(plate, yPos, 0.01, cx, cy, s);
        ctx.beginPath(); ctx.moveTo(...sA); ctx.lineTo(...sB); ctx.stroke();

        // Print head — small box with nozzle
        const headTop = iso(xPos, yPos, z + 0.6, cx, cy, s);
        const headBot = iso(xPos, yPos, z + 0.08, cx, cy, s);
        ctx.strokeStyle = 'rgba(232,232,236,0.75)';
        ctx.fillStyle = 'rgba(232,232,236,0.1)';
        ctx.lineWidth = 1.2;
        ctx.beginPath();
        ctx.moveTo(headTop[0] - 8, headTop[1] - 2);
        ctx.lineTo(headTop[0] + 8, headTop[1] - 2);
        ctx.lineTo(headTop[0] + 8, headTop[1] + 10);
        ctx.lineTo(headTop[0] - 8, headTop[1] + 10);
        ctx.closePath();
        ctx.fill(); ctx.stroke();
        // nozzle line
        ctx.strokeStyle = 'rgba(232,232,236,0.6)';
        ctx.beginPath();
        ctx.moveTo(headTop[0], headTop[1] + 10);
        ctx.lineTo(headBot[0], headBot[1]);
        ctx.stroke();
        // glowing extrusion dot
        ctx.save();
        ctx.shadowColor = 'oklch(0.85 0.18 260)';
        ctx.shadowBlur = 16;
        ctx.fillStyle = 'oklch(0.9 0.18 260)';
        ctx.beginPath();
        ctx.arc(headBot[0], headBot[1], 2.5, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
      }

      // publish HUD about 5x/sec
      hudTick += 1;
      if (hudTick % 12 === 0) {
        setPrintHud({
          layer: Math.min(built, TOTAL),
          total: TOTAL,
          pct,
          elapsed: elapsedMin,
          eta: etaMin,
        });
      }

      raf = requestAnimationFrame(draw);
    };
    draw();
    return () => cancelAnimationFrame(raf);
  }, []);

  const onScroll = (e) => setScrollY(e.currentTarget.scrollTop);
  const onMove = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    setMouse({
      x: (e.clientX - r.left - r.width / 2) / r.width,
      y: (e.clientY - r.top - r.height / 2) / r.height,
    });
  };
  const parallax = (d) => ({ transform: `translate3d(${mouse.x*d}px, ${mouse.y*d}px, 0)` });

  const accent = 'oklch(0.75 0.14 260)';
  const accent2 = 'oklch(0.72 0.15 300)';
  const mutedText = 'rgba(232,232,236,0.65)';
  const dimText = 'rgba(232,232,236,0.45)';

  const services = [
    { n: '01', t: 'Custom 3D Printing', d: 'Your design, precision-printed in resin or filament — from a single keepsake to a full short run.' },
    { n: '02', t: 'Rapid Prototyping', d: 'Go from CAD to a part in hand fast — test form, fit and function before you commit to tooling.' },
    { n: '03', t: 'Product Design', d: 'We help shape the idea — concept, CAD, and print-ready files built around how the object will actually be used.' },
    { n: '04', t: 'Personalized Creations', d: 'One-of-one gifts, figurines, décor and bespoke objects — made to your spec, made just for you.' },
  ];

  const socials = [
    { label: 'Instagram', handle: '@3droopcraft',
      icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg> },
    { label: 'WhatsApp', handle: '+91 9663479007',
      icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21l1.65-4.5A8.5 8.5 0 1 1 8 19.5L3 21z"/><path d="M9 10c.5 2 1.8 3.5 4 4 1-.2 1.5-.8 2-1.2-.6-.3-1.3-.6-2-1l-1 1c-1-.5-1.8-1.3-2.2-2.3l1-1c-.4-.7-.7-1.4-1-2-.5.5-1 1-1.2 2z"/></svg> },
    { label: 'Email', handle: 'Support@3droopcraft.com',
      icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg> },
  ];

  return (
    <div
      ref={scrollRef}
      onScroll={onScroll}
      onMouseMove={onMove}
      style={{
        width, height,
        overflowY: 'auto', overflowX: 'hidden',
        background: '#0b1020',
        color: '#e8e8ec',
        fontFamily: "'Space Grotesk', sans-serif",
        position: 'relative',
        scrollBehavior: 'smooth',
      }}
    >
      {/* Fixed grid + glow bg */}
      <div style={{
        position: 'sticky', top: 0, height: 0, zIndex: 0, pointerEvents: 'none',
      }}>
        <div style={{
          position: 'absolute', top: -100, left: 0, right: 0, height,
          backgroundImage: `
            linear-gradient(to right, rgba(110,168,255,0.05) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(110,168,255,0.05) 1px, transparent 1px)
          `,
          backgroundSize: '60px 60px',
          maskImage: 'radial-gradient(ellipse at center, #000 10%, transparent 80%)',
          WebkitMaskImage: 'radial-gradient(ellipse at center, #000 10%, transparent 80%)',
        }} />
      </div>

      {/* NAV */}
      <div style={{
        position: 'sticky', top: 0, zIndex: 20,
        padding: '24px 64px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        background: `linear-gradient(to bottom, rgba(11,16,32,0.95), rgba(11,16,32,0.75))`,
        backdropFilter: 'blur(12px)',
        borderBottom: '1px solid rgba(232,232,236,0.06)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{
            fontSize: 17, fontWeight: 600, letterSpacing: -0.3,
            background: `linear-gradient(135deg, #fff 0%, ${accent2} 100%)`,
            WebkitBackgroundClip: 'text',
            backgroundClip: 'text',
            color: 'transparent',
          }}>3D Roop Craft</div>
        </div>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 11, letterSpacing: 2.5,
          color: dimText, textTransform: 'uppercase',
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: accent, boxShadow: `0 0 8px ${accent}`, animation: 'vcPulse 1.6s ease-in-out infinite' }} />
          Launching 25.05.2026
        </div>
      </div>

      {/* HERO */}
      <section style={{
        position: 'relative', minHeight: height - 80,
        padding: '80px 64px 120px',
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
      }}>
        <canvas ref={canvasRef} style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          opacity: 0.95, ...parallax(20),
        }} />

        {/* Printer HUD overlay */}
        <div style={{
          position: 'absolute',
          right: 48, top: '50%', transform: 'translateY(-50%)',
          zIndex: 3,
          width: 260,
          padding: '22px 22px 20px',
          background: 'rgba(11, 16, 32, 0.72)',
          backdropFilter: 'blur(10px)',
          border: '1px solid rgba(232,232,236,0.12)',
          ...parallax(4),
        }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 10, letterSpacing: 2.5,
            color: dimText, textTransform: 'uppercase',
            marginBottom: 18,
          }}>
            <span>Bambu Lab A1 · Live</span>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              color: accent,
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: '50%',
                background: accent,
                boxShadow: `0 0 8px ${accent}`,
                animation: 'vcPulse 1.6s ease-in-out infinite',
              }} />
              PRINTING
            </span>
          </div>

          {/* Percentage big */}
          <div style={{
            display: 'flex', alignItems: 'baseline', gap: 6,
            marginBottom: 14,
          }}>
            <span style={{
              fontSize: 56, fontWeight: 300, lineHeight: 1,
              color: '#fff', letterSpacing: -2,
              fontVariantNumeric: 'tabular-nums',
            }}>{printHud.pct.toFixed(1)}</span>
            <span style={{
              fontSize: 20, color: dimText, fontWeight: 300,
            }}>%</span>
          </div>

          {/* Progress bar */}
          <div style={{
            height: 3, background: 'rgba(232,232,236,0.1)',
            position: 'relative', overflow: 'hidden',
            marginBottom: 20,
          }}>
            <div style={{
              position: 'absolute', left: 0, top: 0, bottom: 0,
              width: `${printHud.pct}%`,
              background: `linear-gradient(90deg, ${accent}, ${accent2})`,
              boxShadow: `0 0 8px ${accent}`,
              transition: 'width 0.2s linear',
            }} />
          </div>

          {/* Stats grid */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: '14px 16px',
            fontFamily: "'JetBrains Mono', monospace",
          }}>
            {[
              { k: 'LAYER', v: `${String(printHud.layer).padStart(3,'0')} / ${printHud.total}` },
              { k: 'FILAMENT', v: 'PLA · #6EA8FF' },
              { k: 'ELAPSED', v: `${Math.floor(printHud.elapsed/60)}h ${String(Math.floor(printHud.elapsed%60)).padStart(2,'0')}m` },
              { k: 'ETA', v: `${Math.floor(printHud.eta/60)}h ${String(Math.floor(printHud.eta%60)).padStart(2,'0')}m` },
            ].map((it) => (
              <div key={it.k}>
                <div style={{
                  fontSize: 9, letterSpacing: 2,
                  color: dimText, textTransform: 'uppercase',
                  marginBottom: 4,
                }}>{it.k}</div>
                <div style={{
                  fontSize: 13, color: '#fff',
                  fontVariantNumeric: 'tabular-nums',
                  letterSpacing: 0.5,
                }}>{it.v}</div>
              </div>
            ))}
          </div>
        </div>

        {/* radial glow */}
        <div style={{
          position: 'absolute', left: '72%', top: '50%',
          width: 700, height: 700,
          transform: 'translate(-50%,-50%)',
          background: `radial-gradient(circle, oklch(0.55 0.18 280 / 0.35) 0%, transparent 65%)`,
          pointerEvents: 'none',
        }} />

        <div style={{ position: 'relative', zIndex: 2, maxWidth: 820, ...parallax(6) }}>
          <div style={{
            display: 'inline-block',
            padding: '8px 16px',
            border: `1px solid ${accent}40`,
            background: 'rgba(110,168,255,0.04)',
            borderRadius: 999,
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 11, letterSpacing: 3,
            color: accent, textTransform: 'uppercase',
            marginBottom: 32,
          }}>● Coming Soon</div>

          <h1 style={{
            fontSize: 128, fontWeight: 500, lineHeight: 0.92,
            letterSpacing: -5, margin: 0,
            background: `linear-gradient(135deg, #fff 0%, ${accent2} 60%, ${accent} 100%)`,
            WebkitBackgroundClip: 'text',
            backgroundClip: 'text',
            color: 'transparent',
            filter: `drop-shadow(0 0 40px ${accent}30)`,
          }}>3D Roop<br/>Craft</h1>

          <div style={{
            marginTop: 32,
            fontSize: 28, fontWeight: 400,
            color: '#fff',
            lineHeight: 1.25, letterSpacing: -0.5,
            maxWidth: 640,
          }}>
            Turning Ideas <span style={{ color: accent2 }}>into Reality.</span>
          </div>

          <p style={{
            marginTop: 24,
            fontSize: 19, lineHeight: 1.6,
            color: mutedText, maxWidth: 560,
            textWrap: 'pretty',
          }}>
            We craft your imagination into physical form using advanced 3D
            printing technology. Custom designs. Precision builds. Endless
            possibilities.
          </p>

          <div style={{
            marginTop: 28,
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 13, letterSpacing: 2,
            color: accent, textTransform: 'uppercase',
          }}>→ Launching Soon</div>
        </div>

        {/* Countdown */}
        <div style={{ position: 'relative', zIndex: 2, marginTop: 72, ...parallax(3) }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 11, letterSpacing: 3,
            color: dimText, textTransform: 'uppercase',
            marginBottom: 16,
          }}>→ Launch Countdown</div>
          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            {[
              { n: countdown.d, l: 'Days' },
              { n: countdown.h, l: 'Hours' },
              { n: countdown.m, l: 'Minutes' },
              { n: countdown.s, l: 'Seconds' },
            ].map((u, i) => (
              <div key={i} style={{
                minWidth: 132,
                padding: '18px 22px',
                border: '1px solid rgba(232,232,236,0.1)',
                background: 'rgba(232,232,236,0.03)',
                backdropFilter: 'blur(6px)',
                position: 'relative',
              }}>
                <div style={{
                  fontSize: 56, fontWeight: 300,
                  fontVariantNumeric: 'tabular-nums',
                  color: '#fff', letterSpacing: -2,
                  lineHeight: 1,
                }}>{String(u.n).padStart(2, '0')}</div>
                <div style={{
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 10, letterSpacing: 2.5,
                  color: dimText, textTransform: 'uppercase',
                  marginTop: 10,
                }}>{u.l}</div>
                <div style={{
                  position: 'absolute', top: 0, left: 0, width: 12, height: 1, background: accent,
                }} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ABOUT */}
      <section style={{
        position: 'relative', zIndex: 2,
        padding: '120px 64px',
        borderTop: '1px solid rgba(232,232,236,0.06)',
      }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '180px 1fr', gap: 64,
          maxWidth: 1100,
        }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 11, letterSpacing: 3,
            color: accent, textTransform: 'uppercase',
            paddingTop: 14,
          }}>
            <span style={{ display: 'inline-block', width: 24, height: 1, background: accent, marginRight: 12, verticalAlign: 'middle' }} />
            01 · About
          </div>
          <div>
            <h2 style={{
              fontSize: 56, fontWeight: 400, lineHeight: 1.1,
              letterSpacing: -1.5, margin: 0, color: '#fff',
            }}>
              Transforming concepts into <span style={{ fontStyle: 'italic', color: accent2 }}>tangible creations.</span>
            </h2>
            <p style={{
              marginTop: 32, fontSize: 19, lineHeight: 1.7,
              color: mutedText, maxWidth: 700, textWrap: 'pretty',
            }}>
              At 3D Roop Craft, we specialize in transforming concepts into
              tangible creations. From prototypes to personalized gifts, we
              bring innovation and creativity together through cutting-edge
              3D printing solutions.
            </p>
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section style={{
        position: 'relative', zIndex: 2,
        padding: '120px 64px',
        borderTop: '1px solid rgba(232,232,236,0.06)',
        background: 'linear-gradient(180deg, transparent, oklch(0.20 0.05 280 / 0.25), transparent)',
      }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '180px 1fr', gap: 64,
        }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 11, letterSpacing: 3,
            color: accent, textTransform: 'uppercase',
            paddingTop: 14,
          }}>
            <span style={{ display: 'inline-block', width: 24, height: 1, background: accent, marginRight: 12, verticalAlign: 'middle' }} />
            02 · Services
          </div>
          <div>
            <h2 style={{
              fontSize: 48, fontWeight: 400, letterSpacing: -1.2,
              margin: 0, color: '#fff',
            }}>What we're printing.</h2>

            <div style={{
              marginTop: 56,
              display: 'grid',
              gridTemplateColumns: '1fr 1fr',
              gap: 1,
              background: 'rgba(232,232,236,0.1)',
              border: '1px solid rgba(232,232,236,0.1)',
            }}>
              {services.map((s, i) => (
                <div key={s.n} className="vc-service" style={{
                  padding: '40px 36px',
                  background: '#0b1020',
                  position: 'relative',
                  transition: 'background 0.3s ease',
                  cursor: 'default',
                }}>
                  <div style={{
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: 11, letterSpacing: 2.5,
                    color: accent, textTransform: 'uppercase',
                    marginBottom: 18,
                  }}>· {s.n}</div>
                  <div style={{
                    fontSize: 28, fontWeight: 500,
                    color: '#fff', letterSpacing: -0.6,
                    marginBottom: 14,
                  }}>{s.t}</div>
                  <div style={{
                    fontSize: 15, lineHeight: 1.6,
                    color: mutedText, maxWidth: 420,
                  }}>{s.d}</div>
                  <div className="vc-service-arrow" style={{
                    position: 'absolute', bottom: 32, right: 36,
                    color: dimText, transition: 'color 0.2s, transform 0.2s',
                  }}>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round">
                      <path d="M5 12h14M13 6l6 6-6 6"/>
                    </svg>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* SUBSCRIBE */}
      {/* <section style={{
        position: 'relative', zIndex: 2,
        padding: '140px 64px',
        borderTop: '1px solid rgba(232,232,236,0.06)',
      }}>
      
        <div style={{
          position: 'absolute', left: '50%', top: '50%',
          transform: 'translate(-50%,-50%)',
          width: 800, height: 400,
          background: `radial-gradient(ellipse, ${accent2}30 0%, transparent 70%)`,
          pointerEvents: 'none',
        }} />

        <div style={{
          position: 'relative', maxWidth: 720, margin: '0 auto', textAlign: 'center',
        }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 11, letterSpacing: 3,
            color: accent, textTransform: 'uppercase',
            marginBottom: 24,
          }}>03 · Stay In The Loop</div>

          <h2 style={{
            fontSize: 56, fontWeight: 400, lineHeight: 1.1,
            letterSpacing: -1.5, margin: 0, color: '#fff',
          }}>
            Be the first to experience<br/>
            <span style={{ color: accent2, fontStyle: 'italic' }}>the future of creation.</span>
          </h2>
          <p style={{
            marginTop: 22, fontSize: 18, lineHeight: 1.6,
            color: mutedText, maxWidth: 520, margin: '22px auto 0',
          }}>
            Enter your email and get notified the moment we launch.
          </p>

          <form onSubmit={(e) => { e.preventDefault(); if (email) setSubmitted(true); }}
            style={{ marginTop: 48, display: 'flex', gap: 0, justifyContent: 'center', maxWidth: 520, margin: '48px auto 0' }}>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="your@email.com"
              disabled={submitted}
              style={{
                flex: 1,
                padding: '18px 22px',
                background: 'rgba(232,232,236,0.04)',
                border: '1px solid rgba(232,232,236,0.15)',
                borderRight: 'none',
                color: '#fff',
                fontSize: 15,
                fontFamily: "'Space Grotesk', sans-serif",
                outline: 'none',
                transition: 'border-color 0.2s',
              }}
              onFocus={(e) => (e.currentTarget.style.borderColor = accent)}
              onBlur={(e) => (e.currentTarget.style.borderColor = 'rgba(232,232,236,0.15)')}
            />
            <button type="submit" className="vc-notify" disabled={submitted} style={{
              padding: '18px 32px',
              background: submitted ? 'rgba(232,232,236,0.1)' : `linear-gradient(135deg, ${accent}, ${accent2})`,
              border: 'none', color: submitted ? accent : '#0b1020',
              fontFamily: "'Space Grotesk', sans-serif",
              fontSize: 14, fontWeight: 600, letterSpacing: 0.5,
              textTransform: 'uppercase',
              cursor: submitted ? 'default' : 'pointer',
              transition: 'transform 0.2s, box-shadow 0.2s',
              boxShadow: submitted ? 'none' : `0 0 24px ${accent}60`,
            }}>{submitted ? '✓ You\'re on the list' : 'Notify me →'}</button>
          </form>

          <div style={{
            marginTop: 20,
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 11, letterSpacing: 2,
            color: dimText, textTransform: 'uppercase',
          }}>No spam · One email on launch day</div>
        </div>
      </section> */}

      {/* SOCIAL */}
      <section style={{
        position: 'relative', zIndex: 2,
        padding: '100px 64px',
        borderTop: '1px solid rgba(232,232,236,0.06)',
      }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '180px 1fr', gap: 64,
        }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 11, letterSpacing: 3,
            color: accent, textTransform: 'uppercase', paddingTop: 14,
          }}>
            <span style={{ display: 'inline-block', width: 24, height: 1, background: accent, marginRight: 12, verticalAlign: 'middle' }} />
            04 · Connect
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {socials.map((s) => (
              <a key={s.label} href="#" className="vc-social" style={{
                display: 'flex', flexDirection: 'column', gap: 14,
                padding: '28px 24px',
                border: '1px solid rgba(232,232,236,0.1)',
                background: 'rgba(232,232,236,0.02)',
                color: '#fff', textDecoration: 'none',
                transition: 'border-color 0.2s, background 0.2s, transform 0.2s',
              }}>
                <div style={{ color: accent }}>{s.icon}</div>
                <div>
                  <div style={{ fontSize: 18, fontWeight: 500, letterSpacing: -0.3 }}>{s.label}</div>
                  <div style={{
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: 12, color: dimText, marginTop: 4,
                  }}>{s.handle}</div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{
        position: 'relative', zIndex: 2,
        padding: '40px 64px',
        borderTop: '1px solid rgba(232,232,236,0.06)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11, letterSpacing: 2,
        color: dimText, textTransform: 'uppercase',
      }}>
        <span>© 2026 3D Roop Craft. All rights reserved.</span>
        <span>Designed with precision · V 0.1.0</span>
      </footer>

      <style>{`
        .vc-service:hover { background: rgba(110,168,255,0.04) !important; }
        .vc-service:hover .vc-service-arrow {
          color: ${accent} !important;
          transform: translateX(4px);
        }
        .vc-social:hover {
          border-color: ${accent} !important;
          background: rgba(110,168,255,0.05) !important;
          transform: translateY(-2px);
        }
        .vc-notify:hover:not(:disabled) {
          transform: translateY(-1px);
          box-shadow: 0 0 32px ${accent}90 !important;
        }
        @keyframes vcPulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.3; }
        }
      `}</style>
    </div>
  );
}

window.VariationC = VariationC;