@extends('layouts.app')
@section('title', ($cms['hero']['title'] ?? 'About Us') . " — Rukay's Hairdo & Beauty")
@section('content')
<style>
.pg-hero { background:linear-gradient(135deg,#2C1810,#8B3252); color:#fff; padding:4.5rem 0; text-align:center; }
.pg-hero h1 { font-size:clamp(2rem,5vw,3rem); margin-bottom:.75rem; }
.pg-hero p { font-size:1.05rem; opacity:.88; max-width:560px; margin:0 auto; line-height:1.7; }
.about-section { padding:5rem 0; }
.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
@media(max-width:768px){.story-grid{grid-template-columns:1fr;}}
.story-img { width:100%; height:420px; object-fit:cover; border-radius:1.25rem; box-shadow:0 12px 40px rgba(139,50,82,.15); display:block; }
.story-placeholder { width:100%; height:420px; background:linear-gradient(135deg,#8B3252,#C9956C); border-radius:1.25rem; display:flex; align-items:center; justify-content:center; color:#fff; font-size:5rem; }
.story-text h2 { font-size:2rem; color:#2C1810; margin-bottom:1rem; }
.story-text p { color:#7A6058; line-height:1.8; margin-bottom:1rem; }
.values-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; }
.value-card { background:#fff; border-radius:.75rem; padding:1.75rem; border:1px solid #E8D5C4; text-align:center; transition:transform .2s,box-shadow .2s; }
.value-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(139,50,82,.1); }
.value-card .icon { font-size:2.5rem; margin-bottom:.75rem; }
.value-card h3 { font-size:1.05rem; color:#8B3252; margin-bottom:.5rem; }
.value-card p { font-size:.875rem; color:#7A6058; line-height:1.6; }
.team-card { border-radius:1rem; overflow:hidden; background:#fff; border:1px solid #EDE0D7; text-align:center; transition:transform .2s; }
.team-card:hover { transform:translateY(-4px); }
.team-top { height:200px; overflow:hidden; background:linear-gradient(135deg,#2C1810,#8B3252); }
.team-top img { width:100%; height:100%; object-fit:cover; object-position:top; }
.team-init { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:3.5rem; font-family:'Playfair Display',serif; }
.team-body { padding:1.25rem; }
.about-cta { background:linear-gradient(135deg,#2C1810,#8B3252); color:#fff; text-align:center; padding:5rem 0; }
.about-cta h2 { font-size:clamp(1.8rem,4vw,2.5rem); margin-bottom:1rem; }
.about-cta p { opacity:.85; font-size:1rem; margin-bottom:2rem; }
.section-title { text-align:center; margin-bottom:3rem; }
.section-title h2 { font-size:clamp(1.8rem,4vw,2.3rem); color:#2C1810; margin-bottom:.5rem; }
.section-title p { color:#7A6058; font-size:.95rem; max-width:500px; margin:0 auto; }
</style>

@php $order = $cms['order'] ?? []; @endphp

@foreach($order as $secKey)
@php $sec = $cms[$secKey] ?? []; $enabled = $sec['enabled'] ?? true; if(!$enabled) continue; @endphp

@if($secKey === 'hero')
<div class="pg-hero">
    <div class="container">
        <h1>{{ $sec['title'] ?? "About Rukay's" }}</h1>
        <p>{{ $sec['subtitle'] ?? '' }}</p>
    </div>
</div>

@elseif($secKey === 'story')
<section class="about-section">
    <div class="container">
        <div class="story-grid">
            @if($sec['image'] ?? '')
                <img src="{{ $sec['image'] }}" alt="Rukay's salon story" class="story-img">
            @else
                <div class="story-placeholder">✨</div>
            @endif
            <div class="story-text">
                <h2>{{ $sec['heading'] ?? 'Our Philosophy' }}</h2>
                @foreach(['text1','text2','text3'] as $t)
                    @if($sec[$t] ?? '')<p>{{ $sec[$t] }}</p>@endif
                @endforeach
                <a href="{{ route('booking.index') }}" class="btn btn-primary" style="margin-top:.5rem;">{{ $sec['btn_text'] ?? 'Book with Us' }}</a>
            </div>
        </div>
    </div>
</section>

@elseif($secKey === 'values')
<section class="about-section" style="background:#fff;padding:4.5rem 0;">
    <div class="container">
        <div class="section-title">
            <h2>{{ $sec['heading'] ?? 'Our Values' }}</h2>
            <p>{{ $sec['subtitle'] ?? '' }}</p>
        </div>
        <div class="values-grid">
            @foreach([1,2,3,4] as $i)
            @if($sec['v'.$i.'_title'] ?? '')
            <div class="value-card">
                <div class="icon">{{ $sec['v'.$i.'_icon'] ?? '✨' }}</div>
                <h3>{{ $sec['v'.$i.'_title'] }}</h3>
                <p>{{ $sec['v'.$i.'_text'] ?? '' }}</p>
            </div>
            @endif
            @endforeach
        </div>
    </div>
</section>

@elseif($secKey === 'team' && $staff->count())
<section class="about-section">
    <div class="container">
        <div class="section-title">
            <h2>{{ $sec['heading'] ?? 'Meet Our Team' }}</h2>
            <p>{{ $sec['subtitle'] ?? '' }}</p>
        </div>
        <div class="grid-3">
            @foreach($staff as $member)
            <div class="team-card">
                <div class="team-top">
                    @if($member->avatar_url)<img src="{{ $member->avatar_url }}" alt="{{ $member->name }}">
                    @else<div class="team-init">{{ substr($member->name,0,1) }}</div>@endif
                </div>
                <div class="team-body">
                    <div style="font-weight:700;font-family:'Playfair Display',serif;font-size:1.05rem;color:#2C1810;">{{ $member->name }}</div>
                    <div style="font-size:.78rem;color:#8B3252;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin:.3rem 0 .5rem;">{{ $member->role }}</div>
                    @if($member->bio)<p style="font-size:.82rem;color:#7A6058;line-height:1.6;">{{ Str::limit($member->bio, 100) }}</p>@endif
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

@elseif($secKey === 'cta')
<div class="about-cta">
    <div class="container">
        <h2>{{ $sec['heading'] ?? "Come Experience Rukay's" }}</h2>
        <p>{{ $sec['subtitle'] ?? '' }}</p>
        <a href="{{ route('booking.index') }}" class="btn" style="background:#fff;color:#8B3252;font-size:1rem;padding:.9rem 2.5rem;font-weight:700;">{{ $sec['btn_text'] ?? 'Book an Appointment' }}</a>
    </div>
</div>
@endif

@endforeach
@endsection