@extends('layouts/base')

@section('title')
    {{ $page->title }} |
@endsection

@section('styles')
    <style>
        .phone::before {
    content: '\f095'; /* Unicode for Font Awesome phone icon */
    font-family: 'Font Awesome 6 Free'; /* Make sure this is the correct Font Awesome version you are using */
    font-weight: 900; /* Font weight for solid icons */
    margin-right: 8px; /* Space between icon and phone number */
    color: #e30613; /* Optional: You can change the color of the icon */
}

.email::before {
    content: '\f0e0'; /* Unicode for Font Awesome envelope (email) icon */
    font-family: 'Font Awesome 5 Free'; /* Make sure this is the correct Font Awesome version you are using */
    font-weight: 900; /* Font weight for solid icons */
    margin-right: 8px; /* Space between icon and email address */
    color: #e30613; /* Optional: You can change the color of the icon */
}


        .two-column-container {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
        }

        .content-column {
            flex: 1;
            min-width: 300px; /* Ensures the column doesn't get too narrow on small screens */
        }

        .map-column {
            flex: 1;
            min-width: 300px;
        }

        /* Responsive design for smaller screens */
        @media (max-width: 768px) {
            .two-column-container {
                flex-direction: column;
            }

            .content-column,
            .map-column {
                width: 100%;
            }
        }
    </style>
@endsection

@section('content')

    <h1>{{ $page->title }}</h1>

    <div class="two-column-container">
        <div class="content-column">
            {!! $page->content !!}
        </div>
        <div class="map-column">
            <p><strong>Regd & Admn Office, Factory & Works:</strong></p>
            <p>16-2-742/E/E/2/1, Venkatadri Nagar, Malakpet, Asmangarh, Hyderabad, Telangana, India</p><p>Pin: 500 036</p>
            <p class="email"><a href="mailto:pfluoroindia@gmail.com">pfluoroindia@gmail.com</a></p>
            <iframe src="https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d3807.93753373659!2d78.51441267516446!3d17.366738583516963!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zMTfCsDIyJzAwLjMiTiA3OMKwMzEnMDEuMiJF!5e0!3m2!1sen!2sin!4v1729272424057!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
    </div>
@endsection