// HabitatCard.jsx — individual habitat unit card + habitat grid section
const HabitatCard = ({ type, status, title, description, hectares, units, unitRef }) => {
  const statusColors = {
    Available:      { bg: '#D6E8D8', color: '#3D7A52' },
    Reserved:       { bg: '#D4EBF3', color: '#2C637C' },
    'Under offer':  { bg: '#F0DFC0', color: '#8A5E20' },
    Sold:           { bg: '#E2DBD0', color: '#756D62' },
    'In progress':  { bg: '#EDE8F5', color: '#6B4FA0' },
  };
  const typeColors = {
    Grassland: '#EDF4EE', Wetland: '#EBF5FA', Woodland: '#FAF3E6',
    Scrub: '#E8F4F9', Hedgerow: '#EDF4EE', 'Traditional Orchard': '#F5EFF8',
    'Neutral Grassland': '#EDF4EE', 'Individual Trees': '#FAF3E6',
  };
  const sc = statusColors[status] || statusColors.Available;

  return (
    <div style={habitatCardStyles.card}>
      <div style={habitatCardStyles.header}>
        <span style={{...habitatCardStyles.tag, background: typeColors[type] || '#F5F0E6'}}>{type}</span>
        <span style={{...habitatCardStyles.statusBadge, background: sc.bg, color: sc.color}}>
          <span style={{...habitatCardStyles.dot, background: sc.color}}></span>
          {status}
        </span>
      </div>
      <div style={habitatCardStyles.title}>{title}</div>
      <div style={habitatCardStyles.desc}>{description}</div>
      <div style={habitatCardStyles.footer}>
        <div style={habitatCardStyles.metrics}>
          <span style={habitatCardStyles.metric}><strong>{units}</strong> BNG units</span>
        </div>
        <div style={habitatCardStyles.refCode}>{unitRef}</div>
      </div>
    </div>
  );
};

const HabitatsSection = ({ onEnquire, isMobile, viewport = 'desktop' }) => {
  const isTablet = viewport === 'tablet';
  const habitats = [
    { type: 'Neutral Grassland', status: 'Available', title: 'Other Neutral Grassland units', description: 'Lowland grassland creation on former arable land, secured through long-term habitat management and S106 agreement.', hectares: '—', units: 'Available now', unitRef: 'TF-NG-001' },
    { type: 'Scrub', status: 'Available', title: 'Mixed Scrub units', description: 'Hawthorn, blackthorn and native scrub creation supporting invertebrates, nesting birds and small mammals.', hectares: '—', units: 'Available now', unitRef: 'TF-SC-002' },
    { type: 'Individual Trees', status: 'Available', title: 'Individual Tree units (rural)', description: 'Native tree planting within the rural landscape, contributing to habitat connectivity across the Tarrant Valley.', hectares: '—', units: 'Available now', unitRef: 'TF-IT-003' },
    { type: 'Traditional Orchard', status: 'In progress', title: 'Traditional Orchard units', description: 'Traditional orchard creation with native fruit varieties, providing habitat for specialist invertebrates and foraging birds.', hectares: '—', units: 'In progress', unitRef: 'TF-TO-004' },
  ];

  return (
    <section style={habitatSectionStyles.root}>
      <div style={habitatSectionStyles.inner}>
        <div style={habitatSectionStyles.sectionHead}>
          <div style={habitatSectionStyles.eyebrow}>Available units</div>
          <h2 style={habitatSectionStyles.heading}>Habitat units at The Ferals</h2>
          <p style={habitatSectionStyles.sub}>All units are verified under DEFRA's Biodiversity Metric 4.0, secured by a 30-year Section 106 or Conservation Covenant agreement.</p>
        </div>
              <div style={{...habitatSectionStyles.grid, gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)'}}>
          {habitats.map(h => <HabitatCard key={h.unitRef} {...h} />)}
        </div>
        <div style={habitatSectionStyles.cta}>
          <a href="#" onClick={(e) => { e.preventDefault(); onEnquire && onEnquire(); }}
            style={habitatSectionStyles.ctaBtn}
            onMouseEnter={e => e.target.style.background='#2690BC'}
            onMouseLeave={e => e.target.style.background='#3AAFDF'}
          >
            Enquire about BNG units
          </a>
          <p style={habitatSectionStyles.ctaNote}>Contact us to confirm availability and pricing — we respond within 2 working days.</p>
        </div>
      </div>
    </section>
  );
};

const habitatCardStyles = {
  card: { background: '#fff', borderRadius: 8, border: '1px solid rgba(26,58,74,0.08)', boxShadow: '0 2px 8px rgba(26,58,74,0.06)', padding: '20px', display: 'flex', flexDirection: 'column', gap: 0, transition: 'box-shadow 0.2s, transform 0.2s' },
  header: { display: 'flex', gap: 8, alignItems: 'center', marginBottom: 10 },
  tag: { fontFamily: "'Nunito',sans-serif", fontSize: 10, fontWeight: 700, letterSpacing: '0.07em', textTransform: 'uppercase', color: '#3D7A52', padding: '3px 8px', borderRadius: 100 },
  statusBadge: { fontFamily: "'Nunito',sans-serif", fontSize: 10, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', padding: '3px 8px', borderRadius: 100, display: 'flex', alignItems: 'center', gap: 5 },
  dot: { width: 5, height: 5, borderRadius: '50%', flexShrink: 0 },
  title: { fontFamily: "'Nunito',sans-serif", fontWeight: 700, fontSize: 16, color: '#1A3A4A', marginBottom: 8, lineHeight: 1.3 },
  desc: { fontFamily: "'Lora',serif", fontSize: 13, color: '#756D62', lineHeight: 1.65, marginBottom: 16, flex: 1 },
  footer: { borderTop: '1px solid rgba(26,58,74,0.06)', paddingTop: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
  metrics: { display: 'flex', gap: 6, alignItems: 'center' },
  metric: { fontFamily: "'Nunito',sans-serif", fontSize: 13, color: '#1A3A4A' },
  metricDivider: { color: '#B0A898', fontSize: 13 },
  refCode: { fontFamily: "'JetBrains Mono',monospace", fontSize: 10, color: '#B0A898' },
};

const habitatSectionStyles = {
  root: { background: '#F5F0E6', padding: '80px 32px' },
  inner: { maxWidth: 1200, margin: '0 auto' },
  sectionHead: { textAlign: 'center', marginBottom: 48 },
  eyebrow: { fontFamily: "'Nunito',sans-serif", fontWeight: 700, fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#756D62', marginBottom: 10 },
  heading: { fontFamily: "'Nunito',sans-serif", fontWeight: 800, fontSize: 40, color: '#1A3A4A', letterSpacing: '-0.02em', marginBottom: 14 },
  sub: { fontFamily: "'Lora',serif", fontSize: 16, color: '#756D62', lineHeight: 1.7, maxWidth: 580, margin: '0 auto' },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 48 },
  cta: { textAlign: 'center' },
  ctaBtn: { display: 'inline-block', fontFamily: "'Nunito',sans-serif", fontWeight: 700, fontSize: 15, background: '#3AAFDF', color: '#fff', padding: '13px 28px', borderRadius: 100, textDecoration: 'none', transition: 'background 0.2s' },
  ctaNote: { fontFamily: "'Nunito',sans-serif", fontSize: 13, color: '#B0A898', marginTop: 10 },
};

Object.assign(window, { HabitatCard, HabitatsSection });