About Page

@props([])

@php
    $brand = 'Northbeam';

    $navLinks = [
        ['label' => 'Product', 'href' => '#'],
        ['label' => 'Customers', 'href' => '#'],
        ['label' => 'About', 'href' => '#'],
        ['label' => 'Careers', 'href' => '#'],
    ];

    $story = [
        'Northbeam started in a shared studio in 2018, when a handful of engineers and designers got tired of rebuilding the same interfaces for every new product. We believed teams deserved to own their UI outright — readable, accessible code, not a black box.',
        'Seven years later we are a fully remote company spanning thirty countries, partnering with product teams who want a design system they control. No lock-in, no upgrade anxiety: just plain code that bends to their brand.',
    ];

    $values = [
        'Own your code — nothing hides behind a runtime',
        'Accessibility and dark mode are defaults, not add-ons',
        'Semantic tokens turn re-theming into a config change',
        'Ship small, ship often, leave it better than you found it',
    ];

    $mission = [
        'label' => __('Our mission'),
        'title' => __('Make great interfaces the path of least resistance.'),
        'body' => __('Every primitive we ship is keyboard-friendly, mirrors cleanly under RTL, and respects reduced motion — so the accessible choice is also the convenient one.'),
    ];

    $stats = [
        ['label' => 'Founded', 'value' => '2018', 'description' => 'Bootstrapped, profitable'],
        ['label' => 'Teammates', 'value' => '140+', 'description' => 'Product, design & eng'],
        ['label' => 'Countries', 'value' => '30', 'description' => 'Remote-first since day one'],
        ['label' => 'Teams served', 'value' => '8k', 'description' => 'From startups to the Fortune 500'],
    ];

    $members = [
        [
            'name' => 'Avery Mitchell',
            'role' => 'Co-founder & CEO',
            'initials' => 'AM',
            'bio' => 'Sets product direction and keeps the team honest about shipping value over features.',
            'links' => ['linkedin' => 'https://www.linkedin.com/', 'x' => 'https://x.com/', 'github' => 'https://github.com/'],
        ],
        [
            'name' => 'Jordan Lee',
            'role' => 'Co-founder & CTO',
            'initials' => 'JL',
            'bio' => 'Owns the architecture and the build pipeline so every release lands clean and reversible.',
            'links' => ['linkedin' => 'https://www.linkedin.com/', 'x' => 'https://x.com/', 'github' => 'https://github.com/'],
        ],
        [
            'name' => 'Priya Nair',
            'role' => 'Head of Design',
            'initials' => 'PN',
            'bio' => 'Turns the token system into interfaces that feel obvious, accessible, and on-brand.',
            'links' => ['linkedin' => 'https://www.linkedin.com/', 'x' => 'https://x.com/', 'github' => 'https://github.com/'],
        ],
        [
            'name' => 'Marcus Bell',
            'role' => 'VP of Engineering',
            'initials' => 'MB',
            'bio' => 'Scales the team and the codebase without letting either lose its sense of craft.',
            'links' => ['linkedin' => 'https://www.linkedin.com/', 'x' => 'https://x.com/', 'github' => 'https://github.com/'],
        ],
        [
            'name' => 'Sofia Romero',
            'role' => 'Head of Customer Success',
            'initials' => 'SR',
            'bio' => 'Makes sure every team that adopts Northbeam ships within their first week.',
            'links' => ['linkedin' => 'https://www.linkedin.com/', 'x' => 'https://x.com/', 'github' => 'https://github.com/'],
        ],
        [
            'name' => 'Tomas Hald',
            'role' => 'Principal Designer',
            'initials' => 'TH',
            'bio' => 'Guards the details — spacing, motion, focus states — so the whole system feels considered.',
            'links' => ['linkedin' => 'https://www.linkedin.com/', 'x' => 'https://x.com/', 'github' => 'https://github.com/'],
        ],
    ];

    $testimonials = [
        [
            'quote' => 'Northbeam replaced three half-finished design systems for us in a weekend. The token model means re-theming is a config change, not a refactor.',
            'name' => 'Elena Vásquez',
            'role' => 'Head of Design, Northwind',
            'initials' => 'EV',
        ],
        [
            'quote' => 'Owning the source is the whole game. No runtime lock-in, no upgrade anxiety — just plain Blade we can read and edit.',
            'name' => 'Daniel Okafor',
            'role' => 'Staff Engineer, Lumen',
            'initials' => 'DO',
        ],
        [
            'quote' => 'Accessibility used to live at the bottom of our backlog. Now keyboard support and focus states ship by default with every block.',
            'name' => 'Mei Chen',
            'role' => 'Product Lead, Cadence',
            'initials' => 'MC',
        ],
        [
            'quote' => 'The diff-based updates are brilliant. Our edits are never clobbered, and upstream fixes still land cleanly.',
            'name' => 'Rafael Santos',
            'role' => 'CTO, Forge & Co',
            'initials' => 'RS',
        ],
        [
            'quote' => 'Our marketing site and internal admin now share one visual language. The whole company finally feels like one product.',
            'name' => 'Hannah Brooks',
            'role' => 'Founder, Tideway',
            'initials' => 'HB',
        ],
        [
            'quote' => 'We onboarded a new designer and they were productive on day one. The system documents itself.',
            'name' => 'Yusuf Demir',
            'role' => 'Design Manager, Vela',
            'initials' => 'YD',
        ],
    ];

    $footerColumns = [
        ['heading' => 'Product', 'links' => [['label' => 'Components', 'href' => '#'], ['label' => 'Blocks', 'href' => '#'], ['label' => 'Pricing', 'href' => '#'], ['label' => 'Changelog', 'href' => '#']]],
        ['heading' => 'Company', 'links' => [['label' => 'About', 'href' => '#'], ['label' => 'Careers', 'href' => '#'], ['label' => 'Customers', 'href' => '#'], ['label' => 'Blog', 'href' => '#']]],
        ['heading' => 'Resources', 'links' => [['label' => 'Documentation', 'href' => '#'], ['label' => 'Guides', 'href' => '#'], ['label' => 'Support', 'href' => '#'], ['label' => 'Status', 'href' => '#']]],
    ];
@endphp

{{-- About company page — composes existing marketing blocks into a full screen, themed around Northbeam. --}}
<div class="min-h-screen bg-background text-foreground">
    <x-blocks.header-navbar
        :brand="$brand"
        :links="$navLinks"
        cta="Get started"
    />

    <main>
        <x-blocks.about-split
            eyebrow="About Northbeam"
            heading="We build the interface tools we always wished we had"
            :story="$story"
            :values="$values"
            :mission="$mission"
            :stats="$stats"
            ctaLabel="Meet the team"
        />

        <x-blocks.team-grid
            eyebrow="Our team"
            heading="The people behind Northbeam"
            subheading="A small, senior team spread across thirty countries — united by a love of clear code and considered design."
            :members="$members"
        />

        <x-blocks.testimonials-grid
            eyebrow="Loved by teams"
            heading="Teams ship faster with Northbeam"
            subheading="Thousands of product teams trust a UI system they own outright."
            :testimonials="$testimonials"
        />

        <x-blocks.closing-cta-centered
            frame="none"
            eyebrow="Join us"
            heading="Want to help shape the future of UI?"
            subheading="We are always looking for thoughtful engineers and designers who care about craft. Come build a design system that teams everywhere own."
            primaryCta="View open roles"
            secondaryCta="Read our story"
        />
    </main>

    <x-blocks.footer-columns
        :brand="$brand"
        tagline="A design system teams own outright — accessible, themeable, and lock-in free."
        :columns="$footerColumns"
    />
</div>