// AboutSection.jsx — About the site + How it works sections

const teamMembers = [
  {
    name: 'Akshay Sanghrajka',
    role: 'Founder, The Ferals',
    bio: 'Akshay leads the development of The Ferals habitat bank. With a background in land management and nature recovery, he oversees habitat creation across the site and works with ecologists, planners and developers to deliver Biodiversity Net Gain projects in Dorset.',
    photo: 'https://images.squarespace-cdn.com/content/v1/66b49e05b5523e57f95c0e6b/95163fb6-9e41-4b15-b123-c8da2bff7768/akshay-sanghrajka-the-ferals-bng-dorset.jpg.png',
  },
  {
    name: 'Georgina Sanghrajka',
    role: 'Co-Founder',
    bio: 'Georgie co-founded The Ferals and supports the long-term vision for the site. She is involved in the development of the project and its role in supporting landscape-scale nature recovery in the Tarrant Valley.',
    photo: 'https://images.squarespace-cdn.com/content/v1/66b49e05b5523e57f95c0e6b/4adb4c11-2d31-4ea3-9a78-f7499e3f805e/georgina-sanghrajka-the-ferals-bng-dorset.jpg.png',
  },
  {
    name: 'FPCR Environment & Design Ltd',
    role: 'Ecological Advisors',
    bio: 'Ecological surveys and technical advice for The Ferals are provided by professional ecologists at FPCR Environment & Design, ensuring that habitat creation and monitoring align with Biodiversity Net Gain requirements.',
    photo: 'https://images.squarespace-cdn.com/content/v1/66b49e05b5523e57f95c0e6b/f04d9511-25c3-466c-b66c-07681f67ee95/FPCR+Environment+and+Design.jpg',
  },
];

const AboutSection = ({ viewport = 'desktop' }) => {
  const isNarrow = viewport === 'tablet' || viewport === 'mobile';
  return (
  <section id="about-section" style={aboutStyles.root}>
    <div style={aboutStyles.inner}>
      <div style={{...aboutStyles.grid, gridTemplateColumns: isNarrow ? '1fr' : '1fr 380px', gap: isNarrow ? 32 : 64, alignItems: 'start'}}>
        <div style={aboutStyles.content}>
          <div style={aboutStyles.eyebrow}>About the site</div>
          <h2 style={aboutStyles.heading}>From intensive arable to living landscape</h2>
          <p style={aboutStyles.body}>
            The Ferals is a 250-acre habitat bank in Dorset delivering off-site Biodiversity Net Gain (BNG) units for development projects. Located near Blandford Forum in the Cranborne Chase landscape, the site is being transformed from intensive arable farmland into a mosaic of species-rich grassland, scrub, woodland and wetland habitats designed to support long-term biodiversity recovery.
          </p>
          <p style={aboutStyles.body}>
            The Ferals operates as a registered biodiversity gain site providing off-site BNG units to support development across Dorset and neighbouring planning authorities. Habitat creation and management is secured through long-term agreements and monitored to ensure biodiversity outcomes are delivered over the lifetime of the project.
          </p>
          <p style={aboutStyles.body}>
            The Ferals sits adjacent to the National Trust's Kingston Lacy estate, where an 850-acre rewilding project is underway at Bishop's Court Farm. Together these projects form a growing landscape-scale nature recovery area within the Tarrant Valley.
          </p>
          <div style={aboutStyles.siteImageWrap}>
            <img
              src="photo-cows.jpg"
              alt="Hereford cattle grazing at The Ferals, Dorset"
              style={aboutStyles.siteImage}
            />
            <div style={aboutStyles.siteImageCaption}>Hereford cattle grazing at The Ferals</div>
          </div>
          <div style={aboutStyles.facts}>
            {[
              { label: 'Location', val: 'Tarrant Keyneston, Dorset' },
              { label: 'Landscape', val: 'Cranborne Chase / Tarrant Valley' },
              { label: 'Neighbour', val: 'National Trust Kingston Lacy' },
              { label: 'Ecologists', val: 'FPCR Environment & Design Ltd' },
            ].map(f => (
              <div key={f.label} style={aboutStyles.fact}>
                <div style={aboutStyles.factLabel}>{f.label}</div>
                <div style={aboutStyles.factVal}>{f.val}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{...aboutStyles.sidePanel, position: isNarrow ? 'static' : 'sticky'}}>
          <div style={aboutStyles.habitatList}>
            <div style={aboutStyles.habitatListHead}>Habitats being created</div>
            {[
              ['Other Neutral Grassland units', 'Available'],
              ['Mixed Scrub units', 'Available'],
              ['Individual Tree units (rural)', 'Available'],
              ['Traditional Orchard', 'In progress'],
            ].map(([name, status]) => (
              <div key={name} style={aboutStyles.habitatRow}>
                <span style={aboutStyles.habitatName}>{name}</span>
                <span style={{
                  ...aboutStyles.habitatArea,
                  color: status === 'In progress' ? '#7AAB5A' : '#756D62',
                  fontStyle: status === 'In progress' ? 'italic' : 'normal',
                }}>{status}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Team section */}
      <div style={aboutStyles.teamBlock}>
        <div style={aboutStyles.teamHeading}>Meet the team</div>
        <div style={{...aboutStyles.teamGrid, gridTemplateColumns: isNarrow ? '1fr' : 'repeat(3, 1fr)'}}>
          {teamMembers.map(m => (
            <div key={m.name} style={aboutStyles.teamCard}>
              <img src={m.photo} alt={m.name} style={aboutStyles.avatar} />
              <div style={aboutStyles.teamName}>{m.name}</div>
              <div style={aboutStyles.teamRole}>{m.role}</div>
              <p style={aboutStyles.teamBio}>{m.bio}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
  );
};

const HowItWorksSection = ({ viewport = 'desktop' }) => {
  const isNarrow = viewport === 'tablet' || viewport === 'mobile';
  const isMobile = viewport === 'mobile';
  const cols = isMobile ? '1fr' : isNarrow ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)';
  const steps = [
    { n: '01', title: 'Calculate your BNG requirement', body: "Use the Biodiversity Metric 4.0 to calculate the number of habitat units your development must deliver. We can provide guidance on this." },
    { n: '02', title: 'Select habitat units', body: "Browse our available units. We'll provide a habitat unit certificate and supporting data to accompany your planning application." },
    { n: '03', title: 'Legal agreement', body: "Units are secured by a 30-year Section 106 agreement or Conservation Covenant between the landowner, local authority, and your organisation." },
    { n: '04', title: 'Ongoing monitoring', body: "Independent ecologists monitor habitat condition annually. You receive reports confirming your BNG obligations are being met." },
  ];

  return (
    <section style={howStyles.root}>
      <div style={howStyles.inner}>
        <div style={howStyles.head}>
          <div style={howStyles.eyebrow}>How it works</div>
          <h2 style={howStyles.heading}>Delivering BNG with confidence</h2>
        </div>
        <div style={{...howStyles.steps, gridTemplateColumns: cols}}>
          {steps.map((s, i) => (
            <div key={s.n} style={howStyles.step}>
              <div style={howStyles.stepNum}>{s.n}</div>
              <div style={howStyles.stepTitle}>{s.title}</div>
              <div style={howStyles.stepBody}>{s.body}</div>
              {i < steps.length - 1 && <div style={howStyles.connector}></div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const aboutStyles = {
  root: { background: '#fff', padding: '80px 32px' },
  inner: { maxWidth: 1200, margin: '0 auto' },
  grid: { display: 'grid', gridTemplateColumns: '1fr 380px', gap: 64, alignItems: 'start' },
  eyebrow: { fontFamily: "'Nunito',sans-serif", fontWeight: 700, fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#756D62', marginBottom: 12 },
  heading: { fontFamily: "'Nunito',sans-serif", fontWeight: 800, fontSize: 36, color: '#1A3A4A', letterSpacing: '-0.02em', marginBottom: 20, lineHeight: 1.2 },
  body: { fontFamily: "'Lora',serif", fontSize: 16, color: '#756D62', lineHeight: 1.75, marginBottom: 16 },
  siteImageWrap: { marginTop: 28, marginBottom: 28, borderRadius: 8, overflow: 'hidden' },
  siteImage: { width: '100%', height: 280, objectFit: 'cover', display: 'block' },
  siteImageCaption: { fontFamily: "'Nunito',sans-serif", fontSize: 11, color: '#B0A898', marginTop: 8, fontStyle: 'italic' },
  facts: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 24px', marginTop: 28, borderTop: '1px solid rgba(26,58,74,0.08)', paddingTop: 24 },
  fact: {},
  factLabel: { fontFamily: "'Nunito',sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.07em', textTransform: 'uppercase', color: '#B0A898', marginBottom: 3 },
  factVal: { fontFamily: "'Nunito',sans-serif", fontSize: 14, fontWeight: 600, color: '#1A3A4A' },
  sidePanel: { position: 'sticky', top: 96 },
  habitatList: { background: '#F5F0E6', borderRadius: 8, padding: '24px', border: '1px solid rgba(26,58,74,0.06)' },
  habitatListHead: { fontFamily: "'Nunito',sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#756D62', marginBottom: 16 },
  habitatRow: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 0', borderBottom: '1px solid rgba(26,58,74,0.07)' },
  habitatName: { fontFamily: "'Lora',serif", fontSize: 14, color: '#1A3A4A' },
  habitatArea: { fontFamily: "'JetBrains Mono',monospace", fontSize: 12, color: '#756D62' },
  teamBlock: { marginTop: 72, borderTop: '1px solid rgba(26,58,74,0.08)', paddingTop: 56 },
  teamHeading: { fontFamily: "'Nunito',sans-serif", fontWeight: 700, fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#756D62', marginBottom: 32 },
  teamGrid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 },
  teamCard: { display: 'flex', flexDirection: 'column', gap: 8 },
  avatar: { width: 72, height: 72, borderRadius: '50%', objectFit: 'cover', marginBottom: 4 },
  teamName: { fontFamily: "'Nunito',sans-serif", fontWeight: 700, fontSize: 15, color: '#1A3A4A' },
  teamRole: { fontFamily: "'Nunito',sans-serif", fontWeight: 600, fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', color: '#3AAFDF' },
  teamBio: { fontFamily: "'Lora',serif", fontSize: 13, color: '#756D62', lineHeight: 1.7, marginTop: 4 },
};

const howStyles = {
  root: { background: '#E8F4F9', padding: '80px 32px' },
  inner: { maxWidth: 1200, margin: '0 auto' },
  head: { textAlign: 'center', marginBottom: 56 },
  eyebrow: { fontFamily: "'Nunito',sans-serif", fontWeight: 700, fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#2C637C', marginBottom: 10 },
  heading: { fontFamily: "'Nunito',sans-serif", fontWeight: 800, fontSize: 36, color: '#1A3A4A', letterSpacing: '-0.02em' },
  steps: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, position: 'relative' },
  step: { background: '#fff', borderRadius: 8, padding: '24px', border: '1px solid rgba(26,58,74,0.08)', boxShadow: '0 2px 8px rgba(26,58,74,0.06)', position: 'relative' },
  stepNum: { fontFamily: "'Nunito',sans-serif", fontWeight: 800, fontSize: 36, color: '#3AAFDF', lineHeight: 1, marginBottom: 12, opacity: 0.5 },
  stepTitle: { fontFamily: "'Nunito',sans-serif", fontWeight: 700, fontSize: 16, color: '#1A3A4A', marginBottom: 10, lineHeight: 1.3 },
  stepBody: { fontFamily: "'Lora',serif", fontSize: 13, color: '#756D62', lineHeight: 1.65 },
  connector: {},
};

Object.assign(window, { AboutSection, HowItWorksSection });