@page "/"
@inject IStringLocalizer<Home> L

<PageTitle>EggyMon Kitchen - @L["Hero_Headline"]</PageTitle>

<!-- ═══════════════════════════════════════════════════════════════════
     1. HERO SECTION — Dark brown bg, side-by-side layout
     ═══════════════════════════════════════════════════════════════════ -->
<section class="hero-section">
    <div class="hero-content">
        <div class="hero-badge">@L["Hero_Badge"]</div>
        <h1 class="hero-headline">@L["Hero_Headline"]</h1>
        <p class="hero-subline">@L["Hero_Subline"]</p>
        <div class="hero-cta-row">
            <a href="#menu" class="hero-btn-primary">@L["Hero_CTA_Primary"]</a>
            <a href="#testimonials" class="hero-btn-secondary">@L["Hero_CTA_Secondary"]</a>
        </div>
    </div>
    <div class="hero-image">
        <img src="/images/eggymon-kitchen-store.png" alt="EggyMon Kitchen Store" />
    </div>
</section>

<!-- ═══════════════════════════════════════════════════════════════════
     2. FEATURES SECTION — White bg, 3 cards
     ═══════════════════════════════════════════════════════════════════ -->
<section class="features-section">
    <div class="features-header">
        <span class="section-tag">@L["Features_Tag"]</span>
        <h2 class="section-title">@L["Features_Title"]</h2>
        <p class="section-desc">@L["Features_Desc"]</p>
    </div>
    
    <div class="features-grid">
        <!-- EN: Feature 1: Open 24/7 / VI: Mở 24/7 -->
        <div class="feature-card">
            <div class="feature-icon">
                <MudIcon Icon="@Icons.Material.Rounded.Schedule" Size="Size.Large" />
            </div>
            <h3 class="feature-title">@L["Feature1_Title"]</h3>
            <p class="feature-desc">@L["Feature1_Desc"]</p>
        </div>

        <!-- EN: Feature 2: Farm Fresh Eggs / VI: Trứng Tươi -->
        <div class="feature-card">
            <div class="feature-icon">
                <MudIcon Icon="@Icons.Material.Rounded.Spa" Size="Size.Large" />
            </div>
            <h3 class="feature-title">@L["Feature2_Title"]</h3>
            <p class="feature-desc">@L["Feature2_Desc"]</p>
        </div>

        <!-- EN: Feature 3: Made With Love / VI: Làm Với Tình Yêu -->
        <div class="feature-card">
            <div class="feature-icon">
                <MudIcon Icon="@Icons.Material.Rounded.Favorite" Size="Size.Large" />
            </div>
            <h3 class="feature-title">@L["Feature3_Title"]</h3>
            <p class="feature-desc">@L["Feature3_Desc"]</p>
        </div>
    </div>
</section>

<!-- ═══════════════════════════════════════════════════════════════════
     3. MENU SECTION — Dark brown bg, 3 text columns
     ═══════════════════════════════════════════════════════════════════ -->
<section class="menu-section" id="menu">
    <div class="menu-header">
        <span class="section-tag">@L["Menu_Tag"]</span>
        <h2 class="section-title-white">@L["Menu_Title"]</h2>
        <p class="section-desc-white">@L["Menu_Desc"]</p>
    </div>
    
    <div class="menu-grid">
        <!-- EN: Column 1: Main Dishes / VI: Cột 1: Món Chính -->
        <div class="menu-column">
            <span class="menu-column-title">@L["Menu_Col1_Title"]</span>
            <div class="menu-divider-line"></div>
            <span class="menu-item">@L["Menu_Col1_Item1"]</span>
            <span class="menu-item">@L["Menu_Col1_Item2"]</span>
            <span class="menu-item">@L["Menu_Col1_Item3"]</span>
            <span class="menu-item">@L["Menu_Col1_Item4"]</span>
            <span class="menu-item">@L["Menu_Col1_Item5"]</span>
            <span class="menu-item">@L["Menu_Col1_Item6"]</span>
        </div>
        
        <div class="menu-column-separator"></div>
        
        <!-- EN: Column 2: Sides & Snacks / VI: Cột 2: Món Phụ -->
        <div class="menu-column">
            <span class="menu-column-title">@L["Menu_Col2_Title"]</span>
            <div class="menu-divider-line"></div>
            <span class="menu-item">@L["Menu_Col2_Item1"]</span>
            <span class="menu-item">@L["Menu_Col2_Item2"]</span>
            <span class="menu-item">@L["Menu_Col2_Item3"]</span>
            <span class="menu-item">@L["Menu_Col2_Item4"]</span>
            <span class="menu-item">@L["Menu_Col2_Item5"]</span>
            <span class="menu-item">@L["Menu_Col2_Item6"]</span>
            <span class="menu-item">@L["Menu_Col2_Item7"]</span>
        </div>
        
        <div class="menu-column-separator"></div>
        
        <!-- EN: Column 3: Specials / VI: Cột 3: Đặc Biệt -->
        <div class="menu-column">
            <span class="menu-column-title">@L["Menu_Col3_Title"]</span>
            <div class="menu-divider-line"></div>
            <span class="menu-item">@L["Menu_Col3_Item1"]</span>
            <span class="menu-item">@L["Menu_Col3_Item2"]</span>
        </div>
    </div>
</section>

<!-- ═══════════════════════════════════════════════════════════════════
     4. TESTIMONIALS SECTION — Cream bg, 3 quote cards
     ═══════════════════════════════════════════════════════════════════ -->
<section class="testimonials-section" id="testimonials">
    <div class="testimonials-header">
        <span class="section-tag">@L["Testimonials_Tag"]</span>
        <h2 class="section-title">@L["Testimonials_Title"]</h2>
    </div>
    
    <div class="testimonials-grid">
        <div class="testimonial-card">
            <p class="testimonial-quote">"@L["Testimonial1_Quote"]"</p>
        </div>
        <div class="testimonial-card">
            <p class="testimonial-quote">"@L["Testimonial2_Quote"]"</p>
        </div>
        <div class="testimonial-card">
            <p class="testimonial-quote">"@L["Testimonial3_Quote"]"</p>
        </div>
    </div>
</section>

<!-- ═══════════════════════════════════════════════════════════════════
     5. CTA SECTION — Orange bg, 2 buttons
     ═══════════════════════════════════════════════════════════════════ -->
<section class="cta-section">
    <h2 class="cta-title">@L["CTA_Title"]</h2>
    <p class="cta-subtitle">@L["CTA_Subtitle"]</p>
    <div class="cta-btn-row">
        <button class="cta-btn-primary">@L["CTA_Btn_Primary"]</button>
        <button class="cta-btn-secondary">@L["CTA_Btn_Secondary"]</button>
    </div>
</section>

<!-- ═══════════════════════════════════════════════════════════════════
     6. FOOTER — Dark bg, logo + 3 link columns + divider + legal
     ═══════════════════════════════════════════════════════════════════ -->
<footer class="footer" id="contact">
    <div class="footer-top">
        <div class="footer-brand">
            <div class="footer-logo-row">
                <img src="/images/Logo-Eggymon-Kitchen.png" alt="EggyMon Kitchen" />
                <span class="footer-logo-text">EggyMon Kitchen</span>
            </div>
            <p class="footer-tagline">@L["Footer_Tagline"]</p>
        </div>
        <div class="footer-links">
            <!-- EN: Column 1: Company / VI: Cột 1: Công ty -->
            <div class="footer-col">
                <span class="footer-col-title">@L["Footer_Col1_Title"]</span>
                <a href="#about">@L["Footer_Col1_Link1"]</a>
                <a href="#menu">@L["Footer_Col1_Link2"]</a>
                <a href="#testimonials">@L["Footer_Col1_Link3"]</a>
                <a href="#contact">@L["Footer_Col1_Link4"]</a>
            </div>
            <!-- EN: Column 2: Support / VI: Cột 2: Hỗ trợ -->
            <div class="footer-col">
                <span class="footer-col-title">@L["Footer_Col2_Title"]</span>
                <a href="#">@L["Footer_Col2_Link1"]</a>
                <a href="#">@L["Footer_Col2_Link2"]</a>
                <a href="#">@L["Footer_Col2_Link3"]</a>
            </div>
            <!-- EN: Column 3: Connect / VI: Cột 3: Kết nối -->
            <div class="footer-col">
                <span class="footer-col-title">@L["Footer_Col3_Title"]</span>
                <a href="#">@L["Footer_Col3_Link1"]</a>
                <a href="#">@L["Footer_Col3_Link2"]</a>
                <a href="#">@L["Footer_Col3_Link3"]</a>
            </div>
        </div>
    </div>
    <div class="footer-divider"></div>
    <div class="footer-bottom">
        <span class="footer-copyright">@L["Footer_Copyright"]</span>
        <div class="footer-legal">
            <a href="#">@L["Footer_Privacy"]</a>
            <a href="#">@L["Footer_Terms"]</a>
        </div>
    </div>
</footer>
