@extends('layout')

@section('content')
    <link
        href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Inter:wght@400;500;600&family=Dancing+Script:wght@600;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

    <style>
        /* Global Resets */
        * {
            box-sizing: border-box;
        }

        :root {
            --primary-gold: #c9a96e;
            --secondary-blue: #00569d;
            /* Slightly darker for better contrast */
            --text-dark: #2c2c2c;
            --text-muted: #666;
            --bg-light: #fdfdfd;
            --bg-off-white: #f9f9f9;
        }

        #about-page-wrapper {
            font-family: 'Inter', sans-serif;
            color: var(--text-dark);
            background: var(--bg-light);
            overflow-x: hidden;
            /* Prevent horizontal scroll on small screens */
        }

        /* --- 1. HERO SECTION --- */
        .about-hero {
            position: relative;
            height: 70vh;
            background: url('{{ asset('assets/about.png') }}');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            padding: 0 20px;
        }

        .about-hero h1 {
            font-family: 'Libre Baskerville', serif;
            font-size: clamp(32px, 5vw, 48px);
            /* Fluid typography */
            line-height: 1.3;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        .about-hero h1 span {
            font-family: 'Dancing Script', cursive;
            color: var(--primary-gold);
            display: block;
            font-size: clamp(40px, 6vw, 64px);
            margin-top: 5px;
        }

        /* --- 2. OUR STORY SECTION --- */
        .story-section {
            padding: 80px 10%;
            display: flex;
            gap: 80px;
            align-items: center;
            background: white;
        }

        .story-images {
            flex: 1;
            position: relative;
            height: 650px;
            min-width: 300px;
        }

        /* Desktop: Overlapping Effect */
        .img-large {
            width: 80%;
            height: auto;
            object-fit: cover;
            border-radius: 8px;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 1;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }

        .img-small {
            width: 55%;
            height: auto;
            object-fit: cover;
            border-radius: 8px;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 2;
            border: 8px solid white;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

        .story-content {
            flex: 1;
        }

        .label-gold {
            color: var(--primary-gold);
            text-transform: uppercase;
            font-weight: 700;
            font-size: 13px;
            letter-spacing: 2px;
            display: inline-block;
            margin-bottom: 10px;
        }

        .story-content h2 {
            font-family: 'Libre Baskerville', serif;
            font-weight: 700;
            font-style: Bold;
            font-size: 36px;
            leading-trim: NONE;
            line-height: 57.6px;
            letter-spacing: 0%;
            vertical-align: middle;
        }


        .story-content h2 span {
            color: var(--secondary-blue);
            font-family: Alluring Delight Free;
            font-weight: 400;
            font-style: Regular;
            font-size: 36px;
            leading-trim: NONE;
            line-height: 57.6px;
            letter-spacing: 0%;
            vertical-align: middle;
        }

        .story-content p {
            color: var(--text-muted);
            font-family: Poppins;
            font-weight: 500;
            font-style: Medium;
            font-size: 18px;
            leading-trim: NONE;
            line-height: 30px;
            letter-spacing: 0%;
            vertical-align: middle;
            margin-bottom: 10px;
        }

        /* --- 3. VISION & MISSION --- */
        .vision-mission-section {
            padding: 80px 10%;
            background-color: var(--bg-off-white);
            text-align: center;
        }

        .section-header {
            font-family: Libre Baskerville;
            font-weight: 400;
            font-style: Regular;
            font-size: 56px;
            leading-trim: NONE;
            line-height: 100%;
            letter-spacing: 0%;
            text-align: center;
            vertical-align: middle;
            margin-bottom: 70px;
        }

        .section-header span {
            color: var(--primary-gold);
        }

        span.branch {
            color: var(--secondary-blue);

            font-family: Alluring Delight Free;
            font-weight: 400;
            font-style: Regular;
            font-size: 56px;
            leading-trim: NONE;
            line-height: 100%;
            letter-spacing: 0%;
        }

        .vm-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .vm-card {
            background: white;
            border-radius: 12px;
            padding: 40px;
            text-align: left;
            transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
            height: 100%;
            border: 1.5px solid #D8B267;
        }

        .vm-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
            border-color: var(--primary-gold);
        }

        .vm-icon {
            width: 55px;
            height: 55px;
            background: #f0f8ff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--secondary-blue);
            margin-bottom: 25px;
            font-size: 22px;
        }

        .vm-card h3 {
            color: #D8B267;
            margin-bottom: 15px;
            font-family: Libre Baskerville;
            font-weight: 700;
            font-style: Bold;
            font-size: 32px;
            leading-trim: NONE;
            line-height: 32px;
            letter-spacing: 0%;
        }

        .vm-card p {
            font-family: Poppins;
            font-weight: 400;
            font-style: Regular;
            font-size: 17px;
            leading-trim: NONE;
            line-height: 150%;
            letter-spacing: 0%;
        }

        .vm-list {
            list-style: none;
            padding: 0;
            margin-top: 20px;
        }



        .vm-list li {
            margin-bottom: 12px;
            font-size: 14px;
            color: var(--text-muted);
            display: flex;
            align-items: flex-start;
            gap: 12px;
            line-height: 1.5;
            font-family: Poppins;
            font-weight: 400;
            font-style: Regular;
            font-size: 17px;
            leading-trim: NONE;
            line-height: 150%;
            letter-spacing: 0%;
        }

        .vm-list li i {
            color: var(--primary-gold);
            margin-top: 4px;
            font-size: 12px;
        }

        /* --- 4. BRANCHES SECTION --- */
        .branches-section {
            padding: 80px 10%;
            text-align: center;
            background: white;
        }

        .branch-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            /* 4 Columns default */
            gap: 25px;
            margin-top: 40px;
        }

        .branch-card {
            background: white;
            border-radius: 26px;
            /* overflow: hidden; */
            border: 1px solid #eee;
            padding-bottom: 20px;
            transition: transform 0.3s;
            height: 244px;
            box-shadow: 0px 2px 8px 0px #00000026;
            margin-bottom: 47px;
        }

        .branch-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        }

        .branch-img {
            width: 100%;
            height: 160px;
            object-fit: cover;
            background-color: #ddd;
            position: relative;
            top: -58px;
            border-radius: 26px;
        }

        .branch-card h4 {
            font-size: 14px;
            margin: 15px 15px 8px;
            text-transform: uppercase;
            font-weight: 700;
            color: var(--text-dark);
            line-height: 1.4;
            position: relative;
            top: -50px;
            font-family: Libre Baskerville;
            font-weight: 700;
            font-style: Bold;
            font-size: 18px;
            leading-trim: NONE;
            line-height: 30px;
            letter-spacing: 0%;
            text-align: center;
        }

        .branch-card p {
            font-size: 13px;
            color: #656565;
            margin-bottom: 12px;
            font-weight: 500;
            position: relative;
            bottom: 51px;
            font-family: Poppins;
            font-weight: 400;
            font-style: Regular;
            font-size: 14px;
            leading-trim: NONE;
            line-height: 100%;
            letter-spacing: 0%;
        }

        /* --- RESPONSIVE MEDIA QUERIES --- */

        /* Tablet (Landscape) & Small Laptops (Max 1024px) */
        @media (max-width: 1024px) {

            .story-section,
            .vision-mission-section,
            .branches-section {
                padding: 60px 5%;
                /* Reduce side padding */
            }

            .story-images {
                height: 400px;
                /* Smaller height for overlap area */
            }

            .branch-grid {
                grid-template-columns: repeat(3, 1fr);
                /* 3 Columns */
            }
        }

        /* Tablet (Portrait) (Max 900px) */
        @media (max-width: 900px) {
            .story-section {
                flex-direction: column;
                /* Stack story section */
                text-align: center;
                gap: 50px;
            }

            .story-content p {
                text-align: center;
                /* Center text on tablet/mobile */
            }

            .story-images {
                width: 100%;
                max-width: 600px;
                margin: 0 auto;
            }

            .branch-grid {
                grid-template-columns: repeat(2, 1fr);
                /* 2 Columns */
            }
        }

        /* Mobile (Max 600px) */
        @media (max-width: 600px) {

            /* General Padding */
            .story-section,
            .vision-mission-section,
            .branches-section {
                padding: 50px 20px;
            }

            /* Hero */
            .about-hero {
                height: 350px;
            }

            /* Story Images - Remove overlap on mobile for cleaner look */
            .story-images {
                height: auto;
                display: flex;
                flex-direction: column;
                gap: 15px;
            }

            .img-large,
            .img-small {
                position: relative;
                width: 100%;
                height: 250px;
                top: auto;
                right: auto;
                bottom: auto;
                left: auto;
                border: none;
                /* Remove border on small img */
            }

            /* Vision/Mission */
            .vm-grid {
                grid-template-columns: 1fr;
                /* Stack cards */
            }

            /* Branches */
            .branch-grid {
                grid-template-columns: 1fr;
                /* 1 Column */
            }

            .section-header {
                font-size: 28px;
            }
        }
    </style>

    <div id="about-page-wrapper">
        <section class="about-hero">
            <div>
                <h1>A Legacy of Authentic <br><span>Iyengar Flavors</span></h1>
            </div>
        </section>

        <section class="story-section">
            <div class="story-images">
                <img src="{{ asset('assets/about1.png') }}" class="img-large" alt="Our Bakery Exterior">
                <img src="{{ asset('assets/about2.png') }}" class="img-small" alt="Fresh Baked Goods">
            </div>
            <div class="story-content">
                <span class="label-gold">Our Story</span>
                <h2>Lorem ipsum dolor sit amet, consectetur<span>adipiscing elit.</span></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                    ex ea commodo consequat. </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                    laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua.</p>
            </div>
        </section>

        <section class="vision-mission-section">
            <h2 class="section-header">Our Vision <span>&</span> Mission</h2>
            <div class="vm-grid">
                <div class="vm-card">
                    <div class="vm-icon"><i class="fa-regular fa-eye"></i></div>
                    <h3>Our Vision</h3>
                    <p>To be the most cherished heritage bakery, preserving the classic Iyengar culinary art while embracing
                        modern standards of excellence.</p>
                    <ul class="vm-list">
                        <li><i class="fa-solid fa-check"></i> Upholding authentic baking traditions.</li>
                        <li><i class="fa-solid fa-check"></i> Delivering unmatched freshness daily.</li>
                        <li><i class="fa-solid fa-check"></i> Creating memories through taste.</li>
                    </ul>
                </div>

                <div class="vm-card">
                    <div class="vm-icon"><i class="fa-solid fa-bullseye"></i></div>
                    <h3>Our Mission</h3>
                    <p>To serve our customers with integrity, ensuring every bite reflects our commitment to quality,
                        hygiene, and genuine flavor.</p>
                    <ul class="vm-list">
                        <li><i class="fa-solid fa-check"></i> Zero compromise on ingredient quality.</li>
                        <li><i class="fa-solid fa-check"></i> Customer satisfaction above all else.</li>
                        <li><i class="fa-solid fa-check"></i> Innovating while staying rooted.</li>
                    </ul>
                </div>
            </div>
        </section>

        <section class="branches-section">
            <h2 class="section-header">Our <span class="branch">Branches</span></h2>
            <div class="branch-grid">
                @foreach (range(1, 4) as $index)
                    <div class="branch-card">
                        <img src="{{ asset('assets/about.png') }}" class="branch-img" alt="Branch Location">
                        <h4>Sri Rajalakshmi Iyengar Bakery</h4>
                        <p> <svg width="18" height="22" viewBox="0 0 18 22" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M2.94667 15.86C3.22249 15.7795 3.51898 15.812 3.7709 15.9501C4.02283 16.0883 4.20955 16.3208 4.29 16.5967C4.37045 16.8725 4.33803 17.169 4.19988 17.4209C4.06173 17.6728 3.82916 17.8595 3.55333 17.94C3.01167 18.0982 2.62167 18.265 2.37142 18.4167C2.62925 18.5716 3.03658 18.7449 3.60208 18.9063C4.85333 19.2638 6.64408 19.5 8.66667 19.5C10.6892 19.5 12.48 19.2638 13.7312 18.9063C14.2978 18.7449 14.7041 18.5716 14.9619 18.4167C14.7128 18.265 14.3228 18.0982 13.7811 17.94C13.5096 17.856 13.282 17.6687 13.1473 17.4185C13.0126 17.1682 12.9817 16.8751 13.0611 16.6022C13.1406 16.3294 13.324 16.0987 13.572 15.9598C13.8199 15.821 14.1125 15.7851 14.3867 15.86C15.1103 16.0712 15.7733 16.3421 16.2825 16.6898C16.7538 17.0137 17.3333 17.5782 17.3333 18.4167C17.3333 19.2649 16.7397 19.8337 16.2608 20.1576C15.743 20.5064 15.0659 20.7783 14.326 20.9896C12.8332 21.4175 10.8333 21.6667 8.66667 21.6667C6.5 21.6667 4.50017 21.4175 3.00733 20.9896C2.26742 20.7783 1.59033 20.5064 1.0725 20.1576C0.593666 19.8326 0 19.2649 0 18.4167C0 17.5782 0.579583 17.0137 1.05083 16.6898C1.56 16.3421 2.223 16.0712 2.94667 15.86ZM8.66667 0C10.8216 0 12.8882 0.856024 14.4119 2.37976C15.9356 3.90349 16.7917 5.97012 16.7917 8.125C16.7917 10.907 15.275 13.169 13.7042 14.7767C13.0797 15.4092 12.4087 15.9941 11.6968 16.5262C11.0533 17.0094 9.58208 17.9151 9.58208 17.9151C9.30306 18.0737 8.98762 18.1571 8.66667 18.1571C8.34572 18.1571 8.03028 18.0737 7.75125 17.9151C7.02083 17.4922 6.31482 17.0285 5.63658 16.5262C4.92434 15.9944 4.25329 15.4096 3.62917 14.7767C2.05833 13.169 0.541667 10.907 0.541667 8.125C0.541667 5.97012 1.39769 3.90349 2.92142 2.37976C4.44516 0.856024 6.51178 0 8.66667 0ZM8.66667 5.95833C8.09203 5.95833 7.54093 6.18661 7.1346 6.59294C6.72827 6.99926 6.5 7.55036 6.5 8.125C6.5 8.69964 6.72827 9.25073 7.1346 9.65706C7.54093 10.0634 8.09203 10.2917 8.66667 10.2917C9.2413 10.2917 9.7924 10.0634 10.1987 9.65706C10.6051 9.25073 10.8333 8.69964 10.8333 8.125C10.8333 7.55036 10.6051 6.99926 10.1987 6.59294C9.7924 6.18661 9.2413 5.95833 8.66667 5.95833Z"
                                    fill="#005BAA" />
                            </svg>
                            Main Street, Branch {{ $index }}</p>

                    </div>
                @endforeach
            </div>
        </section>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log("Iyengar Bakery About Page Loaded");
        });
    </script>
@endsection