// About + Timeline since 2006
const About = () => {
  const events = [
    { year: '2006', city: 'Savannah, GA', title: 'Founded', body: 'Palmetto Build Group opens on Factors Walk with three staff and a single ground-up boutique hotel contract on Tybee Island.' },
    { year: '2009', city: 'Amelia Island, FL', title: 'First Florida project', body: 'Cross-border expansion with a spa and amenity addition to an established Gulf resort. First CCCL-permitted build.' },
    { year: '2012', city: 'Hilton Head, SC', title: 'Second office opens', body: 'Hilton Head office opens to serve the Lowcountry resort corridor. Headcount reaches 22.' },
    { year: '2015', city: 'Savannah, GA', title: 'First live-hotel PIP', body: 'Flag-brand PIP completed at full occupancy. The methodology now formalized as our Live-Hotel Construction practice.' },
    { year: '2018', city: 'Naples, FL', title: 'Naples regional office', body: 'Gulf Coast expansion. Third office opens to cover Naples, Marco, and the Keys.' },
    { year: '2021', city: 'Firm-wide', title: '$1B threshold', body: 'Cumulative construction value managed crosses $1B. Staff of 64 across three offices.' },
    { year: '2024', city: 'Kiawah, SC', title: 'Soft-brand conversion', body: '248-key flag conversion delivered at 71% occupancy. Zero measurable revenue loss against trailing baseline.' },
    { year: '2026', city: 'FL · GA · SC', title: 'Today', body: 'Eleven projects on-site across the corridor. Hospitality-only mandate unchanged since founding.' },
  ];

  return (
    <section id="about" 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">── (06) · Studio</div>
          <h2 style={{ fontSize: 'var(--fs-4xl)', lineHeight: 1, letterSpacing: '-0.025em' }}>
            A firm built<br /><em style={{ fontStyle: 'italic', color: 'var(--brass-500)' }}>on one trade.</em>
          </h2>
        </div>

        <div className="about-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 96, marginBottom: 128 }}>
          <div className="reveal">
            <Placeholder
              id="about-01"
              label="PRINCIPALS ON-SITE"
              desc="Three principals in coordinated dress on an active job site: hard hats tucked under arms, reviewing drawings on a field table with a resort shell behind them at dawn."
              style={{ width: '100%', aspectRatio: '4/5' }}
            />
          </div>
          <div className="reveal" style={{ '--reveal-delay': '100ms' }}>
            <p style={{ fontSize: 'var(--fs-2xl)', lineHeight: 1.3, letterSpacing: '-0.01em', marginBottom: 40, color: 'var(--navy-900)', maxWidth: '32ch' }}>
              Palmetto was started on a simple premise: hotels are not like other buildings, and the people who build them shouldn't pretend they are.
            </p>
            <p style={{ fontSize: 'var(--fs-lg)', color: 'var(--ink-700)', lineHeight: 1.6, marginBottom: 24, maxWidth: '54ch' }}>
              For eighteen years we have turned that premise down — declining office parks, medical facilities, and the adjacent commercial work that most general contractors chase between hospitality cycles. The refusal is what made the expertise.
            </p>
            <p style={{ fontSize: 'var(--fs-lg)', color: 'var(--ink-700)', lineHeight: 1.6, marginBottom: 48, maxWidth: '54ch' }}>
              Today our staff of 72 operates from three offices on the Atlantic and Gulf coasts. Every principal has twenty years of hospitality-exclusive experience. Every project manager is brand-trained by at least one major flag.
            </p>

            <div className="about-stats" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, paddingTop: 32, borderTop: '1px solid rgba(10,22,40,0.15)' }}>
              {[
                ['72', 'Full-time staff'],
                ['3', 'Regional offices'],
                ['100%', 'Hospitality focus'],
              ].map(([k, v]) => (
                <div key={k}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-3xl)', lineHeight: 1 }}>{k}</div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--ink-500)', marginTop: 8 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Timeline */}
        <div>
          <div className="eyebrow reveal" style={{ marginBottom: 32 }}>── 2006 → Present</div>
          <div className="timeline" style={{ position: 'relative', paddingLeft: 40 }}>
            <div style={{ position: 'absolute', left: 10, top: 8, bottom: 8, width: 1, background: 'rgba(10,22,40,0.18)' }} />
            {events.map((e, i) => (
              <div
                key={e.year}
                className="reveal timeline-row"
                style={{
                  display: 'grid',
                  gridTemplateColumns: '120px 1fr 2fr',
                  gap: 40,
                  padding: '28px 0',
                  borderTop: i === 0 ? 'none' : '1px solid rgba(10,22,40,0.1)',
                  position: 'relative',
                  '--reveal-delay': `${i * 50}ms`,
                }}
              >
                <div
                  style={{
                    position: 'absolute',
                    left: -35,
                    top: 32,
                    width: 10,
                    height: 10,
                    borderRadius: '50%',
                    background: i === events.length - 1 ? 'var(--brass-500)' : 'var(--navy-900)',
                    outline: i === events.length - 1 ? '4px solid rgba(184,151,90,0.2)' : 'none',
                  }}
                />
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-2xl)', color: i === events.length - 1 ? 'var(--brass-600)' : 'var(--navy-900)' }}>
                  {e.year}
                </div>
                <div>
                  <div style={{ fontSize: 'var(--fs-lg)', letterSpacing: '-0.01em' }}>{e.title}</div>
                  <div className="mono" style={{ marginTop: 6, color: 'var(--ink-500)' }}>{e.city}</div>
                </div>
                <p style={{ fontSize: 15, color: 'var(--ink-700)', lineHeight: 1.55 }}>{e.body}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.About = About;