// Our Work — case study / portfolio section (replaces Pricing)

const Work = () => {
  const projects = [
    {
      cat: 'Care home', accent: '#2F6BFF',
      name: 'Ideal Care', loc: 'Manchester',
      img: 'images/portfolio/ideal-care.jpg',
      blurb: 'Professional care home website focused on trust, accessibility, and enquiry generation.',
      metric: '+142%', metricLabel: 'increase in care enquiries',
    },
    {
      cat: 'Hospitality', accent: '#16A36A',
      name: 'Crown Rooms', loc: 'London',
      img: 'images/portfolio/the-crown.jpg',
      blurb: 'Hotel and hospitality website featuring room bookings, pub experiences, events, and a seamless mobile-first guest journey.',
      metric: 'Booking-ready', metricLabel: 'hospitality website',
    },
    {
      cat: 'Care Home', accent: '#E2A52A',
      name: 'Ideal Live N Care', loc: 'Manchester',
      img: 'images/portfolio/ideal-live-n-care.jpg',
      blurb: 'Compassion-focused website designed to connect families with quality supported living services.',
      metric: '+120%', metricLabel: 'more online enquiries',
    },
    {
      cat: 'Ecommerce', accent: '#8A5CF6',
      name: 'Beelovera', loc: 'Manchester',
      img: 'images/portfolio/beelovera.jpg',
      blurb: 'Elegant beauty product offline store with product info sharing website.',
      metric: '+65%', metricLabel: 'growth in sales',
    },
    {
      cat: 'Auditing', accent: '#0EA5A5',
      name: 'RBS Auditors', loc: 'London',
      img: 'images/portfolio/rbs-auditors.jpg',
      blurb: 'Corporate website built to strengthen credibility and attract business consulting clients.',
      metric: '+90%', metricLabel: 'increase in client enquiries',
    },
    {
      cat: 'Hospitality', accent: '#D97706',
      name: 'The Star of the East', loc: 'London',
      img: 'images/portfolio/the-star-of-the-east.jpg',
      blurb: 'Modern pub and dining website with online table reservations, event promotions, and mobile-first customer experience.',
      metric: '+85%', metricLabel: 'increase in online bookings',
    },
  ];
  return (
    <section className="work" id="work">
      <div className="container">
        <div className="section-head reveal">
          <div className="sh-row">
            <div>
              <span className="section-eyebrow">Our work</span>
              <h2 style={{marginTop: '14px'}}>Recent UK projects we&rsquo;re proud of.</h2>
            </div>
            <p style={{margin: 0}}>Real sites for real local businesses — built to look professional and bring in steady enquiries.</p>
          </div>
        </div>
        <Carousel trackClassName="work-grid">
          {projects.map((p) => (
            <a className="work-card" href="#contact" key={p.name}>
              <div className="work-thumb" style={{'--accent': p.accent}}>
                <span className="work-cat">{p.cat}</span>
                <img src={p.img} alt={p.name} className="work-thumb-img" />
              </div>
              <div className="work-body">
                <div className="work-meta">
                  <h3>{p.name}</h3>
                  <span className="work-loc"><Icon name="pin" size={13} /> {p.loc}</span>
                </div>
                <p>{p.blurb}</p>
                <div className="work-result">
                  <span className="work-metric" style={{color: p.accent}}>{p.metric}</span>
                  <span className="work-metric-label">{p.metricLabel}</span>
                </div>
              </div>
            </a>
          ))}
        </Carousel>
        <div className="work-cta reveal">
          <a href="#contact" className="btn btn-primary" onClick={(e) => { e.preventDefault(); window.__openBooking?.(); }}>Start your project <Icon name="arrowRight" size={16} /></a>
          <span className="work-cta-note">Free consultation · Fixed monthly plans from £12</span>
        </div>
      </div>
    </section>
  );
};

window.Work = Work;