import React, { useEffect } from 'react';
import Head from '@docusaurus/Head';
import Layout from '@theme/Layout';
import './toddlerSinkHome.css';

export default function Home() {
  useEffect(() => {
    // Scroll animations
    const observerOptions = {
      threshold: 0.1,
      rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.style.opacity = '1';
          entry.target.style.transform = 'translateY(0)';
        }
      });
    }, observerOptions);

    const cards = document.querySelectorAll('.feature-card, .cta-card');
    cards.forEach(card => {
      card.style.opacity = '0';
      card.style.transform = 'translateY(20px)';
      card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
      observer.observe(card);
    });

    // Feature navigation
    const navItems = document.querySelectorAll('.feature-nav-item');
    const demoContents = document.querySelectorAll('.demo-content');

    navItems.forEach(item => {
      item.addEventListener('click', () => {
        navItems.forEach(nav => nav.classList.remove('active'));
        item.classList.add('active');
        demoContents.forEach(demo => demo.classList.remove('active'));
        const feature = item.getAttribute('data-feature');
        const targetDemo = document.getElementById(`demo-${feature}`);
        if (targetDemo) {
          targetDemo.classList.add('active');
        }
      });
    });

    // Video placeholder
    const playButton = document.querySelector('.play-button');
    if (playButton) {
      playButton.addEventListener('click', () => {
        alert('Video player would open here!');
      });
    }
  }, []);

  return (
    <Layout>
      <Head>
        <title>Smart Toddler Sink - Independence & Water Conservation</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <div className="custom-landing-page">
        {/* Hero Section */}
        <section className="hero">
          <div className="container">
            <div className="hero-layout">
              <div className="hero-content">
                <h1>The ultimate child sink</h1>
                <h2>Piqpoc is a water-saving sink for toddlers that support their playtime and independence. Build it with ease, and place it anywhere since no plumbing is required.</h2>
                <p className="hero-description">Enable your children to use water independently as soon as they start walking and save water while having fun.</p>
                <div className="cta-buttons">
                  <a href="#" className="btn btn-primary">Get Started</a>
                  <a href="#" className="btn btn-secondary">Learn More</a>
                </div>
              </div>
              <div className="video-placeholder">
                <h3>Piqpoq Intro</h3>
                <iframe width="560" height="315" src="https://www.youtube.com/embed/F98diWo9d2I?si=uK8vXJUAjty3QRIk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
          </div>
        </section>

        {/* How It Works */}
        <section className="how-it-works">
          <div className="container">
            <h2>Unique Features of Piqpoc</h2>
            <div className="how-it-works-content">
              <div className="features-nav">
                <div className="feature-nav-item active" data-feature="height">
                  <h3>🚿 Perfect Height and Pressure</h3>
                  <p>The sink is designed with a lower and adjustable height for toddlers, eliminating the need for stools or assistance. Your child can independently and safely reach the faucet and washbasin. The pressure of the faucet is also adequate for their little hands, eliminating waste in each wash.</p>
                </div>
                <div className="feature-nav-item" data-feature="water-saving">
                  <h3>🔄 Play Mode</h3>
                  <p>A simple water filtering and circulation mechanism enables endless play with minimal waste. As long as the sink is tilted to play-mode, the same water gets circulated forever.</p>
                </div>
                <div className="feature-nav-item" data-feature="dual-mode">
                  <h3>💧 Cleaning mode</h3>
                  <p>Switch between play-mode and cleaning-mode with an easy action. Simply tilt the washbasin to the right to switch to hand washing. The sink directs the water to the disposal container in this mode.</p>
                </div>
                <div className="feature-nav-item" data-feature="portable">
                  <h3>🌍 Take It Anywhere</h3>
                  <p>No plumbing required - use it anywhere in your home or outdoors. The sink is powered through a USB port which means you can run it with a mobile phone charger or a 5V battery. Perfect for terraces, gardens, playrooms, or any space where your child wants to play.</p>
                </div>
              </div>
		
              <div className="feature-demo">
                <div className="demo-content active" id="demo-height">
                  <h3>Perfect for Little Ones</h3>
				  <img src="/img/sink_height.jpg" height="600px" />
                </div>
                <div className="demo-content" id="demo-water-saving">
                  <h3>Simple Water Recycling</h3>
                  <img src="/img/waterplay.gif" height="600px" />
                </div>
                <div className="demo-content" id="demo-dual-mode">
                  <h3>Wash Comfortably</h3>
					<img src="/img/wash.gif" height="600px" />
                </div>
                <div className="demo-content" id="demo-portable">
                  <h3>A sink with wheels</h3>
					<img src="/img/move.gif" height="600px" />
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Features */}
        <section className="features">
          <div className="container">
            <h2>Why Kids & Parents Love It</h2>
            <div className="features-grid">
              {[
                ['🚿', 'Independent kids, accessible cleaning', 'Designed so that little ones can indepently wash themselves. Stop kids from struggling with adult sinks and faucets. Turns on/off with a child friendly button.'],
                ['🛟', 'Safer washes', 'No more climbing on stools or raising your child with one hand, while washing them with the other.'],
				['💧', 'Reduced waste of water', 'Kids can play with water for hours while reusing the same clean water. No waste, endless fun. Cleaning mode also uses less water thanks to reduced pressure.'],
				['🌍', 'Completely Portable', 'Place it wherever you want. No plumbing needed! Use it anywhere - garden, terrace, balcony, or move it room to room.'],
				['🐠', 'Playful and Guiding', 'Bring your family up to speed on water conservation awareness and adapt sustainable practices together from a young age.'],
				['🛠️', 'Designed for everyone', 'Built from simple, affordable materials that should be available in most places on earth, so that any family can have one. DIY or buy it, regardless of the path, you\'ll save a lot of water.'],
              ].map(([icon, title, desc], idx) => (
                <div className="feature-card" key={idx}>
                  <span className="feature-icon">{icon}</span>
                  <h3>{title}</h3>
                  <p>{desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="cta-section">
          <div className="container">
            <h2>Choose Your Path</h2>
            <div className="cta-grid">
              <div className="cta-card">
                <h3>🔨 Build One</h3>
                <p>Get the complete DIY instructions and build your own Piqpoc Toddler Sink</p>
                <a href="#" className="btn btn-primary">Go to Documentation</a>
              </div>
              <div className="cta-card">
                <h3>📦 Buy a Kit</h3>
                <p>Skip the hard parts! Get the pump, switch, and faucet delivered, and just do basic assembly</p>
                <a href="#" className="btn btn-secondary">Order Kit</a>
              </div>
              <div className="cta-card">
                <h3>🚚 Buy Complete</h3>
                <p>If desired, we can build one for you. Get the finished product delivered to your door. Currently available only in Spain.</p>
                <a href="#" className="btn btn-tertiary">Buy Complete</a>
              </div>
            </div>
          </div>
        </section>

        {/* Footer */}
        <footer>
          <div className="container">
            <p>© 2025 Piqpoc Toddler Sink. Helping families have more fun.</p>
          </div>
        </footer>
      </div>
    </Layout>
  );
}
