@extends('layouts.site')

@section('title', 'Our Story — ' . config('app.name'))

@section('body_class', 'our-story')

@push('head')
    <meta name="description" content="{{ config('our_story.meta_description') }}">
    <style>
        .page-our-story-hero.image-overlay {
            display: grid;
            grid-template-columns: 1fr;
            align-items: stretch;
            justify-items: stretch;
        }
        .page-our-story-hero .image-overlay__image-wrapper {
            grid-column: 1;
            grid-row: 1;
            width: 100%;
            min-height: 300px;
            position: relative;
        }
        .page-our-story-hero .image-overlay__image-wrapper::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.45) 100%);
            pointer-events: none;
        }
        @media (min-width: 768px) {
            .page-our-story-hero .image-overlay__image-wrapper { min-height: 420px; }
        }
        .page-our-story-hero .image-overlay__image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .page-our-story-hero.image-overlay > .container {
            grid-column: 1;
            grid-row: 1;
            position: relative;
            z-index: 1;
            align-self: center;
            pointer-events: none;
        }
        .page-our-story-hero .image-overlay__content-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 3rem 0;
            color: #fff;
        }
        .page-our-story-hero .hero-eyebrow {
            font-size: 0.75rem;
            letter-spacing: 0.12em;
            font-weight: 600;
            margin: 0 0 1rem;
            text-transform: uppercase;
        }
        .page-our-story-hero .hero-title {
            font-size: clamp(1.75rem, 5vw, 3rem);
            font-weight: 500;
            margin: 0;
            line-height: 1.15;
            max-width: 20ch;
        }

        .page-our-story-intro {
            padding: 3rem 0 2.5rem;
            background: #fff;
        }
        .page-our-story-intro .rte {
            max-width: 720px;
            margin: 0 auto 1.75rem;
            line-height: 1.65;
            font-size: clamp(1rem, 2.8vw, 1.0625rem);
            overflow-wrap: break-word;
        }
        .page-our-story-intro .rte p { margin: 0 0 1rem; }
        .page-our-story-intro .rte p:last-child { margin-bottom: 0; }
        .page-our-story-intro .button--primary {
            display: inline-block;
            padding: 12px 24px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 500;
            background: #000;
            color: #fff;
        }
        .page-our-story-intro .button--primary:hover { opacity: 0.9; color: #fff; }
        .page-our-story-intro .intro-cta { text-align: center; pointer-events: auto; }

        .page-our-story-quote {
            background: rgb(254 216 63);
            padding: 3rem 1.25rem;
            text-align: center;
        }
        .page-our-story-quote blockquote {
            margin: 0 auto;
            max-width: 640px;
            border: none;
            padding: 0;
        }
        .page-our-story-quote p {
            font-size: clamp(1.125rem, 2.5vw, 1.5rem);
            line-height: 1.45;
            margin: 0 0 1.25rem;
            font-style: italic;
        }
        .page-our-story-quote cite {
            font-style: normal;
            font-size: 0.8125rem;
            font-weight: 600;
            letter-spacing: 0.06em;
        }

        .page-our-story-pillars { padding: 0; }
        .our-story-pillar {
            padding: 2.75rem 1.25rem;
        }
        .our-story-pillar:nth-child(odd) { background: #fff; }
        .our-story-pillar:nth-child(even) { background: rgb(254 216 63); }
        .our-story-pillar__inner {
            max-width: 720px;
            margin: 0 auto;
        }
        .our-story-pillar .kicker {
            font-size: 0.8125rem;
            font-weight: 500;
            margin: 0 0 0.5rem;
            letter-spacing: 0.02em;
        }
        .our-story-pillar h2 {
            font-size: clamp(1.25rem, 2.5vw, 1.75rem);
            font-weight: 500;
            margin: 0 0 1rem;
        }
        .our-story-pillar p {
            margin: 0;
            line-height: 1.6;
            font-size: 1rem;
        }

        .page-our-story-shop {
            padding: 3rem 0 4rem;
            background: #fff;
        }
        .page-our-story-shop .section__header {
            text-align: center;
            margin-bottom: 1.5rem;
        }
        .page-our-story-shop .section__header h2 {
            font-size: clamp(1.35rem, 3vw, 2rem);
            font-weight: 500;
            margin: 0 0 1.25rem;
        }
        .our-story-shop-links {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.5rem 1rem;
            margin-bottom: 2rem;
            font-size: 0.9375rem;
        }
        .our-story-shop-links a {
            color: #1a4338;
            text-decoration: none;
        }
        .our-story-shop-links a:hover { text-decoration: underline; }
        .our-story-shop-links span[aria-hidden="true"] { color: #ccc; user-select: none; }

        .our-story-product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1.5rem;
        }
        .our-story-product-card {
            border: 1px solid #eee;
            border-radius: 8px;
            overflow: hidden;
            background: #fff;
            display: flex;
            flex-direction: column;
        }
        .our-story-product-card__badges {
            position: absolute;
            top: 8px;
            left: 8px;
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            z-index: 1;
        }
        .our-story-product-card__badge {
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            background: #000;
            color: #fff;
            padding: 4px 8px;
            border-radius: 2px;
        }
        .our-story-product-card__badge--new { background: #1a4338; }
        .our-story-product-card__media {
            position: relative;
            aspect-ratio: 1;
            background: #f7f7f7;
        }
        .our-story-product-card__media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .our-story-product-card__body { padding: 0.75rem; flex: 1; display: flex; flex-direction: column; }
        .our-story-product-card__title {
            font-size: 0.9375rem;
            font-weight: 600;
            margin: 0 0 0.35rem;
            line-height: 1.3;
        }
        .our-story-product-card__title a { color: inherit; text-decoration: none; }
        .our-story-product-card__title a:hover { text-decoration: underline; }
        .our-story-product-card__price {
            font-weight: 600;
            font-size: 0.9375rem;
            margin-bottom: 0.5rem;
        }
        .our-story-product-card__price .compare {
            text-decoration: line-through;
            color: #666;
            font-weight: 400;
            font-size: 0.9em;
            margin-right: 0.35rem;
        }
        .our-story-product-card__reviews { font-weight: 400; color: #666; font-size: 0.85em; margin-left: 0.25rem; }
        .our-story-product-card__excerpt {
            font-size: 0.8125rem;
            line-height: 1.45;
            color: #444;
            margin-bottom: 0.75rem;
            flex: 1;
        }
        .our-story-product-card__cta {
            display: block;
            text-align: center;
            padding: 10px 12px;
            background: #000;
            color: #fff !important;
            text-decoration: none;
            font-size: 0.8125rem;
            font-weight: 600;
            border-radius: 6px;
        }
        .our-story-product-card__cta:hover { opacity: 0.92; color: #fff !important; }
        .our-story-view-all { text-align: center; margin-top: 2rem; }
        .our-story-view-all a {
            color: #1a4338;
            font-weight: 600;
            text-decoration: underline;
            text-underline-offset: 3px;
        }
        .page-our-story-shop .powered-by {
            text-align: center;
            margin-top: 3rem;
            font-size: 0.9375rem;
            font-weight: 600;
            color: #1a4338;
        }
    </style>
@endpush

@section('content')
<main id="main" role="main" class="anchor">
    <div class="shopify-section page-our-story-hero">
        <section class="section section--flush">
            <div class="image-overlay page-our-story-hero">
                <div class="image-overlay__image-wrapper">
                    <img
                        src="{{ $hero['image'] ?? '' }}"
                        alt="{{ $hero['image_alt'] ?? '' }}"
                        width="1920"
                        height="1080"
                        loading="eager"
                        fetchpriority="high"
                        class="image-overlay__image"
                    >
                </div>
                <div class="container">
                    <div class="image-overlay__content-wrapper">
                        <div class="image-overlay__content text-container">
                            <p class="hero-eyebrow">{{ $hero['eyebrow'] ?? 'OUR STORY' }}</p>
                            <h1 class="hero-title">{{ $hero['title'] ?? 'A BETTER WAY TO FEEL BETTER.' }}</h1>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <section class="page-our-story-intro" aria-labelledby="our-story-intro-heading">
        <div class="container">
            <h2 id="our-story-intro-heading" class="visually-hidden">Our story</h2>
            <div class="rte">{!! $introHtml !!}</div>
            <div class="intro-cta">
                <a href="{{ route('pages.ingredients') }}" class="button button--primary">Meet Our Ingredients</a>
            </div>
        </div>
    </section>

    <aside class="page-our-story-quote" aria-label="Founder quote">
        <blockquote cite="{{ url()->current() }}">
            <p>&ldquo;{{ $quote['text'] ?? '' }}&rdquo;</p>
            <cite>— {{ $quote['attribution'] ?? '' }}</cite>
        </blockquote>
    </aside>

    <div class="page-our-story-pillars">
        @foreach ($pillars as $pillar)
            <section class="our-story-pillar" aria-labelledby="pillar-heading-{{ $loop->index }}">
                <div class="our-story-pillar__inner">
                    <p class="kicker" id="pillar-heading-{{ $loop->index }}">{{ $pillar['kicker'] }}</p>
                    <h2>{{ $pillar['heading'] }}</h2>
                    <p>{{ $pillar['body'] }}</p>
                </div>
            </section>
        @endforeach
    </div>

    <section class="page-our-story-shop" aria-labelledby="shop-best-sellers-heading">
        <div class="container">
            <header class="section__header">
                <h2 id="shop-best-sellers-heading">SHOP BEST SELLERS</h2>
                <nav class="our-story-shop-links" aria-label="Shop categories">
                    <a href="{{ route('shop.index') }}">Shop All</a>
                    <span aria-hidden="true">·</span>
                    <a href="{{ route('shop.index', ['category' => 'bundles']) }}">Bundles (Save 10%)</a>
                    <span aria-hidden="true">·</span>
                    <a href="{{ route('shop.index', ['category' => 'best-sellers']) }}">Best Sellers</a>
                    <span aria-hidden="true">·</span>
                    <a href="{{ route('shop.index', ['category' => 'sinus-support']) }}">Sinus Support</a>
                    <span aria-hidden="true">·</span>
                    <a href="{{ route('shop.index', ['category' => 'gut-health']) }}">Gut Health</a>
                </nav>
            </header>

            @if ($featuredProducts->isEmpty())
                <p style="text-align:center;color:#666;">No products in the catalog yet. Visit the <a href="{{ route('shop.index') }}">shop</a> when products are available.</p>
            @else
                <div class="our-story-product-grid">
                    @foreach ($featuredProducts as $product)
                        <article class="our-story-product-card">
                            <div class="our-story-product-card__media">
                                @if ($product->is_best_seller)
                                    <div class="our-story-product-card__badges" aria-hidden="true">
                                        <span class="our-story-product-card__badge">best seller</span>
                                    </div>
                                @endif
                                @if ($product->image_url)
                                    <a href="{{ route('shop.show', $product) }}" tabindex="-1" aria-hidden="true">
                                        <img src="{{ $product->image_url }}" alt="{{ $product->title }}" loading="lazy" width="400" height="400">
                                    </a>
                                @endif
                            </div>
                            <div class="our-story-product-card__body">
                                <h3 class="our-story-product-card__title">
                                    <a href="{{ route('shop.show', $product) }}">{{ $product->title }}</a>
                                </h3>
                                <div class="our-story-product-card__price">
                                    @if ($product->compare_at_price)
                                        <span class="compare">${{ number_format($product->compare_at_price, 2) }}</span>
                                    @endif
                                    <span>Sale price $ {{ number_format($product->price, 2) }}</span>
                                    @if ($product->review_count)
                                        <span class="our-story-product-card__reviews">({{ number_format($product->review_count) }})</span>
                                    @endif
                                </div>
                                <p class="our-story-product-card__excerpt">{{ \Illuminate\Support\Str::limit(strip_tags($product->description), 120) }}</p>
                                <a href="{{ route('shop.show', $product) }}" class="our-story-product-card__cta">Add to cart — ${{ number_format($product->price, 2) }}</a>
                            </div>
                        </article>
                    @endforeach
                </div>
                <p class="our-story-view-all"><a href="{{ route('shop.index') }}">View All Products</a></p>
            @endif

            <p class="powered-by">Powered by Propolis™</p>
        </div>
    </section>
</main>
@endsection
