VG-Fence-Products-NextJS/components/Staining/StainingServiceSection.tsx

"use client";

interface Spec {
  key: string;
  val: string;
  isOrange?: boolean;
}

interface StainingServiceSectionProps {
  id: string;
  serviceNum: string;
  title: string;
  tagline: string;
  description: string;
  specsTitle1: string;
  specs1: Spec[];
  specsTitle2?: string;
  specs2?: Spec[];
  bgColor: 'bg-white' | 'bg-gray' | 'bg-navy' | 'bg-cream';
  reverse?: boolean;
  photoLabel: string;
  photoSub1: string;
  photoSub2: string;
  isDark?: boolean;
  image?: string;
  imageSmall1?: string;
  imageSmall2?: string;
  extraInfo?: {
    title: string;
    desc: string;
  };
}

export default function StainingServiceSection({
  id,
  serviceNum,
  title,
  tagline,
  description,
  specsTitle1,
  specs1,
  specsTitle2,
  specs2,
  bgColor,
  reverse = false,
  photoLabel,
  photoSub1,
  photoSub2,
  isDark = false,
  image,
  imageSmall1,
  imageSmall2,
  extraInfo
}: StainingServiceSectionProps) {
  const PhotoIcon = ({ size = 48, color = "#B0ADA6" }) => (
    <svg className="photo-icon" width={size} height={size} viewBox="0 0 48 48" fill="none">
      <rect x="4" y="10" width="40" height="30" rx="4" stroke={color} strokeWidth="2" />
      <circle cx="17" cy="22" r="5" stroke={color} strokeWidth="2" />
      <path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke={color} strokeWidth="2" fill="none" />
    </svg>
  );

  return (
    <section className={`model-section ${bgColor}`} id={id}>
      <div className={`model-layout reveal ${reverse ? 'reverse' : ''}`}>
        <div className="model-content-col">
          <div className="model-accent-strip"></div>
          <div className={`model-label ${isDark ? 'dim' : ''}`}>Service {serviceNum}</div>
          <div className={`model-name ${isDark ? 'white' : ''}`} dangerouslySetInnerHTML={{ __html: title }}></div>
          <div className="model-tagline">{tagline}</div>
          <p className={`model-desc ${isDark ? 'white' : ''}`}>{description}</p>

          <div className="specs-block">
            <div className={`specs-title ${isDark ? 'white' : ''}`}>{specsTitle1}</div>
            {specs1.map((spec, i) => (
              <div key={i} className={`spec-row ${isDark ? 'white-row' : ''}`}>
                <span className={`spec-key ${isDark ? 'white' : ''}`}>{spec.key}</span>
                <span className={`spec-val ${isDark ? 'white' : ''} ${spec.isOrange ? 'orange' : ''}`}>{spec.val}</span>
              </div>
            ))}
          </div>

          {specs2 && specsTitle2 && (
            <div className="specs-block">
              <div className={`specs-title ${isDark ? 'white' : ''}`}>{specsTitle2}</div>
              {specs2.map((spec, i) => (
                <div key={i} className={`spec-row ${isDark ? 'white-row' : ''}`}>
                  <span className={`spec-key ${isDark ? 'white' : ''}`}>{spec.key}</span>
                  <span className={`spec-val ${isDark ? 'white' : ''} ${spec.isOrange ? 'orange' : ''}`}>{spec.val}</span>
                </div>
              ))}
            </div>
          )}

          {extraInfo && (
            <div className="model-extra-info">
              <div className="model-extra-info-title">{extraInfo.title}</div>
              <div className={`model-extra-info-desc ${isDark ? 'dark' : 'light'}`}>{extraInfo.desc}</div>
            </div>
          )}
        </div>
        <div className="model-image-col">
          <div className={`photo-area photo-area-large ${isDark ? 'dark-placeholder' : ''}`}>
            {image ? (
              <img src={image} alt={photoLabel} />
            ) : (
              <>
                <PhotoIcon color={isDark ? "rgba(255,255,255,.35)" : "#B0ADA6"} />
                <div className="photo-label">{photoLabel}</div>
                <div className="photo-sub">Upload project photo here</div>
              </>
            )}
          </div>
          <div className="photo-row-grid">
            <div className={`photo-area photo-area-small ${isDark ? 'dark-placeholder' : ''}`}>
              {imageSmall1 ? (
                <img src={imageSmall1} alt={photoSub1} />
              ) : (
                <>
                  <PhotoIcon size={32} color={isDark ? "rgba(255,255,255,.35)" : "#B0ADA6"} />
                  <div className="photo-sub photo-sub-small">{photoSub1}</div>
                </>
              )}
            </div>
            <div className={`photo-area photo-area-small ${isDark ? 'dark-placeholder' : ''}`}>
              {imageSmall2 ? (
                <img src={imageSmall2} alt={photoSub2} />
              ) : (
                <>
                  <PhotoIcon size={32} color={isDark ? "rgba(255,255,255,.35)" : "#B0ADA6"} />
                  <div className="photo-sub photo-sub-small">{photoSub2}</div>
                </>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}