{{-- ═══ Corporative (Marketing-1) about fields ═══ --}}

{{-- SEO + Page Header --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">Encabezado de la página</h4>
    <p class="text-gray-600 fs-7 mb-4">Título de página y breadcrumb. Aparecen en el header superior y en los meta tags SEO.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-4">
            <label class="form-label">Título de página</label>
            <input type="text" name="about[page_title]" class="form-control form-control-solid" value="{{ old('about.page_title', $siteData['about']['page_title'] ?? '') }}" placeholder="Nosotros" />
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Breadcrumb — link Home</label>
            <input type="text" name="about[breadcrumb_home]" class="form-control form-control-solid" value="{{ old('about.breadcrumb_home', $siteData['about']['breadcrumb_home'] ?? '') }}" placeholder="Inicio" />
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Breadcrumb — página actual</label>
            <input type="text" name="about[breadcrumb_current]" class="form-control form-control-solid" value="{{ old('about.breadcrumb_current', $siteData['about']['breadcrumb_current'] ?? '') }}" placeholder="Nosotros" />
        </div>
    </div>
</div>

{{-- Sección Intro (heading principal) --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">Introducción</h4>
    <p class="text-gray-600 fs-7 mb-4">Heading principal y subtítulo que abren la página, justo debajo del breadcrumb.</p>
    <div class="row g-4 mb-6">
        <div class="col-12">
            <label class="form-label">Título principal</label>
            <textarea name="about[main_title]" class="form-control form-control-solid" rows="2" placeholder="Construimos marcas corporativas con propósito y estrategia">{{ old('about.main_title', $siteData['about']['main_title'] ?? '') }}</textarea>
        </div>
        <div class="col-12">
            <label class="form-label">Subtítulo / descripción</label>
            <textarea name="about[main_subtitle]" class="form-control form-control-solid" rows="3" placeholder="Más de 10 años acompañando empresas en el desarrollo de su identidad...">{{ old('about.main_subtitle', $siteData['about']['main_subtitle'] ?? '') }}</textarea>
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Pill / etiqueta sobre la imagen</label>
            <input type="text" name="about[image_intro_pill]" class="form-control form-control-solid" value="{{ old('about.image_intro_pill', $siteData['about']['image_intro_pill'] ?? '') }}" placeholder="Marcas que trascienden" />
            <span class="form-text">Píldora pequeña que aparece sobre la imagen de la introducción.</span>
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Ícono SVG (intro)</label>
            <input type="text" name="about[image_intro_icon]" class="form-control form-control-solid" value="{{ old('about.image_intro_icon', $siteData['about']['image_intro_icon'] ?? '') }}" placeholder="cd-project/img/demos/marketing-1/svg/generic-2.svg" />
            <span class="form-text">Path al ícono SVG decorativo de la sección.</span>
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Texto del CTA inferior</label>
            <input type="text" name="about[intro_link]" class="form-control form-control-solid" value="{{ old('about.intro_link', $siteData['about']['intro_link'] ?? '') }}" placeholder="Conocé nuestro proceso" />
        </div>
    </div>
</div>

{{-- Imagen Parallax --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">Imagen Parallax</h4>
    <p class="text-gray-600 fs-7 mb-4">Imagen full-width con efecto parallax que separa secciones.</p>
    <div class="row g-4 mb-6">
        <div class="col-12">
            <label class="form-label">Imagen parallax (1920×1080 recomendado)</label>
            <input type="text" name="about[image_parallax]" class="form-control form-control-solid" value="{{ old('about.image_parallax', $siteData['about']['image_parallax'] ?? '') }}" placeholder="cd-project/img/demos/marketing-1/generic/generic-4.jpg" />
            <span class="form-text">Path o URL absoluta. Se renderiza con efecto de profundidad al hacer scroll.</span>
        </div>
    </div>
</div>

{{-- Counters / KPIs --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">Contadores / KPIs</h4>
    <p class="text-gray-600 fs-7 mb-4">Números destacados con animación counter-up. Editá el badge superior y los 4 KPIs.</p>
    <div class="row g-4 mb-6">
        <div class="col-12">
            <label class="form-label">Badge sobre los counters</label>
            <input type="text" name="about[counters_badge]" class="form-control form-control-solid" value="{{ old('about.counters_badge', $siteData['about']['counters_badge'] ?? '') }}" placeholder="Nuestro recorrido" />
        </div>
        @php
            $counters = $siteData['about']['counters'] ?? [
                ['value' => '', 'suffix' => '+', 'label' => ''],
                ['value' => '', 'suffix' => '+', 'label' => ''],
                ['value' => '', 'suffix' => '%', 'label' => ''],
                ['value' => '', 'suffix' => '+', 'label' => ''],
            ];
        @endphp
        @for($i = 0; $i < 4; $i++)
        <div class="col-12">
            <h6 class="text-gray-700 fw-bold mb-3">Counter {{ $i + 1 }}</h6>
            <div class="row g-2">
                <div class="col-6 col-md-2">
                    <label class="form-label">Valor</label>
                    <input type="text" name="about[counters][{{ $i }}][value]" class="form-control form-control-solid form-control-sm" value="{{ old('about.counters.'.$i.'.value', $counters[$i]['value'] ?? '') }}" placeholder="10" />
                </div>
                <div class="col-6 col-md-2">
                    <label class="form-label">Sufijo</label>
                    <input type="text" name="about[counters][{{ $i }}][suffix]" class="form-control form-control-solid form-control-sm" value="{{ old('about.counters.'.$i.'.suffix', $counters[$i]['suffix'] ?? '+') }}" placeholder="+" />
                </div>
                <div class="col-12 col-md-8">
                    <label class="form-label">Etiqueta</label>
                    <input type="text" name="about[counters][{{ $i }}][label]" class="form-control form-control-solid form-control-sm" value="{{ old('about.counters.'.$i.'.label', $counters[$i]['label'] ?? '') }}" placeholder="Años acompañando marcas" />
                </div>
            </div>
        </div>
        @endfor
    </div>
</div>

{{-- Sección Gradient (Misión / Propuesta) --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">Sección con gradiente (Misión / Propuesta)</h4>
    <p class="text-gray-600 fs-7 mb-4">Sección con fondo gradiente que destaca la misión o propuesta de valor de la empresa.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-4">
            <label class="form-label">Badge</label>
            <input type="text" name="about[gradient_badge]" class="form-control form-control-solid" value="{{ old('about.gradient_badge', $siteData['about']['gradient_badge'] ?? '') }}" placeholder="Nuestra propuesta" />
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">Heading</label>
            <input type="text" name="about[gradient_heading]" class="form-control form-control-solid" value="{{ old('about.gradient_heading', $siteData['about']['gradient_heading'] ?? '') }}" placeholder="Combinamos estrategia, diseño y comunicación..." />
        </div>
        <div class="col-12">
            <label class="form-label">Descripción</label>
            <textarea name="about[gradient_description]" class="form-control form-control-solid" rows="4" placeholder="Trabajamos en equipo con cada cliente, escuchando, investigando y proponiendo...">{{ old('about.gradient_description', $siteData['about']['gradient_description'] ?? '') }}</textarea>
        </div>
    </div>
</div>

{{-- Sección Cultura --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">Sección Cultura</h4>
    <p class="text-gray-600 fs-7 mb-4">Bloque "Cultura" con scroll sticky. Texto de fondo (watermark), título y párrafos.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Título</label>
            <input type="text" name="about[culture_title]" class="form-control form-control-solid" value="{{ old('about.culture_title', $siteData['about']['culture_title'] ?? '') }}" placeholder="Cultura" />
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">Watermark (texto de fondo)</label>
            <input type="text" name="about[culture_watermark]" class="form-control form-control-solid" value="{{ old('about.culture_watermark', $siteData['about']['culture_watermark'] ?? '') }}" placeholder="Equipo" />
            <span class="form-text">Texto grande detrás de la sección, decorativo.</span>
        </div>
        @php
            $cultureParas = $siteData['about']['culture_paragraphs'] ?? ['', ''];
        @endphp
        @for($i = 0; $i < 2; $i++)
        <div class="col-12">
            <label class="form-label">Párrafo {{ $i + 1 }}</label>
            <textarea name="about[culture_paragraphs][{{ $i }}]" class="form-control form-control-solid" rows="3" placeholder="Somos un equipo multidisciplinario que combina...">{{ old('about.culture_paragraphs.'.$i, $cultureParas[$i] ?? '') }}</textarea>
        </div>
        @endfor
        <div class="col-12">
            <label class="form-label">Imagen de la sección Cultura</label>
            <input type="text" name="about[image_culture]" class="form-control form-control-solid" value="{{ old('about.image_culture', $siteData['about']['image_culture'] ?? '') }}" placeholder="cd-project/img/demos/marketing-1/generic/generic-5.jpg" />
            <span class="form-text">Path o URL absoluta. Aparece sticky a la izquierda mientras scrolleás los párrafos.</span>
        </div>
    </div>
</div>

{{-- Sección Valores --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">Sección Valores</h4>
    <p class="text-gray-600 fs-7 mb-4">Bloque "Valores" debajo de Cultura. Mismo layout sticky-scroll.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Título</label>
            <input type="text" name="about[values_title]" class="form-control form-control-solid" value="{{ old('about.values_title', $siteData['about']['values_title'] ?? '') }}" placeholder="Valores" />
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">Watermark (texto de fondo)</label>
            <input type="text" name="about[values_watermark]" class="form-control form-control-solid" value="{{ old('about.values_watermark', $siteData['about']['values_watermark'] ?? '') }}" placeholder="Compromiso" />
        </div>
        @php
            $valuesParas = $siteData['about']['values_paragraphs'] ?? ['', ''];
        @endphp
        @for($i = 0; $i < 2; $i++)
        <div class="col-12">
            <label class="form-label">Párrafo {{ $i + 1 }}</label>
            <textarea name="about[values_paragraphs][{{ $i }}]" class="form-control form-control-solid" rows="3" placeholder="Compromiso, profesionalismo y escucha activa...">{{ old('about.values_paragraphs.'.$i, $valuesParas[$i] ?? '') }}</textarea>
        </div>
        @endfor
        <div class="col-12">
            <label class="form-label">Imagen de la sección Valores</label>
            <input type="text" name="about[image_values]" class="form-control form-control-solid" value="{{ old('about.image_values', $siteData['about']['image_values'] ?? '') }}" placeholder="cd-project/img/demos/marketing-1/generic/generic-6.jpg" />
        </div>
    </div>
</div>

{{-- Testimonials --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">Testimonios</h4>
    <p class="text-gray-600 fs-7 mb-4">Bloque de testimonios al pie de la página. Editá el heading y los 3 testimonios estáticos.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-8">
            <label class="form-label">Heading (acepta HTML)</label>
            <textarea name="about[testimonials_heading]" class="form-control form-control-solid" rows="2" placeholder="Lo que dicen nuestros &lt;span class=&quot;text-primary&quot;&gt;clientes&lt;/span&gt;">{{ old('about.testimonials_heading', $siteData['about']['testimonials_heading'] ?? '') }}</textarea>
            <span class="form-text">Acepta HTML para resaltar palabras (ej. <code>&lt;span class="text-primary"&gt;clientes&lt;/span&gt;</code>).</span>
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Palabra resaltada</label>
            <input type="text" name="about[testimonials_highlight_word]" class="form-control form-control-solid" value="{{ old('about.testimonials_highlight_word', $siteData['about']['testimonials_highlight_word'] ?? '') }}" placeholder="clientes" />
        </div>
        <div class="col-12">
            <label class="form-label">Etiqueta de las estrellas</label>
            <input type="text" name="about[testimonials_stars_label]" class="form-control form-control-solid" value="{{ old('about.testimonials_stars_label', $siteData['about']['testimonials_stars_label'] ?? '') }}" placeholder="Confianza comprobada" />
        </div>
        @php
            $aboutTestimonials = $siteData['about']['testimonials'] ?? [
                ['text' => '', 'author' => '', 'company' => ''],
                ['text' => '', 'author' => '', 'company' => ''],
                ['text' => '', 'author' => '', 'company' => ''],
            ];
        @endphp
        @for($i = 0; $i < 3; $i++)
        <div class="col-12">
            <h6 class="text-gray-700 fw-bold mb-3">Testimonio {{ $i + 1 }}</h6>
            <div class="row g-2">
                <div class="col-12">
                    <label class="form-label">Texto</label>
                    <textarea name="about[testimonials][{{ $i }}][text]" class="form-control form-control-solid" rows="2" placeholder="Excelente trabajo. Repensaron nuestra identidad corporativa...">{{ old('about.testimonials.'.$i.'.text', $aboutTestimonials[$i]['text'] ?? '') }}</textarea>
                </div>
                <div class="col-12 col-md-6">
                    <label class="form-label">Autor</label>
                    <input type="text" name="about[testimonials][{{ $i }}][author]" class="form-control form-control-solid form-control-sm" value="{{ old('about.testimonials.'.$i.'.author', $aboutTestimonials[$i]['author'] ?? '') }}" placeholder="Director de Marketing" />
                </div>
                <div class="col-12 col-md-6">
                    <label class="form-label">Empresa</label>
                    <input type="text" name="about[testimonials][{{ $i }}][company]" class="form-control form-control-solid form-control-sm" value="{{ old('about.testimonials.'.$i.'.company', $aboutTestimonials[$i]['company'] ?? '') }}" placeholder="Empresa Cliente" />
                </div>
            </div>
        </div>
        @endfor
    </div>
</div>