<section class="bg-[#050505] py-20 md:py-32 px-5 font-sans" data-component-type="Content" data-component-slug="ss-photography-journey">
  <div class="max-w-[1400px] mx-auto grid grid-cols-1 lg:grid-cols-5 gap-12 lg:gap-24">
    <!-- LEFT COLUMN: Intro & Image -->
    <div class="lg:col-span-2 flex flex-col justify-between h-full">
      <div>
        <!-- Label -->
        <div class="flex items-center gap-2 mb-6">
          <span class="w-2 h-2 rounded-full bg-[#CCCCCC]"></span>
          {{#if journey_label}}
          <span class="font-sans text-xs md:text-sm text-[#CCCCCC] uppercase tracking-widest">
            <span data-node="journey_label" data-node-type="text" data-node-label="Section Label" data-node-default="Our Journey">{{journey_label}}</span>
          </span>
          {{/if}}
        </div>

        <!-- Title -->
        {{#if journey_title}}
        <h2 class="font-['Cormorant',_serif] text-4xl md:text-5xl lg:text-6xl text-white mb-6 leading-none">
          <span data-node="journey_title" data-node-type="text" data-node-label="Main Title" data-node-default="From First Frame">{{journey_title}}</span>
        </h2>
        {{/if}}

        <!-- Description -->
        {{#if journey_desc}}
        <p class="text-[#888888] text-sm md:text-base leading-relaxed max-w-sm mb-12">
          <span data-node="journey_desc" data-node-type="text" data-node-label="Description" data-node-default="A timeline shaped by growth, exploration, and evolving creative vision.">{{journey_desc}}</span>
        </p>
        {{/if}}
      </div>

      <!-- Featured Image -->
      {{#if journey_image}}
      <div class="relative w-full aspect-square md:aspect-[4/5] overflow-hidden rounded-sm bg-[#1A1A1A] mt-8 lg:mt-0">
        <img src="{{journey_image}}" class="w-full h-full object-cover opacity-80" alt="Journey Featured" data-node="journey_image" data-node-type="file" data-node-label="Featured Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440953/seltrix/templates/ss-photography/journey-img.svg">
        <!-- Overlay Gradient -->
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>
      </div>
      {{/if}}
    </div>

    <!-- RIGHT COLUMN: Timeline -->
    <div class="lg:col-span-3 relative pl-4 md:pl-10 py-4">
      <!-- Vertical Line -->
      <div class="absolute left-[23px] md:left-[47px] top-0 bottom-0 w-[1px] bg-[#333333]"></div>

      <div class="flex flex-col gap-16 md:gap-24">
        <!-- Item 1 -->
        <div class="relative flex gap-8 md:gap-16 items-start group">
          <!-- Dot -->
          <div class="absolute left-0 top-2.5 w-2 h-2 rounded-full bg-[#888888] ring-4 ring-[#050505] z-10 group-hover:bg-white transition-colors duration-300"></div>

          <div class="pl-8 md:pl-12">
            {{#if timeline_year_1}}
            <span class="block font-['Cormorant',_serif] text-3xl md:text-5xl text-white mb-3">
              <span data-node="timeline_year_1" data-node-type="text" data-node-label="Year 1" data-node-default="2008">{{timeline_year_1}}</span>
            </span>
            {{/if}} {{#if timeline_text_1}}
            <p class="text-[#666666] text-sm md:text-base leading-relaxed max-w-md group-hover:text-[#999999] transition-colors duration-300">
              <span data-node="timeline_text_1" data-node-type="text" data-node-label="Timeline Text 1" data-node-default="The journey began with street photography and experimental portraits. A foundation built on learning light, patience, and observation.">{{timeline_text_1}}</span>
            </p>
            {{/if}}
          </div>
        </div>

        <!-- Item 2 -->
        <div class="relative flex gap-8 md:gap-16 items-start group">
          <div class="absolute left-0 top-2.5 w-2 h-2 rounded-full bg-[#888888] ring-4 ring-[#050505] z-10 group-hover:bg-white transition-colors duration-300"></div>

          <div class="pl-8 md:pl-12">
            {{#if timeline_year_2}}
            <span class="block font-['Cormorant',_serif] text-3xl md:text-5xl text-white mb-3">
              <span data-node="timeline_year_2" data-node-type="text" data-node-label="Year 2" data-node-default="2014">{{timeline_year_2}}</span>
            </span>
            {{/if}} {{#if timeline_text_2}}
            <p class="text-[#666666] text-sm md:text-base leading-relaxed max-w-md group-hover:text-[#999999] transition-colors duration-300">
              <span data-node="timeline_text_2" data-node-type="text" data-node-label="Timeline Text 2" data-node-default="Expanded into editorial and lifestyle projects. Refined a style focused on mood-driven storytelling.">{{timeline_text_2}}</span>
            </p>
            {{/if}}
          </div>
        </div>

        <!-- Item 3 -->
        <div class="relative flex gap-8 md:gap-16 items-start group">
          <div class="absolute left-0 top-2.5 w-2 h-2 rounded-full bg-[#888888] ring-4 ring-[#050505] z-10 group-hover:bg-white transition-colors duration-300"></div>

          <div class="pl-8 md:pl-12">
            {{#if timeline_year_3}}
            <span class="block font-['Cormorant',_serif] text-3xl md:text-5xl text-white mb-3">
              <span data-node="timeline_year_3" data-node-type="text" data-node-label="Year 3" data-node-default="2019">{{timeline_year_3}}</span>
            </span>
            {{/if}} {{#if timeline_text_3}}
            <p class="text-[#666666] text-sm md:text-base leading-relaxed max-w-md group-hover:text-[#999999] transition-colors duration-300">
              <span data-node="timeline_text_3" data-node-type="text" data-node-label="Timeline Text 3" data-node-default="Collaborated with international brands and creatives. Strengthened the studio’s global creative presence.">{{timeline_text_3}}</span>
            </p>
            {{/if}}
          </div>
        </div>

        <!-- Item 4 -->
        <div class="relative flex gap-8 md:gap-16 items-start group">
          <div class="absolute left-0 top-2.5 w-2 h-2 rounded-full bg-[#888888] ring-4 ring-[#050505] z-10 group-hover:bg-white transition-colors duration-300"></div>

          <div class="pl-8 md:pl-12">
            {{#if timeline_year_4}}
            <span class="block font-['Cormorant',_serif] text-3xl md:text-5xl text-white mb-3">
              <span data-node="timeline_year_4" data-node-type="text" data-node-label="Year 4" data-node-default="2021">{{timeline_year_4}}</span>
            </span>
            {{/if}} {{#if timeline_text_4}}
            <p class="text-[#666666] text-sm md:text-base leading-relaxed max-w-md group-hover:text-[#999999] transition-colors duration-300">
              <span data-node="timeline_text_4" data-node-type="text" data-node-label="Timeline Text 4" data-node-default="Embraced cinematic visuals and mixed-media storytelling. Elevated the studio into a full-scale creative space.">{{timeline_text_4}}</span>
            </p>
            {{/if}}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>