"use client";

import { useState } from "react";
import PHDiagramModern from "@/components/PHDiagramModern";
import CycleCalculatorModern from "@/components/CycleCalculatorModern";

export default function Home() {
  const [activeView, setActiveView] = useState<'calculator' | 'diagram'>('diagram');

  return (
    <div style={{ position: 'relative' }}>
      <div style={{
        position: 'fixed',
        top: '2rem',
        right: '2rem',
        zIndex: 1000,
        display: 'flex',
        gap: '0.75rem',
        background: 'rgba(30, 58, 95, 0.95)',
        backdropFilter: 'blur(10px)',
        padding: '0.5rem',
        borderRadius: '16px',
        boxShadow: '0 8px 32px rgba(0,0,0,0.3)',
        border: '1px solid rgba(255,255,255,0.1)'
      }}>
        <button
          onClick={() => setActiveView('diagram')}
          style={{
            padding: '0.75rem 1.5rem',
            background: activeView === 'diagram' ? 'linear-gradient(135deg, #38b2ac 0%, #2c7a7b 100%)' : 'transparent',
            border: 'none',
            borderRadius: '12px',
            color: '#ffffff',
            fontSize: '0.9rem',
            fontWeight: '700',
            cursor: 'pointer',
            transition: 'all 0.3s',
            boxShadow: activeView === 'diagram' ? '0 4px 12px rgba(56, 178, 172, 0.4)' : 'none',
            letterSpacing: '0.3px'
          }}
        >
          📊 P-h Diagram
        </button>
        <button
          onClick={() => setActiveView('calculator')}
          style={{
            padding: '0.75rem 1.5rem',
            background: activeView === 'calculator' ? 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)' : 'transparent',
            border: 'none',
            borderRadius: '12px',
            color: '#ffffff',
            fontSize: '0.9rem',
            fontWeight: '700',
            cursor: 'pointer',
            transition: 'all 0.3s',
            boxShadow: activeView === 'calculator' ? '0 4px 12px rgba(59, 130, 246, 0.4)' : 'none',
            letterSpacing: '0.3px'
          }}
        >
          🧮 Cycle Calculator
        </button>
      </div>
      {activeView === 'diagram' && <PHDiagramModern />}
      {activeView === 'calculator' && <CycleCalculatorModern />}
    </div>
  );
}