import React, { useState } from 'react';
import Layout from './Layout';
import KeypadScreen from './KeypadScreen';

const HomeScreen = () => {
  const [showKeypad, setShowKeypad] = useState(false);

  const handleArmStayClick = () => {
    setShowKeypad(true);
  };

  if (showKeypad) {
    return <KeypadScreen />;
  }

  return (
    <Layout>
      <div className="flex h-full font-['Segoe_UI'] scale-[calc(var(--scale-factor,1))]">
        {/* Left section */}
        <div className="w-[56.5%] flex flex-col items-center justify-center">
          <div className="mb-[min(8vh,64px)] text-center">
            <img 
              src="/icons/ReadyToArm.png"
              alt="Ready to Arm" 
              className="w-[min(16vh,128px)] h-[min(16vh,128px)] mx-auto"
            />
            <h2 className="text-white mt-4 text-[min(3vh,1.5rem)] font-light">Ready to Arm</h2>
          </div>
          
          <div className="grid grid-cols-3 gap-[min(8vh,64px)] w-full max-w-[min(80vw,1200px)] px-[min(4vw,32px)]">
            <div className="flex flex-col items-center">
              <img 
                src="/icons/ArmAway.png"
                alt="Arm Away" 
                className="w-[min(10vh,80px)] h-[min(10vh,80px)] mb-3"
              />
              <span className="text-white text-[min(2.2vh,1.125rem)]">Arm Away</span>
            </div>

            <div 
              className="flex flex-col items-center cursor-pointer"
              onClick={handleArmStayClick}
            >
              <img 
                src="/icons/ArmStay.png"
                alt="Arm Stay" 
                className="w-[min(10vh,80px)] h-[min(10vh,80px)] mb-3"
              />
              <span className="text-white text-[min(2.2vh,1.125rem)]">Arm Stay</span>
            </div>

            <div className="flex flex-col items-center">
              <img 
                src="/icons/ArmCustom.png"
                alt="Arm Custom" 
                className="w-[min(10vh,80px)] h-[min(10vh,80px)] mb-3"
              />
              <span className="text-white text-[min(2.2vh,1.125rem)]">Arm Custom</span>
            </div>
          </div>
        </div>

        {/* Right section */}
        <div className="w-[43.5%] grid grid-cols-2 gap-x-[min(12vh,96px)] gap-y-[min(8vh,64px)] p-[min(4vh,32px)] place-content-center">
          <div className="flex flex-col items-center opacity-80 hover:opacity-100 transition-opacity">
            <img 
              src="/icons/SystemIcon.png"
              alt="System"
              className="w-[min(12vh,96px)] h-[min(12vh,96px)] mb-3"
            />
            <span className="text-white text-[min(2.2vh,1.125rem)]">System</span>
          </div>
          <div className="flex flex-col items-center opacity-80 hover:opacity-100 transition-opacity">
            <img 
              src="/icons/Automation.png"
              alt="Automation"
              className="w-[min(12vh,96px)] h-[min(12vh,96px)] mb-3"
            />
            <span className="text-white text-[min(2.2vh,1.125rem)]">Automation</span>
          </div>
          <div className="flex flex-col items-center opacity-80 hover:opacity-100 transition-opacity">
            <img 
              src="/icons/ZonesIcon.png"
              alt="Zones"
              className="w-[min(12vh,96px)] h-[min(12vh,96px)] mb-3"
            />
            <span className="text-white text-[min(2.2vh,1.125rem)]">Zones</span>
          </div>
          <div className="flex flex-col items-center opacity-80 hover:opacity-100 transition-opacity">
            <img 
              src="/icons/ScenesIcon.png"
              alt="Scenes"
              className="w-[min(12vh,96px)] h-[min(12vh,96px)] mb-3"
            />
            <span className="text-white text-[min(2.2vh,1.125rem)]">Scenes</span>
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default HomeScreen;