// One cottage's main section: hero photo + about + amenities + gallery.
// Uses the cottage's own accent colour throughout.
const Cottage = ({ id, openBooking, side = 'left' }) => {
  const c = window.COTTAGES[id];
  if (!c) return null;

  return (
    <section
      id={c.id}
      data-screen-label={`Cottage: ${c.name}`}
      style={{
        position: 'relative',
        padding: '120px 56px',
        // Subtle banded background to differentiate the two cottage sections from each other
        background: c.id === 'buttercup' ? 'var(--bg-2)' : 'var(--bg)',
      }}
    >
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        {/* === Section opener: oversized cottage name with accent rule === */}
        <header className="slf-cottage-header" style={{
          display: 'grid', gridTemplateColumns: '1fr auto', gap: 48,
          alignItems: 'end', marginBottom: 64,
          paddingBottom: 32, borderBottom: '1px solid var(--border)',
        }}>
          <div>
            <div className="eyebrow" style={{ color: c.accentDeep, marginBottom: 14 }}>
              <span style={{ display: 'inline-block', width: 24, height: 1, background: c.accent, verticalAlign: 'middle', marginRight: 12 }}/>
              {c.eyebrow}
            </div>
            <h2 style={{
              fontFamily: 'var(--font-serif)',
              fontSize: 'clamp(40px, 5.5vw, 76px)',
              fontWeight: 500, lineHeight: 1.02,
              letterSpacing: '-0.015em',
              margin: 0, color: c.accentDeep,
            }}>
              {c.name}
            </h2>
            <p style={{
              fontFamily: 'var(--font-serif)', fontStyle: 'italic',
              fontSize: 'clamp(20px, 1.6vw, 24px)', lineHeight: 1.5,
              color: 'var(--fg-2)', maxWidth: '50ch', marginTop: 18,
            }}>
              {c.tagline}
            </p>
          </div>

          {/* Right column: price + rating */}
          <div className="slf-cottage-meta" style={{ textAlign: 'right', minWidth: 220 }}>
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: 18, color: 'var(--fg-3)', fontStyle: 'italic' }}>
              from
            </div>
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: 56, fontWeight: 500, lineHeight: 1, color: c.accentDeep, marginTop: 4 }}>
              £{c.pricePerNight}
            </div>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--fg-3)', marginTop: 6 }}>
              per&nbsp;night · min {c.minNights} nights
            </div>
            <div style={{ marginTop: 14, fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--fg-2)' }}>
              ★ {c.rating}&nbsp; <span style={{ color: 'var(--fg-3)' }}>({c.reviewCount} stays)</span>
            </div>
          </div>
        </header>

        {/* === Featured photo + about copy === */}
        <div className="slf-cottage-body" style={{
          display: 'grid',
          gridTemplateColumns: side === 'left' ? '1.35fr 1fr' : '1fr 1.35fr',
          gap: 48, alignItems: 'stretch', marginBottom: 80,
        }}>
          {side === 'left' && <FeaturedPhoto c={c}/>}

          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 24 }}>
            <div className="eyebrow" style={{ color: c.accentDeep }}>About this cottage</div>
            {c.summary.map((para, i) => (
              <p key={i} style={{
                fontFamily: i === 0 ? 'var(--font-serif)' : 'var(--font-sans)',
                fontSize: i === 0 ? 21 : 16, lineHeight: i === 0 ? 1.55 : 1.65,
                color: i === 0 ? 'var(--fg)' : 'var(--fg-2)',
                fontStyle: i === 0 ? 'italic' : 'normal',
                margin: 0,
              }}>{para}</p>
            ))}
            <p style={{
              fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600,
              color: c.accentDeep, margin: 0, paddingTop: 8,
              borderTop: `1px dashed ${c.accent}`, marginTop: 8,
            }}>
              {c.notes}
            </p>
          </div>

          {side === 'right' && <FeaturedPhoto c={c}/>}
        </div>

        {/* === Amenities grid === */}
        <div style={{ marginBottom: 64 }}>
          <div className="eyebrow" style={{ color: c.accentDeep, marginBottom: 24 }}>What's inside</div>
          <ul className="slf-cottage-amenities" style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
            listStyle: 'none', padding: 0, margin: 0,
          }}>
            {c.amenities.map((a) => (
              <li key={a.label} style={{
                display: 'flex', gap: 16, alignItems: 'flex-start',
                padding: '20px 22px',
                background: c.id === 'buttercup' ? 'var(--bg)' : 'var(--bg-2)',
                border: '1px solid var(--border)',
                borderRadius: 'var(--radius-md)',
              }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 999,
                  background: c.accentSoft, color: c.accentDeep,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0,
                }}>
                  <AmenityIcon name={a.icon}/>
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 700, color: 'var(--fg)' }}>{a.label}</div>
                  <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--fg-3)', marginTop: 2 }}>{a.sub}</div>
                </div>
              </li>
            ))}
          </ul>
        </div>

        {/* === Inline gallery (3-up + caption row) === */}
        <div>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 20 }}>
            <div className="eyebrow" style={{ color: c.accentDeep }}>A few rooms</div>
            <a href="#gallery" style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, color: c.accentDeep }}>
              See all photos →
            </a>
          </div>
          <div className="slf-cottage-gallery" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gridTemplateRows: 'repeat(2, 220px)', gap: 12 }}>
            <div className="slf-zoom" style={{ gridRow: '1 / span 2', borderRadius: 'var(--radius-md)' }}>
              <img src={c.gallery[0].src} alt={c.gallery[0].cap}/>
            </div>
            <div className="slf-zoom" style={{ borderRadius: 'var(--radius-md)' }}><img src={c.gallery[1].src} alt={c.gallery[1].cap}/></div>
            <div className="slf-zoom" style={{ borderRadius: 'var(--radius-md)' }}><img src={c.gallery[2].src} alt={c.gallery[2].cap}/></div>
            <div className="slf-zoom" style={{ borderRadius: 'var(--radius-md)' }}><img src={c.gallery[3].src} alt={c.gallery[3].cap}/></div>
            <div className="slf-zoom" style={{ borderRadius: 'var(--radius-md)' }}><img src={c.gallery[4].src} alt={c.gallery[4].cap}/></div>
          </div>
        </div>

        {/* === Sticky-ish CTA bar === */}
        <div className="slf-cottage-cta" style={{
          marginTop: 56, padding: '24px 32px',
          background: c.accentDeep, color: 'var(--cream)',
          borderRadius: 'var(--radius-lg)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
          flexWrap: 'wrap',
        }}>
          <div>
            <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, color: 'var(--cream)' }}>
              Stay at {c.name.split(' ')[0]}
            </div>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, opacity: 0.78, marginTop: 4 }}>
              from £{c.pricePerNight}/night · sleeps {c.sleeps} · {c.minNights}-night minimum
            </div>
          </div>
          <button
            onClick={() => openBooking(c.id)}
            className="slf-btn"
            style={{ background: 'var(--cream)', color: c.accentDeep, padding: '14px 28px', fontSize: 14 }}
          >
            Check availability
          </button>
        </div>
      </div>
    </section>
  );
};

const FeaturedPhoto = ({ c }) => (
  <figure className="slf-cottage-photo" style={{ margin: 0, position: 'relative' }}>
    <div className="slf-zoom" style={{
      borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-frame)',
      aspectRatio: '4 / 5', maxHeight: 640,
    }}>
      <img src={c.hero} alt={c.name}/>
    </div>
    <figcaption style={{
      fontFamily: 'var(--font-serif)', fontStyle: 'italic',
      fontSize: 14, color: 'var(--fg-3)', marginTop: 12, textAlign: 'right',
    }}>
      {c.name} · Luxborough
    </figcaption>
  </figure>
);

// Tiny inline SVG icons keyed by name. Avoids depending on lucide JS.
const AmenityIcon = ({ name }) => {
  const props = { width: 20, height: 20, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'users':    return <svg {...props}><circle cx="9" cy="8" r="3.2"/><path d="M3 19c0-3.3 2.7-6 6-6s6 2.7 6 6"/><circle cx="17" cy="9" r="2.5"/><path d="M21 19c0-2.5-1.8-4.5-4-5"/></svg>;
    case 'dog':      return <svg {...props}><path d="M5 11l-1-3 3 1 1-3 3 2 2-2 2 3 3 1-1 3v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6z"/><circle cx="9.5" cy="13.5" r="0.6" fill="currentColor"/><circle cx="14.5" cy="13.5" r="0.6" fill="currentColor"/></svg>;
    case 'flame':    return <svg {...props}><path d="M12 3c1 4 5 5 5 10a5 5 0 0 1-10 0c0-2 1-3 2-4-1 3 1 4 2 4-1-3 0-7 1-10z"/></svg>;
    case 'utensils': return <svg {...props}><path d="M7 3v18M5 3v6a2 2 0 0 0 4 0V3M17 3c-2 0-3 2-3 5s1 5 3 5v8"/></svg>;
    case 'wifi':     return <svg {...props}><path d="M3 9a14 14 0 0 1 18 0M6 12.5a9 9 0 0 1 12 0M9 16a4 4 0 0 1 6 0"/><circle cx="12" cy="19" r="0.8" fill="currentColor"/></svg>;
    case 'car':      return <svg {...props}><path d="M5 14l1.5-5a2 2 0 0 1 2-1.5h7a2 2 0 0 1 2 1.5L19 14M3 14h18v4H3zM7 18v2M17 18v2"/><circle cx="7.5" cy="16" r="0.8" fill="currentColor"/><circle cx="16.5" cy="16" r="0.8" fill="currentColor"/></svg>;
    case 'mountain': return <svg {...props}><path d="M3 19l6-10 4 6 2-3 6 7H3z"/><circle cx="9" cy="6.5" r="1.5"/></svg>;
    default: return <svg {...props}><circle cx="12" cy="12" r="8"/></svg>;
  }
};

window.Cottage = Cottage;