import Image from "next/image"

export default function Home() {
  return (
    <div className="girly-container">
      {/* Sparkle cursor effect */}
      <div className="sparkle-cursor"></div>

      {/* Header met girly logo */}
      <header className="header">
        <div className="logo-container">
          <div className="logo">
            <span className="logo-text">Mijn Portfolio</span>
            <div className="butterfly butterfly-1"></div>
            <div className="butterfly butterfly-2"></div>
          </div>
        </div>

        {/* Navigatie */}
        <nav className="nav">
          <ul>
            <li>
              <a href="#home" className="nav-link">
                Home
              </a>
            </li>
            <li>
              <a href="#about" className="nav-link">
                Over Mij
              </a>
            </li>
            <li>
              <a href="#portfolio" className="nav-link">
                Portfolio
              </a>
            </li>
            <li>
              <a href="#dagboek" className="nav-link">
                Dagboek
              </a>
            </li>
            <li>
              <a href="#contact" className="nav-link">
                Contact
              </a>
            </li>
          </ul>
        </nav>
      </header>

      {/* Hero section */}
      <section id="home" className="hero">
        <div className="stars-bg"></div>
        <div className="hero-content">
          <h1 className="glitter-text">Welkom op mijn website!</h1>
          <p className="subtitle">Grafisch Ontwerper • Webdesigner • Creatieveling</p>
          <div className="pink-button">
            <span>Klik hier!</span>
          </div>
        </div>
      </section>

      {/* About section */}
      <section id="about" className="about">
        <div className="section-header">
          <h2>Over Mij</h2>
          <div className="heart-divider">
            <span>♥</span>
            <span>♥</span>
            <span>♥</span>
          </div>
        </div>
        <div className="about-content">
          <div className="about-image">
            <div className="image-frame">
              <Image
                src="/placeholder.svg?height=300&width=300"
                alt="Profielfoto"
                width={300}
                height={300}
                className="profile-img"
              />
              <div className="sticker sticker-1"></div>
              <div className="sticker sticker-2"></div>
              <div className="sticker sticker-3"></div>
            </div>
          </div>
          <div className="about-text">
            <h3>Hallo allemaal!</h3>
            <p>
              Welkom op mijn super leuke website! Ik ben een creatieve designer die houdt van alles wat schattig en
              kleurrijk is. Mijn werk combineert vrolijke elementen met een vleugje nostalgie uit de jaren 2000.
            </p>
            <p>
              Als ik niet aan het ontwerpen ben, verzamel ik stickers, luister ik naar mijn favoriete boybands, en maak
              ik scrapbooks van al mijn avonturen!
            </p>
            <div className="favorites-container">
              <div className="favorite">
                <span className="favorite-label">♥ Lievelingskleur:</span>
                <span className="favorite-value">Roze</span>
              </div>
              <div className="favorite">
                <span className="favorite-label">♥ Lievelingsdier:</span>
                <span className="favorite-value">Eenhoorn</span>
              </div>
              <div className="favorite">
                <span className="favorite-label">♥ Sterrenbeeld:</span>
                <span className="favorite-value">Tweeling</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Portfolio section */}
      <section id="portfolio" className="portfolio">
        <div className="section-header">
          <h2>Mijn Werk</h2>
          <div className="heart-divider">
            <span>♥</span>
            <span>♥</span>
            <span>♥</span>
          </div>
        </div>
        <div className="portfolio-grid">
          {[1, 2, 3, 4, 5, 6].map((item) => (
            <div key={item} className="portfolio-item">
              <div className="portfolio-image">
                <Image src={`/placeholder.svg?height=250&width=350`} alt={`Project ${item}`} width={350} height={250} />
                <div className="portfolio-overlay">
                  <h3>Project {item}</h3>
                  <p>Webdesign • Illustratie</p>
                  <a href="#" className="view-button">
                    Bekijken
                  </a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Dagboek section */}
      <section id="dagboek" className="dagboek">
        <div className="section-header">
          <h2>Mijn Dagboek</h2>
          <div className="heart-divider">
            <span>♥</span>
            <span>♥</span>
            <span>♥</span>
          </div>
        </div>
        <div className="dagboek-container">
          <div className="dagboek-entry">
            <div className="dagboek-date">
              <span className="date-number">15</span>
              <span className="date-month">Juni</span>
            </div>
            <div className="dagboek-content">
              <h3>Mijn Nieuwe Website!</h3>
              <p>
                Lieve dagboek, vandaag heb ik eindelijk mijn nieuwe website gelanceerd! Ik ben zo blij met hoe het eruit
                ziet. Het heeft precies die Y2K vibe die ik wilde. Ik kan niet wachten om al mijn nieuwe projecten hier
                te delen! xoxo
              </p>
              <div className="dagboek-mood">
                <span>Mood: </span>
                <span className="mood-emoji">😊</span>
              </div>
            </div>
          </div>

          <div className="dagboek-entry">
            <div className="dagboek-date">
              <span className="date-number">10</span>
              <span className="date-month">Juni</span>
            </div>
            <div className="dagboek-content">
              <h3>Inspiratie Overal!</h3>
              <p>
                Lieve dagboek, ik vond vandaag de schattigste stickers in een vintage winkel! Ze hebben me geïnspireerd
                voor een nieuw project waar ik aan werk. Soms vind je inspiratie op de meest onverwachte plekken! ♥♥♥
              </p>
              <div className="dagboek-mood">
                <span>Mood: </span>
                <span className="mood-emoji">🤩</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Contact section */}
      <section id="contact" className="contact">
        <div className="section-header">
          <h2>Stuur Me Een Berichtje!</h2>
          <div className="heart-divider">
            <span>♥</span>
            <span>♥</span>
            <span>♥</span>
          </div>
        </div>
        <div className="contact-container">
          <div className="contact-form">
            <div className="form-group">
              <label htmlFor="name">Naam:</label>
              <input type="text" id="name" className="form-input" />
            </div>
            <div className="form-group">
              <label htmlFor="email">Email:</label>
              <input type="email" id="email" className="form-input" />
            </div>
            <div className="form-group">
              <label htmlFor="message">Bericht:</label>
              <textarea id="message" className="form-textarea"></textarea>
            </div>
            <button className="submit-button">Versturen ♥</button>
          </div>
          <div className="contact-info">
            <div className="info-item">
              <div className="info-icon">@</div>
              <div className="info-text">email@girlyportfolio.com</div>
            </div>
            <div className="info-item">
              <div className="info-icon">♥</div>
              <div className="info-text">MSN: girly_2000@hotmail.com</div>
            </div>
            <div className="social-links">
              <a href="#" className="social-link">
                MySpace
              </a>
              <a href="#" className="social-link">
                Hyves
              </a>
              <a href="#" className="social-link">
                Blogspot
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Gastenboek */}
      <section className="gastenboek">
        <div className="section-header">
          <h2>Gastenboek</h2>
          <div className="heart-divider">
            <span>♥</span>
            <span>♥</span>
            <span>♥</span>
          </div>
        </div>
        <div className="gastenboek-container">
          <div className="gastenboek-entry">
            <div className="gastenboek-avatar">
              <Image src="/placeholder.svg?height=50&width=50" alt="Avatar" width={50} height={50} />
            </div>
            <div className="gastenboek-content">
              <div className="gastenboek-name">Lisa94</div>
              <div className="gastenboek-message">Super leuke website! Ik hou van de kleuren en de stijl! xoxo</div>
              <div className="gastenboek-date">12 Juni 2025</div>
            </div>
          </div>

          <div className="gastenboek-entry">
            <div className="gastenboek-avatar">
              <Image src="/placeholder.svg?height=50&width=50" alt="Avatar" width={50} height={50} />
            </div>
            <div className="gastenboek-content">
              <div className="gastenboek-name">CoolDude2000</div>
              <div className="gastenboek-message">
                Wow, deze site brengt me terug naar de goede oude tijd! Geweldig gedaan!
              </div>
              <div className="gastenboek-date">10 Juni 2025</div>
            </div>
          </div>

          <div className="gastenboek-form">
            <h3>Laat een berichtje achter!</h3>
            <div className="form-group">
              <label htmlFor="guestName">Naam:</label>
              <input type="text" id="guestName" className="form-input" />
            </div>
            <div className="form-group">
              <label htmlFor="guestMessage">Bericht:</label>
              <textarea id="guestMessage" className="form-textarea"></textarea>
            </div>
            <button className="submit-button">Plaatsen ♥</button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="footer">
        <div className="footer-content">
          <p>© 2025 Girly Portfolio • Gemaakt met ♥</p>
          <div className="visitor-counter">
            <span>Bezoekers: </span>
            <div className="counter">00042</div>
          </div>
          <p className="footer-note">Best bekeken in Internet Explorer 6.0 of hoger</p>
        </div>
        <div className="footer-decoration"></div>
      </footer>
    </div>
  )
}