import React from 'react';
import './ContactPage.css'; 

function ContactPage() {
  return (
    <div className="contact-page">
      <div className="contact-container">
        <h1>Свяжитесь с нами</h1>

        <div className="contact-info">
          <p>
            Если у вас есть вопросы, предложения или вы хотите связаться с нами,
            пожалуйста, используйте следующую информацию:
          </p>

          <div className="contact-details">
            <div className="contact-item">
              <i className="fas fa-envelope"></i>
              <p>Email: <a href="mailto:recipe-arina@bk.com">recipe-arina@bk.com</a></p>
            </div>

            <div className="contact-item">
              <i className="fas fa-phone"></i>
              <p>Телефон: +7 (904) 783-43-67</p>
            </div>

            <div className="contact-item">
              <i className="fas fa-map-marker-alt"></i>
              <p>Адрес: Ухта, ул. Ленина, д. 10</p>
            </div>
          </div>
        </div>

        <div className="contact-form">
          <h2>Напишите нам</h2>
          <form>
            <div className="form-group">
              <label htmlFor="name">Имя:</label>
              <input type="text" id="name" name="name" required />
            </div>

            <div className="form-group">
              <label htmlFor="email">Email:</label>
              <input type="email" id="email" name="email" required />
            </div>

            <div className="form-group">
              <label htmlFor="message">Сообщение:</label>
              <textarea id="message" name="message" rows="5" required></textarea>
            </div>

            <button type="submit">Отправить</button>
          </form>
        </div>
      </div>
    </div>
  );
}

export default ContactPage;