import React from "react";
import "./styles.css"; // external CSS file for styling

export default function DavidJuneWebsite() {
  return (
    <div className="site-wrapper">
      <header className="site-header">
        <div className="container header-inner">
          <a href="#" className="brand">
            <div className="brand-logo">DJ</div>
            <div>
              <h1 className="brand-title">David June</h1>
              <p className="brand-subtitle">56-45 Myrtle Ave, Ridgewood, NY 11385</p>
            </div>
          </a>

          <nav className="nav">
            <a href="#services">Services</a>
            <a href="#pricing">Pricing</a>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
            <a href="mailto:info@davidjune.aoneactive.com" className="btn">Email us</a>
          </nav>
        </div>
      </header>

      <main>
        {/* HERO */}
        <section className="hero">
          <div className="container hero-inner">
            <div className="hero-text">
              <h2>Reliable local services in Ridgewood</h2>
              <p>We provide high-quality work with transparent pricing and friendly service. Licensed, insured, and ready to help — book a free estimate today.</p>
              <div className="hero-actions">
                <a href="#contact" className="btn primary">Get a free quote</a>
                <a href="#services" className="btn outline">See services</a>
              </div>
              <ul className="hero-info">
                <li>📍 56-45 Myrtle Ave, Ridgewood, NY 11385</li>
                <li>✉️ info@davidjune.aoneactive.com</li>
                <li>⏱️ Mon–Sat: 9:00 AM — 6:00 PM</li>
                <li>📞 Phone: (Replace with phone number)</li>
              </ul>
            </div>

            <div className="hero-image">
              <img src="/placeholder-business.jpg" alt="Business preview" />
            </div>
          </div>
        </section>

        {/* SERVICES */}
        <section id="services" className="section">
          <div className="container">
            <h3>Services we offer</h3>
            <div className="grid">
              <ServiceCard title="General Repairs" desc="Fast, reliable repairs for homes and businesses." />
              <ServiceCard title="Installations" desc="Professional installations with attention to detail." />
              <ServiceCard title="Maintenance Plans" desc="Scheduled maintenance to keep systems smooth." />
            </div>
          </div>
        </section>

        {/* CONTACT */}
        <section id="contact" className="section">
          <div className="container">
            <h3>Contact</h3>
            <ContactForm />
            <p className="small">Address: 56-45 Myrtle Ave, Ridgewood, NY 11385</p>
            <p className="small">Email: info@davidjune.aoneactive.com</p>
            <p className="small">Phone: (Replace with phone number)</p>
          </div>
        </section>
      </main>

      <footer className="site-footer">
        <div className="container">
          <p>© {new Date().getFullYear()} David June — All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
}

function ServiceCard({ title, desc }) {
  return (
    <div className="card">
      <h4>{title}</h4>
      <p>{desc}</p>
    </div>
  );
}

function ContactForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
    const form = e.target;
    const name = form.name.value;
    const email = form.email.value;
    const message = form.message.value;

    if (!name || !email || !message) {
      alert("Please fill all fields.");
      return;
    }
    const subject = encodeURIComponent(`Website inquiry from ${name}`);
    const body = encodeURIComponent(`Name: ${name}\nEmail: ${email}\n\n${message}`);
    window.location.href = `mailto:info@davidjune.aoneactive.com?subject=${subject}&body=${body}`;
  };

  return (
    <form onSubmit={handleSubmit} className="form">
      <input name="name" placeholder="Your name" />
      <input name="email" placeholder="Your email" />
      <textarea name="message" placeholder="Your message" rows={5}></textarea>
      <button type="submit" className="btn primary">Send message</button>
    </form>
  );
}