'use client';

import React from 'react';
import { AboutRiverScene } from './scenes/AboutRiverScene';
import styles from './RiverJourney.module.css';

const steps = [
  { number: '01', title: 'Digital Artist', description: 'Explored visual design, illustration and storytelling.' },
  { number: '02', title: 'UI/UX Designer', description: 'Designed intuitive interfaces and user-centered experiences.' },
  { number: '03', title: 'Computer Science', description: 'Built strong foundations in algorithms and systems thinking.' },
  { number: '04', title: 'Software Engineer', description: 'Engineered scalable applications and delivered real-world solutions.' },
  { number: '05', title: 'Product Engineer', description: 'Merging product strategy with engineering to ship impactful products.' },
];

export const RiverJourney: React.FC = () => {
  return (
    <section id="about" className={styles.journeySection} aria-labelledby="about-title">
      <AboutRiverScene />
      {/* Intro Header & Description on the Left */}
      <div className={styles.introBlock}>
        <span className={styles.eyebrow}>ABOUT ME</span>
        <h2 id="about-title" 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>

      <ol className={styles.stepsList} aria-label="Career journey">
        {steps.map((step) => (
          <li key={step.number} className={`${styles.stepCard} ${styles[`step${step.number}`]}`}>
            <span className={styles.stepNumber}>{step.number}</span>
            <div>
              <h3 className={styles.stepTitle}>{step.title}</h3>
              <p className={styles.stepDesc}>{step.description}</p>
            </div>
          </li>
        ))}
      </ol>
    </section>
  );
};