/* eslint-disable */
// Section 06 — Featured Projects. Carousel of 3 projects, each split:
// asymmetric collage (left 55%) + text panel (right 45%).

const PROJECTS = [
  {
    name: 'SLS Hotels',
    sub: 'The Red Sea, Shura Island',
    body: "Unicraft delivered a full interior fit-out of bespoke joinery for Shura Island, crafted to the highest hospitality standards. Using FSC-certified veneer and teak wood, low-impact MDF, and Sirka sustainable paints, the team met the island's strict environmental specifications. Despite sourcing challenges, all materials passed Red Sea Global's rigorous inspections.",
    tags: ['Hospitality', 'Interior fit-out', 'FSC-certified materials'],
    images: [
      { src: 'assets/sls-suite-joinery.png', alt: 'SLS Hotels dining room with bespoke shelving and joinery', span: { col: '1 / 8', row: '1 / 3' }, cap: '// Dining hall, Shura Island' },
      { tone: 'detail', src: 'assets/uc-wood-swatches.jpeg', span: { col: '8 / 13', row: '1 / 2' }, cap: '// Veneer & finish' },
      { tone: 'grain', src: 'assets/uc-dining-chairs.jpeg', span: { col: '8 / 13', row: '2 / 3' }, cap: '// Bespoke seating' },
    ],
  },
  {
    name: 'Residence UC1010',
    sub: 'Private residence, Riyadh',
    body: "Engineered and executed the complete interior fit-out, including bespoke furniture, kitchens, and bedrooms. Working in close coordination with other members of Unicon Holding, the team crafted refined cabinetry featuring minimal 1 cm aluminum profiles, elegant glass integrations, and fully equipped show and service kitchens with premium accessories.",
    tags: ['Residential', 'Bespoke furniture', 'Kitchen fit-out'],
    images: [
      { tone: 'light', src: 'assets/uc-interior-credenza.jpeg',    span: { col: '1 / 7', row: '1 / 3' }, cap: '// Majlis cabinetry' },
      { tone: 'raking', src: 'assets/uc-interior-armchair.jpeg',   span: { col: '7 / 13', row: '1 / 2' }, cap: '// Lounge & lighting' },
      { tone: 'workshop', src: 'assets/uc-finishing-grain.jpeg', span: { col: '7 / 10', row: '2 / 3' }, cap: '// Finishing' },
      { tone: 'grain', src: 'assets/uc-editorial-books.jpeg',    span: { col: '10 / 13', row: '2 / 3' }, cap: '// Detail' },
    ],
  },
  {
    name: 'Residence UC1020',
    sub: 'Private residence, 5,000 sqm',
    body: "Developed detailed joinery shop drawings that seamlessly integrated onyx, brass, and curved oak wood, elegantly enveloping the majlis area. A defining highlight is the main entrance door, standing four metres high, crafted from solid teak wood on the exterior and oak veneer on the interior.",
    tags: ['Residential', 'Majlis', 'Bespoke joinery', '5,000 sqm'],
    images: [
      { tone: 'ash', src: 'assets/uc-heritage-table.jpeg',      span: { col: '1 / 8', row: '1 / 3' }, cap: '// Solid teak & oak' },
      { tone: 'light', src: 'assets/uc-about-bentwood.jpeg',    span: { col: '8 / 13', row: '1 / 2' }, cap: '// Curved oak panel' },
      { tone: 'detail', src: 'assets/uc-finish-samples.jpeg',   span: { col: '8 / 13', row: '2 / 3' }, cap: '// Material palette' },
    ],
  },
];

const Projects = () => {
  const [idx, setIdx] = React.useState(0);
  const p = PROJECTS[idx];
  const go = (i) => () => setIdx((i + PROJECTS.length) % PROJECTS.length);

  return (
    <section
      id="projects"
      data-screen-label="06 featured projects"
      style={{
        background: 'var(--color-off-white)',
        color: 'var(--color-near-black)',
        padding: '120px 0',
      }}
    >
      <div className="uc-shell">
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 64 }}>
            <div>
              <div className="uc-eyebrow" style={{ marginBottom: 24 }}>Featured projects</div>
              <h2 style={{
                fontFamily: 'var(--font-display)',
                fontWeight: 700,
                fontSize: 'clamp(40px, 5.4vw, 72px)',
                lineHeight: 0.98,
                letterSpacing: '-0.03em',
                textTransform: 'none',
                margin: 0,
                maxWidth: '14ch',
              }}>Proof of <span className="uc-bracket">work</span>.</h2>
            </div>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 16,
              fontFamily: 'var(--font-body)', fontSize: 13,
              letterSpacing: '0.06em',
              color: 'rgba(9,11,10,0.7)',
            }}>
              <span style={{ color: 'var(--color-deep-brown)', fontWeight: 600 }}>
                0{idx + 1}
              </span>
              <span>/ 0{PROJECTS.length}</span>
            </div>
          </div>
        </Reveal>

        <div style={{
          display: 'grid',
          gridTemplateColumns: '55% 1fr',
          gap: 64,
          alignItems: 'start',
        }}>
          <Reveal key={`grid-${idx}`}>
            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(12, 1fr)',
              gridAutoRows: 'minmax(220px, 1fr)',
              gap: 12,
              height: 620,
            }}>
              {p.images.map((img, i) => (
                img.src ? (
                  <div
                    key={i}
                    style={{
                      gridColumn: img.span.col,
                      gridRow: img.span.row,
                      position: 'relative',
                      overflow: 'hidden',
                      background: 'var(--color-deep-brown)',
                    }}
                  >
                    <img
                      src={(window.__resources && window.__resources[img.src]) || img.src}
                      alt={img.alt || img.cap || ''}
                      loading="lazy"
                      style={{
                        width: '100%', height: '100%',
                        objectFit: 'cover', objectPosition: 'center',
                        display: 'block',
                      }}
                    />
                    {img.cap && (
                      <div className="uc-photo__cap" style={{ color: 'rgba(229,229,222,0.85)' }}>{img.cap}</div>
                    )}
                  </div>
                ) : (
                  <Photo
                    key={i}
                    tone={img.tone}
                    caption={img.cap}
                    style={{ gridColumn: img.span.col, gridRow: img.span.row, height: '100%' }}
                  />
                )
              ))}
            </div>
          </Reveal>

          <Reveal key={`text-${idx}`} stagger>
            <div className="uc-eyebrow">Project {`0${idx + 1}`}</div>
            <div style={{ width: 1, height: 56, background: 'rgba(9,11,10,0.2)', margin: '20px 0 28px' }} />
            <h3 style={{
              fontFamily: 'var(--font-display)',
              fontWeight: 700,
              fontSize: 'clamp(36px, 4.2vw, 56px)',
              lineHeight: 1, letterSpacing: '-0.025em',
              textTransform: 'none',
              color: 'var(--color-deep-brown)',
              margin: 0,
            }}>{p.name}</h3>
            <div style={{
              fontFamily: 'var(--font-body)', fontSize: 14,
              color: 'rgba(9,11,10,0.65)', marginTop: 12, marginBottom: 32,
            }}>{p.sub}</div>

            <p style={{
              fontFamily: 'var(--font-body)',
              fontSize: 14.5, lineHeight: 1.75,
              maxWidth: '44ch', margin: 0,
            }}>{p.body}</p>

            <div style={{
              display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 32,
            }}>
              {p.tags.map((t) => (
                <span key={t} style={{
                  fontFamily: 'var(--font-body)', fontSize: 12,
                  letterSpacing: '0.04em',
                  padding: '6px 12px',
                  border: '1px solid rgba(9,11,10,0.22)',
                  color: 'rgba(9,11,10,0.75)',
                }}>{t}</span>
              ))}
            </div>

            <div style={{
              marginTop: 56, paddingTop: 32,
              borderTop: '1px solid rgba(9,11,10,0.15)',
              display: 'flex', gap: 32,
            }}>
              <button
                onClick={go(idx - 1)}
                aria-label="previous project"
                style={{
                  background: 'transparent', border: 0, padding: 0, cursor: 'pointer',
                  fontFamily: 'var(--font-body)', fontSize: 13,
                  letterSpacing: '0.04em',
                  color: 'var(--color-deep-brown)',
                }}>← Previous</button>
              <button
                onClick={go(idx + 1)}
                aria-label="next project"
                style={{
                  background: 'transparent', border: 0, padding: 0, cursor: 'pointer',
                  fontFamily: 'var(--font-body)', fontSize: 13,
                  letterSpacing: '0.04em',
                  color: 'var(--color-deep-brown)',
                  marginLeft: 'auto',
                }}>Next project →</button>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Projects });