/* global React, Icon, SectionEyebrow */
const { useRef } = React;

function Work() {
  const items = [
    {
      img: "assets/work/tekton.jpg",
      name: "Tekton Outdoor Living",
      desc: "Denver deck builder and outdoor living contractor.",
      url: "https://www.tektonoutdoorliving.com/",
    },
    {
      img: "assets/work/ccc.jpg?v=2",
      name: "Church Comms Compass",
      desc: "A framework and resource site for ministry communicators. My own project, currently launching.",
      url: "https://www.churchcommscompass.com/",
    },
    {
      img: "assets/work/firedgrain.jpg",
      name: "Fired Grain Creations",
      desc: "Custom wood cutting boards and charcuterie boards.",
      url: "https://www.firedgraincreations.com/",
    },
    {
      img: "assets/work/mdownsstoller.jpg",
      name: "Molly Downs-Stoller, LMFT",
      desc: "Telehealth psychotherapy and coaching practice.",
      url: "https://www.mdownsstoller.com/",
    },
    {
      img: "assets/work/kmccomb.jpg",
      name: "KM Consulting",
      desc: "Accounting and bookkeeping for small service businesses.",
      url: "https://kmccombconsulting.com/",
    },
  ];

  const trackRef = useRef(null);

  const scrollByCard = (dir) => {
    const track = trackRef.current;
    if (!track) return;
    const card = track.querySelector(".bt-work-card");
    const cardWidth = card ? card.getBoundingClientRect().width : track.clientWidth / 3;
    const gap = 24;
    track.scrollBy({ left: dir * (cardWidth + gap), behavior: "smooth" });
  };

  return (
    <section className="bt-section bt-section--cream" id="work" data-screen-label="Work">
      <div className="bt-section__inner">
        <SectionEyebrow>Recent work</SectionEyebrow>
        <h2 style={{ maxWidth: "22ch" }}>A few brands and websites I've built.</h2>
        <p className="bt-body-lg" style={{ maxWidth: "55ch", margin: 0 }}>
          Real businesses, real builds. Take a look for yourself.
        </p>
        <div className="bt-work-carousel">
          <button className="bt-work-arrow bt-work-arrow--prev" onClick={() => scrollByCard(-1)} aria-label="Previous">
            <Icon name="chevron-left" size={20} />
          </button>
          <div className="bt-work-track" ref={trackRef}>
            {items.map((it) => (
              <a key={it.name} href={it.url} target="_blank" rel="noopener noreferrer" className="bt-work-card">
                <div className="bt-work-card__image">
                  <img src={it.img} alt={it.name} />
                </div>
                <div className="bt-work-card__body">
                  <h4>{it.name}</h4>
                  <p>{it.desc}</p>
                  <span className="bt-work-card__link">
                    View live site <Icon name="arrow-up-right" size={14} />
                  </span>
                </div>
              </a>
            ))}
          </div>
          <button className="bt-work-arrow bt-work-arrow--next" onClick={() => scrollByCard(1)} aria-label="Next">
            <Icon name="chevron-right" size={20} />
          </button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Work });