import "./florence-court.css";

export default function FlorenceCourt() {
  return (
    <main className="florence-court">

      {/* HERO SECTION */}
      <header className="hero">

        <div className="hero-logo">
          <img
            src="/images/florence-court/florence-court-logo.png"
            alt="Florence Court - Developed by Macprime"
          />
        </div>

        <div className="hero-circle hero-circle-one"></div>
        <div className="hero-circle hero-circle-two"></div>

        <div className="hero-content">

          <div className="hero-title">
            <h1>
              Elegant<br />
              Project<br />
              Showcase
            </h1>
          </div>

          <div className="hero-image">
            <img
              src="/images/florence-court/florence-court-hero.jpg"
              alt="Florence Court residential development"
            />
          </div>

        </div>

      </header>

    </main>
  );
}{/* =========================
    THE VISION
========================= */}
<section className="vision section">

  <div className="container">

    <h2>The Vision</h2>

    <div className="vision-grid">

      <article className="vision-card">
        <h3>Creating Exceptional Living Spaces</h3>
        <p>
          To develop thoughtfully designed homes that combine comfort,
          functionality, security, and modern living, creating an environment
          where residents can enjoy a high-quality lifestyle.
        </p>
      </article>

      <article className="vision-card">
        <h3>Delivering Lasting Value &amp; Investment</h3>
        <p>
          To create a property development that offers strong long-term value
          through quality construction, modern amenities, strategic design,
          and attention to detail, making it an attractive choice for
          homeowners and investors.
        </p>
      </article>

      <article className="vision-card">
        <h3>Building Sustainable Communities</h3>
        <p>
          To create a secure, well-planned and vibrant community where
          residents can live, connect, and thrive while contributing
          positively to the surrounding environment.
        </p>
      </article>

    </div>

  </div>

</section>


{/* =========================
    FLORENCE COURT OVERVIEW
========================= */}
<section className="overview section">

  <div className="container">

    <h2>Florence Court Overview</h2>

    <div className="overview-content">

      <p>
        Florence Court is a modern residential development designed to bring
        together comfort, convenience, security, and contemporary living in
        one thoughtfully planned community. Offering well-designed 2-bedroom
        and 3-bedroom homes, the development provides practical and stylish
        living spaces suited to individuals, couples, and families.
      </p>

      <p>
        Every aspect of Florence Court is designed with modern lifestyles in
        mind. Residents can enjoy essential features such as fitted kitchens,
        smart-home technology, treated water, ample car parking, and
        professional servicing, creating a convenient and comfortable living
        experience.
      </p>

      <p>
        Security remains a key priority, with 24-hour CCTV surveillance
        helping to provide residents and their families with greater peace of
        mind. The development also includes a gym, giving residents easy
        access to a dedicated space for fitness and wellness.
      </p>

      <p>
        With up to 20 hours of light, Florence Court is designed to support a
        more reliable and uninterrupted lifestyle, allowing residents to
        enjoy their homes with greater convenience.
      </p>

      <p>
        Beyond its individual homes, Florence Court represents a vision for
        quality residential living—a place where thoughtful planning, modern
        amenities, security, and comfort come together to create a community
        residents can truly be proud to call home.
      </p>

      <div className="overview-signature">
        <strong>Florence Court</strong>
        <span>
          Modern Living. Thoughtful Design. Everyday Comfort.
        </span>
      </div>

    </div>

  </div>

</section>
{/* =========================
    PROJECT PROGRESS
========================= */}
<section className="project-stage section">

  <div className="container">

    <h2>Project Progress</h2>

    <div className="stage-gallery">

      {/* Main Image */}
      <div className="stage-main-image">
        <img
          src="/images/florence-court/progress-1.png"
          alt="Florence Court construction progress"
        />
      </div>

      {/* Supporting Images */}
      <div className="stage-small-images">

        <img
          src="/images/florence-court/project-progress-1.jpg"
          alt="Florence Court construction progress"
        />

        <img
          src="/images/florence-court/project-progress-2.jpg"
          alt="Florence Court construction progress"
        />

      </div>

    </div>

  </div>

</section>


{/* =========================
    CASTING STAGE
========================= */}
<section className="project-stage section casting-stage">

  <div className="container">

    <h2>Casting Stage</h2>

    <div className="stage-gallery">

      {/* Main Image */}
      <div className="stage-main-image">
        <img
          src="/images/florence-court/Casting-1.png"
          alt="Florence Court casting stage"
        />
      </div>

      {/* Supporting Images */}
      <div className="stage-small-images">

        <img
          src="/images/florence-court/Casting-2.png"
          alt="Florence Court casting stage"
        />

        <img
          src="/images/florence-court/Casting-3.png"
          alt="Florence Court casting stage"
        />

      </div>

    </div>

  </div>

</section>


{/* =========================
    FOUNDATION STAGE
========================= */}
<section className="project-stage section foundation-stage">

  <div className="container">

    <h2>Foundation Stage</h2>

    <div className="stage-gallery">

      {/* Main Image */}
      <div className="stage-main-image">
        <img
          src="/images/florence-court/foundation-stage-main.jpg"
          alt="Florence Court foundation stage construction"
        />
      </div>

      {/* Supporting Images */}
      <div className="stage-small-images">

        <img
          src="/images/florence-court/foundation-stage-1.jpg"
          alt="Florence Court foundation construction"
        />

        <img
          src="/images/florence-court/foundation-stage-2.jpg"
          alt="Florence Court foundation construction"
        />

      </div>

    </div>

  </div>

</section>
{/* =========================
    WHY FLORENCE COURT
========================= */}
<section className="why-florence section">

  <div className="container">

    <h2>Why Florence Court</h2>

    <div className="reasons-grid">

      <article className="reason-card">
        <h3>Prime Location &amp; Accessibility</h3>
        <p>
          Florence Court is positioned in Lekki Scheme 2, Ajah, Lagos,
          giving residents convenient access to major roads, commercial
          centres, leisure destinations, and other key parts of Lagos.
          Location is one of the strongest factors supporting both lifestyle
          and property value.
        </p>
      </article>

      <article className="reason-card">
        <h3>Luxury Designed for Modern Living</h3>
        <p>
          From thoughtfully designed interiors and quality finishes to
          amenities such as a smart house, gym, spacious parking, security,
          and green spaces, Florence Court is designed to offer comfort,
          convenience, and a premium residential experience.
        </p>
      </article>

      <article className="reason-card">
        <h3>A Smart Investment Opportunity</h3>
        <p>
          Florence Court combines desirable location, modern amenities,
          and residential demand—making it attractive not only as a home
          but also as a potential investment and rental/short-let opportunity.
        </p>
      </article>

    </div>

  </div>

</section>


{/* =========================
    PROPERTY ENQUIRY FORM
========================= */}
<section className="enquiry-section" id="property-enquiry">

  <div className="container">

    <div className="enquiry-header">
      <h2>MACPRIME PROPERTIES &amp; INVESTMENTS</h2>
      <h3>Property Enquiry &amp; Client Information Form</h3>
    </div>

    <form
      className="enquiry-form"
      id="property-enquiry-form"
      action="https://formspree.io/f/xbgrajpw"
      method="POST"
    >

      <input
        type="hidden"
        name="_subject"
        value="New Florence Court Enquiry"
      />

      {/* 1. CLIENT INFORMATION */}
      <div className="form-section">

        <h4>1. CLIENT INFORMATION</h4>

        <div className="form-group">
          <label htmlFor="full-name">Full Name *</label>
          <input
            type="text"
            id="full-name"
            name="full_name"
            placeholder="Enter your full name"
            required
          />
        </div>

        <div className="form-row">

          <div className="form-group">
            <label htmlFor="phone">Phone Number *</label>
            <input
              type="tel"
              id="phone"
              name="phone"
              placeholder="Enter your phone number"
              required
            />
          </div>

          <div className="form-group">
            <label htmlFor="whatsapp">WhatsApp Number</label>
            <input
              type="tel"
              id="whatsapp"
              name="whatsapp"
              placeholder="WhatsApp number"
            />
          </div>

        </div>

        <div className="form-group">
          <label htmlFor="email">Email Address *</label>
          <input
            type="email"
            id="email"
            name="email"
            placeholder="Enter your email address"
            required
          />
        </div>

        <div className="form-group">
          <label>Preferred Contact Method</label>

          <div className="checkbox-group">
            <label>
              <input
                type="checkbox"
                name="contact_method"
                value="Phone Call"
              />
              Phone Call
            </label>

            <label>
              <input
                type="checkbox"
                name="contact_method"
                value="WhatsApp"
              />
              WhatsApp
            </label>

            <label>
              <input
                type="checkbox"
                name="contact_method"
                value="Email"
              />
              Email
            </label>
          </div>
        </div>

      </div>


      {/* 2. PROPERTY OF INTEREST */}
      <div className="form-section">

        <h4>2. PROPERTY OF INTEREST</h4>

        <div className="form-group">
          <label htmlFor="property-name">
            Property/Project Name *
          </label>

          <input
            type="text"
            id="property-name"
            name="property_name"
            value="Florence Court"
            readOnly
            required
          />
        </div>

        <div className="form-group">

          <label>Property Type</label>

          <div className="checkbox-group vertical">

            <label>
              <input
                type="checkbox"
                name="property_type"
                value="Apartment"
              />
              Apartment
            </label>

            <label>
              <input
                type="checkbox"
                name="property_type"
                value="Duplex"
              />
              Duplex
            </label>

            <label>
              <input
                type="checkbox"
                name="property_type"
                value="Land"
              />
              Land
            </label>

            <label>
              <input
                type="checkbox"
                name="property_type"
                value="Commercial Property"
              />
              Commercial Property
            </label>

            <label>
              <input
                type="checkbox"
                name="property_type"
                value="Other"
              />
              Other
            </label>

          </div>

        </div>

        <div className="form-group">

          <label htmlFor="preferred-unit">
            Preferred Unit/Property
          </label>

          <input
            type="text"
            id="preferred-unit"
            name="preferred_unit"
            placeholder="e.g. 2 Bedroom, 3 Bedroom with BQ"
          />

        </div>

      </div>


      {/* 3. PURCHASE INFORMATION */}
      <div className="form-section">

        <h4>3. PURCHASE INFORMATION</h4>

        <div className="form-group">

          <label>Purpose of Purchase</label>

          <div className="checkbox-group vertical">

            <label>
              <input
                type="checkbox"
                name="purchase_purpose"
                value="Personal Residence"
              />
              Personal Residence
            </label>

            <label>
              <input
                type="checkbox"
                name="purchase_purpose"
                value="Investment"
              />
              Investment
            </label>

            <label>
              <input
                type="checkbox"
                name="purchase_purpose"
                value="Rental Income"
              />
              Rental Income
            </label>

            <label>
              <input
                type="checkbox"
                name="purchase_purpose"
                value="Land Banking"
              />
              Land Banking
            </label>

            <label>
              <input
                type="checkbox"
                name="purchase_purpose"
                value="Other"
              />
              Other
            </label>

          </div>

        </div>


        <div className="form-group">

          <label>Estimated Budget</label>

          <div className="checkbox-group vertical">

            <label>
              <input
                type="radio"
                name="budget"
                value="₦50M & Below"
              />
              ₦50M &amp; Below
            </label>

            <label>
              <input
                type="radio"
                name="budget"
                value="₦50M - ₦100M"
              />
              ₦50M – ₦100M
            </label>

            <label>
              <input
                type="radio"
                name="budget"
                value="₦100M - ₦200M"
              />
              ₦100M – ₦200M
            </label>

            <label>
              <input
                type="radio"
                name="budget"
                value="₦200M & Above"
              />
              ₦200M &amp; Above
            </label>

            <label>
              <input
                type="radio"
                name="budget"
                value="Other"
              />
              Other
            </label>

          </div>

        </div>


        <div className="form-group">

          <label>Preferred Payment Option</label>

          <div className="checkbox-group vertical">

            <label>
              <input
                type="radio"
                name="payment_option"
                value="Outright Payment"
              />
              Outright Payment
            </label>

            <label>
              <input
                type="radio"
                name="payment_option"
                value="Installment"
              />
              Installment
            </label>

            <label>
              <input
                type="radio"
                name="payment_option"
                value="Mortgage/Financing"
              />
              Mortgage/Financing
            </label>

            <label>
              <input
                type="radio"
                name="payment_option"
                value="Yet to Decide"
              />
              Yet to Decide
            </label>

          </div>

        </div>

      </div>


      {/* 4. SITE INSPECTION */}
      <div className="form-section">

        <h4>4. SITE INSPECTION</h4>

        <div className="form-group">

          <label>
            Would you like to schedule a property inspection?
          </label>

          <div className="checkbox-group vertical">

            <label>
              <input
                type="radio"
                name="site_inspection"
                value="Yes"
              />
              Yes
            </label>

            <label>
              <input
                type="radio"
                name="site_inspection"
                value="No"
              />
              No
            </label>

            <label>
              <input
                type="radio"
                name="site_inspection"
                value="More Information"
              />
              I would like more information first
            </label>

          </div>

        </div>

        <div className="form-group">

          <label htmlFor="inspection-date">
            Preferred Inspection Date
          </label>

          <input
            type="date"
            id="inspection-date"
            name="inspection_date"
          />

        </div>

      </div>


      {/* 5. ADDITIONAL INFORMATION */}
      <div className="form-section">

        <h4>5. ADDITIONAL INFORMATION</h4>

        <div className="form-group">

          <label>What would you like assistance with?</label>

          <div className="checkbox-group vertical">

            <label>
              <input
                type="checkbox"
                name="assistance"
                value="Property Details"
              />
              Property Details
            </label>

            <label>
              <input
                type="checkbox"
                name="assistance"
                value="Pricing"
              />
              Pricing
            </label>

            <label>
              <input
                type="checkbox"
                name="assistance"
                value="Payment Plan"
              />
              Payment Plan
            </label>

            <label>
              <input
                type="checkbox"
                name="assistance"
                value="Documentation/Title"
              />
              Documentation/Title
            </label>

            <label>
              <input
                type="checkbox"
                name="assistance"
                value="Inspection"
              />
              Inspection
            </label>

            <label>
              <input
                type="checkbox"
                name="assistance"
                value="Investment Information"
              />
              Investment Information
            </label>

            <label>
              <input
                type="checkbox"
                name="assistance"
                value="Availability"
              />
              Availability
            </label>

            <label>
              <input
                type="checkbox"
                name="assistance"
                value="Other"
              />
              Other
            </label>

          </div>

        </div>

      </div>


      {/* 6. CLIENT COMMENTS / ENQUIRIES */}
      <div className="form-section">

        <h4>6. CLIENT COMMENTS / ENQUIRIES</h4>

        <div className="form-group">

          <textarea
            id="comments"
            name="comments"
            rows="6"
            placeholder="Please tell us how we can assist you..."
          ></textarea>

        </div>

      </div>


      {/* DATE */}
      <div className="form-group form-date">

        <label htmlFor="form-date">
          Date
        </label>

        <input
          type="date"
          id="form-date"
          name="form_date"
        />

      </div>


      {/* SUBMIT */}
      <div className="form-submit">

        <button
          type="submit"
          className="enquiry-submit"
        >
          Submit Enquiry
        </button>

      </div>

    </form>

  </div>

</section>
{/* =========================
    PROPERTY CTA
========================= */}
<section className="property-cta-section">

  <div className="property-cta">

    {/* CTA Image */}
    <div className="cta-image">
      <img
        src="/images/florence-court/florence-court-cta.jpg"
        alt="Florence Court residential development"
      />
    </div>

    {/* CTA Content */}
    <div className="cta-content">

      <p className="cta-heading">
        Own more than a home.
        <br />
        Own a lifestyle in the heart of Ajah ✨.
      </p>

      <p>
        Introducing Florence Court by Mac Prime Properties &amp; Investments.
      </p>

      <p>
        A premium 2 &amp; 3-bedroom serviced apartments designed for
        comfort, luxury, and smart living.
      </p>

      <p>2 bedroom: 100m</p>

      <p>2 bedroom with BQ: 110–120m</p>

      <p>3 bedroom: 110–120m</p>

      <p>
        For more inquiries, click on the button below.
      </p>

      <a
        href="mailto:admin@macprimeproperties.com"
        className="cta-button"
      >
        Contact Us
      </a>

    </div>

  </div>

</section>


{/* =========================
    FOOTER
========================= */}
<footer className="footer" id="contact">

  <div className="footer-grid">

    {/* Quick Links */}
    <div className="footer-column">

      <h3>Quick Links</h3>

      <a href="/">Home</a>
      <a href="/about">About us</a>
      <a href="/portfolios">Portfolio</a>
      <a href="/contact">Contact Us</a>
      <a href="/properties">Properties</a>

    </div>


    {/* Contact Info */}
    <div className="footer-column">

      <h3>Contact Info</h3>

      <a
        href="tel:+2348142733067"
        className="phone-link"
      >
        <span className="phone-icon">☎</span>
        <span>0814 273 3067</span>
      </a>

    </div>


    {/* Newsletter */}
    <div className="footer-column newsletter">

      <h3>Newsletter</h3>

      <label htmlFor="newsletter-email">
        Email
      </label>

      <input
        type="email"
        id="newsletter-email"
        placeholder="Enter your email"
      />

      <button type="button">
        Subscribe
      </button>

    </div>


    {/* Social Media */}
    <div className="footer-column social-media">

      <h3>Social Media</h3>

      <div className="social-icons">

        <a
          href="https://www.instagram.com/macprime.ng/"
          aria-label="Instagram"
          target="_blank"
          rel="noopener noreferrer"
        >
          Instagram
        </a>

        <a
          href="https://www.tiktok.com/@macprime.ng"
          aria-label="TikTok"
          target="_blank"
          rel="noopener noreferrer"
        >
          TikTok
        </a>

        <a
          href="https://wa.me/2348142733067"
          aria-label="WhatsApp"
          target="_blank"
          rel="noopener noreferrer"
        >
          WhatsApp
        </a>

      </div>

    </div>

  </div>


  {/* Copyright */}
  <div className="copyright">
    Copyright © 2026
  </div>

</footer>