// "Two cottages" overview / picker. Side-by-side, distinct colour cues.
// This is the big architectural beat of the page — must instantly read
// as "there are two of them, and here's how they differ."
const CottagePicker = ({ openBooking }) => {
  const cards = [window.COTTAGES.buttercup, window.COTTAGES.countryside];

  return (
    <section id="cottages" style={{ padding: '128px 56px 96px', background: 'var(--bg)' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        {/* Section opener */}
        <div style={{ textAlign: 'center', marginBottom: 64, maxWidth: 640, marginInline: 'auto' }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>The two cottages</div>
          <h2 style={{ fontSize: 'var(--fs-h2)', margin: 0 }}>
            Pick the one that suits the weekend.
          </h2>
          <p className="lead" style={{ marginTop: 18 }}>
            Both sleep two. Both welcome dogs. They share the same lawn, the same hill,
            the same quiet — but they're not the same cottage.
          </p>
        </div>

        {/* The two cards */}
        <div className="slf-picker-grid" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32,
        }}>
          {cards.map((c) => (
            <article key={c.id} style={{
              position: 'relative',
              background: 'var(--bg-2)',
              border: '1px solid var(--border)',
              borderTop: `4px solid ${c.accent}`,
              borderRadius: 'var(--radius-lg)',
              overflow: 'hidden',
              display: 'flex', flexDirection: 'column',
              transition: 'transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out)',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = 'var(--shadow-3)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
            >
              {/* Hero photo */}
              <div className="slf-zoom slf-picker-photo" style={{ aspectRatio: '4 / 3', position: 'relative' }}>
                <img src={c.hero} alt={c.name} loading="lazy"/>
                <div style={{
                  position: 'absolute', top: 16, left: 16,
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  background: 'rgba(245,239,226,0.92)',
                  padding: '6px 12px', borderRadius: 999,
                  fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 700,
                  letterSpacing: '0.18em', textTransform: 'uppercase', color: c.accentDeep,
                }}>
                  <span style={{ width: 8, height: 8, borderRadius: 999, background: c.accent }}/>
                  {c.eyebrow}
                </div>
              </div>

              {/* Body */}
              <div style={{ padding: '32px 32px 28px', display: 'flex', flexDirection: 'column', gap: 18 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 16 }}>
                  <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 36, fontWeight: 500, margin: 0, color: c.accentDeep }}>
                    {c.name}
                  </h3>
                  <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--fg-3)', whiteSpace: 'nowrap' }}>
                    from <span style={{ color: 'var(--fg)', fontWeight: 700 }}>£{c.pricePerNight}</span> /night
                  </div>
                </div>

                <p style={{ margin: 0, fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: 'var(--fg-2)' }}>
                  {c.tagline}
                </p>

                {/* Feel pills */}
                <ul style={{ display: 'flex', flexWrap: 'wrap', gap: 6, padding: 0, margin: '4px 0 0', listStyle: 'none' }}>
                  {c.feel.map((f) => (
                    <li key={f} style={{
                      fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 500,
                      color: c.accentDeep, padding: '4px 10px',
                      background: c.accentSoft, borderRadius: 999,
                    }}>{f}</li>
                  ))}
                </ul>

                {/* Stats row */}
                <div style={{
                  display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12,
                  paddingTop: 18, marginTop: 6, borderTop: '1px solid var(--border)',
                }}>
                  <Stat label="Sleeps" value={c.sleeps}/>
                  <Stat label="Bedrooms" value={c.bedrooms}/>
                  <Stat label="Min stay" value={`${c.minNights} nights`}/>
                </div>

                {/* CTAs */}
                <div style={{ display: 'flex', gap: 10, marginTop: 12 }}>
                  <a href={`#${c.id}`} className="slf-btn" style={{
                    background: c.accent, color: 'var(--cream)',
                    padding: '12px 22px', fontSize: 14, textDecoration: 'none', flex: 1,
                  }}>Explore {c.name.split(' ')[0]} →</a>
                  <button className="slf-btn slf-btn-ghost" onClick={() => openBooking(c.id)}>
                    Check dates
                  </button>
                </div>
              </div>
            </article>
          ))}
        </div>

        {/* Tiny "and the farm" note below */}
        <p style={{
          textAlign: 'center', marginTop: 56, fontFamily: 'var(--font-serif)',
          fontStyle: 'italic', fontSize: 18, color: 'var(--fg-3)',
        }}>
          ✦ &nbsp;&nbsp;Both cottages share the same working farm, the same secure lawn, and the same long view of the hills.&nbsp;&nbsp; ✦
        </p>
      </div>
    </section>
  );
};

const Stat = ({ label, value }) => (
  <div>
    <div style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>{label}</div>
    <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 500, color: 'var(--fg)', marginTop: 2 }}>{value}</div>
  </div>
);

window.CottagePicker = CottagePicker;