@extends('layouts.site')

@section('content')

<style>
    .imprint-section {
        background: linear-gradient(180deg, #f8fafc 0%, #ffffff 40%);
    }
    .imprint-card {
        background: #ffffff;
        border-radius: 1.25rem;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .imprint-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.06);
        border-color: #cbd5e1;
    }
    .imprint-card__header {
        position: relative;
        padding: 2rem 1.5rem 1.5rem;
        border-bottom: 1px solid #e2e8f0;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #f8fafc;
    }
    .imprint-card__icon-wrap {
        width: 64px;
        height: 64px;
        border-radius: 1rem;
        background: rgba(var(--bs-primary-rgb), 0.1);
        color: var(--bs-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
    }
    .imprint-card__body {
        padding: 1.5rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }
    .imprint-card__title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 0;
        line-height: 1.3;
    }
    .imprint-card__field {
        display: flex;
        flex-direction: column;
        border-bottom: 1px dashed #e2e8f0;
        padding-bottom: 0.75rem;
    }
    .imprint-card__field:last-of-type {
        border-bottom: none;
        padding-bottom: 0;
    }
    .imprint-card__label {
        display: block;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #94a3b8;
        margin-bottom: 0.35rem;
    }
    .imprint-card__value-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }
    .imprint-card__value {
        font-size: 0.9375rem;
        font-weight: 600;
        color: #1e293b;
        line-height: 1.4;
        word-break: break-word;
    }
    .imprint-card__footer-bar {
        height: 4px;
        background: linear-gradient(90deg, var(--bs-primary), #3b82f6);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
    }
    .imprint-card:hover .imprint-card__footer-bar {
        transform: scaleX(1);
    }
    .imprint-tabs {
        display: inline-flex;
        gap: 0;
        border-bottom: 2px solid #e2e8f0;
        margin-bottom: 2.5rem;
    }
    .imprint-tabs a,
    .imprint-tabs span {
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
        font-weight: 600;
        text-decoration: none;
        color: #64748b;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        transition: color 0.2s, border-color 0.2s;
    }
    .imprint-tabs a:hover {
        color: #334155;
    }
    .imprint-tabs .is-active {
        color: var(--bs-primary);
        border-bottom-color: var(--bs-primary);
    }
    .imprint-grid {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 1.5rem;
        margin-bottom: 2.5rem;
    }
    @media (min-width: 768px) {
        .imprint-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @media (min-width: 1024px) {
        .imprint-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
    .btn-copy-inline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        padding: 4px;
        color: #94a3b8;
        cursor: pointer;
        font-size: 0.875rem;
        line-height: 1;
        border-radius: 4px;
        flex-shrink: 0;
        transition: color 0.2s, background-color 0.2s, transform 0.1s;
    }
    .btn-copy-inline:hover {
        color: var(--bs-primary);
        background-color: #f1f5f9;
    }
    .btn-copy-inline:active {
        transform: scale(0.9);
    }
    .btn-copy-inline.is-copied {
        color: #16a34a;
    }
</style>

<section class="wrapper imprint-section">
    <div class="container pt-14 pb-14 xl:pt-20 xl:pb-20 lg:pt-20 lg:pb-20 md:pt-20 md:pb-20">

        <div class="row text-center mb-8">
            <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
                <h1 class="display-1 mb-3">{!! $page->translate('title') ?: t('Künye') !!}</h1>
                <p class="lead fs-lg mb-0">{!! $page->translate('excerpt') ?: t('Resmi şirket bilgileri ve yasal sorumluluklar.') !!}</p>
            </div>
        </div>

        <div class="text-center">
            <nav class="imprint-tabs" aria-label="{!! t('Kurumsal Bilgiler') !!}">
                <a href="{{ route('page.show', ['slug' => 'banka-bilgilerimiz']) }}">{!! t('Havale / EFT (IBAN)') !!}</a>
                <span class="is-active">{!! t('Künye') !!}</span>
            </nav>
        </div>

        <div class="imprint-grid">
            
            <!-- Card 1: Kurumsal Bilgiler -->
            <div>
                <article class="imprint-card">
                    <div class="imprint-card__header">
                        <div class="imprint-card__icon-wrap">
                            <i class="uil uil-building"></i>
                        </div>
                        <h2 class="imprint-card__title">{!! t('Kurumsal Bilgiler') !!}</h2>
                    </div>

                    <div class="imprint-card__body">
                        <div class="imprint-card__field">
                            <span class="imprint-card__label">{!! t('Firma Ünvanı') !!}</span>
                            <div class="imprint-card__value-container">
                                <span class="imprint-card__value">{!! t('TRUNÇGİL TEKNOLOJİ SANAYİ VE TİCARET LİMİTED ŞİRKETİ') !!}</span>
                                <button type="button" class="btn-copy-inline" data-copy-target="TRUNÇGİL TEKNOLOJİ SANAYİ VE TİCARET LİMİTED ŞİRKETİ" aria-label="{!! t('Kopyala') !!}">
                                    <i class="uil uil-copy"></i>
                                </button>
                            </div>
                        </div>

                        <div class="imprint-card__field">
                            <span class="imprint-card__label">{!! t('Yetkili Temsilci') !!}</span>
                            <div class="imprint-card__value-container">
                                <span class="imprint-card__value">Mehmet Ali Trunç</span>
                                <button type="button" class="btn-copy-inline" data-copy-target="Mehmet Ali Trunç" aria-label="{!! t('Kopyala') !!}">
                                    <i class="uil uil-copy"></i>
                                </button>
                            </div>
                        </div>

                        <div class="imprint-card__field">
                            <span class="imprint-card__label">{!! t('Sorumlu Müdür') !!}</span>
                            <div class="imprint-card__value-container">
                                <span class="imprint-card__value">Mehmet Ali Trunç</span>
                                <button type="button" class="btn-copy-inline" data-copy-target="Mehmet Ali Trunç" aria-label="{!! t('Kopyala') !!}">
                                    <i class="uil uil-copy"></i>
                                </button>
                            </div>
                        </div>

                        <div class="imprint-card__field">
                            <span class="imprint-card__label">{!! t('Yer Sağlayıcı') !!}</span>
                            <div class="imprint-card__value-container">
                                <span class="imprint-card__value">{!! t('TRUNÇGİL TEKNOLOJİ SANAYİ VE TİCARET LİMİTED ŞİRKETİ') !!}</span>
                                <button type="button" class="btn-copy-inline" data-copy-target="TRUNÇGİL TEKNOLOJİ SANAYİ VE TİCARET LİMİTED ŞİRKETİ" aria-label="{!! t('Kopyala') !!}">
                                    <i class="uil uil-copy"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="imprint-card__footer-bar" aria-hidden="true"></div>
                </article>
            </div>

            <!-- Card 2: Resmi Bilgiler -->
            <div>
                <article class="imprint-card">
                    <div class="imprint-card__header">
                        <div class="imprint-card__icon-wrap">
                            <i class="uil uil-file-shield-alt"></i>
                        </div>
                        <h2 class="imprint-card__title">{!! t('Yasal Künye Bilgileri') !!}</h2>
                    </div>

                    <div class="imprint-card__body">
                        <div class="imprint-card__field">
                            <span class="imprint-card__label">{!! t('Vergi Dairesi') !!}</span>
                            <div class="imprint-card__value-container">
                                <span class="imprint-card__value">{!! t('Şahinbey V.D.') !!}</span>
                                <button type="button" class="btn-copy-inline" data-copy-target="Şahinbey V.D." aria-label="{!! t('Kopyala') !!}">
                                    <i class="uil uil-copy"></i>
                                </button>
                            </div>
                        </div>

                        <div class="imprint-card__field">
                            <span class="imprint-card__label">{!! t('Vergi Numarası') !!}</span>
                            <div class="imprint-card__value-container">
                                <span class="imprint-card__value">8591492435</span>
                                <button type="button" class="btn-copy-inline" data-copy-target="8591492435" aria-label="{!! t('Kopyala') !!}">
                                    <i class="uil uil-copy"></i>
                                </button>
                            </div>
                        </div>

                        <div class="imprint-card__field">
                            <span class="imprint-card__label">{!! t('MERSİS No') !!}</span>
                            <div class="imprint-card__value-container">
                                <span class="imprint-card__value">0859149243500001</span>
                                <button type="button" class="btn-copy-inline" data-copy-target="0859149243500001" aria-label="{!! t('Kopyala') !!}">
                                    <i class="uil uil-copy"></i>
                                </button>
                            </div>
                        </div>

                        <div class="imprint-card__field">
                            <span class="imprint-card__label">{!! t('Ticaret Sicil No') !!}</span>
                            <div class="imprint-card__value-container">
                                <span class="imprint-card__value">49454</span>
                                <button type="button" class="btn-copy-inline" data-copy-target="49454" aria-label="{!! t('Kopyala') !!}">
                                    <i class="uil uil-copy"></i>
                                </button>
                            </div>
                        </div>

                        <div class="imprint-card__field">
                            <span class="imprint-card__label">{!! t('Ticaret Odası') !!}</span>
                            <div class="imprint-card__value-container">
                                <span class="imprint-card__value">{!! t('Gaziantep Ticaret Odası (GTO)') !!}</span>
                                <button type="button" class="btn-copy-inline" data-copy-target="Gaziantep Ticaret Odası (GTO)" aria-label="{!! t('Kopyala') !!}">
                                    <i class="uil uil-copy"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="imprint-card__footer-bar" aria-hidden="true"></div>
                </article>
            </div>

            <!-- Card 3: İletişim Bilgileri -->
            <div>
                <article class="imprint-card">
                    <div class="imprint-card__header">
                        <div class="imprint-card__icon-wrap">
                            <i class="uil uil-envelope-shield"></i>
                        </div>
                        <h2 class="imprint-card__title">{!! t('İletişim ve Resmi Bilgiler') !!}</h2>
                    </div>

                    <div class="imprint-card__body">
                        <div class="imprint-card__field">
                            <span class="imprint-card__label">{!! t('Telefon') !!}</span>
                            <div class="imprint-card__value-container">
                                <span class="imprint-card__value">+90 850 305 45 45</span>
                                <button type="button" class="btn-copy-inline" data-copy-target="+90 850 305 45 45" aria-label="{!! t('Kopyala') !!}">
                                    <i class="uil uil-copy"></i>
                                </button>
                            </div>
                        </div>

                        <div class="imprint-card__field">
                            <span class="imprint-card__label">{!! t('E-Posta') !!}</span>
                            <div class="imprint-card__value-container">
                                <span class="imprint-card__value"><a href="mailto:info@truncgil.com.tr" class="text-reset" style="text-decoration: none;">info@truncgil.com.tr</a></span>
                                <button type="button" class="btn-copy-inline" data-copy-target="info@truncgil.com.tr" aria-label="{!! t('Kopyala') !!}">
                                    <i class="uil uil-copy"></i>
                                </button>
                            </div>
                        </div>

                        <div class="imprint-card__field">
                            <span class="imprint-card__label">{!! t('KEP Adresi') !!}</span>
                            <div class="imprint-card__value-container">
                                <span class="imprint-card__value">truncgilteknoloji@hs01.kep.tr</span>
                                <button type="button" class="btn-copy-inline" data-copy-target="truncgilteknoloji@hs01.kep.tr" aria-label="{!! t('Kopyala') !!}">
                                    <i class="uil uil-copy"></i>
                                </button>
                            </div>
                        </div>

                        <div class="imprint-card__field">
                            <span class="imprint-card__label">{!! t('Adres') !!}</span>
                            <div class="imprint-card__value-container">
                                <span class="imprint-card__value">{!! t('Çamtepe Mah. Mahmut Tevfik Atay Bul. Gaziantep Teknopark No: 4A İç Kapı No: 1 Şahinbey / Gaziantep') !!}</span>
                                <button type="button" class="btn-copy-inline" data-copy-target="Çamtepe Mah. Mahmut Tevfik Atay Bul. Gaziantep Teknopark No: 4A İç Kapı No: 1 Şahinbey / Gaziantep" aria-label="{!! t('Kopyala') !!}">
                                    <i class="uil uil-copy"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="imprint-card__footer-bar" aria-hidden="true"></div>
                </article>
            </div>

        </div>

        @php
            $pageContent = $page ? ($page->translate('content') ?: $page->content) : null;
        @endphp
        @if($pageContent)
            <div class="row mt-14">
                <div class="col-lg-10 mx-auto">
                    <div class="prose max-w-none text-center text-gray-600">
                        {!! $pageContent !!}
                    </div>
                </div>
            </div>
        @endif

    </div>
</section>

@push('scripts')
<script>
document.querySelectorAll('.btn-copy-inline').forEach(function (btn) {
    btn.addEventListener('click', function () {
        var text = this.getAttribute('data-copy-target');
        var icon = this.querySelector('i');

        function showCopied() {
            btn.classList.add('is-copied');
            if (icon) icon.className = 'uil uil-check text-success';
            setTimeout(function () {
                btn.classList.remove('is-copied');
                if (icon) icon.className = 'uil uil-copy';
            }, 1500);
        }

        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(showCopied).catch(function () {
                fallbackCopy(text);
                showCopied();
            });
        } else {
            fallbackCopy(text);
            showCopied();
        }
    });
});

function fallbackCopy(text) {
    var ta = document.createElement('textarea');
    ta.value = text;
    ta.setAttribute('readonly', '');
    ta.style.position = 'absolute';
    ta.style.left = '-9999px';
    document.body.appendChild(ta);
    ta.select();
    document.execCommand('copy');
    document.body.removeChild(ta);
}
</script>
@endpush

@endsection