// Services — 6 core hospitality services, editorial grid
const Services = () => {
  const [active, setActive] = React.useState(0);

  const services = [
    {
      n: '01',
      title: 'Ground-Up Development',
      lede: 'Full hotel and resort construction, from raw site through turnover.',
      body: 'Boutique beachfront, flagged full-service, branded residences. We manage the critical path from site mobilization through brand walk-through — integrating coastal foundations, hurricane-rated envelopes, and back-of-house systems built for 365-day operation.',
      meta: ['Avg. duration 18–28 mo', 'Keys 80–400', 'AIA A133 / CM-at-Risk'],
    },
    {
      n: '02',
      title: 'Hotel Renovations & PIPs',
      lede: 'Brand-mandated Property Improvement Plans, refreshes, and repositionings.',
      body: 'Hilton, Marriott, IHG, Hyatt — we execute PIP scopes to brand standards on the calendar the franchise demands. Floor-by-floor phasing, brand QA coordination, and documented compliance packages delivered back to ownership.',
      meta: ['Brand-approved vendor', 'PIP documentation', 'Phased occupancy'],
    },
    {
      n: '03',
      title: 'F&B + Amenity Buildouts',
      lede: 'Restaurants, rooftop bars, spas, pool pavilions, marina clubhouses.',
      body: 'Revenue-generating amenities where every week of delay is quantifiable loss. We deliver signature restaurants, rooftop programs, and spa facilities with kitchen and MEP coordination that survives opening weekend.',
      meta: ['Kitchen coordination', 'Health dept liaison', 'ABC licensing path'],
    },
    {
      n: '04',
      title: 'Design-Build',
      lede: 'Single-source delivery from concept through punchlist.',
      body: 'One contract, one accountable team. We partner with hospitality-native architects and interior designers to compress schedule, contain cost, and hold the design intent from schematic through closeout.',
      meta: ['GMP at 60% DD', 'Owner rep integrated', 'Single point of risk'],
    },
    {
      n: '05',
      title: 'Coastal Permitting',
      lede: 'DEP, FEMA flood zones, CCCL — the work most GCs outsource.',
      body: 'Coastal Construction Control Line permits, flood-zone elevation compliance, DEP shoreline approvals, and wetlands coordination handled in-house. We de-risk the earliest and hardest phase of any oceanfront project.',
      meta: ['CCCL permits', 'V-zone & A-zone', 'Sea turtle lighting'],
    },
    {
      n: '06',
      title: 'Sustainability & LEED',
      lede: 'LEED certification paths and operational-carbon reduction programs.',
      body: 'LEED-accredited PMs guide projects from silver through platinum. We specify coastal materials that pass salt-spray and embodied-carbon criteria simultaneously — the brief most hospitality owners now require.',
      meta: ['LEED AP staff', 'ESG reporting', 'Coastal-rated materials'],
    },
  ];

  return (
    <section id="services" 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: 96, paddingBottom: 32, borderBottom: '1px solid rgba(10,22,40,0.15)' }}>
          <div className="eyebrow">── (02) · Services</div>
          <h2 style={{ fontSize: 'var(--fs-4xl)', lineHeight: 1, letterSpacing: '-0.025em' }}>
            Six disciplines,<br /><em style={{ fontStyle: 'italic', color: 'var(--brass-500)' }}>one vertical.</em>
          </h2>
        </div>

        <div className="svc-grid" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'start' }}>
          {/* Service list */}
          <div>
            {services.map((s, i) => (
              <div
                key={s.n}
                onMouseEnter={() => setActive(i)}
                className="reveal svc-row"
                style={{
                  padding: '28px 0',
                  borderTop: '1px solid rgba(10,22,40,0.12)',
                  cursor: 'pointer',
                  transition: 'all 0.4s',
                  opacity: active === i ? 1 : 0.55,
                  paddingLeft: active === i ? 24 : 0,
                  '--reveal-delay': `${i * 60}ms`,
                }}
              >
                <div className="svc-row-head" style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 32, alignItems: 'baseline' }}>
                  <span className="mono" style={{ color: 'var(--brass-500)' }}>{s.n}</span>
                  <h3 style={{ fontSize: 'var(--fs-2xl)', letterSpacing: '-0.015em' }}>{s.title}</h3>
                  <span style={{ fontSize: 18, opacity: 0.4, transition: 'transform 0.3s', transform: active === i ? 'rotate(45deg)' : 'rotate(0deg)' }}>+</span>
                </div>
                <p style={{ marginTop: 12, color: 'var(--ink-500)', maxWidth: '56ch', paddingLeft: 64 }}>{s.lede}</p>
              </div>
            ))}
            <div style={{ borderTop: '1px solid rgba(10,22,40,0.12)' }} />
          </div>

          {/* Active detail panel */}
          <div
            className="svc-panel"
            style={{
              position: 'sticky',
              top: 120,
              background: 'var(--navy-900)',
              color: 'var(--bone-100)',
              padding: 48,
              minHeight: 520,
            }}
          >
            <div className="mono" style={{ color: 'var(--brass-400)', fontSize: 10 }}>
              Service · {services[active].n}
            </div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-3xl)', letterSpacing: '-0.02em', marginTop: 20, marginBottom: 28 }}>
              {services[active].title}
            </h3>
            <p style={{ fontSize: 'var(--fs-lg)', opacity: 0.85, lineHeight: 1.55, marginBottom: 40 }}>
              {services[active].body}
            </p>
            <div style={{ borderTop: '1px solid rgba(242,237,228,0.18)', paddingTop: 24, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {services[active].meta.map(m => (
                <div key={m} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 13, opacity: 0.75 }}>
                  <span style={{ width: 16, height: 1, background: 'var(--brass-400)' }} />
                  {m}
                </div>
              ))}
            </div>

            <div style={{ marginTop: 48 }}>
              <Placeholder
                id={`svc-0${active + 1}`}
                label={services[active].title.toUpperCase()}
                desc="Detail shot illustrating this service discipline."
                style={{ width: '100%', aspectRatio: '4/3' }}
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Services = Services;
