// website.jsx — APWAY Product Landing Page

function AnimationEmbed() {
  var tweaks = window.TWEAK_DEFAULTS;
  var _Stage = window.Stage;
  var _Background = window.Background;
  var _PickPlaceScene = window.PickPlaceScene;
  var _W = window.W;
  var _H = window.H;

  return (
    <_Stage width={_W} height={_H} duration={28} background="transparent" loop={true} showControls={false}>
      <svg viewBox={"0 0 " + _W + " " + _H} width={_W} height={_H}
           style={{ position: 'absolute', inset: 0 }}>
        <defs>
          <pattern id="techGrid" width="40" height="40" patternUnits="userSpaceOnUse">
            <circle cx="20" cy="20" r="0.7" fill="#1A1A1A"/>
          </pattern>
          <pattern id="bedGrid" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1A1A1A" strokeWidth="0.5"/>
          </pattern>
          <pattern id="pcbTexture" width="6" height="6" patternUnits="userSpaceOnUse">
            <rect width="6" height="6" fill="transparent"/>
            <circle cx="3" cy="3" r="0.4" fill="#0f2a18"/>
          </pattern>
        </defs>
        <_Background/>
        <_PickPlaceScene tweaks={tweaks}/>
      </svg>
    </_Stage>
  );
}

function FeatureIcon(props) {
  return (
    <div className="feature-icon">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d={props.d}/>
      </svg>
    </div>
  );
}

function useCursorGlow() {
  React.useEffect(function() {
    var glow = document.getElementById('cursor-glow');
    var dot = document.getElementById('cursor-dot');
    if (!glow || !dot) return;
    function onMove(e) {
      glow.style.left = e.clientX + 'px';
      glow.style.top = e.clientY + 'px';
      dot.style.left = e.clientX + 'px';
      dot.style.top = e.clientY + 'px';
    }
    function onEnter() { glow.style.opacity = '1'; dot.style.opacity = '1'; }
    function onLeave() { glow.style.opacity = '0'; dot.style.opacity = '0'; }
    document.addEventListener('mousemove', onMove);
    document.addEventListener('mouseenter', onEnter);
    document.addEventListener('mouseleave', onLeave);
    return function() {
      document.removeEventListener('mousemove', onMove);
      document.removeEventListener('mouseenter', onEnter);
      document.removeEventListener('mouseleave', onLeave);
    };
  }, []);
}

function useCardGlow() {
  React.useEffect(function() {
    function onMove(e) {
      var card = e.currentTarget;
      var rect = card.getBoundingClientRect();
      var x = ((e.clientX - rect.left) / rect.width * 100).toFixed(1) + '%';
      var y = ((e.clientY - rect.top) / rect.height * 100).toFixed(1) + '%';
      card.style.setProperty('--mx', x);
      card.style.setProperty('--my', y);
    }
    var cards = document.querySelectorAll('.spec-card');
    cards.forEach(function(c) { c.addEventListener('mousemove', onMove); });
    return function() {
      cards.forEach(function(c) { c.removeEventListener('mousemove', onMove); });
    };
  }, []);
}

function Website() {
  var scrollState = React.useState(false);
  var scrolled = scrollState[0];
  var setScrolled = scrollState[1];

  useCardGlow();
  useCursorGlow();

  React.useEffect(function() {
    var onScroll = function() { setScrolled(window.scrollY > 20); };
    window.addEventListener('scroll', onScroll, { passive: true });
    return function() { window.removeEventListener('scroll', onScroll); };
  }, []);

  return (
    <div style={{ background: 'transparent', minHeight: '100vh' }}>

      <nav className={"site-nav " + (scrolled ? "scrolled" : "")} id="top-nav">
        <a href="#" className="nav-logo">AP<span>WAY</span></a>
        <ul className="nav-links">
          <li><a href="#product">Product</a></li>
          <li><a href="#features">Features</a></li>
          <li><a href="#mission">Mission</a></li>
          <li><a href="#contact" className="nav-cta">Get in Touch</a></li>
        </ul>
      </nav>

      <section className="hero" id="hero">
        <div style={{ padding: '24px 48px 0', width: '100%', maxWidth: 1280, margin: '0 auto' }}>
          <span className="hero-badge">Made in India</span>
        </div>
        <div className="hero-animation">
          <AnimationEmbed />
        </div>
        <div className="hero-text" id="mission" style={{ position: 'relative', zIndex: 1, overflow: 'hidden' }}>
          <video
            autoPlay muted loop playsInline
            style={{
              position: 'absolute', inset: 0,
              width: '100%', height: '100%',
              objectFit: 'cover',
              zIndex: 0,
              opacity: 0.55,
            }}
            src="hero-bg.mp4"
          />
          <div style={{
            position: 'absolute', inset: 0, zIndex: 1,
            background: 'linear-gradient(180deg, rgba(8,8,8,0.55) 0%, rgba(8,8,8,0.25) 50%, rgba(8,8,8,0.6) 100%)'
          }}/>
          <div style={{ position: 'relative', zIndex: 2 }}>
            <h1>
              <span className="h1-line1">Realising India's <span className="accent">Semiconductor</span> Dream</span>
              <span className="h1-line2">One Step at a Time.</span>
            </h1>
            <p>
              India's indigenous SMT pick‑and‑place machine. Rapid prototyping,
              small‑batch production — designed and built entirely in India.
            </p>
          </div>
        </div>
      </section>


      <section className="section" id="product">
        <div className="section-eyebrow">Product Specifications</div>
        <div className="section-title">Built for Speed.<br/>Engineered for India.</div>
        <div className="section-desc">
          The APWAY PNP machine delivers exceptional throughput with an indigenously developed
          controller — making in-house SMT assembly accessible for R&amp;D labs and small-batch production.
        </div>
        <div className="specs-grid">
          <div className="spec-card">
            <div className="spec-number">~2000 <span>CPH</span></div>
            <div className="spec-label">Placement Speed</div>
            <div className="spec-desc">Components per hour — fast enough for rapid prototyping and small production runs.</div>
          </div>
          <div className="spec-card">
            <div className="spec-number">100<span>%</span></div>
            <div className="spec-label">Made in India</div>
            <div className="spec-desc">Indigenous controller, mechanical design, and software — zero import dependency.</div>
          </div>
          <div className="spec-card">
            <div className="spec-number">0<span> days</span></div>
            <div className="spec-label">Import Wait Time</div>
            <div className="spec-desc">No customs, no shipping delays. Local manufacturing means instant availability.</div>
          </div>
          <div className="spec-card">
            <div className="spec-number">10×</div>
            <div className="spec-label">Faster Iteration</div>
            <div className="spec-desc">Speed up your R&amp;D throughput with in-house prototyping instead of outsourcing.</div>
          </div>
        </div>
      </section>

      <section className="section" id="features">
        <div className="section-eyebrow">Why APWAY</div>
        <div className="section-title">Purpose-Built for Indian R&amp;D.</div>
        <div className="section-desc">
          Every component of the APWAY machine is designed to solve real problems
          faced by Indian hardware startups, research labs, and small manufacturers.
        </div>
        <div className="features-grid">
          <div className="feature-item">
            <FeatureIcon d="M13 2L3 14h9l-1 8 10-12h-9l1-8"/>
            <div className="feature-content">
              <h3>Rapid Prototyping</h3>
              <p>Go from design to assembled PCB in hours, not weeks. Perfect for iterating on hardware designs in-house.</p>
            </div>
          </div>
          <div className="feature-item">
            <FeatureIcon d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
            <div className="feature-content">
              <h3>Indigenous Controller</h3>
              <p>Made-in-India controller built on Indian silicon — supporting the domestic semiconductor ecosystem.</p>
            </div>
          </div>
          <div className="feature-item">
            <FeatureIcon d="M12 2v20M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/>
            <div className="feature-content">
              <h3>Zero Import Duty</h3>
              <p>Domestically manufactured — no customs, no forex fluctuation. Predictable cost of ownership.</p>
            </div>
          </div>
          <div className="feature-item">
            <FeatureIcon d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/>
            <div className="feature-content">
              <h3>Local Service &amp; Support</h3>
              <p>On-ground support team in India. No overseas service calls, no timezone delays for critical fixes.</p>
            </div>
          </div>
          <div className="feature-item">
            <FeatureIcon d="M22 12h-4l-3 9L9 3l-3 9H2"/>
            <div className="feature-content">
              <h3>Small-Batch Production</h3>
              <p>Scale from prototype to pilot production without outsourcing. Ideal for 10-1000 unit runs.</p>
            </div>
          </div>
          <div className="feature-item">
            <FeatureIcon d="M12 20V10M18 20V4M6 20v-4"/>
            <div className="feature-content">
              <h3>Speed Up R&amp;D Throughput</h3>
              <p>Eliminate external assembly bottlenecks. Test, iterate, and validate faster than ever before.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="cta-section" id="contact">
        <div className="section-eyebrow" style={{ textAlign: 'center' }}>Get Started</div>
        <div className="section-title" style={{ textAlign: 'center', maxWidth: 600, margin: '0 auto 16px' }}>
          Ready to Build In-House?
        </div>
        <p className="section-desc" style={{ textAlign: 'center', maxWidth: 500, margin: '0 auto 40px' }}>
          Talk to our team about bringing SMT assembly capability
          to your lab. Made in India, for India.
        </p>
        <a href="mailto:contact@apway.in" className="cta-button">Contact Us →</a>
      </section>

      <footer className="site-footer">
        <div className="footer-logo">AP<span>WAY</span></div>
        <div className="footer-tagline">Designed &amp; Built in India, for India.</div>
        <div className="footer-copy">© APWAY 2026</div>
      </footer>
    </div>
  );
}

// Mount the website
(function tryMount() {
  if (window.Stage && window.PickPlaceScene && window.Background && window.TWEAK_DEFAULTS) {
    ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(Website));
  } else {
    setTimeout(tryMount, 100);
  }
})();
