@page "/about"
@using DeepDrftPublic.Client.Controls

<PageTitle>The Collective - Deep DRFT</PageTitle>

@* ── HERO (split 50/50) — reuses the .hero-* type classes with About's own words.
   NOT DeepDrftHero (that hard-codes the Deep/DRFT masthead + streaming CTA). ── *@
<section class="hero">
    <MudGrid Spacing="0" Style="height: 100%;">
        <MudItem xs="12" md="6">
            <div class="hero-left">
                <div class="hero-eyebrow @AnimClass">Charleston, South Carolina</div>
                <h1 class="hero-title @AnimClass">The<br /><em>Collective</em></h1>
                <p class="hero-desc @AnimClass">
                    Two people, many hats. We bring the heart and soul of Midwest deep house to Charleston &mdash; informed by the founders of the style, and promising to push it forward.
                </p>
            </div>
        </MudItem>

        <MudItem xs="12" md="6">
            @* IMG SLOT A — hero duo portrait. Reuses the committed duo pair as interim. *@
            <div class="hero-image-pane">
                <ParallaxImage Image1="img/dd-duo-2-bw.jpg"
                               Image2="img/dd-duo-2.jpeg"
                               Alt1="Deep DRFT — two-person electronic music collective"
                               NaturalWidth="2048"
                               NaturalHeight="1365"
                               WindowHeightFraction="0.9"
                               ImageHeight="auto"
                               ImageWidth="100%"
                               ParallaxSpeed="0.25" />
            </div>
        </MudItem>
    </MudGrid>

    @* IMG SLOT B — full-bleed band under the hero, bw+colour crossfade pair. *@
    <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>

@* ════════════════════ MOVEMENT ONE — THE PEOPLE (pathos) ════════════════════ *@
<div class="section-divider">
    <div class="divider-line"></div>
    <div class="divider-tag">The People</div>
    <div class="divider-line"></div>
</div>

@* People intro — two-column section: label + serif title left, prose right. *@
<section class="section">
    <div class="section-header-grid">
        <MudGrid Style="margin-bottom: 5rem;">
            <MudItem xs="12" md="4">
                <div class="section-label">The Collective</div>
                <h2 class="section-title">Two of Us,<br />No Fixed<br /><em>Roles</em></h2>
            </MudItem>
            <MudItem xs="12" md="8" Class="section-body-item">
                <div class="section-body">
                    <p>
                        We met trading synthesizers and found out we were seeking the same thing. Two of us, no fixed roles &mdash; we both write, arrange, produce, mix, record in the field, build the visuals, and make the tools when the tools don't exist yet.
                    </p>
                </div>
            </MudItem>
        </MudGrid>
    </div>

    @* Member bio pair — two cards side by side; each composes with the body absent
       (Khabran ships with an empty body slot, same null-renders-nothing discipline
       as ReleaseDescription). *@
    <MudGrid>
        @foreach (var member in _members)
        {
            <MudItem xs="12" md="6">
                <div class="bio-card">
                    <div class="bio-portrait">
                        @if (member.PortraitImage1 is not null)
                        {
                            <ParallaxImage Image1="@member.PortraitImage1"
                                           Image2="@member.PortraitImage2"
                                           Alt1="@($"{member.Name} — portrait")"
                                           NaturalWidth="1365"
                                           NaturalHeight="2048"
                                           WindowHeightFraction="0.62"
                                           ImageHeight="auto"
                                           ImageWidth="100%"
                                           ParallaxSpeed="0.5" />
                        }
                        else
                        {
                            @* Graceful-degrade placeholder until a portrait file lands. *@
                            <div class="bio-portrait-placeholder" aria-hidden="true"></div>
                        }
                    </div>
                    <div class="bio-meta">
                        <div class="bio-name">@member.Name</div>
                        <div class="bio-role">@member.Role</div>
                        @if (!string.IsNullOrWhiteSpace(member.Bio))
                        {
                            <p class="bio-body">@member.Bio</p>
                        }
                    </div>
                </div>
            </MudItem>
        }
    </MudGrid>
</section>

@* ════════════════════ MOVEMENT TWO — THE PROCESS (logos) ════════════════════ *@
<div class="section-divider">
    <div class="divider-line"></div>
    <div class="divider-tag">The Process</div>
    <div class="divider-line"></div>
</div>

@* Dark feature band — gear-stage cards. The dark ground carries the analytical register. *@
<section class="section-dark">
    <div class="section-label section-label-dark">How It's Made</div>
    <h2 class="section-title section-title-dark">
        Digital, Analog,<br /><em>Whatever Moves</em>
    </h2>

    <p class="section-dark-standfirst">
        It doesn't matter how &mdash; digital or analog, hard or soft, bought or built &mdash; as long as it moves the room. The soul in this music is designed, not extracted; assembled, not distilled.
    </p>

    <div class="features-grid">
        <div class="feature-card">
            <div class="feature-icon">
                <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" /><line x1="3" y1="9" x2="21" y2="9" /><line x1="9" y1="9" x2="9" y2="21" /></svg>
            </div>
            <div class="feature-title">Sketch</div>
            <div class="feature-desc">A loop starts on the Force or the MPC, hands on the pads. The idea has to survive first contact before anything else gets built around it.</div>
        </div>
        <div class="feature-card">
            <div class="feature-icon">
                <svg viewBox="0 0 24 24"><line x1="4" y1="21" x2="4" y2="14" /><line x1="4" y1="10" x2="4" y2="3" /><line x1="12" y1="21" x2="12" y2="12" /><line x1="12" y1="8" x2="12" y2="3" /><line x1="20" y1="21" x2="20" y2="16" /><line x1="20" y1="12" x2="20" y2="3" /><line x1="1" y1="14" x2="7" y2="14" /><line x1="9" y1="8" x2="15" y2="8" /><line x1="17" y1="16" x2="23" y2="16" /></svg>
            </div>
            <div class="feature-title">Arrange</div>
            <div class="feature-desc">Sometimes into Ableton, sometimes start-to-finish in REAPER. The track gets shaped wherever it wants to go &mdash; we follow the take, not the template.</div>
        </div>
        <div class="feature-card">
            <div class="feature-icon">
                <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="3" /><line x1="12" y1="3" x2="12" y2="6" /><line x1="12" y1="18" x2="12" y2="21" /></svg>
            </div>
            <div class="feature-title">Studio</div>
            <div class="feature-desc">A deep bench of synths, drum machines, and pedals; digital and analog, hard and soft, some of it built by hand. If the sound we need doesn't exist yet, we make the thing that makes it.</div>
        </div>
        <div class="feature-card">
            <div class="feature-icon">
                <svg viewBox="0 0 24 24"><path d="M3 12h3l2-7 4 14 2-7h3" /><circle cx="20" cy="12" r="1.5" /></svg>
            </div>
            <div class="feature-title">Live Rig</div>
            <div class="feature-desc">No laptop, no safety net. A full spread of hardware patched together and played 100% live &mdash; sequenced, twisted, and pushed in the moment. Built for the room, the warehouse, the night that doesn't repeat.</div>
        </div>
    </div>
</section>

@* IMG SLOT D — hands-on-gear band, the literal proof-of-effort image. *@
<section>
    <ParallaxImage Image1="img/mixer-bw.jpg"
                   Image2="img/mixer.jpg"
                   Alt1="Deep DRFT — hands on the gear"
                   NaturalWidth="2048"
                   NaturalHeight="1365"
                   WindowHeightFraction="0.45"
                   ImageHeight="auto"
                   ImageWidth="100%"
                   ParallaxSpeed="0.35" />
</section>

@* ════════════════════ MOVEMENT THREE — THE PRODUCT (ethos) ════════════════════ *@
<div class="section-divider">
    <div class="divider-line"></div>
    <div class="divider-tag">The Product</div>
    <div class="divider-line"></div>
</div>

@* Product intro — two-column section framing the catalogue as evidence. *@
<section class="section">
    <div class="section-header-grid">
        <MudGrid Style="margin-bottom: 5rem;">
            <MudItem xs="12" md="4">
                <div class="section-label">The Output</div>
                <h2 class="section-title">Classics,<br />with a<br /><em>Twist</em></h2>
            </MudItem>
            <MudItem xs="12" md="8" Class="section-body-item">
                <div class="section-body">
                    <p>
                        Everything ends up here, in the catalogue. It's proof people in Charleston are pushing the sound of the club.
                    </p>
                </div>
            </MudItem>
        </MudGrid>
    </div>

    @* Medium triptych — one-line frame of each medium; definitions, not a re-pitch. *@
    <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">Cuts</div>
                <div class="medium-desc">Studio work, composed and finished.</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">Sessions</div>
                <div class="medium-desc">Live, caught once, never the same twice.</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">DJ Set</div>
                <div class="medium-name">Mixes</div>
                <div class="medium-desc">Uninterrupted sets, start to finish.</div>
            </div>
        </a>
    </div>
</section>

@* The live turn — "on the street, in the swamp": the identity beyond the releases. *@
<div class="section-split">
    <MudGrid Spacing="0" Style="height: 100%;">
        <MudItem xs="12" md="6">
            <div class="split-left">
                <div class="split-eyebrow">Beyond the Releases</div>
                <h2 class="split-title">On the Street,<br /><em>in the Swamp</em></h2>
                <p class="split-body">
                    But that's just the releases. We're also out there &mdash; on the street, in the swamp, with a PA, a generator, and a bunch of good vibes.
                </p>
            </div>
        </MudItem>

        <MudItem xs="12" md="6">
            <div class="split-right">
                <ParallaxImage Image1="img/dd-live.jpeg"
                               Alt1="Deep DRFT — live, out in the world"
                               InvertDirection
                               NaturalWidth="2048"
                               NaturalHeight="1365"
                               WindowHeightFraction="0.7"
                               ImageHeight="auto"
                               ImageWidth="100%"
                               ParallaxSpeed="0.6" />
            </div>
        </MudItem>
    </MudGrid>
</div>

@* ── Closing CTA into the catalogue ── *@
<section class="cta-banner">
    <div class="cta-text">
        <h2 class="cta-headline">Hear the<br /><em>Proof</em></h2>
        <p class="cta-sub">The catalogue is the evidence. Start listening.</p>
    </div>
    <div class="cta-actions">
        <a class="btn-white" href="/archive">Explore the Archive</a>
        <a class="btn-outline-white" href="/cuts">Hear a Cut</a>
    </div>
</section>

@* IMG SLOT E — closing atmosphere band. *@
<section>
    <ParallaxImage Image1="img/dd-duo-hero-bw.jpeg"
                   Image2="img/dd-duo-hero.jpeg"
                   Alt1="Deep DRFT"
                   NaturalWidth="2048"
                   NaturalHeight="1365"
                   WindowHeightFraction="0.45"
                   InvertDirection
                   ImageHeight="auto"
                   ImageWidth="100%"
                   ParallaxSpeed="0.35" />
</section>

@code {
    private string AnimClass => RendererInfo.IsInteractive ? string.Empty : "fade-up";

    // Member bios. Khabran's body is an intentional empty slot — the card composes
    // without it (graceful degrade). Daniel's copy is verbatim per spec COPY C,
    // including the two typos he chose to keep ("embarked in", "metalhead at from").
    // PortraitImage* are null until final portrait files land — the card renders a
    // placeholder treatment in their absence.
    private record Member(
        string Name,
        string Role,
        string? Bio,
        string? PortraitImage1 = null,
        string? PortraitImage2 = null);

    private readonly Member[] _members =
    [
        new(
            Name: "Khabran Peters",
            Role: "Production · Sound Design · Live",
            Bio: null),
        new(
            Name: "Daniel Harvey",
            Role: "Production · Sound Design · Live",
            Bio: "Daniel started on drums at ten and embarked in electronic music at seventeen — synthesizers first. A metalhead at from a young age, he spent ten years as an engineer living near Detroit filling the nights with synthesized tones and rhythms, shaped most of all by modern underground Detroit techno. Art & engineering cannot be separated: custom plugins, hardware recording & performance rigs, the tools behind the tracks are just as important as the finished sound. To him the science and the math matter as much as the beauty — tension and release, built deliberately."),
    ];
}
