@extends('layouts.site')

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

@section('body_class', 'ingredients')

@push('head')
    <meta name="description" content="We finally have modern science to back up the efficacy of ancient remedies—and improve upon them. That’s why we’ve teamed up with sustainable beekeepers and researchers to identify clean, yet potent ingredients that move the needle on your daily health.">
    <style>
        /* Stack hero image + copy like reference (text over image) */
        .page-ingredients-hero.image-overlay {
            display: grid;
            grid-template-columns: 1fr;
            align-items: center;
            justify-items: stretch;
        }
        .page-ingredients-hero .image-overlay__image-wrapper {
            grid-column: 1;
            grid-row: 1;
            width: 100%;
            min-height: 280px;
        }
        @media (min-width: 768px) {
            .page-ingredients-hero .image-overlay__image-wrapper { min-height: 420px; }
        }
        .page-ingredients-hero .image-overlay__image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .page-ingredients-hero.image-overlay > .container {
            grid-column: 1;
            grid-row: 1;
            position: relative;
            z-index: 1;
            pointer-events: none;
        }
        .page-ingredients-hero .image-overlay__content-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 2rem 0;
        }
        .page-ingredients-hero .button-wrapper { pointer-events: auto; }
        .page-ingredients-hero .h0 { font-size: clamp(1.5rem, 4vw, 2.75rem); font-weight: 500; margin: 0 0 1rem; letter-spacing: 0.02em; }
        .button--secondary {
            display: inline-block;
            padding: 12px 22px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 500;
            background: transparent;
            color: #000;
            border: 1px solid #000;
        }
        .button--secondary:hover { opacity: 0.85; }
        .product-ingredients-section { padding: 3rem 0 4rem; background: #fff; }
        .product-ingredients-section .section__header { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; }
        .product-ingredients-section .section__header h2 {
            margin: 0 0 1rem;
            font-size: clamp(1.25rem, 3.5vw, 2rem);
            overflow-wrap: break-word;
            hyphens: auto;
        }
        .product-ingredients-section .section__header p { margin: 0; line-height: 1.6; }
        .ingredients-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 1.5rem;
            align-items: start;
        }
        .ingredients-grid__item {
            background: #f7f7f7;
            padding: 1.25rem;
            text-align: center;
        }
        .ingredients-grid__item img {
            width: 100%;
            max-width: 272px;
            height: auto;
            margin: 0 auto 1rem;
            display: block;
        }
        .ingredients-grid__item h3 { font-size: 1.125rem; margin: 0 0 0.75rem; font-weight: 500; }
        .ingredients-grid__item p { margin: 0; font-size: 0.9375rem; line-height: 1.55; text-align: left; }
        .ingredients-grid:not(.is-expanded) .ingredients-grid__item--extra { display: none; }
        .ingredients-show-more {
            text-align: center;
            margin-top: 2rem;
        }
        .ingredients-show-more button {
            background: none;
            border: none;
            font: inherit;
            cursor: pointer;
            text-decoration: underline;
            text-underline-offset: 3px;
            color: inherit;
        }
        .page-ingredients-iwt {
            background: rgb(242 233 225);
            padding: 3rem 0;
        }
        .page-ingredients-iwt .image-with-text__wrapper {
            display: grid;
            gap: 2rem;
            align-items: center;
        }
        @media (min-width: 1000px) {
            .page-ingredients-iwt .image-with-text__wrapper {
                grid-template-columns: 1fr 1fr;
            }
            .page-ingredients-iwt.image-with-text--reverse .image-with-text__wrapper {
                direction: rtl;
            }
            .page-ingredients-iwt.image-with-text--reverse .image-with-text__wrapper > * {
                direction: ltr;
            }
        }
        .page-ingredients-iwt .image-with-text__image {
            width: 100%;
            height: auto;
            border-radius: 0;
        }
        .page-ingredients-blog { padding: 3rem 0; background: #fff; }
        .page-ingredients-blog .section__header {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 2rem;
        }
        .page-ingredients-blog .article-list {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }
        @media (min-width: 740px) {
            .page-ingredients-blog .article-list { grid-template-columns: repeat(3, 1fr); }
        }
        .page-ingredients-blog .article-item__image {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
        }
        .page-ingredients-blog .article-item__title a {
            color: inherit;
            text-decoration: none;
        }
        .page-ingredients-blog .article-item__title a:hover { text-decoration: underline; }
    </style>
@endpush

@section('content')
<main id="main" role="main" class="anchor">
    <!-- Hero -->
    <div class="shopify-section shopify-section--image-with-text-overlay page-ingredients-hero">
        <section class="section section--flush">
            <div class="image-overlay image-overlay--mobile-small image-overlay--desktop-medium page-ingredients-hero">
                <div class="image-overlay__image-wrapper">
                    <img
                        src="https://www.beekeepersnaturals.com/cdn/shop/files/Natural-Hand_copy_ba9e9f27-af18-420d-9022-d40d3f800b19_1.webp?v=1715109326&amp;width=1920"
                        alt=""
                        width="1920"
                        height="1080"
                        loading="eager"
                        fetchpriority="high"
                        class="image-overlay__image image-overlay__image--mobile"
                    >
                    <img
                        src="https://www.beekeepersnaturals.com/cdn/shop/files/ingredients.webp?v=1711540804&amp;width=1920"
                        alt=""
                        width="1920"
                        height="1080"
                        loading="eager"
                        fetchpriority="high"
                        class="image-overlay__image image-overlay__image--desktop"
                    >
                </div>
                <div class="container">
                    <div class="image-overlay__content-wrapper">
                        <div class="image-overlay__content text-container">
                            <div class="heading h0 image-with-text__heading">
                                <p>NATURAL INGREDIENTS. THAT WORK.</p>
                            </div>
                            <div class="button-wrapper">
                                <a href="{{ route('shop.index') }}" class="button button--primary">Shop Now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- Ingredients grid -->
    <section class="product-ingredients-section" aria-labelledby="ingredients-heading">
        <div class="container">
            <header class="section__header section__header--tight section__header--center">
                <div class="text-container">
                    <h2 id="ingredients-heading" class="heading h2">INGREDIENTS THAT DON'T CUT CORNERS</h2>
                    <p>We finally have modern science to back up the efficacy of ancient remedies—and <em>improve</em> upon them. That’s why we’ve teamed up with sustainable beekeepers and researchers to identify clean, yet potent ingredients that move the needle on your daily health.</p>
                </div>
            </header>
            <div id="ingredients-grid" class="ingredients-grid">
                @foreach ($ingredients as $i => $ing)
                    <article class="ingredients-grid__item @if ($i >= 2) ingredients-grid__item--extra @endif">
                        <img src="{{ $ing['image'] }}" alt="{{ $ing['alt'] ?: $ing['title'] }}" width="540" height="540" loading="lazy" sizes="(max-width: 740px) calc(100vw - 48px), 272px">
                        <h3 class="heading h5">{{ $ing['title'] }}</h3>
                        <p>{{ $ing['body'] }}</p>
                    </article>
                @endforeach
            </div>
            <div class="ingredients-show-more">
                <button type="button" id="ingredients-show-more">SHOW ALL {{ count($ingredients) }} INGREDIENTS <span aria-hidden="true">+</span></button>
            </div>
        </div>
    </section>

    <!-- Image with text -->
    <section class="section page-ingredients-iwt image-with-text--reverse">
        <div class="container">
            <div class="image-with-text__wrapper">
                <div class="image-with-text__image-wrapper">
                    <img
                        class="image-with-text__image"
                        src="https://www.beekeepersnaturals.com/cdn/shop/files/BUZZ_20WORTHY_20_281_29_720x_crop_center_2x.progressive_dbd07e12-cee7-4ebe-83a8-d80c43567a05.webp?v=1711541814&amp;width=1440"
                        alt=""
                        width="1440"
                        height="1440"
                        loading="lazy"
                    >
                </div>
                <div class="image-with-text__content-wrapper">
                    <div class="image-with-text__content text-container text--left">
                        <h2 class="heading h3"><span>BUZZWORTHY INGREDIENTS</span></h2>
                        <div class="image-with-text__text-wrapper">
                            <p>We believe in supporting our bodies—<em>instead</em> of fighting them—to feel our best.</p>
                            <div class="button-wrapper">
                                <a href="{{ route('shop.index') }}" class="button button--primary animate-underline animate-underline--reverse">SEE BEE PRODUCTS</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Blog strip -->
    <section class="page-ingredients-blog" aria-labelledby="learn-more-heading">
        <div class="container">
            <header class="section__header text-container">
                <h2 id="learn-more-heading" class="heading h1">THERE’S MORE TO LEARN.</h2>
                <a class="button button--secondary animate-underline animate-underline--reverse" href="https://www.beekeepersnaturals.com/blogs/blog">Read our blog</a>
            </header>
            <div class="article-list">
                <article class="article-item">
                    <a href="https://www.beekeepersnaturals.com/blogs/blog/why-is-gut-health-so-important-heres-what-you-need-to-know" class="article-item__image-container" target="_blank" rel="noopener noreferrer">
                        <img class="article-item__image" src="https://www.beekeepersnaturals.com/cdn/shop/articles/GH24-P2.png?v=1753994794&amp;width=832" alt="" width="832" height="832" loading="lazy">
                    </a>
                    <div class="article-item__content text-container">
                        <h3 class="article-item__title heading h5">
                            <a href="https://www.beekeepersnaturals.com/blogs/blog/why-is-gut-health-so-important-heres-what-you-need-to-know" target="_blank" rel="noopener noreferrer">Why is gut health so important? Here's what you need to know</a>
                        </h3>
                    </div>
                </article>
                <article class="article-item">
                    <a href="https://www.beekeepersnaturals.com/blogs/blog/sweet-sleep-honey-helps-good-nights-sleep" class="article-item__image-container" target="_blank" rel="noopener noreferrer">
                        <img class="article-item__image" src="https://www.beekeepersnaturals.com/cdn/shop/articles/SFH125.png?v=1714493637&amp;width=832" alt="" width="832" height="832" loading="lazy">
                    </a>
                    <div class="article-item__content text-container">
                        <h3 class="article-item__title heading h5">
                            <a href="https://www.beekeepersnaturals.com/blogs/blog/sweet-sleep-honey-helps-good-nights-sleep" target="_blank" rel="noopener noreferrer">The Sweet Reason Why You Should Be Eating Honey Before Bed</a>
                        </h3>
                    </div>
                </article>
                <article class="article-item">
                    <a href="https://www.beekeepersnaturals.com/blogs/blog/holly-owens-wellthybelly-bee-venom-therapy" class="article-item__image-container" target="_blank" rel="noopener noreferrer">
                        <img class="article-item__image" src="https://www.beekeepersnaturals.com/cdn/shop/files/BUZZ_20WORTHY_20_281_29_720x_crop_center_2x.progressive_dbd07e12-cee7-4ebe-83a8-d80c43567a05.webp?v=1711541814&amp;width=1200" alt="" width="1200" height="1200" loading="lazy">
                    </a>
                    <div class="article-item__content text-container">
                        <h3 class="article-item__title heading h5">
                            <a href="https://www.beekeepersnaturals.com/blogs/blog/holly-owens-wellthybelly-bee-venom-therapy" target="_blank" rel="noopener noreferrer">My Battle With Lyme Disease Inspired Me To Become a Beekeeper. Here's Why.</a>
                        </h3>
                    </div>
                </article>
            </div>
        </div>
    </section>
</main>
@endsection

@push('scripts')
<script>
(function () {
  var btn = document.getElementById('ingredients-show-more');
  var grid = document.getElementById('ingredients-grid');
  if (!btn || !grid) return;
  btn.addEventListener('click', function () {
    grid.classList.add('is-expanded');
    btn.hidden = true;
  });
})();
</script>
@endpush
