import React from 'react';
import { Layout } from './components/Layout';
import { LoadsInput } from './components/inputs/LoadsInput';
import { GeometryInput } from './components/inputs/GeometryInput';
import { AnchorageInput } from './components/inputs/AnchorageInput';
import { MaterialsInput } from './components/inputs/MaterialsInput';
import { PlanView } from './components/visuals/PlanView';
import { SectionView } from './components/visuals/SectionView';
import { ResultsSummary } from './components/results/ResultsSummary';
import { DetailedReport } from './components/results/DetailedReport';

function App() {
  return (
    <Layout>
      {/* Left Panel: Inputs */}
      <div className="flex-col gap-md p-md" style={{ width: '450px', overflowY: 'auto', borderRight: '1px solid var(--border-color)', background: '#f9f9f9' }}>
        <GeometryInput />
        <LoadsInput />
        <MaterialsInput />
        <AnchorageInput />
      </div>

      {/* Right Panel: Visuals & Results */}
      <div className="flex-col gap-md p-md" style={{ flex: 1, overflowY: 'auto', background: 'white' }}>
        <div className="flex-row gap-md" style={{ flex: 1, minHeight: '400px' }}>
          {/* Visuals */}
          <div className="card" style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <PlanView />
          </div>
          <div className="card" style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <SectionView />
          </div>
        </div>

        <div className="card">
          <ResultsSummary />
        </div>

        <div className="card">
          <DetailedReport />
        </div>
      </div>
    </Layout>
  );
}

export default App;