// ============================================
// PIXELPULSE — Section components
// ============================================

const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

// ===== HERO =====
function Hero() {
  const targetRef = useRefS(null);

  useEffectS(() => {
    const onScroll = () => {
      if (!targetRef.current) return;
      const y = window.scrollY;
      targetRef.current.style.transform = `translateY(calc(-50% + ${y * 0.15}px))`;
    };
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section className="hero" id="home">
      <div className="grid-bg"></div>

      <div className="hero-target" ref={targetRef}>
        <svg viewBox="0 0 700 700" className="static" style={{ animation: 'none' }}>
          {/* Concentric circles */}
          <circle cx="350" cy="350" r="320" fill="none" stroke="#0A1F44" strokeOpacity="0.08" />
          <circle cx="350" cy="350" r="260" fill="none" stroke="#0A1F44" strokeOpacity="0.1" />
          <circle cx="350" cy="350" r="200" fill="none" stroke="#0A1F44" strokeOpacity="0.12" />
          <circle cx="350" cy="350" r="140" fill="none" stroke="#F78F1E" strokeOpacity="0.4" strokeDasharray="2 4" />
          <circle cx="350" cy="350" r="80" fill="none" stroke="#0A1F44" strokeOpacity="0.2" />
          <circle cx="350" cy="350" r="20" fill="#F78F1E" />
          {/* Crosshair */}
          <line x1="350" y1="20" x2="350" y2="680" stroke="#0A1F44" strokeOpacity="0.08" strokeDasharray="2 4" />
          <line x1="20" y1="350" x2="680" y2="350" stroke="#0A1F44" strokeOpacity="0.08" strokeDasharray="2 4" />
          {/* Pixel cluster */}
          <g fill="#F78F1E">
            <rect x="540" y="120" width="6" height="6" />
            <rect x="552" y="115" width="8" height="8" />
            <rect x="566" y="124" width="6" height="6" />
            <rect x="548" y="132" width="6" height="6" />
          </g>
          <g fill="#0A1F44">
            <rect x="556" y="106" width="5" height="5" />
            <rect x="572" y="112" width="5" height="5" />
          </g>
          {/* Tick marks around outer ring */}
          {Array.from({ length: 24 }).map((_, i) => {
            const angle = (i / 24) * Math.PI * 2;
            const x1 = 350 + Math.cos(angle) * 320;
            const y1 = 350 + Math.sin(angle) * 320;
            const x2 = 350 + Math.cos(angle) * 330;
            const y2 = 350 + Math.sin(angle) * 330;
            return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#0A1F44" strokeOpacity="0.3" strokeWidth="1" />;
          })}
        </svg>
      </div>

      <div className="container">
        <div className="hero-grid">
          <div>
            <div style={{ marginBottom: 32, animation: 'wordRise 0.8s var(--ease-out) 0.4s backwards', display: 'inline-flex' }}>
              <span className="eyebrow">[ EST. 2023 / SURAT, GUJARAT — INDIA ]</span>
            </div>
            <h1 className="hero-headline">
              <div><span className="word"><span style={{ animationDelay: '0.1s' }}>Mobile</span></span></div>
              <div><span className="word"><span style={{ animationDelay: '0.25s' }}>apps that</span></span></div>
              <div>
                <span className="word"><span style={{ animationDelay: '0.4s' }}>actually&nbsp;</span></span>
                <span className="word"><span style={{ animationDelay: '0.55s' }}><span className="accent">pulse.</span></span></span>
              </div>
            </h1>

            <div className="hero-cta-row" style={{ animation: 'wordRise 0.8s var(--ease-out) 1.2s backwards' }}>
              <a href="#services" className="btn btn-primary">
                Explore services <span className="arrow">→</span>
              </a>
              <a href="#contact" className="btn btn-ghost">
                Start a project <span className="arrow">↗</span>
              </a>
            </div>

            <div className="hero-meta">
              <div className="hero-meta-block">
                <span className="label">[ What we build ]</span>
                <div className="value">
                  Native iOS & Android apps. Cross-platform builds in Flutter, React Native, Swift & Kotlin — engineered to ship fast and scale further.
                </div>
              </div>
              <div className="hero-meta-block">
                <span className="label">[ Available for ]</span>
                <div className="value">
                  Startups, SMBs and enterprise teams · Full-cycle product development
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="hero-scroll-hint">
          <span>Scroll</span>
          <div className="line"></div>
          <span>02 ↓</span>
        </div>
      </div>
    </section>
  );
}

// ===== Marquee =====
function Marquee() {
  const stack = ['iOS', 'Android', 'Flutter', 'React Native', 'Swift', 'Kotlin', 'Firebase', 'Node.js', 'AWS', 'GraphQL', 'TypeScript', 'Figma'];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {[...stack, ...stack].map((s, i) => (
          <span key={i} className={`marquee-item ${i % 2 === 1 ? 'muted' : ''}`}>
            {s} <span className="dot"></span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ===== Services =====
const SERVICES = [
  {
    num: '01',
    title: 'Native iOS Development',
    desc: 'Swift & SwiftUI apps engineered for iPhone and iPad. App Store-ready, performance-tuned, beautifully native.',
    tags: ['Swift', 'SwiftUI', 'Combine', 'Core Data'],
    icon: (
      <svg viewBox="0 0 56 56" fill="none">
        <rect x="14" y="6" width="28" height="44" rx="4" stroke="#0A1F44" strokeWidth="1.5" />
        <line x1="14" y1="14" x2="42" y2="14" stroke="#0A1F44" strokeWidth="1.5" />
        <line x1="14" y1="42" x2="42" y2="42" stroke="#0A1F44" strokeWidth="1.5" />
        <circle cx="28" cy="46" r="1.5" fill="#F78F1E" />
        <rect x="20" y="20" width="16" height="16" rx="2" fill="#F78F1E" opacity="0.2" />
        <rect x="22" y="22" width="4" height="4" fill="#F78F1E" />
        <rect x="28" y="22" width="6" height="2" fill="#0A1F44" />
        <rect x="28" y="26" width="4" height="2" fill="#0A1F44" opacity="0.5" />
      </svg>
    ),
  },
  {
    num: '02',
    title: 'Android Development',
    desc: 'Kotlin and Jetpack Compose builds for the entire Android ecosystem — phones, tablets, foldables, wear.',
    tags: ['Kotlin', 'Compose', 'Coroutines', 'Material 3'],
    icon: (
      <svg viewBox="0 0 56 56" fill="none">
        <path d="M14 22 Q14 14 22 14 L34 14 Q42 14 42 22 L42 36 L14 36 Z" stroke="#0A1F44" strokeWidth="1.5" fill="none" />
        <line x1="18" y1="14" x2="16" y2="10" stroke="#F78F1E" strokeWidth="1.5" />
        <line x1="38" y1="14" x2="40" y2="10" stroke="#F78F1E" strokeWidth="1.5" />
        <circle cx="22" cy="24" r="1.5" fill="#F78F1E" />
        <circle cx="34" cy="24" r="1.5" fill="#F78F1E" />
        <rect x="14" y="38" width="6" height="12" rx="3" stroke="#0A1F44" strokeWidth="1.5" fill="none" />
        <rect x="36" y="38" width="6" height="12" rx="3" stroke="#0A1F44" strokeWidth="1.5" fill="none" />
      </svg>
    ),
  },
  {
    num: '03',
    title: 'Cross-Platform',
    desc: 'One codebase, two stores. Flutter & React Native apps with native-grade UX and shared business logic.',
    tags: ['Flutter', 'React Native', 'Dart', 'Expo'],
    icon: (
      <svg viewBox="0 0 56 56" fill="none">
        <rect x="6" y="14" width="20" height="32" rx="3" stroke="#0A1F44" strokeWidth="1.5" />
        <rect x="30" y="10" width="20" height="36" rx="3" stroke="#0A1F44" strokeWidth="1.5" fill="#F78F1E" fillOpacity="0.1" />
        <line x1="16" y1="20" x2="16" y2="40" stroke="#F78F1E" strokeWidth="1.5" strokeDasharray="2 2" />
        <line x1="40" y1="16" x2="40" y2="40" stroke="#0A1F44" strokeWidth="1.5" strokeDasharray="2 2" />
        <path d="M26 24 L30 28 L26 32" stroke="#F78F1E" strokeWidth="1.5" fill="none" />
      </svg>
    ),
  },
  {
    num: '04',
    title: 'UI / UX Design',
    desc: 'Research-backed flows, polished interfaces, and design systems that make your product feel inevitable.',
    tags: ['Figma', 'Prototyping', 'Design System', 'Research'],
    icon: (
      <svg viewBox="0 0 56 56" fill="none">
        <circle cx="28" cy="28" r="20" stroke="#0A1F44" strokeWidth="1.5" />
        <circle cx="28" cy="28" r="6" fill="#F78F1E" />
        <line x1="28" y1="8" x2="28" y2="48" stroke="#0A1F44" strokeWidth="1" strokeDasharray="2 3" />
        <line x1="8" y1="28" x2="48" y2="28" stroke="#0A1F44" strokeWidth="1" strokeDasharray="2 3" />
        <rect x="40" y="12" width="6" height="6" fill="#F78F1E" />
      </svg>
    ),
  },
  {
    num: '05',
    title: 'Backend & API',
    desc: 'Scalable Node, Firebase and cloud back-ends. Auth, payments, push, real-time — wired to ship.',
    tags: ['Node.js', 'Firebase', 'AWS', 'GraphQL'],
    icon: (
      <svg viewBox="0 0 56 56" fill="none">
        <rect x="10" y="10" width="36" height="8" rx="2" stroke="#0A1F44" strokeWidth="1.5" />
        <rect x="10" y="22" width="36" height="8" rx="2" stroke="#0A1F44" strokeWidth="1.5" fill="#F78F1E" fillOpacity="0.15" />
        <rect x="10" y="34" width="36" height="8" rx="2" stroke="#0A1F44" strokeWidth="1.5" />
        <circle cx="16" cy="14" r="1.5" fill="#F78F1E" />
        <circle cx="16" cy="26" r="1.5" fill="#F78F1E" />
        <circle cx="16" cy="38" r="1.5" fill="#F78F1E" />
        <line x1="22" y1="14" x2="36" y2="14" stroke="#0A1F44" strokeWidth="1" />
        <line x1="22" y1="26" x2="32" y2="26" stroke="#0A1F44" strokeWidth="1" />
        <line x1="22" y1="38" x2="36" y2="38" stroke="#0A1F44" strokeWidth="1" />
      </svg>
    ),
  },
  {
    num: '06',
    title: 'MVP & Product Strategy',
    desc: 'From idea to launch in weeks, not months. We help startups validate, scope, build, and ship the right thing.',
    tags: ['Discovery', 'Roadmap', 'Sprint 0', 'Launch'],
    icon: (
      <svg viewBox="0 0 56 56" fill="none">
        <path d="M28 6 L42 32 L28 24 L14 32 Z" stroke="#0A1F44" strokeWidth="1.5" fill="#F78F1E" fillOpacity="0.15" />
        <circle cx="28" cy="42" r="6" stroke="#0A1F44" strokeWidth="1.5" />
        <circle cx="28" cy="42" r="2" fill="#F78F1E" />
        <line x1="28" y1="24" x2="28" y2="36" stroke="#F78F1E" strokeWidth="1.5" strokeDasharray="2 2" />
      </svg>
    ),
  },
];

function Services() {
  return (
    <section className="services section" id="services">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="section-num">[ 02 / SERVICES ]</div>
            <h2 className="h-xl">
              Engineered<br />for the <span style={{ color: 'var(--orange)', fontStyle: 'italic', fontWeight: 400 }}>App Store.</span>
            </h2>
          </div>
          <div>
            <p className="lead">
              We build mobile-first products end to end — from the first wireframe to the day-one launch. Every platform, every framework, every milestone owned in-house.
            </p>
          </div>
        </Reveal>

        <div className="services-grid">
          {SERVICES.map((s, i) => (
            <Reveal key={s.num} delay={i * 80} className={`reveal-delay-${(i % 4) + 1}`}>
              <Tilt className="service-card">
                <div>
                  <div className="service-num">[ {s.num} ]</div>
                  <div className="service-icon">{s.icon}</div>
                  <h3 className="service-title">{s.title}</h3>
                  <p className="service-desc">{s.desc}</p>
                </div>
                <div>
                  <div className="service-tags">
                    {s.tags.map((t) => <span key={t}>{t}</span>)}
                  </div>
                </div>
                <div className="service-arrow">↗</div>
                <div className="corner-pixel">
                  <span></span><span></span><span></span>
                  <span></span><span></span><span></span>
                </div>
              </Tilt>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Pulse Waveform =====
function PulseWaveform() {
  const canvasRef = useRefS(null);
  const [active, setActive] = useStateS(0);
  const items = [
    { num: '01', name: 'Native iOS', amp: 1.0 },
    { num: '02', name: 'Android', amp: 1.4 },
    { num: '03', name: 'Cross-Platform', amp: 0.7 },
    { num: '04', name: 'UI / UX', amp: 1.2 },
    { num: '05', name: 'Backend', amp: 0.9 },
    { num: '06', name: 'MVP Strategy', amp: 1.6 },
    { num: '07', name: 'QA & Testing', amp: 0.6 },
    { num: '08', name: 'Launch & Maintain', amp: 1.1 },
  ];

  useEffectS(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf;

    const resize = () => {
      const dpr = window.devicePixelRatio || 1;
      canvas.width = canvas.offsetWidth * dpr;
      canvas.height = canvas.offsetHeight * dpr;
      ctx.scale(dpr, dpr);
    };
    resize();

    let t = 0;
    const draw = () => {
      const w = canvas.offsetWidth;
      const h = canvas.offsetHeight;
      ctx.clearRect(0, 0, w, h);
      const amp = items[active].amp;

      // Multiple wave layers
      for (let layer = 0; layer < 3; layer++) {
        ctx.beginPath();
        const layerAmp = amp * (1 - layer * 0.25);
        const offset = layer * 8;
        ctx.strokeStyle = layer === 0 ? '#F78F1E' : `rgba(247, 143, 30, ${0.3 - layer * 0.1})`;
        ctx.lineWidth = layer === 0 ? 2 : 1;

        for (let x = 0; x <= w; x += 2) {
          const px = x / w;
          // Bell-curve envelope so the pulse is centered
          const envelope = Math.sin(px * Math.PI);
          const y = h / 2
            + Math.sin(px * 8 + t * 0.04) * 30 * layerAmp * envelope
            + Math.sin(px * 16 + t * 0.07) * 18 * layerAmp * envelope
            + Math.sin(px * 32 + t * 0.05) * 8 * layerAmp * envelope
            + offset;
          if (x === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
        }
        ctx.stroke();
      }

      // Tick marks underneath
      ctx.strokeStyle = 'rgba(255,255,255,0.1)';
      ctx.lineWidth = 1;
      for (let i = 0; i < 40; i++) {
        const x = (i / 40) * w;
        const len = i % 5 === 0 ? 12 : 6;
        ctx.beginPath();
        ctx.moveTo(x, h - 4);
        ctx.lineTo(x, h - 4 - len);
        ctx.stroke();
      }

      t++;
      raf = requestAnimationFrame(draw);
    };
    draw();

    window.addEventListener('resize', resize);
    return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); };
  }, [active]);

  // Auto-cycle
  useEffectS(() => {
    const i = setInterval(() => setActive((a) => (a + 1) % items.length), 3500);
    return () => clearInterval(i);
  }, []);

  return (
    <section className="pulse-section section">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="section-num" style={{ color: 'rgba(255,255,255,0.5)' }}>[ 03 / SIGNAL ]</div>
            <h2 className="h-xl">
              Every service —<br />one <span style={{ color: 'var(--orange)', fontStyle: 'italic', fontWeight: 400 }}>pulse.</span>
            </h2>
          </div>
          <div>
            <p className="lead">
              Hover any capability below to feel its signature. The waveform shifts to mirror the depth, complexity, and ambition we bring to that craft.
            </p>
          </div>
        </Reveal>

        <Reveal>
          <canvas ref={canvasRef} className="pulse-canvas"></canvas>
        </Reveal>

        <Reveal>
          <div className="pulse-services-grid">
            {items.map((it, i) => (
              <div
                key={i}
                className={`pulse-pill ${active === i ? 'active' : ''}`}
                onMouseEnter={() => setActive(i)}
              >
                <div className="pp-num">[ {it.num} ]</div>
                <div className="pp-name">{it.name}</div>
                <div className="pp-dot"></div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Marquee, Services, PulseWaveform });
