import { Link } from "react-router-dom";
import { capabilities } from "../data";
import {
  Action,
  Arrow,
  Eyebrow,
  SectionHeading,
  Textile,
} from "../components/Primitives";
import { ContactBanner } from "../components/Layout";
import Gallery from "../components/Gallery";
import ImageCarousel from "../components/ImageCarousel";
import Stats from "../components/Stats";
import "./Home.css";

const processItems = capabilities.map((capability, index) => ({
  ...capability,
  image: [
    "/images/library/polyester-04.jpeg",
    "/images/library/polyester-05.jpeg",
    "/images/library/exclusive-04-madagascar.jpeg",
    "/images/library/exclusive-05-premium-structure.jpeg",
  ][index],
  href: index < 2 ? "/fabrics#applications" : "/fabrics#production",
}));

export default function Home() {
  return (
    <>
      <section className="home-hero">
        <ImageCarousel className="home-hero__carousel" />
        <div className="home-hero__shade" />
        <div className="home-hero__content">
          <Eyebrow>Specialist circular-knitting manufacturer · RRS</Eyebrow>
          <h1 className="home-hero__title">
            Built to develop.
            <br />
            <em>Built to repeat.</em>
          </h1>
          <p className="home-hero__description">
            Grey knitted fabrics developed around yarn, structure and
            application - then manufactured for consistent commercial supply.
          </p>
          <div className="home-hero__actions">
            <Action to="/fabrics" variant="dark">
              Explore our fabrics
            </Action>
            <Action to="/contact#whatsapp" variant="outline">
              Text us on WhatsApp
            </Action>
          </div>
        </div>
        <div className="home-hero__bottom">
          <span className="home-hero__tagline">
            Development · Circular knitting · Bulk production
          </span>
        </div>
      </section>
      <Stats />
      <Gallery preview />
      <section className="home-intro">
        <div className="home-intro__heading">
          <Eyebrow>Our fabrics</Eyebrow>
          <h2 className="home-intro__title">
            Grey is where
            <br />
            <em>it begins.</em>
          </h2>
        </div>
        <div className="home-intro__body">
          <p className="home-intro__lead">
            RRS specialises in circular-knitted grey fabrics developed for
            varied apparel applications.
          </p>
          <p className="home-intro__text">
            Different constructions require different yarns, blends and machine
            configurations. Our manufacturing capability allows us to develop
            fabrics around structure, texture, composition and intended use.
          </p>
          <p className="home-intro__text">
            From shirting constructions to textured and structured knits, we
            work across polyester, cotton, rayon, stretch yarns and varied
            blends.
          </p>
          <Link className="home-intro__link" to="/about">
            Get to know RRS <Arrow diagonal />
          </Link>
        </div>
      </section>
      <section className="process">
        <SectionHeading
          label="Manufacturing process"
          title={
            <>
              From requirement
              <br />
              <em>to repeat production.</em>
            </>
          }
        >
          <p>
            A direct sequence connects fabric development with dependable
            commercial manufacturing.
          </p>
        </SectionHeading>
        <div className="process__list">
          {processItems.map(({ title, subtitle, text, image, href }) => (
            <article className="process__item" key={title}>
              <div className="process__copy">
                <p className="process__verb">{title}</p>
                <h3 className="process__title">{subtitle}</h3>
                <p className="process__text">{text}</p>
                <Link className="process__link" to={href}>
                  See our capability <Arrow diagonal />
                </Link>
              </div>
              <Textile className="process__visual" src={image} />
            </article>
          ))}
        </div>
      </section>
      <ContactBanner />
    </>
  );
}