/* src/App.jsx */
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import DashboardPage from './pages/DashboardPage';
import './styles/main.css';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<DashboardPage />} />
      </Routes>
    </Router>
  );
}

export default App;

/* src/pages/Home.jsx */
import React from 'react';
import LandingPage from '../components/LandingPage';

const Home = () => {
  return <LandingPage />;
};

export default Home;

/* src/pages/DashboardPage.jsx */
import React from 'react';
import Dashboard from '../components/Dashboard';

const DashboardPage = () => {
  return <Dashboard />;
};

export default DashboardPage;

/* src/components/LandingPage.jsx */
import React from 'react';
import { Link } from 'react-router-dom';
import './LandingPage.css';

const LandingPage = () => {
  return (
    <div className="landing-container">
      <header className="hero">
        <h1>Yodocto AI</h1>
        <p>Your Personalized Health Companion</p>
        <Link to="/dashboard" className="cta-button">Get Started</Link>
      </header>
      <section className="features">
        <div className="feature">
          <h3>Preventive Care</h3>
          <p>Track health trends and get early warnings.</p>
        </div>
        <div className="feature">
          <h3>Mental Wellness</h3>
          <p>AI chatbot and mindfulness tools.</p>
        </div>
        <div className="feature">
          <h3>Nutrition & Fitness</h3>
          <p>Personalized meal and workout plans.</p>
        </div>
      </section>
    </div>
  );
};

export default LandingPage;

/* src/components/Dashboard.jsx */
import React from 'react';
import HealthCard from './HealthCard';
import './Dashboard.css';

const Dashboard = () => {
  const metrics = [
    { title: 'Blood Pressure', value: '120/80 mmHg' },
    { title: 'Glucose Level', value: '95 mg/dL' },
    { title: 'Sleep Duration', value: '7.5 hrs' },
    { title: 'Heart Rate', value: '72 bpm' },
  ];

  return (
    <div className="dashboard-container">
      <aside className="sidebar">
        <nav>
          <ul>
            <li>Health</li>
            <li>Mental Wellness</li>
            <li>Nutrition</li>
            <li>Alerts</li>
          </ul>
        </nav>
      </aside>
      <main className="main-content">
        <h2>Your Health Dashboard</h2>
        <div className="cards">
          {metrics.map((metric, index) => (
            <HealthCard key={index} title={metric.title} value={metric.value} />
          ))}
        </div>
        <section className="insights">
          <h3>Predictive Insights</h3>
          <p>Your risk of high blood pressure next month is <strong>18%</strong> if trends continue.</p>
        </section>
      </main>
    </div>
  );
};

export default Dashboard;

/* src/components/HealthCard.jsx */
import React from 'react';
import './HealthCard.css';

const HealthCard = ({ title, value }) => {
  return (
    <div className="health-card">
      <h4>{title}</h4>
      <p>{value}</p>
    </div>
  );
};

export default HealthCard;

/* src/styles/main.css */
body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #f4f9f9;
  color: #333;
}

/* src/components/LandingPage.css */
.landing-container {
  text-align: center;
  padding: 2rem;
}
.hero {
  background-color: #e0f7fa;
  padding: 3rem;
  border-radius: 8px;
}
.cta-button {
  background-color: #00796b;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  text-decoration: none;
}
.features {
  display: flex;
  justify-content: space-around;
  margin-top: 2rem;
}
.feature {
  background-color: #ffffff;
  padding: 1rem;
  border-radius: 8px;
  width: 30%;
}

/* src/components/Dashboard.css */
.dashboard-container {
  display: flex;
}
.sidebar {
  width: 200px;
  background-color: #00796b;
  color: white;
  padding: 1rem;
}
.sidebar ul {
  list-style: none;
  padding: 0;
}
.sidebar li {
  margin: 1rem 0;
}
.main-content {
  flex-grow: 1;
  padding: 2rem;
}
.cards {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.insights {
  margin-top: 2rem;
  background-color: #e0f2f1;
  padding: 1rem;
  border-radius: 8px;
}

/* src/components/HealthCard.css */
.health-card {
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1rem;
  width: 200px;
  text-align: center;
}