// Live-Hotel Construction methodology — unique advantage
const Methodology = () => {
  const [phase, setPhase] = React.useState(0);

  const phases = [
    {
      n: '01',
      title: 'Silent Mobilization',
      body: 'Site command set up behind the back-of-house, not the porte-cochère. Deliveries staged pre-dawn. Guest-facing circulation preserved from day one.',
      metric: 'Zero guest complaints related to site presence — measured weekly via on-property survey.',
    },
    {
      n: '02',
      title: 'Floor-Stack Phasing',
      body: 'Work proceeds in vertical stacks, never horizontal sweeps. Adjacent rooms stay revenue-active. HVAC, water, and low-voltage are isolated per riser.',
      metric: 'Typical occupancy held at 68–82% through active PIP phase — versus 30–45% industry average.',
    },
    {
      n: '03',
      title: 'Quiet Hours Discipline',
      body: '10:00 AM – 4:00 PM construction window for guest-adjacent floors. Loud trades — demo, core drilling, MEP rough — confined to pre-check-in hours.',
      metric: 'Sound monitoring at guest-door threshold; caps held at 55 dB during quiet hours.',
    },
    {
      n: '04',
      title: 'Revenue Protection Plan',
      body: 'Weekly meetings with F&B, rooms division, and revenue management. Schedule flexes around group bookings, wedding blocks, and high-compression weekends.',
      metric: 'Measured lift: $0.00 lost revenue across 7 of last 9 live-hotel PIPs.',
    },
    {
      n: '05',
      title: 'Brand-Front Turnover',
      body: 'Each completed stack walked by brand QA before release. Punch closed room-by-room, not project-end. Guests occupy a finished room, never a closeout zone.',
      metric: 'Average rework after brand walk: 0.8 items per room (industry benchmark: 6–9).',
    },
  ];

  return (
    <section id="methodology" style={{ background: 'var(--navy-900)', color: 'var(--bone-100)', padding: 'var(--sp-10) 0', position: 'relative' }}>
      <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(242,237,228,0.18)' }}>
          <div className="eyebrow eyebrow--light">── (03) · Methodology · Live-Hotel Construction</div>
          <h2 style={{ fontSize: 'var(--fs-4xl)', lineHeight: 1, letterSpacing: '-0.025em' }}>
            Renovating without<br />the <em style={{ fontStyle: 'italic', color: 'var(--brass-400)' }}>Closed</em> sign.
          </h2>
        </div>

        <div className="method-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 96, alignItems: 'start' }}>
          <div>
            <p className="reveal" style={{ fontSize: 'var(--fs-lg)', opacity: 0.85, lineHeight: 1.55, marginBottom: 40 }}>
              A brand-mandated PIP arrives with a schedule. The hotel arrives with bookings. Most GCs ask the owner to choose. We don't.
            </p>
            <p className="reveal" style={{ fontSize: 'var(--fs-lg)', opacity: 0.85, lineHeight: 1.55, marginBottom: 40, '--reveal-delay': '80ms' }}>
              Eighteen years of live-hotel work has produced a five-phase methodology that keeps the lobby open, the restaurant humming, and the ADR intact — while the renovation hits every brand deadline.
            </p>

            <div className="reveal" style={{ background: 'var(--navy-700)', padding: 32, marginTop: 48, borderLeft: '3px solid var(--brass-500)', '--reveal-delay': '160ms' }}>
              <div className="mono" style={{ color: 'var(--brass-400)', fontSize: 10, marginBottom: 12 }}>Operating Record</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-3xl)', lineHeight: 1, marginBottom: 16 }}>
                $0 lost revenue
              </div>
              <div style={{ fontSize: 13, opacity: 0.75 }}>
                across 7 of the last 9 occupied-renovation projects — audited against trailing-year ADR and occupancy baselines.
              </div>
            </div>
          </div>

          <div>
            {/* Phase stepper */}
            <div className="method-tabs" style={{ display: 'flex', gap: 0, marginBottom: 32, borderBottom: '1px solid rgba(242,237,228,0.12)' }}>
              {phases.map((p, i) => (
                <button
                  key={p.n}
                  onClick={() => setPhase(i)}
                  style={{
                    flex: 1,
                    padding: '16px 8px',
                    fontFamily: 'var(--font-mono)',
                    fontSize: 10,
                    letterSpacing: '0.12em',
                    textTransform: 'uppercase',
                    borderBottom: phase === i ? '2px solid var(--brass-500)' : '2px solid transparent',
                    color: phase === i ? 'var(--brass-400)' : 'rgba(242,237,228,0.5)',
                    marginBottom: -1,
                    transition: 'all 0.3s',
                  }}
                >
                  Phase {p.n}
                </button>
              ))}
            </div>

            {/* Phase detail */}
            <div key={phase} style={{ animation: 'fadeUp 0.5s cubic-bezier(0.2, 0.7, 0.1, 1)' }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 24, marginBottom: 24 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-5xl)', lineHeight: 1, color: 'rgba(242,237,228,0.15)' }}>
                  {phases[phase].n}
                </span>
                <h3 style={{ fontSize: 'var(--fs-3xl)', letterSpacing: '-0.02em' }}>
                  {phases[phase].title}
                </h3>
              </div>
              <p style={{ fontSize: 'var(--fs-lg)', opacity: 0.85, lineHeight: 1.6, marginBottom: 40, maxWidth: '52ch' }}>
                {phases[phase].body}
              </p>

              <div style={{ padding: 24, background: 'rgba(184,151,90,0.08)', borderLeft: '2px solid var(--brass-500)' }}>
                <div className="mono" style={{ color: 'var(--brass-400)', fontSize: 10, marginBottom: 8 }}>Measured outcome</div>
                <div style={{ fontSize: 'var(--fs-base)', lineHeight: 1.5 }}>{phases[phase].metric}</div>
              </div>

              <div style={{ marginTop: 40 }}>
                <Placeholder
                  id={`method-0${phase + 1}`}
                  label={phases[phase].title.toUpperCase()}
                  desc="Documentation shot illustrating this phase of live-hotel methodology — guest-side lobby still operating while back-of-house construction proceeds."
                  style={{ width: '100%', aspectRatio: '16/9' }}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @keyframes fadeUp {
          from { opacity: 0; transform: translateY(12px); }
          to { opacity: 1; transform: none; }
        }
      `}</style>
    </section>
  );
};

window.Methodology = Methodology;