import React from "react";
import Link from "next/link";
import PaymentHeroIllustration from "./PaymentHeroIllustration";
import styles from "./PaymentComponents.module.css";

interface PaymentHeroProps {
  tripId?: string;
}

export default function PaymentHero({ tripId }: PaymentHeroProps) {
  const bookingHref = tripId ? `/booking/${tripId}` : "/open-trip";

  return (
    <section className={styles.heroSection} aria-label="Intro Pembayaran">
      {/* 1. Breadcrumbs */}
      <nav className={styles.breadcrumbNav} aria-label="Breadcrumb">
        <ol className={styles.breadcrumbList}>
          <li className={styles.breadcrumbItem}>
            <Link href="/" className={styles.breadcrumbLink}>
              Beranda
            </Link>
          </li>
          <li className={styles.breadcrumbSeparator} aria-hidden="true">
            ›
          </li>
          <li className={styles.breadcrumbItem}>
            <Link href="/open-trip" className={styles.breadcrumbLink}>
              Open Trip
            </Link>
          </li>
          <li className={styles.breadcrumbSeparator} aria-hidden="true">
            ›
          </li>
          <li className={styles.breadcrumbItem}>
            <Link href={bookingHref} className={styles.breadcrumbLink}>
              Booking
            </Link>
          </li>
          <li className={styles.breadcrumbSeparator} aria-hidden="true">
            ›
          </li>
          <li className={styles.breadcrumbItemActive} aria-current="page">
            Pembayaran
          </li>
        </ol>
      </nav>

      {/* 2. Hero Content 2-Column */}
      <div className={styles.heroLayout}>
        <div className={styles.heroContentLeft}>
          <div className={styles.heroEyebrow}>
            <span className={styles.eyebrowLine} aria-hidden="true" />
            <span>PEMBAYARAN</span>
          </div>

          <h1 className={styles.heroTitle}>
            Selesaikan <span className={styles.heroTitleHighlight}>Pembayaran</span>
          </h1>

          <p className={styles.heroDescription}>
            Lakukan pembayaran sesuai instruksi di bawah ini untuk mengamankan kursi trip kamu.
            Setelah pembayaran dikonfirmasi, tim kami akan segera memproses bookingmu.
          </p>
        </div>

        <div className={styles.heroContentRight}>
          <PaymentHeroIllustration />
        </div>
      </div>
    </section>
  );
}