---
phase: 01-acf-migration-2707
plan: 01
type: execute
wave: 1
depends_on: []
files_modified:
  - wp-content/themes/ostal_WP/sections.php
  - wp-content/themes/ostal_WP/page-2707.php
  - wp-content/themes/ostal_WP/template-parts/sections/section-collaboration-steps.php
  - wp-content/themes/ostal_WP/migrate-2707.php
autonomous: false
delegation: off
---

<objective>
## Goal
Migrate hardcoded content from `page-2707.php` (Ogrody zimowe — klienci indywidualni) to ACF Flexible Content, making all text, images, and sections editable from WordPress admin.

## Purpose
Currently all content is hardcoded in PHP — any change requires developer intervention. After migration, the client can edit headings, texts, images, and section order directly in WP admin.

## Output
- `page-2707.php` rewritten to use ACF Flexible Content via `sections.php`
- Missing layouts added to `sections.php` dispatcher
- New `section-collaboration-steps.php` partial for the numbered steps section
- `migrate-2707.php` one-time script to populate ACF content programmatically
</objective>

<context>
## Project Context
@.paul/PROJECT.md
@.paul/ROADMAP.md

## Source Files
@wp-content/themes/ostal_WP/page-2707.php
@wp-content/themes/ostal_WP/sections.php
@wp-content/themes/ostal_WP/template-parts/sections/section-hero-with-form.php
@wp-content/themes/ostal_WP/template-parts/sections/section-two-col.php
@wp-content/themes/ostal_WP/template-parts/sections/section-two-col-with-bg.php
@wp-content/themes/ostal_WP/template-parts/sections/section-gallery.php
@wp-content/themes/ostal_WP/template-parts/sections/section-boxes_repeater_img_title_text_cta.php
</context>

<acceptance_criteria>

## AC-1: Flexible Content dispatcher complete
```gherkin
Given sections.php is loaded on page 2707
When the ACF flexible content field "sections" contains layouts
Then hero_with_form, gallery, and collaboration_steps layouts are dispatched to correct template-parts
```

## AC-2: Collaboration steps layout works
```gherkin
Given a "collaboration_steps" layout is added in ACF admin
When a repeater with step titles is filled in
Then the page renders numbered steps with connecting lines matching the current design
```

## AC-3: Page 2707 uses Flexible Content
```gherkin
Given page-2707.php is loaded
When the page renders
Then all content comes from ACF fields (no hardcoded text/images remain)
And the visual output matches the current hardcoded version when same content is entered in ACF
```

## AC-4: Migration script populates ACF content
```gherkin
Given migrate-2707.php is executed once (via browser or WP-CLI)
When the script runs with WordPress and ACF loaded
Then all 10 flexible content layouts are created for page 2707
And all text, headings, classes, shortcodes, and image URLs are populated
And the page renders with full content without manual data entry
```

</acceptance_criteria>

<tasks>

<task type="auto">
  <name>Task 1: Add missing layouts to sections.php dispatcher</name>
  <files>wp-content/themes/ostal_WP/sections.php</files>
  <action>
    Add three missing layout dispatchers to the flexible content loop in sections.php:

    1. `hero_with_form` → loads `template-parts/sections/section-hero-with-form`
    2. `gallery` → loads `template-parts/sections/section-gallery`
    3. `collaboration_steps` → loads `template-parts/sections/section-collaboration-steps`

    Follow the exact same pattern as existing entries (get_row_layout() check + get_template_part).
    Do NOT modify any existing layout dispatchers.
  </action>
  <verify>sections.php contains all 11 layout dispatchers (8 existing + 3 new) with no syntax errors</verify>
  <done>AC-1 satisfied: All needed layouts are dispatched from sections.php</done>
</task>

<task type="auto">
  <name>Task 2: Create collaboration-steps section partial</name>
  <files>wp-content/themes/ostal_WP/template-parts/sections/section-collaboration-steps.php</files>
  <action>
    Create new template partial for the numbered collaboration steps section.
    
    ACF sub-fields to use (will need to be registered in ACF admin):
    - `section_heading` (text) — section title, e.g. "Jak wygląda współpraca?"
    - `steps` (repeater) with sub-field:
      - `step_title` (text) — step name
    - `bottom_text` (textarea) — text below the steps
    
    HTML structure must match the current hardcoded version exactly:
    - Outer: `<section id="collaboration" class="section-boxes-repeater">`
    - Inner: `.wrapper.wrapper--inner` > `h2.section-heading.heading--md`
    - Steps container: `.collaboration-steps` with max-width 900px, margin auto, padding 20px 0
    - Each step: `.collaboration-step` with flex layout, gap 20px, margin-bottom 40px (except last)
    - Step number: `.step-number` — circular green gradient (#88b14b → #6a8f3a), 60x60, white text
    - Connector line: `.step-connector` — 2px wide, gradient green to gray, between steps (not after last)
    - Step content: `.step-content` — gray bg (#f8f9fa), 4px green left border, rounded
    - Bottom text: `.col-text-content.mt-4.text-center` > `<p>`

    Move inline styles to classes where possible, but keep them if removing would break existing CSS dependencies.
    Include the existing hover/responsive CSS from page-2707.php as a <style> block in the partial.
  </action>
  <verify>Template renders numbered steps with ACF repeater data, matching current visual design</verify>
  <done>AC-2 satisfied: Collaboration steps layout renders correctly from ACF data</done>
</task>

<task type="auto">
  <name>Task 3: Rewrite page-2707.php to use Flexible Content</name>
  <files>wp-content/themes/ostal_WP/page-2707.php</files>
  <action>
    Replace entire hardcoded content with ACF Flexible Content loader.

    New page-2707.php should contain only:
    ```php
    <?php get_header(); ?>
    <?php include( locate_template( 'sections.php' ) ); ?>
    <?php get_footer(); ?>
    ```

    This delegates all section rendering to sections.php which dispatches based on ACF layouts.

    The user will then need to configure the following layouts in WP admin for page 2707:
    1. hero_with_form — heading, text (wysiwyg for multiple paragraphs + bold), form shortcode, bg image
    2. two_col_section — "Nasze ogrody zimowe..." (imageLeft, bg-light)
    3. two_col_section — "Co wyróżnia nasze ogrody zimowe" (imageLeft, bg-light)
    4. collaboration_steps — 5 steps + bottom text
    5. two_col_section — "Doświadczenie w systemach aluminiowych" (imageLeft, bg-light)
    6. two_col_section — "Planowanie realizacji bez pośpiechu" (imageLeft, bg-light)
    7. two_col_section — "Porozmawiajmy o twoim projekcie" (imageLeft, bg-light)
    8. two_col_section_with_bg — CTA "Sprawdź orientacyjny budżet" (bg-dark)
    9. two_col_section — "Funkcje ogrodów zimowych" (imageLeft, bg-light)
    10. gallery — "Nasze realizacje ogrodów zimowych" (6 images)

    NOTE on hero_with_form: Current template only outputs one <p> for text field.
    The hardcoded page has 3 paragraphs (regular + strong/specs + CTA text).
    If the ACF text field is wysiwyg type, all 3 paragraphs can be entered there.
    If it's textarea, the template needs modification — check and adapt section-hero-with-form.php
    to use wysiwyg or wrap text output in wpautop().
  </action>
  <verify>page-2707.php contains only header, sections.php include, and footer — no hardcoded content</verify>
  <done>AC-3 satisfied: Page 2707 renders entirely from ACF Flexible Content</done>
</task>

<task type="auto">
  <name>Task 4: Create migration script to populate ACF content</name>
  <files>wp-content/themes/ostal_WP/migrate-2707.php</files>
  <action>
    Create a one-time PHP migration script that programmatically fills all ACF Flexible Content
    data for page 2707 using `update_field()`.

    Script structure:
    1. WordPress bootstrap: require wp-load.php (relative path from theme dir)
    2. Safety check: only run if GET param `?run=migrate-2707` is present
    3. Safety check: abort if page 2707 already has sections data
    4. Define $page_id = 2707
    5. Build $sections array matching ACF Flexible Content structure

    The $sections array must contain 10 layouts in this order:

    Layout 1: hero_with_form
    - acf_fc_layout: "hero_with_form"
    - heading: "Całoroczne ogrody zimowe klasy premium"
    - text: full HTML with 3 paragraphs (regular text, strong specs with <br>, CTA text)
    - form_shortcode: '[contact-form-7 id="21a1143" title="Formularz kontaktowy"]'
    - background_image: "/wp-content/uploads/2023/10/ogrody-zimowe.jpg"
    - section_id: "hero_box"

    Layout 2: two_col_section
    - section_heading: "Nasze ogrody zimowe powstają z myślą o klientach, którzy szukają trwałego,<br>elastycznego i bezpiecznego rozwiązania na lata, a nie tymczasowej zabudowy."
    - text: "<p>Każda realizacja jest projektowana indywidualnie...</p><p>Realizacje całorocznych ogrodów zimowych rozpoczynają się od około 100 000 zł netto.</p>"
    - image: "https://ostal.pl/wp-content/uploads/2026/01/IMG_2832-scaled.jpg"
    - additional_class: "imageLeft"
    - additional_section_class: "bg-light"
    - heading_position: "textRight"
    - choose_heading: "h2"

    Layout 3: two_col_section
    - section_heading: "Co wyróżnia nasze ogrody zimowe"
    - text: HTML <ul> list with 5 items + closing paragraph
    - image: "https://ostal.pl/wp-content/uploads/2026/01/199-f27gxxl.jpg"
    - additional_class: "imageLeft"
    - additional_section_class: "bg-light"
    - heading_position: "textRight"
    - choose_heading: "h2"

    Layout 4: collaboration_steps
    - section_heading: "Jak wygląda współpraca?"
    - steps: repeater with 5 rows:
      1. "Rozmowa i analiza potrzeb."
      2. "Koncepcja i dobór rozwiązań"
      3. "Indywidualna oferta i harmonogram"
      4. "Umowa i zaliczka rezerwująca termin"
      5. "Produkcja i montaż"
    - bottom_text: "Prowadzimy klienta przez cały proces - spokojnie krok po kroku."

    Layout 5: two_col_section
    - section_heading: "Doświadczenie w systemach aluminiowych"
    - text: 2 paragraphs about aluminum systems experience
    - image: "/wp-content/uploads/2026/02/att_698c47679eb9b4.14191582.jpeg"
    - additional_class: "imageLeft", additional_section_class: "bg-light"

    Layout 6: two_col_section
    - section_heading: "Planowanie realizacji bez pośpiechu"
    - text: paragraph about advance planning
    - image: "/wp-content/uploads/2026/02/att_698c4767a04c46.41417006.jpg"
    - additional_class: "imageLeft", additional_section_class: "bg-light"

    Layout 7: two_col_section
    - section_heading: "Porozmawiajmy o twoim projekcie"
    - text: paragraph inviting contact
    - image: "/wp-content/uploads/2026/02/att_698c47679ad0a0.33546122.jpeg"
    - additional_class: "imageLeft", additional_section_class: "bg-light"

    Layout 8: two_col_section_with_bg
    - section_heading: "Sprawdź orientacyjny budżet projektu"
    - cta: "#hero_box"
    - cta_text: "Umów rozmowę"
    - background_image: "https://ostal.pl/wp-content/uploads/2021/05/hero-about.jpg"
    - additional_section_class: "bg-dark"

    Layout 9: two_col_section
    - section_heading: "Funkcje ogrodów zimowych"
    - text: full paragraph about winter garden functions (preserve &nbsp; entities)
    - image: "https://ostal.pl/wp-content/uploads/2023/10/DECORATION-PHOTO-1.jpg"
    - additional_class: "imageLeft", additional_section_class: "bg-light"

    Layout 10: gallery
    - section_heading: "Nasze realizacje ogrodów zimowych"
    - section_id: "galeria"
    - gallery: For images, use helper function to find attachment IDs by URL:
      function get_attachment_id_by_url($url) {
        global $wpdb;
        $path = parse_url($url, PHP_URL_PATH);
        $path = preg_replace('/-\d+x\d+(?=\.\w+$)/', '', $path);
        $sql = $wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid LIKE %s", '%' . $wpdb->esc_like(basename($path)) . '%');
        return (int) $wpdb->get_var($sql);
      }
      Gallery images (6 URLs from hardcoded page):
      - https://ostal.pl/wp-content/uploads/2023/10/202-4c7gxxl.jpg
      - https://ostal.pl/wp-content/uploads/2023/10/199-f27gxxl.jpg
      - https://ostal.pl/wp-content/uploads/2023/10/20170608_142315-1024x576.jpg
      - https://ostal.pl/wp-content/uploads/2023/10/IMG_0535-1-1024x768.jpg
      - https://ostal.pl/wp-content/uploads/2023/10/IMG_3754-1-1-1024x768.jpg
      - https://ostal.pl/wp-content/uploads/2023/10/Frame-36-1-1024x728.jpg

    6. Call update_field('sections', $sections, $page_id)
    7. Output success message with count of layouts created
    8. Add prominent reminder at end: "DELETE THIS FILE after migration!"

    IMPORTANT: Use exact text content from the hardcoded page-2707.php. Copy text verbatim
    including HTML tags, <br>, &nbsp; entities, and <strong> formatting.
    
    Script must be idempotent — if sections already exist, show warning and exit.
  </action>
  <verify>Script file exists, contains valid PHP, has safety checks, all 10 layouts defined</verify>
  <done>AC-4 satisfied: Migration script ready to populate all ACF content for page 2707</done>
</task>

<task type="checkpoint:human-verify" gate="blocking">
  <what-built>Page 2707 migrated to ACF Flexible Content with content populated by migration script</what-built>
  <how-to-verify>
    1. Visit: https://ostal.pl/wp-content/themes/ostal_WP/migrate-2707.php?run=migrate-2707
       (or run via WP-CLI: wp eval-file wp-content/themes/ostal_WP/migrate-2707.php)
    2. Open WordPress admin → Pages → page 2707 (Ogrody zimowe)
    3. Verify "Sections" flexible content field shows all 10 layouts with content
    4. Preview the page
    5. Compare with the current live version — layout, spacing, styles should match
    6. Test mobile responsiveness of collaboration steps section
    7. DELETE migrate-2707.php after confirming
  </how-to-verify>
  <resume-signal>Type "approved" to continue, or describe issues to fix</resume-signal>
</task>

</tasks>

<boundaries>

## DO NOT CHANGE
- wp-content/themes/ostal_WP/template-parts/sections/section-hero-with-form.php (only modify if text field needs wpautop — minimal change)
- wp-content/themes/ostal_WP/template-parts/sections/section-two-col.php
- wp-content/themes/ostal_WP/template-parts/sections/section-two-col-with-bg.php
- wp-content/themes/ostal_WP/template-parts/sections/section-gallery.php
- wp-content/themes/ostal_WP/functions.php
- Any other page-*.php files
- wp-content/themes/ostal_WP/page-templates/*

## SCOPE LIMITS
- This plan only migrates page-2707.php
- ACF field group for "sections" Flexible Content must already exist in WP (it does — used by other pages)
- New layouts (hero_with_form, gallery, collaboration_steps) must be added to the field group in ACF admin
- No CSS/JS file changes — all existing styles continue to work
- No new dependencies
- migrate-2707.php must be DELETED after successful migration

</boundaries>

<verification>
Before declaring plan complete:
- [ ] sections.php has 11 layout dispatchers (no duplicates, no syntax errors)
- [ ] section-collaboration-steps.php exists and follows ACF sub_field pattern
- [ ] page-2707.php contains only get_header, sections.php include, get_footer
- [ ] No hardcoded content remains in page-2707.php
- [ ] migrate-2707.php exists with all 10 layouts and safety checks
- [ ] Migration script executed successfully (all content populated)
- [ ] User has verified visual match in WordPress admin (checkpoint)
- [ ] migrate-2707.php deleted after verification
</verification>

<success_criteria>
- All 4 auto tasks completed
- Human verification checkpoint approved
- Page 2707 renders identically from ACF content as it did hardcoded
- No regressions on other pages
</success_criteria>

<output>
After completion, create `.paul/phases/01-acf-migration-2707/01-01-SUMMARY.md`
</output>