import type { Metadata } from "next";
import Link from "next/link";

const IMG = "/img/";

const TITLES: Record<string, string> = {
  "construction-planning": "Construction & Planning",
  "luxury-home-design-trends": "Luxury Home Design Trends",
  "smart-investment-strategies": "Smart Investment Strategies",
  "sustainable-living-spaces": "Sustainable Living Spaces",
  "choosing-the-perfect-villa": "Choosing the Perfect Villa",
  "future-of-luxury-real-estate": "Future of Luxury Real Estate",
  "the-art-of-modern-architecture": "The Art of Modern Architecture",
  "luxury-living-reimagined": "Luxury Living Reimagined",
  "finding-value-in-prime-locations": "Finding Value in Prime Locations",
};

const titleFromSlug = (slug: string) =>
  TITLES[slug] || slug.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());

export function generateStaticParams() {
  return Object.keys(TITLES).map((slug) => ({ slug }));
}

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const { slug } = await params;
  return { title: `${titleFromSlug(slug)} — Yamuna Expressway Authority` };
}

const POPULAR = [
  { t: "Find Your Adventure Live Your Passion", img: "260673733859890d3cc4cd00cba8c0197bd07e63" },
  { t: "Ravel Beyond Your Imagination", img: "9a497e6a609739cd2eb4c7c4aab0fe269966a1ed" },
  { t: "Adventure Awaits Around Every Corner", img: "ccbc8f48917623d3102a140714596c80fbe48ccd" },
];
const CATEGORY = ["Flight Booking", "Vacation Packages", "Car Rental Services", "Adventure Travel Planning", "Group Travel Organization", "Insurance Services"];
const TAGS = ["Luxury Homes", "Modern Architecture", "Interior Design", "Smart Homes"];
const CHECKS = ["Open and Flexible Floor Plans", "Smart Home Automation Integration", "Sustainable and Energy-Efficient Design", "Indoor-Outdoor Living Experiences", "Premium Natural Materials and Finishes"];

export default async function BlogDetailPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const title = titleFromSlug(slug);

  return (
    <>
      <section className="faq-hero">
        <img src={`${IMG}c376c66c882591b36ac351bdd4592497b8acd713.png`} alt="" className="bl-hero-bg" />
        <div className="faq-hero-overlay" />
        <div className="container faq-hero-inner">
          <h1>Latest Blog</h1>
          <p>Architecture, approvals, construction, supervision and completion, a single accountable team for your YEIDA villa.</p>
        </div>
      </section>

      <section className="section bd-body">
        <div className="container bd-grid">
          {/* main */}
          <article className="bd-main">
            <img className="bd-feature" src={`${IMG}6db83255bd459fd9990645d1bc5f776f02681de7.png`} alt={title} />
            <div className="bd-meta">
              <span><img src={`${IMG}admin.svg`} alt="" /> By admin</span>
              <span><img src={`${IMG}calenderdetails.svg`} alt="" /> October 30, 2026</span>
              <span><img src={`${IMG}comment.svg`} alt="" /> Comments (05)</span>
            </div>
            <h2 className="bd-title">{title}</h2>
            <p>Luxury home design continues to evolve as homeowners seek spaces that combine elegance, comfort, technology, and sustainability. Modern luxury is no longer defined solely by size or extravagance—it is about creating a personalized lifestyle experience that reflects sophistication while enhancing everyday living.</p>
            <p>Today&rsquo;s premium residences feature open-concept layouts, floor-to-ceiling glass facades, smart automation systems, and seamless indoor-outdoor integration. Architects and designers are focusing on maximizing natural light, improving functionality, and creating timeless aesthetics that remain relevant for years to come.</p>
            <p>Whether you&rsquo;re planning a new villa, renovating an existing property, or exploring investment opportunities, understanding current luxury design trends can help you make informed decisions that add long-term value to your home.</p>

            <div className="bd-split">
              <img src={`${IMG}3c45a739408e4c5f8901dd031dd17f18921f049c.png`} alt="" />
              <div>
                <h3>Explore Beyond Conventional Luxury</h3>
                <ul className="bd-checks">
                  {CHECKS.map((c) => <li key={c}>✓ {c}</li>)}
                </ul>
              </div>
            </div>

            <blockquote className="bd-quote">
              <span className="bd-quote-mark"><img src={`${IMG}quotes.svg`} alt="" /></span>
              <p>True luxury lies in thoughtful design—where every detail serves a purpose and every space enhances the way people live.</p>
              <footer><strong>Yamuna Expressway Design Team</strong><span>Architecture &amp; Planning Experts</span></footer>
            </blockquote>

            <h3 className="bd-h2">The Future of Premium Living</h3>
            <p>One of the most significant shifts in luxury home design is the integration of advanced technology. Intelligent lighting systems, climate control, voice-enabled assistants, and smart security features have become essential elements of modern residences. These technologies not only improve convenience but also contribute to energy efficiency and sustainability.</p>
            <p>Another emerging trend is the use of sustainable materials and environmentally responsible construction practices. Homeowners are increasingly choosing eco-friendly solutions that reduce environmental impact while maintaining premium aesthetics and performance.</p>

            <div className="bd-tagrow">
              <div className="bd-tags">
                {TAGS.map((t) => <span key={t}>{t}</span>)}
              </div>
              <div className="bd-share">
                <a href="#" aria-label="Facebook">f</a>
                <a href="#" aria-label="X">x</a>
                <a href="#" aria-label="Instagram">○</a>
                <a href="#" aria-label="LinkedIn">in</a>
              </div>
            </div>

            <div className="bd-comment">
              <h3 className="bd-h2">Add a comment</h3>
              <p className="bd-comment-note">By using form you agree with the message storage, you can contact us directly now</p>
              <form>
                <div className="bd-comment-row">
                  <input type="text" placeholder="Your Name" />
                  <input type="email" placeholder="Your Email" />
                  <input type="url" placeholder="Your Website" />
                </div>
                <textarea rows={5} placeholder="Write your message" />
                <label className="bd-check"><input type="checkbox" /> Save my name, email and website</label>
                <button type="button" className="btn btn-dark">Post comment</button>
              </form>
            </div>
          </article>

          {/* sidebar */}
          <aside className="bd-side">
            <div className="bd-widget">
              <h4>Search Here</h4>
              <div className="bd-search"><input type="text" placeholder="Search.." /><button aria-label="Search">⌕</button></div>
            </div>
            <div className="bd-widget">
              <h4>Popular Post</h4>
              {POPULAR.map((p) => (
                <Link key={p.t} href="/blog" className="bd-pop">
                  <img src={`${IMG}${p.img}.png`} alt="" />
                  <div><span><img src={`${IMG}calenderdetails.svg`} alt="" /> October 19, 2022</span><strong>{p.t}</strong></div>
                </Link>
              ))}
            </div>
            <div className="bd-widget">
              <h4>Category</h4>
              {CATEGORY.map((c) => <a key={c} href="#" className="bd-cat">{c}</a>)}
            </div>
            <div className="bd-widget">
              <h4>Popular Tags</h4>
              <div className="bd-tags">
                {TAGS.map((t) => <span key={t}>{t}</span>)}
              </div>
            </div>
          </aside>
        </div>
      </section>
    </>
  );
}