const { useState, useRef } = React;

// Individual Camera Rig Card Component with Pure Camera Body Texture
function GearCard({ rig }) {
  const cardRef = useRef(null);
  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseMove = (e) => {
    if (!cardRef.current) return;
    const rect = cardRef.current.getBoundingClientRect();
    setMousePos({
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
    });
  };

  return (
    <div
      ref={cardRef}
      onMouseMove={handleMouseMove}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      className="react-gear-card"
      style={{
        '--mouse-x': `${mousePos.x}px`,
        '--mouse-y': `${mousePos.y}px`,
      }}
    >
      {/* ReactBits Dynamic Radial Spotlight Layer */}
      <div className="react-gear-spotlight" style={{ opacity: isHovered ? 1 : 0 }}></div>
      <div className="react-gear-border-glow" style={{ opacity: isHovered ? 1 : 0 }}></div>

      <div className="react-gear-content">
        
        {/* Camera Title & Role Header */}
        <div className="react-gear-title-wrap">
          <div className="react-gear-icon-box">
            {rig.icon}
          </div>
          <div>
            <h3 className="react-gear-name font-serif">{rig.title}</h3>
            <p className="react-gear-sub">{rig.subtitle}</p>
          </div>
        </div>

        {/* Exact Concrete Hardware Specifications (Zero Demo Data) */}
        <div className="react-gear-specs-grid">
          {rig.specs.map((item, idx) => (
            <div key={idx} className="react-spec-row">
              <span className="react-spec-label">{item.label}</span>
              <span className="react-spec-val">{item.value}</span>
            </div>
          ))}
        </div>

        {/* Direct WhatsApp Consultation */}
        <a 
          href={`https://wa.me/919360701609?text=Hi%20Reelox,%20I'd%20like%20to%20book%20a%20shoot%20with%20the%20${encodeURIComponent(rig.title)}.`}
          target="_blank" 
          rel="noopener" 
          className="react-gear-cta"
        >
          <span>Inquire About {rig.shortName}</span>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
            <line x1="5" y1="12" x2="19" y2="12"></line>
            <polyline points="12 5 19 12 12 19"></polyline>
          </svg>
        </a>

      </div>
    </div>
  );
}

function GearApp() {
  const rigs = [
    {
      id: "sony-a7iv",
      shortName: "Sony A7 IV",
      title: "Sony A7 IV (M4)",
      subtitle: "Full-Frame Camera Videography & Photography",
      category: "FULL-FRAME CAMERA",
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
          <circle cx="12" cy="13" r="4"></circle>
        </svg>
      ),
      specs: [
        { label: "Device & Type", value: "Sony Alpha 7 IV (Full-Frame Mirrorless)" },
        { label: "Video Quality", value: "4K 60P DCI & 10-Bit 4:2:2" },
        { label: "Optics & Lens", value: "Prime Cinema Lenses" },
        { label: "Coverage Use", value: "Weddings, Events, Commercials & Stills" },
      ]
    },
    {
      id: "iphone-pro",
      shortName: "iPhone Pro",
      title: "Apple iPhone Pro",
      subtitle: "Professional Mobile Videography & Social Reels",
      category: "MOBILE VIDEOGRAPHY",
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
          <line x1="12" y1="18" x2="12.01" y2="18"></line>
        </svg>
      ),
      specs: [
        { label: "Device & Type", value: "Apple iPhone Pro Series" },
        { label: "Video Quality", value: "4K 60FPS High-Bitrate Video" },
        { label: "Format", value: "9:16 Vertical Instagram Reels & Story Cuts" },
        { label: "Coverage Use", value: "Fast Reels, Events, Deliveries & Mobile Shoots" },
      ]
    }
  ];

  return (
    <div className="react-gear-wrapper">
      <div className="section-header-minimal">
        <h2 className="section-heading font-serif">Dual Camera Production Setup</h2>
        <p className="section-desc">
          Professional equipment we use for shoots: Sony A7 IV full-frame camera and Apple iPhone Pro for mobile videography.
        </p>
      </div>

      <div className="react-gear-grid">
        {rigs.map((rig) => (
          <GearCard key={rig.id} rig={rig} />
        ))}
      </div>
    </div>
  );
}

// Mount React Component
const gearRootElement = document.getElementById('react-gear-app');
if (gearRootElement) {
  const gearRoot = ReactDOM.createRoot(gearRootElement);
  gearRoot.render(<GearApp />);
}