import {
  Code2,
  GraduationCap,
  Palette,
  PanelsTopLeft,
  Rocket,
} from 'lucide-react';
import { DeferredAboutRiverScene } from './scenes/DeferredAboutRiverScene';
import type { PortfolioProps } from '@/server/content';
import styles from './RiverJourney.module.css';

const stepIcons = [Palette, PanelsTopLeft, GraduationCap, Code2, Rocket];

export const RiverJourney = ({ portfolio }: PortfolioProps) => {
  const copy = portfolio.messages.about;

  return (
    <section id="about" className={styles.journeySection} aria-labelledby="about-title">
      <DeferredAboutRiverScene />
      {/* Intro Header & Description on the Left */}
      <div className={styles.introBlock} data-reveal="scale">
        <span className={styles.eyebrow}>{copy.eyebrow}</span>
        <h2
          id="about-title"
          className={`${styles.heading} ${portfolio.direction === 'rtl' ? 'font-display' : ''}`}
        >
          {copy.title}
        </h2>
        <div className={styles.underlineBar} />
        <p className={styles.description}>{copy.description}</p>
      </div>

      <ol
        className={styles.stepsList}
        aria-label={copy.journeyLabel}
        data-reveal-group
      >
        {copy.steps.map((step, index) => {
          const StepIcon = stepIcons[index % stepIcons.length];

          return (
            <li key={step.title} className={styles.stepCard} data-reveal="soft">
              <span className={styles.stepIcon} aria-hidden="true">
                <StepIcon size={20} strokeWidth={1.9} />
              </span>
              <div className={styles.stepContent}>
                <h3 className={styles.stepTitle}>{step.title}</h3>
                <p className={styles.stepDesc}>{step.description}</p>
              </div>
            </li>
          );
        })}
      </ol>
    </section>
  );
};