/* Home screen */

function HomeScreen({ onNavigate }) {
  const { Button } = window.BursonLtdDesignSystem_53a781;
  const D = window.BURSON_DATA;
  return (
    <div>
      {/* Hero */}
      <section className="brs-hero">
        <div className="brs-hero__inner">
          <div className="brs-hero__copy">
            <p className="brs-eyebrow brs-hero__eyebrow">Property in England</p>
            <h1>Homes built<br/>to be lived in.</h1>
            <p className="brs-hero__lead">
              We develop, let and look after residential and holiday properties across England —
              with the care of a landlord who plans to keep them.
            </p>
            <div style={{ display: 'flex', gap: 12 }}>
              <Button size="lg" variant="accent" onClick={() => onNavigate('contact')}>Make an enquiry</Button>
              <Button size="lg" variant="secondary"
                style={{ background: 'transparent', color: 'var(--paper)', borderColor: 'rgba(251,249,244,.4)' }}
                onClick={() => onNavigate('contact')}>Let your property</Button>
            </div>
          </div>
          <div className="brs-hero__aside">
            <div className="brs-hero__mark">
              <img src="assets/hero.avif" alt="Property" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            </div>
          </div>
        </div>
      </section>

      {/* Trust strip */}
      <div className="brs-trust">
        <div className="brs-trust__inner">
          {D.stats.map((s) => (
            <div className="brs-trust__item" key={s.label}><b>{s.value}</b><span>{s.label}</span></div>
          ))}
        </div>
      </div>

      {/* Services */}
      <section className="brs-section">
        <div className="brs-wrap">
          <div className="brs-section__head">
            <div>
              <p className="brs-eyebrow">What we do</p>
              <h2 className="brs-section__title">Three things, done properly.</h2>
            </div>
          </div>
          <div className="brs-services">
            {D.services.map((s) => (
              <div className="brs-service" key={s.title}>
                <div className="brs-service__icon"><i data-lucide={s.icon}></i></div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Editorial */}
      <section className="brs-section" style={{ paddingTop: 0 }}>
        <div className="brs-wrap">
          <div className="brs-editorial">
            <div className="brs-editorial__media"><img src="assets/logo-mark-outline.svg" alt="" /></div>
            <div>
              <p className="brs-eyebrow">Our approach</p>
              <h2>A landlord who plans to keep them.</h2>
              <p>
                We don't flip houses. We buy homes worth keeping, refurbish them properly, and manage
                every tenancy ourselves — which is why our properties hold their condition and our
                residents tend to stay.
              </p>
              <p>
                From a 1930s semi in Harrogate to a stone cottage in the Lakes, every property is held
                to the same standard: warm, well-maintained and run by people you can actually reach.
              </p>
              <blockquote className="brs-quote">
                "The best landlords think in decades, not tenancies."
              </blockquote>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="brs-section" style={{ paddingTop: 0 }}>
        <div className="brs-wrap">
          <div className="brs-cta">
            <div className="brs-cta__text">
              <h2>Looking for a home — or a partner to manage yours?</h2>
              <p>Tell us what you need and we'll come back to you within one working day.</p>
            </div>
            <div className="brs-cta__actions">
              <Button variant="accent" onClick={() => onNavigate('contact')}>Make an enquiry</Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomeScreen });