@extends('layouts.site')

@section('title', 'Bee-Cause — ' . config('app.name'))

@section('body_class', 'mission')

@push('head')
    <meta name="description" content="Join the fight to #savethebees 1. Plant purple flowers (to provide a clean food source &amp; safe habitat). 2. Don't forget to spread the word. Bees can't advocate for themselves. 3. Buy sustainably-sourced products from those fighting the good fight.">
    <style>
        .page-bee-cause-hero.image-overlay {
            display: grid;
            grid-template-columns: 1fr;
            align-items: center;
            justify-items: stretch;
        }
        .page-bee-cause-hero .image-overlay__image-wrapper {
            grid-column: 1;
            grid-row: 1;
            width: 100%;
            min-height: 280px;
        }
        @media (min-width: 768px) {
            .page-bee-cause-hero .image-overlay__image-wrapper { min-height: 380px; }
        }
        .page-bee-cause-hero .image-overlay__image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .page-bee-cause-hero.image-overlay > .container {
            grid-column: 1;
            grid-row: 1;
            position: relative;
            z-index: 1;
            pointer-events: none;
        }
        .page-bee-cause-hero .image-overlay__content-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 2rem 0;
            color: #fff;
        }
        .page-bee-cause-hero .h0 { font-size: clamp(1.5rem, 4vw, 2.75rem); font-weight: 500; margin: 0; letter-spacing: 0.02em; color: #fff; }

        .page-bee-cause-intro { padding: 2.5rem 0 3rem; background: #fff; }
        @media (min-width: 741px) {
            .page-bee-cause-intro { padding: 5rem 0 6rem; }
        }
        .page-bee-cause-intro .section__header { text-align: center; max-width: 60%; margin: 0 auto 2.5rem; }
        @media (max-width: 999px) {
            .page-bee-cause-intro .section__header { max-width: 100%; }
        }
        .page-bee-cause-intro .section__header h2 {
            margin: 0;
            font-size: clamp(1.1rem, 2.8vw, 1.75rem);
            line-height: 1.25;
            font-weight: 500;
            overflow-wrap: break-word;
            hyphens: auto;
        }
        .bee-cause-columns {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            text-align: center;
        }
        @media (min-width: 741px) {
            .bee-cause-columns { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; }
        }
        .bee-cause-columns__icon {
            width: 118px;
            height: auto;
            margin: 0 auto 1rem;
            display: block;
        }
        .bee-cause-columns p { margin: 0; line-height: 1.5; font-size: 0.9375rem; }

        .page-bee-cause-iwt {
            background: rgb(254 216 63);
            padding: 0;
        }
        .page-bee-cause-iwt .image-with-text__wrapper {
            display: grid;
            gap: 0;
            align-items: stretch;
        }
        @media (min-width: 1000px) {
            .page-bee-cause-iwt .image-with-text__wrapper {
                grid-template-columns: 1fr 1fr;
            }
            .page-bee-cause-iwt.image-with-text--reverse .image-with-text__wrapper {
                direction: rtl;
            }
            .page-bee-cause-iwt.image-with-text--reverse .image-with-text__wrapper > * {
                direction: ltr;
            }
        }
        .page-bee-cause-iwt .image-with-text__image-wrapper { margin: 0; }
        .page-bee-cause-iwt .image-with-text__image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            min-height: 280px;
        }
        .page-bee-cause-iwt .image-with-text__content-wrapper {
            display: flex;
            align-items: center;
            padding: 2.5rem 1.25rem;
        }
        @media (min-width: 1000px) {
            .page-bee-cause-iwt .image-with-text__content-wrapper { padding: 3rem 3rem; }
        }
        .page-bee-cause-iwt .heading--small {
            font-size: 0.8125rem;
            font-weight: 500;
            margin: 0 0 0.5rem;
            letter-spacing: 0.02em;
        }
        .page-bee-cause-iwt .heading.h3 { margin: 0 0 1rem; font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 500; }
        .page-bee-cause-iwt .image-with-text__text-wrapper p { margin: 0 0 1.25rem; line-height: 1.55; }
        .page-bee-cause-iwt .button.button--primary {
            display: inline-block;
            padding: 12px 22px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 500;
            background: #000;
            color: #fff;
            border: none;
        }
        .page-bee-cause-iwt .button.button--primary:hover { opacity: 0.9; color: #fff; }

        .page-bee-cause-faq {
            background: #1a4338;
            color: #fff;
            padding: 3rem 0 4rem;
        }
        .page-bee-cause-faq .section__header h2 {
            margin: 0 0 2rem;
            font-size: clamp(1.5rem, 3vw, 2rem);
            font-weight: 500;
            color: #fff;
        }
        .bee-cause-faq__list { max-width: 900px; margin: 0 auto; }
        .bee-cause-faq__item {
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }
        .bee-cause-faq__item summary {
            list-style: none;
            cursor: pointer;
            padding: 1.25rem 0;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
        }
        .bee-cause-faq__item summary::-webkit-details-marker { display: none; }
        .bee-cause-faq__item summary::after {
            content: '+';
            flex-shrink: 0;
            font-size: 1.5rem;
            font-weight: 400;
            color: #fed83f;
            line-height: 1;
        }
        .bee-cause-faq__item[open] summary::after { content: '−'; }
        .bee-cause-faq__answer {
            padding: 0 0 1.25rem;
            line-height: 1.6;
            font-size: 0.9375rem;
            opacity: 0.95;
        }
        .bee-cause-faq__answer p { margin: 0; }
    </style>
@endpush

@section('content')
<main id="main" role="main" class="anchor">
    <div class="shopify-section shopify-section--image-with-text-overlay page-bee-cause-hero">
        <section class="section section--flush">
            <div class="image-overlay image-overlay--mobile-small image-overlay--desktop-auto page-bee-cause-hero">
                <div class="image-overlay__image-wrapper">
                    <img
                        src="https://www.beekeepersnaturals.com/cdn/shop/files/bkprs_site_Bbeecause_hero_desktop_2376x_1_1440x_crop_center_2x.progressive_63698f84-d6fe-485c-8d7a-2f6ceac99a08.jpg?v=1711548686&amp;width=2376"
                        alt=""
                        width="2376"
                        height="965"
                        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">
                            <div class="heading h0 image-with-text__heading">
                                <p>WHAT'S THE BUZZ ABOUT?</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <section class="page-bee-cause-intro" aria-labelledby="bee-cause-intro-heading">
        <div class="container">
            <header class="section__header section__header--center">
                <div class="text-container">
                    <h2 id="bee-cause-intro-heading" class="heading h2">BEES ARE CRUCIAL TO THE HEALTH OF OUR PLANET. THAT'S WHY WE DO THINGS DIFFERENTLY.</h2>
                </div>
            </header>
            <div class="bee-cause-columns">
                <div>
                    <img class="bee-cause-columns__icon" src="https://www.beekeepersnaturals.com/cdn/shop/files/image_9c4833e6-e68e-48ce-8a41-ad5df2978481.svg?v=1712068058&amp;width=118" alt="" width="118" height="118" loading="lazy">
                    <p>Bees are responsible for every third bite of food you eat.</p>
                </div>
                <div>
                    <img class="bee-cause-columns__icon" src="https://www.beekeepersnaturals.com/cdn/shop/files/image_1_8b075dc0-66ae-4fb6-808d-f849bb8844dd.svg?v=1712068114&amp;width=118" alt="" width="118" height="118" loading="lazy">
                    <p>Grazing animals rely on bees to pollinate nutrient-dense grasses.</p>
                </div>
                <div>
                    <img class="bee-cause-columns__icon" src="https://www.beekeepersnaturals.com/cdn/shop/files/image_2_c198b962-4169-41f9-a5ac-8a21c579f23a.svg?v=1712068176&amp;width=118" alt="" width="118" height="118" loading="lazy">
                    <p>Around 80% of the world's flowering plant species rely on insect pollination.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="section page-bee-cause-iwt image-with-text--reverse" aria-labelledby="sustainable-heading">
        <div class="container" style="max-width: 100%; padding: 0;">
            <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/bkprs_site_beecause_sustainability_desktop_1080x_720x_crop_center_2x.progressive_c9c16023-79ea-4638-b9f8-6aab06abad37.jpg?v=1711549157&amp;width=1080"
                        alt=""
                        width="1080"
                        height="1118"
                        loading="lazy"
                    >
                </div>
                <div class="image-with-text__content-wrapper">
                    <div class="image-with-text__content text-container text--left">
                        <h3 class="heading heading--small" id="sustainable-heading">1 — We take care of our bees</h3>
                        <h2 class="heading h3"><span>SUSTAINABLE BEEKEEPING</span></h2>
                        <div class="image-with-text__text-wrapper">
                            <p>We never overharvest from our hives. We <em>always</em> ensure that our green apiaries are remote and far from harmful chemicals.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section page-bee-cause-iwt" aria-labelledby="pesticide-heading">
        <div class="container" style="max-width: 100%; padding: 0;">
            <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/bkprs_site_beecause_pesticidetesting_desktop_1080x_720x_crop_center_2x.progressive_d296776e-48e4-4d54-a2b2-69424c67d2d2.jpg?v=1711549207&amp;width=1080"
                        alt=""
                        width="1080"
                        height="1118"
                        loading="lazy"
                    >
                </div>
                <div class="image-with-text__content-wrapper">
                    <div class="image-with-text__content text-container text--left">
                        <h3 class="heading heading--small" id="pesticide-heading">2 — Clean through and through</h3>
                        <h2 class="heading h3"><span>THIRD-PARTY PESTICIDE TESTING</span></h2>
                        <div class="image-with-text__text-wrapper">
                            <p>Since honey bees travel far and wide and could be exposed to pesticides, we commit to third-party pesticide testing to triple check that our hives and our remedies are pesticide-free.</p>
                            <div class="button-wrapper">
                                <a href="{{ route('pages.ingredients') }}" class="button button--primary animate-underline animate-underline--reverse">Learn more</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section page-bee-cause-iwt image-with-text--reverse" aria-labelledby="advocates-heading">
        <div class="container" style="max-width: 100%; padding: 0;">
            <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/bkprs_site_Bbeecause_fellowwarriors_desktop_1080x_720x_crop_center_2x.progressive_a0283b30-b9cf-47e5-b755-a40274ad447f.jpg?v=1711549317&amp;width=1080"
                        alt=""
                        width="1080"
                        height="1118"
                        loading="lazy"
                    >
                </div>
                <div class="image-with-text__content-wrapper">
                    <div class="image-with-text__content text-container text--left">
                        <h3 class="heading heading--small" id="advocates-heading">3 — We're not in this alone</h3>
                        <h2 class="heading h3"><span>WE SUPPORT FELLOW BEE ADVOCATES</span></h2>
                        <div class="image-with-text__text-wrapper">
                            <p>We partner with one of the leading bee research institutions to raise awareness and support pollinator protection: The University of California Davis Honey Bee Research Facility. We also donate 100% of the profits from our merchandise line to them.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="page-bee-cause-faq" aria-labelledby="faq-heading">
        <div class="container">
            <header class="section__header text-container">
                <h2 id="faq-heading" class="heading h2">ASK US ANYTHING.</h2>
            </header>
            <div class="bee-cause-faq__list" itemscope itemtype="https://schema.org/FAQPage">
                @foreach ($faqs as $faq)
                    <details class="bee-cause-faq__item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
                        <summary itemprop="name">{{ $faq['question'] }}</summary>
                        <div class="bee-cause-faq__answer" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
                            <div itemprop="text">{!! $faq['answer'] !!}</div>
                        </div>
                    </details>
                @endforeach
            </div>
        </div>
    </section>
</main>
@endsection
