// Featured Projects — 6 case studies, editorial grid with hover reveal
const Projects = () => {
  const [filter, setFilter] = React.useState('All');
  const [hover, setHover] = React.useState(null);

  const projects = [
    {
      id: 'P-001',
      name: 'The Laurel Coast',
      location: 'Naples, FL',
      type: 'Ground-Up',
      category: 'Resort',
      year: '2024',
      scope: 'Ground-up 186-key beachfront resort with two signature restaurants, rooftop bar, and full-service spa.',
      stats: [['186', 'keys'], ['$142M', 'value'], ['24 mo', 'duration']],
      imgDesc: 'Oceanfront view of a 5-story contemporary resort at golden hour; white stucco, shell-colored louvers, palm-lined pool deck in foreground.',
    },
    {
      id: 'P-002',
      name: 'Magnolia House Renovation',
      location: 'Charleston, SC',
      type: 'Renovation / PIP',
      category: 'Boutique Hotel',
      year: '2023',
      scope: 'Full guestroom PIP across 94 keys in a historic Charleston property. Operated at 71% occupancy through duration.',
      stats: [['94', 'keys'], ['$18M', 'value'], ['11 mo', 'live-hotel']],
      imgDesc: 'Restored historic hotel facade in downtown Charleston; wrought iron balconies, hurricane shutters, cobblestone sidewalk.',
    },
    {
      id: 'P-003',
      name: 'Hammock Dunes Spa Pavilion',
      location: 'Amelia Island, FL',
      type: 'Amenity Buildout',
      category: 'Spa',
      year: '2023',
      scope: 'Standalone 14,000 sf spa and wellness pavilion with saltwater hydrotherapy, 8 treatment rooms, and outdoor yoga platform.',
      stats: [['14K sf', 'program'], ['$9.2M', 'value'], ['9 mo', 'duration']],
      imgDesc: 'Teak-clad spa pavilion nestled between sea oats and palmetto; clerestory windows, reflecting pool at entrance.',
    },
    {
      id: 'P-004',
      name: 'Tybee Beach Club',
      location: 'Tybee Island, GA',
      type: 'Ground-Up',
      category: 'Beach Club',
      year: '2022',
      scope: 'Private beach club with member dining, bathhouse, pool complex, and event lawn. V-zone foundation.',
      stats: [['22K sf', 'program'], ['$14M', 'value'], ['CCCL', 'permit']],
      imgDesc: 'Low-slung beach club on stilts over dunes; weathered cypress, galvanized roof, loungers on a bleached wood deck.',
    },
    {
      id: 'P-005',
      name: 'Kiawah Brand Repositioning',
      location: 'Kiawah Island, SC',
      type: 'Renovation / PIP',
      category: 'Resort',
      year: '2025',
      scope: 'Flag conversion from independent to major soft brand. 248 keys, all public spaces, two restaurants, spa refresh.',
      stats: [['248', 'keys'], ['$34M', 'value'], ['14 mo', 'live-hotel']],
      imgDesc: 'Resort lobby interior during soft-brand conversion; double-height atrium, terrazzo floors, custom millwork reception.',
    },
    {
      id: 'P-006',
      name: 'Savannah Harbor Marina',
      location: 'Savannah, GA',
      type: 'Ground-Up',
      category: 'Marina / F&B',
      year: '2024',
      scope: 'Marina clubhouse with 120-seat dockside restaurant, ship store, and 60-slip expansion. DEP-permitted.',
      stats: [['60', 'slips'], ['$22M', 'value'], ['18 mo', 'duration']],
      imgDesc: 'Dockside restaurant and marina with sailboats at dusk; string lights, covered deck, Savannah skyline in background.',
    },
  ];

  const filters = ['All', 'Ground-Up', 'Renovation / PIP', 'Amenity Buildout'];
  const visible = filter === 'All' ? projects : projects.filter(p => p.type === filter);

  return (
    <section id="projects" style={{ background: 'var(--bone-50)', padding: 'var(--sp-10) 0' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--page-pad-x)' }}>
        <div className="reveal" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, alignItems: 'end', marginBottom: 48, paddingBottom: 32, borderBottom: '1px solid rgba(10,22,40,0.15)' }}>
          <div className="eyebrow">── (04) · Selected Work</div>
          <h2 style={{ fontSize: 'var(--fs-4xl)', lineHeight: 1, letterSpacing: '-0.025em' }}>
            Six from the<br /><em style={{ fontStyle: 'italic', color: 'var(--brass-500)' }}>last three seasons.</em>
          </h2>
        </div>

        <div className="reveal proj-filters" style={{ display: 'flex', gap: 8, marginBottom: 64, flexWrap: 'wrap' }}>
          {filters.map(f => (
            <button
              key={f}
              onClick={() => setFilter(f)}
              style={{
                padding: '10px 18px',
                fontSize: 12,
                letterSpacing: '0.1em',
                textTransform: 'uppercase',
                fontFamily: 'var(--font-mono)',
                border: '1px solid rgba(10,22,40,0.18)',
                background: filter === f ? 'var(--navy-900)' : 'transparent',
                color: filter === f ? 'var(--bone-100)' : 'var(--ink-700)',
                transition: 'all 0.3s',
              }}
            >
              {f}
            </button>
          ))}
          <div className="proj-count" style={{ marginLeft: 'auto', alignSelf: 'center', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-500)', letterSpacing: '0.08em' }}>
            {String(visible.length).padStart(2, '0')} projects
          </div>
        </div>

        <div className="proj-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 32, rowGap: 80 }}>
          {visible.map((p, i) => {
            // Editorial grid: alternating column spans for rhythm
            const layout = [
              { col: '1 / 8', feature: true },
              { col: '9 / 13', feature: false },
              { col: '1 / 5', feature: false },
              { col: '6 / 13', feature: true },
              { col: '1 / 8', feature: true },
              { col: '9 / 13', feature: false },
            ][i] || { col: '1 / 13', feature: false };

            const isHover = hover === p.id;

            return (
              <article
                key={p.id}
                className="reveal"
                onMouseEnter={() => setHover(p.id)}
                onMouseLeave={() => setHover(null)}
                style={{
                  gridColumn: layout.col,
                  cursor: 'pointer',
                  '--reveal-delay': `${i * 60}ms`,
                }}
              >
                <div style={{ position: 'relative', overflow: 'hidden', background: 'var(--navy-900)' }}>
                  <Placeholder
                    id={p.id}
                    label={p.name.toUpperCase()}
                    desc={p.imgDesc}
                    style={{
                      width: '100%',
                      aspectRatio: layout.feature ? '16/10' : '4/5',
                      transform: isHover ? 'scale(1.04)' : 'scale(1)',
                      transition: 'transform 1.2s cubic-bezier(0.2, 0.7, 0.1, 1)',
                    }}
                  />
                  <div
                    style={{
                      position: 'absolute',
                      inset: 0,
                      background: 'linear-gradient(180deg, rgba(10,22,40,0) 50%, rgba(10,22,40,0.8) 100%)',
                      opacity: isHover ? 1 : 0.6,
                      transition: 'opacity 0.4s',
                    }}
                  />
                  <div
                    style={{
                      position: 'absolute',
                      bottom: 24, left: 24, right: 24,
                      color: 'var(--bone-100)',
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'flex-end',
                      gap: 16,
                    }}
                  >
                    <div>
                      <div className="mono" style={{ opacity: 0.7, fontSize: 10, marginBottom: 8 }}>
                        {p.id} · {p.year}
                      </div>
                      <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-2xl)', lineHeight: 1.05, letterSpacing: '-0.015em' }}>
                        {p.name}
                      </div>
                    </div>
                    <div style={{
                      opacity: isHover ? 1 : 0,
                      transform: isHover ? 'translateY(0)' : 'translateY(8px)',
                      transition: 'all 0.4s',
                      fontSize: 12,
                      letterSpacing: '0.14em',
                      textTransform: 'uppercase',
                      padding: '10px 14px',
                      background: 'var(--brass-500)',
                      color: 'var(--navy-900)',
                      flexShrink: 0,
                    }}>
                      Case study →
                    </div>
                  </div>
                </div>

                <div className="proj-meta" style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 24, marginTop: 20, alignItems: 'baseline' }}>
                  <div className="mono" style={{ color: 'var(--ink-500)' }}>{p.location}</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-700)' }}>{p.type} · {p.category}</div>
                  <div className="mono" style={{ color: 'var(--brass-600)' }}>{p.stats[0][0]} {p.stats[0][1]}</div>
                </div>
                <p style={{ marginTop: 12, fontSize: 14, color: 'var(--ink-500)', maxWidth: '68ch', lineHeight: 1.55 }}>
                  {p.scope}
                </p>
              </article>
            );
          })}
        </div>

        <div className="reveal proj-footer" style={{ marginTop: 96, paddingTop: 32, borderTop: '1px solid rgba(10,22,40,0.15)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontSize: 'var(--fs-lg)', maxWidth: '48ch', color: 'var(--ink-700)' }}>
            Project binder with full references, ownership references, and brand QA reports available under NDA.
          </div>
          <a href="#contact" style={{ fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', padding: '14px 24px', border: '1px solid var(--navy-900)', color: 'var(--navy-900)', transition: 'all 0.3s' }}
            onMouseEnter={e => { e.currentTarget.style.background = 'var(--navy-900)'; e.currentTarget.style.color = 'var(--bone-100)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--navy-900)'; }}
          >
            Request binder →
          </a>
        </div>
      </div>
    </section>
  );
};

window.Projects = Projects;