@page "/"
@page "/{culture}"
@inject IStringLocalizer<Home> L
@inject IJSRuntime JS

<PageTitle>aPOS - @L["HeroHeadline"]</PageTitle>

<!-- ═══════════════════════════════════════════════════════════════════════
     1. HERO SECTION
     ═══════════════════════════════════════════════════════════════════════ -->
<section class="hero-section">
    <div class="hero-badge">
        <span class="hero-badge-dot"></span>
        @L["HeroBadge"]
    </div>

    <h1 class="hero-headline">
        @L["HeroHeadline"]
    </h1>

    <p class="hero-subtext">
        @L["HeroSubtext"]
    </p>

    <div class="hero-actions">
        <a href="#pricing" class="btn-accent btn-accent-lg">
            <i data-lucide="arrow-right"></i>
            @L["HeroCTA_Primary"]
        </a>
        <a href="#features" class="btn-outline btn-outline-lg">
            <i data-lucide="play"></i>
            @L["HeroCTA_Secondary"]
        </a>
    </div>

    <div class="hero-mockup">
        <img src="/images/home/pos-dashboard.png" alt="@L["HeroMockup_Alt"]" class="hero-mockup-img" />
    </div>
</section>

<!-- ═══════════════════════════════════════════════════════════════════════
     2. TRUST SECTION
     ═══════════════════════════════════════════════════════════════════════ -->
<section class="trust-section">
    <div class="container">
        <div class="trust-stats">
            <span class="trust-label">@L["Trust_Label"]</span>
            <span class="trust-divider"></span>
            <span class="trust-stat">@L["Trust_Stat1"]</span>
            <span class="trust-divider"></span>
            <span class="trust-stat">@L["Trust_Stat2"]</span>
        </div>
    </div>
</section>

<!-- ═══════════════════════════════════════════════════════════════════════
     3. FEATURES SECTION
     ═══════════════════════════════════════════════════════════════════════ -->
<section id="features" class="tpos-section">
    <div class="container">
        <div class="tpos-section-header">
            <div class="tpos-badge">@L["Features_Badge"]</div>
            <h2 class="tpos-section-title">@L["Features_Title"]</h2>
            <p class="tpos-section-desc">@L["Features_Desc"]</p>
        </div>

        <div class="tpos-feature-grid">
            @foreach (var f in _features)
            {
                <div class="tpos-feature-card">
                    <div class="tpos-feature-icon-bg" style="background: @f.IconBg;">
                        <i data-lucide="@L[f.Icon]" style="color: @f.IconColor;"></i>
                    </div>
                    <h3 class="tpos-feature-title">@L[f.Title]</h3>
                    <p class="tpos-feature-desc">@L[f.Desc]</p>
                </div>
            }
        </div>
    </div>
</section>

<!-- ═══════════════════════════════════════════════════════════════════════
     4. INDUSTRIES SECTION
     ═══════════════════════════════════════════════════════════════════════ -->
<section id="industries" class="tpos-section" style="background: var(--bg-surface);">
    <div class="container">
        <div class="tpos-section-header">
            <div class="tpos-badge">@L["Industries_Badge"]</div>
            <h2 class="tpos-section-title">@L["Industries_Title"]</h2>
            <p class="tpos-section-desc">@L["Industries_Desc"]</p>
        </div>

        <div class="tpos-industry-grid">
            @foreach (var ind in _industries)
            {
                <div class="tpos-industry-card">
                    <div class="tpos-industry-img">
                        <img src="@ind.Image" alt="@L[ind.Title]" />
                    </div>
                    <div class="tpos-industry-content">
                        <h3 class="tpos-industry-title">@L[ind.Title]</h3>
                        <p class="tpos-industry-desc">@L[ind.Desc]</p>
                        <div class="tpos-chips">
                            @foreach (var chip in L[ind.Chips].Value.Split(','))
                            {
                                <span class="tpos-chip">✦ @chip.Trim()</span>
                            }
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</section>

<!-- ═══════════════════════════════════════════════════════════════════════
     5. ONBOARDING STEPS
     ═══════════════════════════════════════════════════════════════════════ -->
<section class="tpos-section">
    <div class="container">
        <div class="tpos-section-header">
            <div class="tpos-badge">@L["Steps_Badge"]</div>
            <h2 class="tpos-section-title">@L["Steps_Title"]</h2>
        </div>

        <div class="tpos-steps">
            <div class="tpos-step">
                <div class="tpos-step-num">1</div>
                <h3 class="tpos-step-title">@L["Step1_Title"]</h3>
                <p class="tpos-step-desc">@L["Step1_Desc"]</p>
            </div>
            <div class="tpos-step">
                <div class="tpos-step-num">2</div>
                <h3 class="tpos-step-title">@L["Step2_Title"]</h3>
                <p class="tpos-step-desc">@L["Step2_Desc"]</p>
            </div>
            <div class="tpos-step">
                <div class="tpos-step-num">3</div>
                <h3 class="tpos-step-title">@L["Step3_Title"]</h3>
                <p class="tpos-step-desc">@L["Step3_Desc"]</p>
            </div>
        </div>
    </div>
</section>

<!-- ═══════════════════════════════════════════════════════════════════════
     6. PRICING SECTION
     ═══════════════════════════════════════════════════════════════════════ -->
<section id="pricing" class="tpos-section" style="background: var(--bg-surface);">
    <div class="container">
        <div class="tpos-section-header">
            <div class="tpos-badge">@L["Pricing_Badge"]</div>
            <h2 class="tpos-section-title">@L["Pricing_Title"]</h2>
            <p class="tpos-section-desc">@L["Pricing_Desc"]</p>
        </div>

        <div class="tpos-pricing-grid">
            <!-- Starter Plan -->
            <div class="tpos-pricing-card">
                <div class="tpos-pricing-name">@L["Plan_Starter_Name"]</div>
                <div class="tpos-pricing-price">
                    <span class="tpos-pricing-amount">@L["Plan_Starter_Price"]</span>
                    <span class="tpos-pricing-period">@L["Plan_Starter_Period"]</span>
                </div>
                <p class="tpos-pricing-desc">@L["Plan_Starter_Desc"]</p>
                <hr class="tpos-pricing-divider" />
                <ul class="tpos-pricing-features">
                    <li class="tpos-pricing-feature"><i data-lucide="check" class="lucide-check green"></i> @L["Plan_Starter_Feature1"]</li>
                    <li class="tpos-pricing-feature"><i data-lucide="check" class="lucide-check green"></i> @L["Plan_Starter_Feature2"]</li>
                    <li class="tpos-pricing-feature"><i data-lucide="check" class="lucide-check green"></i> @L["Plan_Starter_Feature3"]</li>
                </ul>
                <a href="#" class="btn-outline btn-full">@L["Plan_Starter_CTA"]</a>
            </div>

            <!-- Growth Plan (Featured) -->
            <div class="tpos-pricing-card featured">
                <div class="tpos-pricing-badge">@L["Plan_Pro_Badge"]</div>
                <div class="tpos-pricing-name featured-name">@L["Plan_Pro_Name"]</div>
                <div class="tpos-pricing-price">
                    <span class="tpos-pricing-amount">@L["Plan_Pro_Price"]</span>
                    <span class="tpos-pricing-period">@L["Plan_Pro_Period"]</span>
                </div>
                <p class="tpos-pricing-desc">@L["Plan_Pro_Desc"]</p>
                <hr class="tpos-pricing-divider" />
                <ul class="tpos-pricing-features">
                    <li class="tpos-pricing-feature"><i data-lucide="check" class="lucide-check accent"></i> @L["Plan_Pro_Feature1"]</li>
                    <li class="tpos-pricing-feature"><i data-lucide="check" class="lucide-check accent"></i> @L["Plan_Pro_Feature2"]</li>
                    <li class="tpos-pricing-feature"><i data-lucide="check" class="lucide-check accent"></i> @L["Plan_Pro_Feature3"]</li>
                </ul>
                <a href="#" class="btn-accent btn-full">@L["Plan_Pro_CTA"]</a>
            </div>

            <!-- Enterprise Plan -->
            <div class="tpos-pricing-card">
                <div class="tpos-pricing-name">@L["Plan_Enterprise_Name"]</div>
                <div class="tpos-pricing-price">
                    <span class="tpos-pricing-amount">@L["Plan_Enterprise_Price"]</span>
                    <span class="tpos-pricing-period">@L["Plan_Enterprise_Period"]</span>
                </div>
                <p class="tpos-pricing-desc">@L["Plan_Enterprise_Desc"]</p>
                <hr class="tpos-pricing-divider" />
                <ul class="tpos-pricing-features">
                    <li class="tpos-pricing-feature"><i data-lucide="check" class="lucide-check green"></i> @L["Plan_Enterprise_Feature1"]</li>
                    <li class="tpos-pricing-feature"><i data-lucide="check" class="lucide-check green"></i> @L["Plan_Enterprise_Feature2"]</li>
                    <li class="tpos-pricing-feature"><i data-lucide="check" class="lucide-check green"></i> @L["Plan_Enterprise_Feature3"]</li>
                </ul>
                <a href="#" class="btn-outline btn-full">@L["Plan_Enterprise_CTA"]</a>
            </div>
        </div>

        <!-- Add-ons -->
        <div class="tpos-addons">
            <h3 class="tpos-addons-title">@L["Addons_Title"]</h3>
            <div class="tpos-addons-grid">
                @foreach (var addon in _addons)
                {
                    <div class="tpos-addon-item">
                        <div class="tpos-addon-left">
                            <i data-lucide="@L[addon.Icon]" style="color: var(--accent-primary);"></i>
                            <span class="tpos-addon-name">@L[addon.Name]</span>
                        </div>
                        <div class="tpos-addon-price">@L[addon.Price]</div>
                    </div>
                }
            </div>
        </div>
    </div>
</section>

<!-- ═══════════════════════════════════════════════════════════════════════
     7. CTA SECTION
     ═══════════════════════════════════════════════════════════════════════ -->
<section class="tpos-cta">
    <h2 class="tpos-cta-title">@((MarkupString)L["CTA_Title"].Value)</h2>
    <p class="tpos-cta-sub">@L["CTA_Subtitle"]</p>
    <div class="tpos-cta-actions">
        <a href="#" class="btn-accent btn-accent-lg">
            <i data-lucide="arrow-right"></i>
            @L["CTA_Primary"]
        </a>
        <a href="#" class="btn-outline btn-outline-lg">@L["CTA_Secondary"]</a>
    </div>
    <p class="tpos-cta-trust">@L["CTA_Trust"]</p>
</section>

<!-- ═══════════════════════════════════════════════════════════════════════
     8. FOOTER
     ═══════════════════════════════════════════════════════════════════════ -->
<footer class="tpos-footer">
    <div class="tpos-footer-grid">
        <div class="tpos-footer-brand">
            <span class="tpos-logo">@L["AppName"]</span>
            <p class="tpos-footer-tagline">@L["Footer_Tagline"]</p>
        </div>
        <div>
            <div class="tpos-footer-col-title">@L["Footer_Col1_Title"]</div>
            <ul class="tpos-footer-links">
                <li><a href="#features" class="tpos-footer-link">@L["Footer_Col1_Link1"]</a></li>
                <li><a href="#pricing" class="tpos-footer-link">@L["Footer_Col1_Link2"]</a></li>
                <li><a href="#" class="tpos-footer-link">@L["Footer_Col1_Link3"]</a></li>
                <li><a href="#" class="tpos-footer-link">@L["Footer_Col1_Link4"]</a></li>
            </ul>
        </div>
        <div>
            <div class="tpos-footer-col-title">@L["Footer_Col2_Title"]</div>
            <ul class="tpos-footer-links">
                <li><a href="#" class="tpos-footer-link">@L["Footer_Col2_Link1"]</a></li>
                <li><a href="#" class="tpos-footer-link">@L["Footer_Col2_Link2"]</a></li>
                <li><a href="#" class="tpos-footer-link">@L["Footer_Col2_Link3"]</a></li>
                <li><a href="#" class="tpos-footer-link">@L["Footer_Col2_Link4"]</a></li>
            </ul>
        </div>
        <div>
            <div class="tpos-footer-col-title">@L["Footer_Col3_Title"]</div>
            <ul class="tpos-footer-links">
                <li><a href="#" class="tpos-footer-link">@L["Footer_Col3_Link1"]</a></li>
                <li><a href="#" class="tpos-footer-link">@L["Footer_Col3_Link2"]</a></li>
                <li><a href="#" class="tpos-footer-link">@L["Footer_Col3_Link3"]</a></li>
                <li><a href="#" class="tpos-footer-link">@L["Footer_Col3_Link4"]</a></li>
            </ul>
        </div>
    </div>
    <hr class="tpos-footer-divider" />
    <div class="tpos-footer-bottom">
        <div class="tpos-footer-copy">@L["Footer_Copyright"]</div>
        <div class="tpos-footer-socials">
            <a href="#" class="tpos-social-link"><i data-lucide="facebook"></i></a>
            <a href="#" class="tpos-social-link"><i data-lucide="instagram"></i></a>
            <a href="#" class="tpos-social-link"><i data-lucide="youtube"></i></a>
            <a href="#" class="tpos-social-link"><i data-lucide="linkedin"></i></a>
        </div>
    </div>
</footer>

@code {
    [Parameter] public string? culture { get; set; }
    
    // Initialize Lucide icons after render
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("lucide.createIcons");
        }
    }

    // Feature cards data
    private record FeatureItem(string Icon, string Title, string Desc, string IconColor, string IconBg);
    private readonly FeatureItem[] _features =
    [
        new("Feature_POS_Icon",       "Feature_POS_Title",       "Feature_POS_Desc",       "#FF5C00", "#FF5C0018"),
        new("Feature_Loyalty_Icon",   "Feature_Loyalty_Title",   "Feature_Loyalty_Desc",   "#22C55E", "#22C55E18"),
        new("Feature_Reports_Icon",   "Feature_Reports_Title",   "Feature_Reports_Desc",   "#3B82F6", "#3B82F618"),
        new("Feature_Staff_Icon",     "Feature_Staff_Title",     "Feature_Staff_Desc",     "#A855F7", "#A855F718"),
        new("Feature_Inventory_Icon", "Feature_Inventory_Title", "Feature_Inventory_Desc", "#F59E0B", "#F59E0B18"),
        new("Feature_Payments_Icon",  "Feature_Payments_Title",  "Feature_Payments_Desc",  "#EC4899", "#EC489918"),
    ];

    // Industry cards data (5 industries matching Pencil design)
    private record IndustryItem(string Title, string Desc, string Chips, string Image);
    private readonly IndustryItem[] _industries =
    [
        new("Industry_Restaurant_Title", "Industry_Restaurant_Desc", "Industry_Restaurant_Chips", "/images/home/fnb-ai.png"),
        new("Industry_Bar_Title",        "Industry_Bar_Desc",        "Industry_Bar_Chips",        "/images/home/bar-ai.png"),
        new("Industry_Karaoke_Title",    "Industry_Karaoke_Desc",    "Industry_Karaoke_Chips",    "/images/home/karaoke-ai.png"),
        new("Industry_Coffee_Title",     "Industry_Coffee_Desc",     "Industry_Coffee_Chips",     "/images/home/coffee-ai.png"),
        new("Industry_Spa_Title",        "Industry_Spa_Desc",        "Industry_Spa_Chips",        "/images/home/spa-ai.png"),
    ];

    // Add-on items with icons (matching Pencil design)
    private record AddonItem(string Name, string Price, string Icon);
    private readonly AddonItem[] _addons =
    [
        new("Addon_Store_Name",    "Addon_Store_Price",    "Addon_Store_Icon"),
        new("Addon_Customer_Name", "Addon_Customer_Price", "Addon_Customer_Icon"),
        new("Addon_AI_Name",       "Addon_AI_Price",       "Addon_AI_Icon"),
        new("Addon_Storage_Name",  "Addon_Storage_Price",  "Addon_Storage_Icon"),
        new("Addon_API_Name",      "Addon_API_Price",      "Addon_API_Icon"),
        new("Addon_Staff_Name",    "Addon_Staff_Price",    "Addon_Staff_Icon"),
    ];
}
