import React from 'react';
import { ClientOnly } from "@/components/client-only";
import { Triangle } from '@/components/triangle';
import { Plus } from '@/components/plus';
import { Circle } from '@/components/circle';
import Image from "next/image";
import AppIcon from './components/AppIcon';


export default function Home() {
  return (
    <main>
      <ClientOnly>
        <div className="desktop">
          {/* Inner box for logo */}
          <div className="inner-box"></div>
          
          {/* Logo container */}
          <div className="logo-container">
            <Image 
              src="/assets/LogoNoShadow.png" 
              alt="Clover Logo" 
              width={440} 
              height={249} 
              priority
            />
          </div>
          
          <div className='pattern-container'>
            {/* Top navigation bar */}
            <div className="top-nav"></div>
            {/* Background patterns - Circles */}
            {/* Circles */}
            <Circle top="-86px"  left="780px"  size="307px" />
            <Circle top="-86px"  left="1190px" size="298px" />
            <Circle top="-36px"  left="895px"  size="307px" />
            <Circle top="-20px"  left="1065px" size="298px" />
            <Circle top="-3px"   left="-120px" size="344px" />
            <Circle top="52px"   left="156px"  size="200px" />
            <Circle top="60px"   left="1445px" size="77px"  />
            <Circle top="80px"   left="2070px" size="242px" />
            <Circle top="82px"   left="1982px" size="174px" />
            <Circle top="105px"  left="1596px" size="123px" />
            <Circle top="145px"  left="650px"  size="83px"  />
            <Circle top="228px"  left="850px"  size="49px"  />
            <Circle top="304px"  left="2035px" size="36px"  />
            <Circle top="468px"  left="2092px" size="227px" />
            <Circle top="499px"  left="1596px" size="165px" />
            <Circle top="777px"  left="955px"  size="244px" />
            <Circle top="780px"  left="-112px" size="200px" />
            <Circle top="809px"  left="390px"  size="143px" />
            <Circle top="858px"  left="1706px" size="83px"  />
            <Circle top="994px"  left="1986px" size="451px" />
            <Circle top="1063px" left="314px"  size="411px" />
            <Circle top="1118px" left="970px"  size="36px"  />

            {/* Plus signs */}
            <Plus   top="480px"  left="360px"  size="80px"  rotation="-100deg"/>
            <Plus   top="650px"  left="660px"  size="56px" rotation="50deg"/>
            <Plus   top="750px"  left="1960px" size="110px" rotation="-4deg"/>
            <Plus   top="1025px" left="150px"  size="80px"  rotation="30deg"/>
            <Plus   top="1090px" left="1320px" size="80px"  rotation="-70deg"/>

            {/* Triangles */}
            <Triangle top="280px"  left="492px"  scale="40px" rotation="-40deg"/>
            <Triangle top="280px"  left="1809px" scale="24px" rotation="40deg"/>
            <Triangle top="520px"  left="88px"   scale="28px" rotation="-20deg"/>
            <Triangle top="1110px" left="1777px" scale="32px" rotation="40deg"/>
          </div>

          {/* Main window with app icons */}
          
          
          {/* Bottom copyright */}
          <div className="copyright-container">© Clover Jam - 2025</div>
          
          {/* Bottom bar */}
          <div className="bottom-bar"></div>
        </div>
      </ClientOnly>
    </main>
  );
}