/* Rass Jerseys - homepage sections */

function Hero({ onShop }) {
  const featured = RassData.PRODUCTS.find((product) => product.slug === "argentina-player-edition-home")
    || RassData.PRODUCTS.find((product) => product.type === "Home")
    || RassData.PRODUCTS[0]
    || {
    team: "argentina",
    type: "Home",
    name: "Argentina Jersey",
    price: 999,
  };

  return (
    <section className="hero hero-classic">
      <div className="hero-classic-bg ph" />
      <div className="wrap hero-classic-inner">
        <div className="hero-classic-text">
          <span className="eyebrow hero-eyebrow">
            <span className="dot" /> Limited drop
          </span>
          <h1 className="display hero-h1">Wear your<br />nation.</h1>
          <p className="hero-sub muted">
            Imported player edition Argentina jerseys made with breathable interlock fabric and premium acrylic logos.
          </p>
          <div className="hero-ctas">
            <button className="btn btn-primary" onClick={onShop}>
              Shop Jerseys <Icon name="arrow-down" size={17} />
            </button>
          </div>
          <div className="hero-trust-mini">
            <span><Icon name="shield" size={15} /> Fade-resistant colors</span>
            <span><Icon name="refresh" size={15} /> Quick-dry fabric</span>
            <span><Icon name="star" size={15} /> Acrylic logos</span>
          </div>
        </div>
        <div className="hero-classic-card">
          <div className="hero-float-tag tag tag-hot">{RassData.STORE.discountLabel}</div>
          <div className="hero-card-img-wrap">
            <JerseyPlaceholder product={featured} ratio="4 / 5" />
          </div>
          <div className="hero-float-meta">
            <div>
              <div style={{ fontFamily: "var(--f-head)", fontWeight: 700, fontSize: 16 }}>{featured.name}</div>
              <div className="muted" style={{ fontSize: 13 }}>Fixed price, no payment gateway friction</div>
            </div>
            <span className="price" style={{ fontSize: 24 }}>{RassData.taka(featured.price)}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustBar() {
  const items = [
    { icon: "shield", text: "Colors will not fade" },
    { icon: "refresh", text: "Wash-friendly and quick-dry" },
    { icon: "star", text: "Premium acrylic logos" },
  ];
  return (
    <div className="trust-bar">
      <div className="wrap trust-inner">
        {items.map((item) => (
          <div key={item.text} className="trust-item">
            <span className="trust-ic"><Icon name={item.icon} size={17} /></span>
            <span>{item.text}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function JerseyQuality() {
  const quality = RassData.JERSEY_QUALITY;
  return (
    <section className="section quality-sect">
      <div className="wrap quality-inner">
        <div className="quality-intro">
          <p className="sect-kicker">Jersey quality</p>
          <h2 className="sect-title">{quality.title}</h2>
          <p className="quality-summary muted">{quality.summary}</p>
          <div className="quality-fabric">
            <span><Icon name="check" size={16} /></span>
            <div>
              <strong>{quality.fabric}</strong>
              <small>Premium breathable feel with quick-dry comfort.</small>
            </div>
          </div>
        </div>
        <div className="quality-grid">
          {quality.features.map((feature) => (
            <div className="quality-item" key={feature.title}>
              <span className="quality-icon"><Icon name={feature.icon} size={20} /></span>
              <div>
                <h3>{feature.title}</h3>
                <p>{feature.text}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n: "01", icon: "bag", title: "Pick your jersey", text: "Choose the product, size, quantity, and optional custom name." },
    { n: "02", icon: "cart", title: "Review cart", text: "Add delivery name, phone, city, address, and choose a WhatsApp sales number." },
    { n: "03", icon: "chat", title: "Copy and send", text: "We create a local draft order, then you copy the message and continue in WhatsApp." },
  ];
  return (
    <section className="section how-sect">
      <div className="wrap">
        <div className="center" style={{ marginBottom: 48 }}>
          <p className="sect-kicker">No complicated checkout</p>
          <h2 className="sect-title">Ordering is this simple</h2>
        </div>
        <div className="how-row">
          {steps.map((step, index) => (
            <React.Fragment key={step.n}>
              <div className="how-step">
                <div className="how-icon"><Icon name={step.icon} size={26} /></div>
                <div className="how-n price">{step.n}</div>
                <h3 className="how-title">{step.title}</h3>
                <p className="muted how-text">{step.text}</p>
              </div>
              {index < steps.length - 1 && <div className="how-arrow"><Icon name="arrow-right" size={22} /></div>}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

function HappyCustomers() {
  const activeProducts = RassData.PRODUCTS.filter((product) => product.active);
  const minPrice = activeProducts.reduce((min, product) => Math.min(min, Number(product.price || 0)), Infinity);
  const maxDiscount = activeProducts.reduce((max, product) => {
    const discount = Number(product.compareAtPrice || 0) - Number(product.price || 0);
    return Math.max(max, discount);
  }, 0);

  const groupPhotos = [
    "/Jersey_assets/Happy-Customers-GroupPhoto%231.jpg",
    "/Jersey_assets/Happy-Customers-GroupPhoto%232.jpg",
    "/Jersey_assets/Happy-Customers-GroupPhoto%233.jpg",
    "/Jersey_assets/Happy-Customers-GroupPhoto%234.jpg",
  ];

  const chatReviews = [
    "/Jersey_assets/Facebook-Chat-PositiveReview%231.jpg",
    "/Jersey_assets/Facebook-Chat-PositiveReview%232.jpg",
    "/Jersey_assets/Facebook-Chat-PositiveReview%233.jpg",
  ];

  return (
    <section className="section happy-sect">
      <div className="wrap">
        <div className="stat-row">
          <div className="stat"><div className="stat-v price">From {Number.isFinite(minPrice) ? RassData.taka(minPrice).replace("TK ", "") : "550"} TK</div><div className="stat-l muted">Starting jersey price</div></div>
          <div className="stat"><div className="stat-v price">Up to {RassData.taka(maxDiscount).replace("TK ", "")} TK</div><div className="stat-l muted">Discount shown</div></div>
          <div className="stat"><div className="stat-v price">4</div><div className="stat-l muted">WhatsApp sales numbers</div></div>
        </div>

        <div className="sect-head" style={{ marginTop: 64, marginBottom: 34 }}>
          <div>
            <p className="sect-kicker">The Rass community</p>
            <h2 className="sect-title">Worn &amp; celebrated</h2>
          </div>
        </div>
        <div className="group-photo-grid">
          {groupPhotos.map((src, i) => (
            <div key={i} className={`group-photo-item${i === 0 ? " group-photo-featured" : ""}`}>
              <img src={src} alt="Happy customers wearing Rass jerseys" loading="lazy" />
            </div>
          ))}
        </div>

        <div className="sect-head" style={{ marginTop: 44, marginBottom: 20 }}>
          <div>
            <p className="sect-kicker">Straight from the chat</p>
            <h2 className="sect-title" style={{ fontSize: "clamp(22px, 3.5vw, 34px)" }}>Real buyers, real love</h2>
          </div>
        </div>
        <div className="chat-review-grid">
          {chatReviews.map((src, i) => (
            <div key={i} className="chat-review-card">
              <img src={src} alt="Customer review screenshot" loading="lazy" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, TrustBar, JerseyQuality, HowItWorks, HappyCustomers });