// services-bento.jsx — final services section: fancy bento grid

const { motion: mb } = window.framerMotion || window.Motion || {};
const {
  IconStack, IconChain, IconPhone, IconCloud, IconGrid, IconShield,
  Reveal,
} = window;

const BENTO_SERVICES = [
  { icon: IconStack,  title: "Full-Stack Development", body: "End-to-end application development with modern architectures, scalable backends, and intuitive frontends." },
  { icon: IconChain,  title: "Blockchain Solutions",   body: "Smart contracts, DeFi protocols, and Web3 integration — built with security and efficiency at the core." },
  { icon: IconPhone,  title: "Mobile Applications",    body: "Native and cross-platform apps that captivate users, powered by React Native and Expo." },
  { icon: IconCloud,  title: "Cloud Infrastructure",   body: "Robust, scalable cloud architectures on AWS and GCP, with DevOps excellence and automated CI/CD." },
  { icon: IconGrid,   title: "Modern Web Design",      body: "Stunning, responsive sites that combine aesthetic excellence with performance and SEO." },
  { icon: IconShield, title: "Security & Auditing",    body: "Comprehensive audits, penetration testing, and best-practice implementation to protect your assets." },
];

function BentoVisual({ kind }) {
  if (kind === "orbit") return (
    <div className="bv bv-orbit">
      {[1, 2, 3].map((r) => (
        <mb.div key={r} className="bv-orbit-ring" style={{ width: `${r * 30}%`, height: `${r * 30}%` }}
          animate={{ rotate: 360 }} transition={{ duration: 20 + r * 8, repeat: Infinity, ease: "linear" }}/>
      ))}
      <div className="bv-orbit-core"/>
    </div>
  );
  if (kind === "chain") return (
    <svg className="bv" viewBox="0 0 100 100" preserveAspectRatio="none">
      {Array.from({ length: 20 }).map((_, i) => {
        const cx = (i * 37) % 100, cy = (i * 53) % 100;
        return (
          <mb.circle key={i} cx={cx} cy={cy} r="0.6" fill="var(--accent)"
            animate={{ opacity: [0.2, 1, 0.2] }}
            transition={{ duration: 3 + (i % 3), repeat: Infinity, delay: (i * 0.17) % 3 }}/>
        );
      })}
      {Array.from({ length: 10 }).map((_, i) => {
        const x1 = (i * 23) % 100, y1 = (i * 41) % 100;
        return (
          <mb.line key={i} x1={x1} y1={y1} x2={x1 + 20} y2={y1 + 10}
            stroke="var(--accent)" strokeWidth="0.15" strokeOpacity="0.3"
            animate={{ pathLength: [0, 1, 0] }} transition={{ duration: 4, delay: i * 0.3, repeat: Infinity }}/>
        );
      })}
    </svg>
  );
  if (kind === "signal") return (
    <div className="bv bv-signal">
      {Array.from({ length: 16 }).map((_, i) => (
        <mb.span key={i} className="bv-bar"
          animate={{ scaleY: [0.2, 1, 0.4, 0.9, 0.3] }}
          transition={{ duration: 1.8, repeat: Infinity, delay: i * 0.08 }}/>
      ))}
    </div>
  );
  if (kind === "grid") return (
    <div className="bv bv-grid">
      <svg viewBox="0 0 200 200" preserveAspectRatio="none">
        <defs>
          <pattern id="pgrid" width="12" height="12" patternUnits="userSpaceOnUse">
            <path d="M12 0H0V12" fill="none" stroke="var(--accent)" strokeWidth="0.3" strokeOpacity="0.25"/>
          </pattern>
        </defs>
        <rect width="200" height="200" fill="url(#pgrid)"/>
        <mb.circle cx="100" cy="100" r="30" fill="none" stroke="var(--accent)" strokeWidth="0.8"
          animate={{ r: [20, 70, 20], opacity: [0.8, 0, 0.8] }} transition={{ duration: 4, repeat: Infinity }}/>
        <mb.circle cx="100" cy="100" r="50" fill="none" stroke="var(--accent)" strokeWidth="0.8"
          animate={{ r: [30, 90, 30], opacity: [0.6, 0, 0.6] }} transition={{ duration: 4, repeat: Infinity, delay: 1 }}/>
      </svg>
    </div>
  );
  if (kind === "noise") return <div className="bv bv-noise"/>;
  if (kind === "shield") return (
    <svg className="bv" viewBox="0 0 100 100">
      {Array.from({ length: 6 }).map((_, i) => (
        <mb.polygon key={i}
          points="50,15 80,30 80,60 50,85 20,60 20,30"
          fill="none" stroke="var(--accent)" strokeWidth="0.4" strokeOpacity={0.35 - i * 0.05}
          animate={{ scale: [1, 1.15, 1] }}
          transition={{ duration: 3, delay: i * 0.25, repeat: Infinity }}
          style={{ transformOrigin: "50% 50%" }}/>
      ))}
    </svg>
  );
  return null;
}

function BentoTile({ service, size, visual, index }) {
  const Icon = service.icon;
  const ref = React.useRef(null);
  const [pos, setPos] = React.useState({ x: 50, y: 50 });
  const onMove = (e) => {
    const r = ref.current.getBoundingClientRect();
    setPos({ x: ((e.clientX - r.left) / r.width) * 100, y: ((e.clientY - r.top) / r.height) * 100 });
  };
  return (
    <mb.div ref={ref} className={`v4-tile v4-${size}`}
      onMouseMove={onMove}
      style={{ "--mx": `${pos.x}%`, "--my": `${pos.y}%` }}
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-10%" }}
      transition={{ duration: 0.8, delay: index * 0.06, ease: "easeOut" }}>
      <BentoVisual kind={visual}/>
      <div className="v4-tile-content">
        <span className="v4-ico"><Icon/></span>
        <h3>{service.title}</h3>
        <p>{service.body}</p>
      </div>
      <span className="v4-n">{String(index + 1).padStart(2, "0")}</span>
    </mb.div>
  );
}

function Services() {
  const visuals = ["orbit", "chain", "signal", "grid", "noise", "shield"];
  const sizes = ["xl", "md", "md", "lg", "sm", "sm"];
  return (
    <section id="services" className="section section--v4">
      <div className="container">
        <div className="section-head">
          <Reveal><div className="eyebrow"><span className="eyebrow-dot"/>01 · Services</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="section-title">
              Six disciplines,<br/>
              <span className="section-title--serif">one studio.</span>
            </h2>
          </Reveal>
        </div>
        <div className="v4-bento">
          {BENTO_SERVICES.map((s, i) => (
            <BentoTile key={s.title} service={s} size={sizes[i]} visual={visuals[i]} index={i}/>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services });