// Brand Partners — interactive, editorial presentation
const Partners = () => {
  const [active, setActive] = React.useState(0);

  const brands = [
    {
      name: 'Hilton',
      since: '2011',
      projects: 9,
      flags: ['Curio Collection', 'Tapestry', 'Canopy', 'Embassy Suites'],
      note: 'Approved GC for full-service + soft-brand PIPs across FL & SC. Brand QA accreditation current.',
    },
    {
      name: 'Marriott',
      since: '2013',
      projects: 12,
      flags: ['Autograph Collection', 'Tribute Portfolio', 'Westin', 'JW Marriott'],
      note: 'Delivered six PIPs and two ground-ups across the luxury and lifestyle tiers.',
    },
    {
      name: 'IHG',
      since: '2014',
      projects: 6,
      flags: ['Kimpton', 'Hotel Indigo', 'Vignette Collection'],
      note: 'Boutique repositionings and historic-property conversions in Charleston and Savannah.',
    },
    {
      name: 'Hyatt',
      since: '2016',
      projects: 4,
      flags: ['Thompson', 'The Unbound Collection', 'Destination by Hyatt'],
      note: 'Oceanfront amenity buildouts and two independent-to-soft-brand conversions.',
    },
    {
      name: 'Four Seasons',
      since: '2019',
      projects: 2,
      flags: ['Four Seasons Hotels & Resorts'],
      note: 'Spa and residence additions at existing resort properties. NDA references only.',
    },
    {
      name: 'Rosewood',
      since: '2020',
      projects: 2,
      flags: ['Rosewood Hotels'],
      note: 'Pre-opening construction on one estate-scale Gulf property; amenity program on a second.',
    },
    {
      name: 'Auberge',
      since: '2021',
      projects: 3,
      flags: ['Auberge Resorts Collection'],
      note: 'Two coastal estate resorts and one wellness pavilion across GA Golden Isles.',
    },
    {
      name: 'Independents',
      since: '2006',
      projects: 28,
      flags: ['Private owners', 'Ownership groups', 'Family offices'],
      note: 'Boutique, independent, and owner-operated properties remain the largest share of our work.',
    },
  ];

  const b = brands[active];

  return (
    <section style={{ background: 'var(--navy-900)', color: 'var(--bone-100)', 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(242,237,228,0.18)' }}>
          <div className="eyebrow eyebrow--light">── (07) · Brand Partners</div>
          <h2 style={{ fontSize: 'var(--fs-4xl)', lineHeight: 1, letterSpacing: '-0.025em' }}>
            Approved across<br />the <em style={{ fontStyle: 'italic', color: 'var(--brass-400)' }}>major flags.</em>
          </h2>
        </div>

        <div className="partners-shell" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid rgba(242,237,228,0.12)', minHeight: 480 }}>
          {/* Left — brand list */}
          <div style={{ borderRight: '1px solid rgba(242,237,228,0.12)' }}>
            {brands.map((brand, i) => {
              const isActive = active === i;
              return (
                <button
                  key={brand.name}
                  onMouseEnter={() => setActive(i)}
                  onFocus={() => setActive(i)}
                  style={{
                    width: '100%',
                    display: 'grid',
                    gridTemplateColumns: '48px 1fr auto',
                    alignItems: 'baseline',
                    gap: 20,
                    padding: '22px 28px',
                    borderBottom: i < brands.length - 1 ? '1px solid rgba(242,237,228,0.08)' : 'none',
                    background: isActive ? 'rgba(184,151,90,0.08)' : 'transparent',
                    color: isActive ? 'var(--bone-100)' : 'rgba(242,237,228,0.7)',
                    textAlign: 'left',
                    transition: 'all 0.3s',
                    cursor: 'pointer',
                    position: 'relative',
                  }}
                >
                  {isActive && <span style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 3, background: 'var(--brass-500)' }} />}
                  <span className="mono" style={{ fontSize: 10, color: isActive ? 'var(--brass-400)' : 'rgba(242,237,228,0.4)' }}>
                    {String(i + 1).padStart(2, '0')}
                  </span>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-2xl)', letterSpacing: '-0.015em', lineHeight: 1.05 }}>
                    {brand.name}
                  </span>
                  <span className="mono" style={{ fontSize: 10, opacity: 0.55 }}>
                    {String(brand.projects).padStart(2, '0')} proj
                  </span>
                </button>
              );
            })}
          </div>

          {/* Right — brand detail */}
          <div key={active} className="partner-detail" style={{ padding: '40px 48px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', animation: 'fadeUp 0.4s cubic-bezier(0.2, 0.7, 0.1, 1)' }}>
            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 32 }}>
                <div className="mono" style={{ color: 'var(--brass-400)', fontSize: 10 }}>
                  Brand · 0{active + 1} of {brands.length}
                </div>
                <div className="mono" style={{ fontSize: 10, opacity: 0.55 }}>
                  Partner since {b.since}
                </div>
              </div>

              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-5xl)', lineHeight: 0.95, letterSpacing: '-0.03em', marginBottom: 32 }}>
                {b.name}
              </h3>

              <p style={{ fontSize: 'var(--fs-lg)', opacity: 0.85, lineHeight: 1.5, marginBottom: 40, maxWidth: '44ch' }}>
                {b.note}
              </p>

              <div style={{ paddingTop: 24, borderTop: '1px solid rgba(242,237,228,0.15)' }}>
                <div className="mono" style={{ fontSize: 10, opacity: 0.55, marginBottom: 14 }}>Flags delivered</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {b.flags.map(f => (
                    <span key={f} style={{ fontSize: 12, padding: '6px 12px', border: '1px solid rgba(242,237,228,0.2)', letterSpacing: '0.01em' }}>
                      {f}
                    </span>
                  ))}
                </div>
              </div>
            </div>

            <div className="partner-footer-stats" style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid rgba(242,237,228,0.15)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
              <div>
                <div className="mono" style={{ fontSize: 10, opacity: 0.55, marginBottom: 8 }}>Projects delivered</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--fs-3xl)', lineHeight: 1 }}>
                  {String(b.projects).padStart(2, '0')}
                </div>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 10, opacity: 0.55, marginBottom: 8 }}>Accreditation</div>
                <div style={{ fontSize: 'var(--fs-base)', letterSpacing: '-0.005em' }}>
                  Current through 2027
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 32, display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', opacity: 0.5 }}>
          <span>Hover or focus a brand to open its record</span>
          <span>Full franchise documentation available under NDA</span>
        </div>
      </div>
    </section>
  );
};

window.Partners = Partners;