@page "/"
@using DeepDrftPublic.Client.Controls
@using DeepDrftPublic.Client.Services
@inject SeoOptions Seo

<SeoHead Model="@SeoModel.ForHome(Seo)" />

@* Hero - split 50/50 *@
<section class="hero">
    <MudGrid Spacing="0" Style="height: 100%;">
        <MudItem xs="12" md="6">
            <div class="hero-left">
                <DeepDrftHero />
            </div>
        </MudItem>

        <MudItem xs="12" md="6">
            <NowPlaying />
        </MudItem>
    </MudGrid>
    <ParallaxImage Image1="img/dd-duo-hero-bw.jpeg" 
                   Image2="img/dd-duo-hero.jpeg"
                   Alt1="Deep DRFT Electronic Music Duo"
                   FullWidth
                   InvertDirection
                   NaturalWidth="2048"
                   NaturalHeight="1365"
                   WindowHeightFraction="0.45"
                   ImageHeight="auto"
                   ImageWidth="100%"
                   ParallaxSpeed="0.35"
                   Class="my-12"/>
</section>

@* Divider *@
<div class="section-divider">
    <div class="divider-line"></div>
    <div class="divider-tag">The Sound</div>
    <div class="divider-line"></div>
</div>

@* Medium section *@
<section class="section">
    <div class="section-header-grid">
        <MudGrid Style="margin-bottom: 5rem;">
            <MudItem xs="12" md="4">
                <div class="section-label">Format &amp; Medium</div>
                <h2 class="section-title">Music through<br /><em>Every</em><br />Medium</h2>
            </MudItem>
            <MudItem xs="12" md="8" Class="section-body-item">
                <div class="section-body">
                    <p>
                        The same hands, three different rooms. A studio cut is built; a live set is risked; a DJ mix is woven. We release in every form the music asks for &mdash; each one a different relationship between the moment and the record of it.
                    </p>
                </div>
            </MudItem>
        </MudGrid>
    </div>

    <div class="medium-grid">
        <a class="medium-card" href="/cuts">
            <div class="medium-image" style="background-image: url('img/dd-studio.jpg');">
                <div class="medium-scrim"></div>
            </div>
            <div class="medium-body">
                <div class="medium-type">Studio</div>
                <div class="medium-name">Studio Releases</div>
                <div class="medium-desc">Composed, layered, and finished &mdash; tracks built to be returned to.</div>
            </div>
        </a>
        <a class="medium-card" href="/sessions">
            <div class="medium-image" style="background-image: url('img/dd-live.jpeg');">
                <div class="medium-scrim"></div>
            </div>
            <div class="medium-body">
                <div class="medium-type">Live</div>
                <div class="medium-name">Live Releases</div>
                <div class="medium-desc">Performances caught in the moment, unrepeatable and unedited.</div>
            </div>
        </a>
        <a class="medium-card" href="/mixes">
            <div class="medium-image" style="background-image: url('img/dd-dj.jpeg');">
                <div class="medium-scrim"></div>
            </div>
            <div class="medium-body">
                <div class="medium-type">Mix</div>
                <div class="medium-name">DJ Mix Releases</div>
                <div class="medium-desc">Uninterrupted sets &mdash; one track bleeding into the next, start to finish.</div>
            </div>
        </a>
    </div>
</section>

@* Dark features section *@
<section class="section-dark">
    <div class="section-label section-label-dark">What We Offer</div>
    <h2 class="section-title section-title-dark">
        Built for the<br /><em>Committed Listener</em>
    </h2>

    <div class="features-grid">
        <div class="feature-card">
            <div class="feature-icon">
                <svg viewBox="0 0 24 24"><path d="M9 18V5l12-2v13" /><circle cx="6" cy="18" r="3" /><circle cx="18" cy="16" r="3" /></svg>
            </div>
            <div class="feature-title">Lossless Audio Streaming</div>
            <div class="feature-desc">Crystal-clear sound delivered at full resolution. We don't compress the music &mdash; or the experience.</div>
        </div>
        <div class="feature-card">
            <div class="feature-icon">
                <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" /><polygon points="10 8 16 12 10 16 10 8" /></svg>
            </div>
            <div class="feature-title">Live Sessions Broadcast</div>
            <div class="feature-desc">Join us in real time. Every session is unrepeatable &mdash; a singular moment sculpted between performer and listener.</div>
        </div>
        <div class="feature-card">
            <div class="feature-icon">
                <svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2" ry="2" /><line x1="8" y1="21" x2="16" y2="21" /><line x1="12" y1="17" x2="12" y2="21" /></svg>
            </div>
            <div class="feature-title">Studio Video Content</div>
            <div class="feature-desc">Behind-the-machine footage. Watch synthesis happen in real time, gear and all &mdash; no performance, just process.</div>
        </div>
        <div class="feature-card">
            <div class="feature-icon">
                <svg viewBox="0 0 24 24"><path d="M3 3h18v18H3z" /><path d="M3 9h18M9 21V9" /></svg>
            </div>
            <div class="feature-title">Growing Archive</div>
            <div class="feature-desc">A living catalogue of sessions, mixes, and experiments &mdash; indexed, searchable, and always expanding.</div>
        </div>
    </div>
</section>

@* Split: origin + connect *@
<div class="section-split">
    <MudGrid Spacing="0" Style="height: 100%;">
        <MudItem xs="12" md="6">
            <div class="split-left">
                <div class="split-eyebrow">Our Origin</div>
                <h2 class="split-title">Where the Holy City<br /><em>Meets the Future</em></h2>
                <p class="split-body">
                    Charleston, South Carolina holds centuries of culture in its streets. We carry that weight into the studio &mdash; tradition as tension against the forward pull of electronic sound. The result is music that feels both ancient and unimagined.
                </p>
            </div>
        </MudItem>

        <MudItem xs="12" md="6">
            <div class="split-right">
                <ParallaxImage Image1="img/dd-pedals.jpeg"
                               InvertDirection
                               NaturalWidth="1159"
                               NaturalHeight="1196"
                               WindowHeightFraction="0.5"
                               ImageHeight="auto"
                               ImageWidth="100%"
                               ParallaxSpeed="0.6" />
            </div>
        </MudItem>
    </MudGrid>
</div>

@* CTA banner *@
<section class="cta-banner">
    <div class="cta-text">
        <h2 class="cta-headline">Ready to<br /><em>Drift</em> Deeper?</h2>
        <p class="cta-sub">Immerse yourself. The current is always running.</p>
    </div>
    <div class="cta-actions">
        <a class="btn-white" href="/archive">Explore the Archive</a>
        @* TODO: route to /schedule when live-session schedule page exists *@
        <button class="btn-outline-white" type="button">View Live Schedule</button>
    </div>
</section>

<section>
    <ParallaxImage Image1="img/mixer-bw.jpg" 
                   Image2="img/mixer.jpg"
                   Alt1="Deep DRFT Electronic Music Duo"
                   NaturalWidth="2048"
                   NaturalHeight="1365"
                   WindowHeightFraction="0.45"
                   ImageHeight="auto"
                   ImageWidth="100%"
                   ParallaxSpeed="0.35" />
</section>



@code {
    [CascadingParameter] public IStreamingPlayerService? Player { get; set; }
}