/* global React */
// Home page sections — Heritage + Catalog + Delivery

/* ================== HERITAGE PORTFOLIO ================== */
const PROJECTS = [
  {
    label: 'Restoration Supply',
    name: 'Mysore Palace',
    year: '2011–2014',
    role: 'Heritage restoration cement supply',
    tag: '1200 MT · White OPC',
    pattern: 'palace'
  },
  {
    label: 'Infrastructure Support',
    name: 'Chamundi Temple',
    year: '1998',
    role: 'Plaza paving & reinforcement works',
    tag: '4200 bags · OPC 53',
    pattern: 'temple'
  },
  {
    label: 'Strategic Supply',
    name: 'RBI Note Press',
    year: '2005–2007',
    role: 'High-security facility · RMC + OPC',
    tag: 'M40 RMC · 8,400 m³',
    pattern: 'press'
  },
  {
    label: 'Structural Reinforcement',
    name: 'KRS Dam',
    year: '2019 Works',
    role: 'Spillway rehabilitation partnership',
    tag: 'M50 · PSC Dam Mix',
    pattern: 'dam'
  },
];

const ProjectArt = ({ kind }) => {
  // monochrome pattern visuals, no external imagery
  const common = { width: '100%', height: '100%', display: 'block' };
  switch (kind) {
    case 'palace':
      return (
        <img
          src="assets/heritage-mysore-palace.jpg"
          alt="Mysore Palace"
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
        />
      );
    case 'temple':
      return (
        <img
          src="assets/heritage-chamundi-temple.jpg"
          alt="Chamundi Temple, Mysore"
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
        />
      );
    case 'press':
      return (
        <svg viewBox="0 0 200 260" preserveAspectRatio="xMidYMid slice" style={common}>
          <rect width="200" height="260" fill="#1A1A1A" />
          {/* institutional brutalist block */}
          <rect x="20" y="80" width="160" height="140" fill="#262626" />
          {/* vertical fins */}
          {Array.from({length: 12}).map((_,i)=> (
            <rect key={i} x={26 + i*13} y={90} width="6" height="120" fill="#1A1A1A" />
          ))}
          {/* roof slab */}
          <rect x="14" y="72" width="172" height="10" fill="#333" />
          {/* entrance */}
          <rect x="88" y="190" width="24" height="30" fill="#0A0A0A" />
          <rect x="82" y="188" width="36" height="4" fill="#3A3A3A" />
          {/* ground */}
          <rect y="220" width="200" height="40" fill="#0E0E0E" />
          {/* security light */}
          <rect x="94" y="60" width="12" height="4" fill="#F0C000" />
          <g opacity="0.06" fill="#fff">
            {Array.from({length: 65}).map((_,i)=> <rect key={i} y={i*4} width="200" height="1" /> )}
          </g>
        </svg>
      );
    case 'dam':
      return (
        <img
          src="assets/heritage-krs-dam.jpg"
          alt="KRS Dam spillway"
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
        />
      );
    default: return null;
  }
};

const HeritagePortfolio = () => {
  const isMobile = useIsMobile();
  return (
    <section style={{ background: 'var(--ra-bg-alt)', padding: isMobile ? '48px 0' : '96px 0' }}>
      <div className="ra-container">
        <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr auto', gap: 48, marginBottom: 56, alignItems: 'end' }}>
          <div className="ra-mono" style={{ color: 'var(--ra-muted)', fontSize: 12, letterSpacing: 2 }}>02 / WORKS</div>
          <div>
            <div className="ra-label" style={{ marginBottom: 14 }}>Heritage Portfolio</div>
            <h2 className="ra-display-m">Building Mysore's<br />Landmarks Since 1972.</h2>
          </div>
          <a href="Showcase.html" className="ra-btn ra-btn--ghost">
            View full showcase
            <RaIcon name="arrow-up-right" size={14} stroke={2.5} />
          </a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)', gap: 2, background: 'var(--ra-border-strong)' }}>
          {PROJECTS.map((p, i) => (
            <article key={p.name} style={{
              background: 'var(--ra-bg)', position: 'relative',
              display: 'flex', flexDirection: 'column'
            }}>
              <div style={{ position: 'relative', aspectRatio: '10/13', overflow: 'hidden' }}>
                <ProjectArt kind={p.pattern} />
                <div style={{
                  position: 'absolute', top: 16, left: 16,
                  background: 'var(--ra-ink)', color: '#fff',
                  padding: '6px 10px', fontFamily: 'var(--ra-font-mono)', fontSize: 10, letterSpacing: 1.5
                }}>
                  {String(i + 1).padStart(2, '0')}
                </div>
                <div style={{
                  position: 'absolute', bottom: 16, right: 16,
                  background: 'var(--ra-yellow)', color: 'var(--ra-ink)',
                  padding: '6px 10px', fontFamily: 'var(--ra-font-mono)', fontSize: 10, letterSpacing: 1,
                  whiteSpace: 'nowrap'
                }}>
                  {p.year}
                </div>
              </div>
              <div style={{ padding: '24px 22px 28px' }}>
                <div className="ra-label" style={{ marginBottom: 12 }}>{p.label}</div>
                <h3 className="ra-h3" style={{ fontSize: 22, marginBottom: 10 }}>{p.name}</h3>
                <p style={{ color: 'var(--ra-muted)', fontSize: 14, lineHeight: 1.55, marginBottom: 20 }}>
                  {p.role}
                </p>
                <hr className="ra-rule" />
                <div className="ra-mono" style={{ color: 'var(--ra-ink)', fontSize: 11, marginTop: 14, letterSpacing: 1.5 }}>
                  {p.tag}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { HeritagePortfolio });