/* ExperienceBlock.jsx — Galeon yacht feature */

function ExperienceBlock({ exp }) {
  return (
    <section id="experiences" className="section">
      <div className="container">
        <div style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'center',
        }}>
          <div style={{
            position: 'relative', borderRadius: 18, overflow: 'hidden',
            aspectRatio: '4/3',
          }}>
            <img src={exp.photo} alt={exp.name}
                 style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{
              position: 'absolute', left: 16, bottom: 16,
              padding: '6px 12px',
              background: 'rgba(15,42,66,0.55)', backdropFilter: 'blur(8px)',
              color: '#FAF7F2', borderRadius: 999,
              fontSize: 10, fontWeight: 600, letterSpacing: '0.14em',
            }}>EXPERIENCE</div>
          </div>

          <div>
            <span className="sun-bullet" />
            <div className="overline" style={{ marginTop: 16, marginBottom: 12 }}>Experiences</div>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 400,
              fontSize: 'clamp(32px, 3.4vw, 44px)', color: 'var(--navy-900)',
              margin: '0 0 18px 0', letterSpacing: '-0.01em', lineHeight: 1.12,
            }}>{exp.name}</h2>
            <p style={{
              color: 'var(--ink-700)', fontSize: 16, lineHeight: 1.65,
              margin: '0 0 24px 0',
            }}>{exp.tagline}</p>

            <ul style={{
              listStyle: 'none', padding: 0, margin: '0 0 28px 0',
              display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10,
            }}>
              {exp.facts.map(f => (
                <li key={f} style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  fontSize: 14, color: 'var(--ink-700)',
                }}>
                  <span style={{
                    width: 6, height: 6, borderRadius: 999,
                    background: 'var(--sun-coral)', flexShrink: 0,
                  }}/>
                  {f}
                </li>
              ))}
            </ul>

            <div style={{ display: 'flex', gap: 12 }}>
              <button className="btn btn-primary">Reserve the Galeon</button>
              <button className="btn btn-ghost">See all experiences →</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.ExperienceBlock = ExperienceBlock;