@page "/"
@rendermode InteractiveServer

<PageTitle>Home</PageTitle>

@if (Model == null)
{
    <p>Loading...</p>
}
else
{
    <nav class="navbar">
        <div class="container">
            <div class="logo">@Model.BusinessName</div>
            <a href="@Model.PhoneNumberCallLink" class="nav-phone">📞 @Model.FormattedPhoneNumber</a>
        </div>
    </nav>

    <header class="hero">
        <div class="container">
            <h1>@Model.HeaderLine1 <br><span>@Model.HeaderLine2</span></h1>
            <p>@Model.HeaderText</p>
            <div class="cta-group">
                <a href="@Model.PhoneNumberCallLink" class="btn btn-primary">Call for Same-Day Service</a>
                <a href="/book" class="btn btn-secondary">Request an Appointment</a>
            </div>
        </div>
    </header>

    <section class="services">
        <div class="container">
            <h2 class="section-title">@Model.SecondaryHeaderText</h2>
            <div class="service-grid">
                @if (Model.ServicesCards != null)
                {
                    foreach (var serviceCard in Model.ServicesCards)
                    {
                        <div class="service-card">
                            <h3>@serviceCard.Header</h3>
                            <p>@serviceCard.Text</p>
                        </div>
                    }
                }
            </div>
        </div>
    </section>

    <section class="trust">
        <div class="container">
            @if (Model.TrustCards != null)
            {
                foreach (var trustCard in Model.TrustCards)
                {
                    <div class="trust-item">
                        <strong>@trustCard.Header</strong>
                        <p>@trustCard.Text</p>
                    </div>
                }
            }
        </div>
    </section>

    <footer>
        <p>@Model.CopyrightText</p>
    </footer>
}