import { Home } from 'lucide-react';

export default function ListingsPlaceholder() {
  return (
    <section id="listings" className="listings-section">
      <div className="listings-inner">
        <Home size={48} color="#C9A84C" />

        <h2 className="listings-heading">Listings Coming Soon</h2>

        <p className="listings-desc">
          Teressa is actively curating listings in your area. Check back soon or
          reach out directly.
        </p>

        <a href="#contact" className="listings-cta">
          Contact Teressa
        </a>
      </div>

      <style>{`
        .listings-section {
          background-color: #1B2B4B;
          color: #FAF9F7;
          padding: 5rem 2rem;
          text-align: center;
        }
        .listings-inner {
          max-width: 600px;
          margin: 0 auto;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 1.25rem;
        }
        .listings-heading {
          font-size: clamp(1.5rem, 3vw, 2rem);
          font-weight: 700;
          color: #FAF9F7;
          margin: 0;
        }
        .listings-desc {
          font-size: 1rem;
          color: #FAF9F7;
          opacity: 0.8;
          line-height: 1.7;
          margin: 0;
        }
        .listings-cta {
          display: inline-block;
          border: 2px solid #C9A84C;
          color: #C9A84C;
          font-weight: 600;
          padding: 0.6rem 1.75rem;
          border-radius: 4px;
          text-decoration: none;
          font-size: 0.95rem;
          margin-top: 0.5rem;
          transition: background-color 0.2s, color 0.2s;
        }
        .listings-cta:hover {
          background-color: #C9A84C;
          color: #1B2B4B;
        }
      `}</style>
    </section>
  );
}
