// src/App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

const Home = () => (
  <div>
    <h1>Qidamax</h1>
    <p>Xoş gəlmisiniz! Sağlam həyat və düzgün qidalanma proqramları ilə tanış olun.</p>
    <ul>
      <li><Link to="/programs">Proqramlar</Link></li>
      <li><Link to="/products">Məhsullar</Link></li>
      <li><Link to="/articles">Məqalələr</Link></li>
      <li><Link to="/contact">Əlaqə</Link></li>
    </ul>
  </div>
);

const programsData = [
  { id: 1, title: "Şaman metodu", desc: "Boy uzatma üçün nəfəs və meditasiya." },
  { id: 2, title: "Bambu metodu", desc: "Boy uzatma üçün məşqlər və qidalanma." },
  { id: 3, title: "Kökəlmək üçün qidalanma", desc: "Kalori zəngin və balanslı menyu." },
  { id: 4, title: "Arıqlamaq üçün qidalanma", desc: "Aşağı kalorili, zülal zəngin pəhriz." },
];

const Programs = () => (
  <div>
    <h2>Proqramlar</h2>
    <ul>
      {programsData.map(p => (
        <li key={p.id}>
          <h3>{p.title}</h3>
          <p>{p.desc}</p>
        </li>
      ))}
    </ul>
  </div>
);

const productsData = [
  { id: 1, title: "Protein Tozu", desc: "Əzələ inkişafı üçün zülal tozu.", price: "30 AZN" },
  { id: 2, title: "Kreatin", desc: "Məşqlərdə performansı artırır.", price: "25 AZN" },
  { id: 3, title: "Vitamin Kompleksi", desc: "Əsas vitamin və minerallar.", price: "20 AZN" },
];

const Products = () => (
  <div>
    <h2>Məhsullar</h2>
    <ul>
      {productsData.map(p => (
        <li key={p.id}>
          <h3>{p.title} - {p.price}</h3>
          <p>{p.desc}</p>
        </li>
      ))}
    </ul>
  </div>
);

const articlesData = [
  {
    id: 1,
    title: "Sağlam Qidalanmanın Əhəmiyyəti",
    content:
      "Sağlam qidalanma bədənimiz üçün əsas enerji mənbəyidir. Düzgün qida seçimi sağlamlıq vəziyyətini yaxşılaşdırır, immuniteti artırır və ürək-damar xəstəliklərinin riskini azaldır.",
  },
  {
    id: 2,
    title: "Boy Uzatma Metodları",
    content:
      "Fiziki məşqlər, düzgün qidalanma və yuxu rejimi boy uzatma prosesində əsas rol oynayır. Psixoloji rahatlama da bu prosesə müsbət təsir göstərir.",
  },
];

const Articles = () => (
  <div>
    <h2>Məqalələr</h2>
    {articlesData.map(a => (
      <div key={a.id}>
        <h3>{a.title}</h3>
        <p>{a.content}</p>
      </div>
    ))}
  </div>
);

const Contact = () => (
  <div>
    <h2>Əlaqə</h2>
    <form
      onSubmit={(e) => {
        e.preventDefault();
        alert('Müraciətiniz qəbul edildi! Tezliklə əlaqə saxlanacaq.');
      }}
    >
      <div>
        <label>Adınız:</label><br />
        <input type="text" required />
      </div>
      <div>
        <label>Email:</label><br />
        <input type="email" required />
      </div>
      <div>
        <label>Mesajınız:</label><br />
        <textarea required />
      </div>
      <button type="submit">Göndər</button>
    </form>
  </div>
);

export default function App() {
  return (
    <Router>
      <nav style={{ padding: 10, backgroundColor: '#8BC34A' }}>
        <Link to="/" style={{ margin: 10, color: 'white', textDecoration: 'none' }}>Ana Səhifə</Link>
        <Link to="/programs" style={{ margin: 10, color: 'white', textDecoration: 'none' }}>Proqramlar</Link>
        <Link to="/products" style={{ margin: 10, color: 'white', textDecoration: 'none' }}>Məhsullar</Link>
        <Link to="/articles" style={{ margin: 10, color: 'white', textDecoration: 'none' }}>Məqalələr</Link>
        <Link to="/contact" style={{ margin: 10, color: 'white', textDecoration: 'none' }}>Əlaqə</Link>
      </nav>
      <div style={{ padding: 20 }}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/programs" element={<Programs />} />
          <Route path="/products" element={<Products />} />
          <Route path="/articles" element={<Articles />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </Router>
  );
}