'use client';

import React from 'react';
import Image from 'next/image';
import styles from './RiverJourney.module.css';

export const RiverJourney: React.FC = () => {
  return (
    <section id="about" className={styles.journeySection}>
      {/* Intro Header & Description on the Left */}
      <div className={styles.introBlock}>
        <span className={styles.eyebrow}>ABOUT ME</span>
        <h2 className={styles.heading}>From Pixel to Product</h2>
        <div className={styles.underlineBar} />
        <p className={styles.description}>
          I began as a digital artist, designing visual stories. Curiosity turned
          into code, and code into systems that solve real problems. Today, I
          build products end-to-end using agentic workflows that blend creativity,
          engineering, and product thinking.
        </p>
      </div>

      {/* 5 Freely Positioned Milestones along the River */}

      {/* Step 05: Product Engineer */}
      <div className={styles.step05Graphic}>
        <Image
          src="/assets/step-05-product-engineer.png"
          alt="Product Engineer Milestone"
          width={180}
          height={240}
          className={styles.islandImage}
        />
      </div>
      <div className={styles.step05Text}>
        <div className={styles.stepNumber}>05</div>
        <h3 className={styles.stepTitle}>Product Engineer</h3>
        <p className={styles.stepDesc}>
          Merging product strategy with engineering to ship impactful products.
        </p>
      </div>

      {/* Step 04: Software Engineer */}
      <div className={styles.step04Text}>
        <div className={styles.stepNumber}>04</div>
        <h3 className={styles.stepTitle}>Software Engineer</h3>
        <p className={styles.stepDesc}>
          Engineered scalable applications and delivered real-world solutions.
        </p>
      </div>
      <div className={styles.step04Graphic}>
        <Image
          src="/assets/step-04-software-engineer.png"
          alt="Software Engineer Milestone"
          width={250}
          height={220}
          className={styles.islandImage}
        />
      </div>

      {/* Step 03: Computer Science */}
      <div className={styles.step03Text}>
        <div className={styles.stepNumber}>03</div>
        <h3 className={styles.stepTitle}>Computer Science</h3>
        <p className={styles.stepDesc}>
          Built strong foundations in algorithms and systems thinking.
        </p>
      </div>
      <div className={styles.step03Graphic}>
        <Image
          src="/assets/step-02-computer-science.png"
          alt="Computer Science Milestone"
          width={240}
          height={220}
          className={styles.islandImage}
        />
      </div>

      {/* Step 02: UI/UX Designer */}
      <div className={styles.step02Text}>
        <div className={styles.stepNumber}>02</div>
        <h3 className={styles.stepTitle}>UI/UX Designer</h3>
        <p className={styles.stepDesc}>
          Designed Intuitive interfaces and user-centered experiences.
        </p>
      </div>
      <div className={styles.step02Graphic}>
        <Image
          src="/assets/step-03-ui-ux-designer.png"
          alt="UI/UX Designer Milestone"
          width={210}
          height={200}
          className={styles.islandImage}
        />
      </div>

      {/* Step 01: Digital Artist */}
      <div className={styles.step01Text}>
        <div className={styles.stepNumber}>01</div>
        <h3 className={styles.stepTitle}>Digital Artist</h3>
        <p className={styles.stepDesc}>
          Explored visual design, illustration and storytelling.
        </p>
      </div>
      <div className={styles.step01Graphic}>
        <Image
          src="/assets/step-01-digital-artist.png"
          alt="Digital Artist Milestone"
          width={230}
          height={200}
          className={styles.islandImage}
        />
      </div>
    </section>
  );
};