import React, { useEffect, useState } from 'react';
import './index.css';

const BentoCard = ({ type, badge, title, category, readTime, bgImage, className = "", style = {} }) => {
  return (
    <div className={`bento-card ${className}`} style={style}>
      <div className="bento-bg" style={{ backgroundImage: `url(${bgImage})` }}></div>
      <div className="bento-overlay"></div>
      
      {badge && <div className={`bento-badge badge-${type}`}>{badge}</div>}
      
      <div className="bento-content">
        <h2 className="article-title">{title}</h2>
        <div className="article-meta">
          <span>{category}</span>
          <span className="dot"></span>
          <span>{readTime}</span>
        </div>
      </div>
    </div>
  );
};

const BentoSlideshow = ({ slides, className = "", style = {} }) => {
  const [current, setCurrent] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrent((prev) => (prev + 1) % slides.length);
    }, 5000);
    return () => clearInterval(timer);
  }, [slides.length]);

  return (
    <div className={`bento-card ${className}`} style={{ ...style, padding: 0 }}>
      {slides.map((slide, index) => (
        <div 
          key={index} 
          className="bento-bg" 
          style={{ 
            backgroundImage: `url(${slide.bgImage})`,
            opacity: index === current ? 1 : 0,
            transition: 'opacity 1s ease-in-out',
            zIndex: index === current ? 1 : 0
          }} 
        />
      ))}
      <div className="bento-overlay" style={{ zIndex: 2 }}></div>
      <div style={{ position: 'relative', zIndex: 3, padding: '1.5rem', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', height: '100%' }}>
        {slides.map((slide, index) => (
          <div 
            key={index}
            style={{ 
              opacity: index === current ? 1 : 0,
              transition: 'opacity 0.5s ease',
              position: index === current ? 'relative' : 'absolute',
              pointerEvents: index === current ? 'auto' : 'none'
            }}
          >
            <div className={`bento-badge badge-${slide.type}`}>{slide.badge}</div>
            <h2 className="article-title" style={{ marginTop: '2.5rem', fontSize: '1.8rem' }}>{slide.title}</h2>
            <div className="article-meta">
              <span>{slide.category}</span>
              <span className="dot"></span>
              <span>{slide.readTime}</span>
            </div>
          </div>
        ))}
        <div style={{ display: 'flex', gap: '0.5rem', marginTop: '1rem' }}>
          {slides.map((_, index) => (
            <button 
              key={index}
              onClick={(e) => { e.stopPropagation(); setCurrent(index); }}
              style={{
                width: index === current ? '24px' : '8px',
                height: '8px',
                borderRadius: '4px',
                background: index === current ? 'var(--accent-color)' : 'rgba(255,255,255,0.3)',
                border: 'none',
                cursor: 'pointer',
                transition: 'all 0.3s ease'
              }}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

const CookieBanner = () => {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <div className="cookie-banner">
      <div className="cookie-content">
        <h4>Ciasteczka 🍪</h4>
        <p>Używamy potężnych ciasteczek i logiki ML, aby uodparniać naszą aplikację i dostarczać świetne doświadczenia.</p>
        <div className="cookie-actions">
          <button className="button-secondary" onClick={() => setVisible(false)}>Odrzuć</button>
          <button className="button-primary" style={{ marginTop: 0, justifyContent: 'center', flex: 1 }} onClick={() => setVisible(false)}>Akceptuj</button>
        </div>
      </div>
    </div>
  );
};

function App() {
  const [images] = useState({
    gemini: '/img/gemini.png',
    robot: '/img/robot.png',
    voice: '/img/voice.png',
    chip: '/img/chip.png',
  });

  const slideshowData = [
    {
      type: "hot", badge: "EXCLUSIVE", 
      title: "Przyszłość UI z AI w 2026", 
      category: "Design", readTime: "8 min read", 
      bgImage: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=1200&q=80"
    },
    {
      type: "new", badge: "PREMIERE", 
      title: "Najpotężniejsze modele widzenia komputerowego", 
      category: "Hardware", readTime: "12 min read", 
      bgImage: "https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?auto=format&fit=crop&w=1200&q=80"
    },
    {
      type: "tutorial", badge: "DEEP DIVE", 
      title: "Architektura systemów rozproszonych AI", 
      category: "Architektura", readTime: "20 min read", 
      bgImage: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1200&q=80"
    }
  ];

  return (
    <>
      <nav className="main-nav">
        <div className="nav-container">
          <div className="nav-logo">
            <span className="pulse-dot"></span>
            DEX_OS
          </div>
          <div className="nav-links">
            <a href="#" className="active">Wiadomości</a>
            <a href="#">Dla zaawansowanych</a>
            <a href="#">Modele AI</a>
            <a href="#">Biblioteka Promtów</a>
          </div>
          <div className="nav-actions">
            <button className="nav-button">Subskrybuj PRO</button>
          </div>
        </div>
      </nav>

      <div className="page-wrapper">
      
      {/* LEFT SIDEBAR */}
      <aside className="sidebar sidebar-left">
        <div>
          <h3 className="sidebar-title">LATEST AI NEWS</h3>
          <div className="news-list">
            <div className="news-item">
              <div className="news-time">2h ago</div>
              <div className="news-title">OpenAI przedstawia 'North Star' dla AGI</div>
            </div>
            <div className="news-item">
              <div className="news-time">5h ago</div>
              <div className="news-title">HSBC zwalnia 20,000 pracowników — AI przejmuje</div>
            </div>
            <div className="news-item">
              <div className="news-time">Yesterday</div>
              <div className="news-title">Google Gemini 2.5 Pro pokonuje Claude 4</div>
            </div>
            <div className="news-item">
              <div className="news-time">2 days ago</div>
              <div className="news-title">Microsoft Copilot z dużą aktualizacją</div>
            </div>
          </div>
        </div>
      </aside>

      {/* CENTER BENTO AREA */}
      <main className="bento-area">
        
        {/* Pełnoszerokościowy Slideshow - Wiersz 1 */}
        <BentoSlideshow 
          slides={slideshowData}
          className="col-span-4 row-span-1"
          style={{ gridColumn: '1 / 5', gridRow: '1 / 2' }}
        />

        <BentoCard 
          type="hot" badge="HOT"
          className="col-span-2 row-span-2 hero-article"
          style={{ gridColumn: '1 / 3', gridRow: '2 / 4' }}
          title="Gemini 3.1 vs Claude 4 — Kompletne porównanie"
          category="Porównanie"
          readTime="15 min read"
          bgImage={images.gemini}
        />

        <BentoCard 
          type="tutorial" badge="TUTORIAL"
          className="col-span-1 row-span-1"
          style={{ gridColumn: '3 / 4', gridRow: '2 / 3' }}
          title="Budujemy AI Agentów od zera"
          category="Tutorial"
          readTime="12 min read"
          bgImage={images.robot}
        />

        <BentoCard 
          type="new" badge="NEW"
          className="col-span-1 row-span-1"
          style={{ gridColumn: '4 / 5', gridRow: '2 / 3' }}
          title="Midjourney v7 — Nowa jakość generowania"
          category="Nowości"
          readTime="8 min read"
          bgImage={'https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?auto=format&fit=crop&w=600&q=80'}
        />

        <BentoCard 
          type="tutorial" badge="TUTORIAL"
          className="col-span-1 row-span-1"
          style={{ gridColumn: '3 / 4', gridRow: '3 / 4' }}
          title="RAG Systems — Przewodnik dla początkujących"
          category="Tutorial"
          readTime="18 min read"
          bgImage={'https://images.unsplash.com/photo-1555949963-aa79dcee981c?auto=format&fit=crop&w=600&q=80'}
        />

        {/* Dodany nowy kafelek aby uzupełnić puste pole */}
        <BentoCard 
          type="hot" badge="HOT"
          className="col-span-1 row-span-1"
          style={{ gridColumn: '4 / 5', gridRow: '3 / 4' }}
          title="OpenAI o1 w praktyce"
          category="Wiadomości"
          readTime="5 min read"
          bgImage={'https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&w=600&q=80'}
        />

        <BentoCard 
          type="tips" badge="TIPS"
          className="col-span-2 row-span-1"
          style={{ gridColumn: '1 / 3', gridRow: '4 / 5' }}
          title="Voice AI w 2026 — TTS & STT"
          category="Audio"
          readTime="10 min read"
          bgImage={images.voice}
        />

        <BentoCard 
          type="new" badge="NEW"
          className="col-span-1 row-span-1"
          style={{ gridColumn: '3 / 4', gridRow: '4 / 5' }}
          title="25 Aktywnych Agentów w produkcji"
          category="Case Study"
          readTime="14 min read"
          bgImage={images.chip}
        />

        <BentoCard 
          type="tips" badge="TIPS"
          className="col-span-1 row-span-1"
          style={{ gridColumn: '4 / 5', gridRow: '4 / 5' }}
          title="AI Security — Prompt Injection"
          category="Bezpieczeństwo"
          readTime="11 min read"
          bgImage={'https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?auto=format&fit=crop&w=600&q=80'}
        />

      </main>

      {/* RIGHT SIDEBAR */}
      <aside className="sidebar sidebar-right">
        <div>
          <h3 className="sidebar-title">LATEST VIDEOS</h3>
          
          <div className="video-item">
            <div className="video-thumb" style={{ backgroundImage: `url(${images.robot})` }}></div>
            <div className="video-info">
              <div className="video-title">Claude 4 Tutorial — Full Guide</div>
              <div className="video-views">12.5K views</div>
            </div>
          </div>

          <div className="video-item">
            <div className="video-thumb" style={{ backgroundImage: `url(${images.chip})` }}></div>
            <div className="video-info">
              <div className="video-title">Building AI Agents from Scratch</div>
              <div className="video-views">8.2K views</div>
            </div>
          </div>

          <div className="video-item">
            <div className="video-thumb" style={{ backgroundImage: `url(${images.gemini})` }}></div>
            <div className="video-info">
              <div className="video-title">GPT-5 API Walkthrough</div>
              <div className="video-views">15.1K views</div>
            </div>
          </div>
          
          <div className="video-item">
            <div className="video-thumb" style={{ backgroundImage: `url('https://images.unsplash.com/photo-1555949963-aa79dcee981c?auto=format&fit=crop&w=600&q=80')` }}></div>
            <div className="video-info">
              <div className="video-title">RAG Systems Explained</div>
              <div className="video-views">6.8K views</div>
            </div>
          </div>
        </div>

        <div className="subscribe-box">
          <h3>Stay Updated</h3>
          <p>Otrzymuj najnowsze wiadomości o AI prosto na swoją skrzynkę.</p>
          <input type="email" placeholder="Twój email" />
          <button>Subscribe</button>
        </div>
      </aside>

    </div>

    {/* FOOTER */}
    <footer className="main-footer">
      <div className="footer-container">
        <div className="footer-brand">
          <div className="nav-logo">
            <span className="pulse-dot"></span>
            DEX_OS
          </div>
          <p>Zbudowane przez deweloperów sztucznej inteligencji, dla agentów przyszłości.</p>
        </div>
        <div className="footer-links">
          <div className="footer-col">
            <h4>Platforma</h4>
            <a href="#">Architektura</a>
            <a href="#">Agent Swarms</a>
            <a href="#">Bezpieczeństwo</a>
          </div>
          <div className="footer-col">
            <h4>Firma</h4>
            <a href="#">O nas</a>
            <a href="#">Kariera</a>
            <a href="#">Kontakt</a>
          </div>
          <div className="footer-col">
            <h4>Zasady</h4>
            <a href="#">Regulamin</a>
            <a href="#">Polityka Prywatności</a>
          </div>
        </div>
      </div>
      <div className="footer-bottom">
        <p>&copy; {new Date().getFullYear()} DEX Operating System. Wszelkie prawa zastrzeżone.</p>
      </div>
    </footer>
    
    <CookieBanner />

    </>
  );
}

export default App;
