// Heritage — institutional dark editorial: asymmetric narrative + carousel of curated categories
const CATEGORIES = [
  { id: 'jewellery',   label: 'Jewellery & Watches',  image: 'cat-jewellery.png?v=3'   },
  { id: 'fragrance',   label: 'Fragrance & Beauty',   image: 'cat-fragrance.png?v=3'   },
  { id: 'fashion',     label: 'Fashion & Apparel',    image: 'cat-fashion.png?v=3'     },
  { id: 'wines',       label: 'Wines & Spirits',      image: 'cat-wines.png?v=1'       },
  { id: 'accessories', label: 'Accessories',          image: 'cat-accessories.png?v=4' },
  { id: 'athleisure',  label: 'Athleisure',           image: 'cat-athleisure.png?v=2'  },
  { id: 'food',        label: 'Gourmet & Food',       image: 'cat-food.png?v=1'        },
  { id: 'wellness',    label: 'Wellness',             image: 'cat-wellness.png?v=1'    },
];

const Heritage = () => {
  // Duplicated list enables a seamless infinite loop via CSS marquee.
  const loop = [...CATEGORIES, ...CATEGORIES];

  return (
    <section className="gb-section gb-heritage" id="heritage">
      <div className="gb-container">

        {/* Asymmetric editorial intro */}
        <div className="gb-her2">
          <div className="gb-her2__rail">
            <span className="gb-her2__eyebrow">— I. HERITAGE</span>
          </div>

          <div className="gb-her2__lede">
            <h2 className="gb-her2__title">
              <span className="gb-her2__title-l1">Discretion</span>
              <span className="gb-her2__title-l2">&amp; Resilience,</span>
              <span className="gb-her2__title-l3"><em>since 2008.</em></span>
            </h2>
          </div>

          <div className="gb-her2__body">
            <p className="gb-her2__lead">
              Founded in 2008 by an Australian-led private consortium, Goodbrand Group was
              built on a foundation of absolute discretion and financial resilience.
            </p>
            <p>
              For nearly two decades, we have operated seamlessly in the deep waters of
              global commerce — evolving from a boutique capital group into a pivotal
              architect of the Asia-Pacific trade landscape.
            </p>
            <p>
              Our legacy is defined by long-term partnerships and a proven track record
              of silent, enduring success.
            </p>

            {/* Heritage timeline — 2008 → present */}
            <div className="gb-her2__timeline" style={{marginTop:48, paddingTop:24, borderTop:'1px solid rgba(245,243,238,0.18)'}}>
              <div className="t-overline" style={{fontSize:11, letterSpacing:'0.18em', color:'rgba(245,243,238,0.55)', marginBottom:20, display:'block'}}>
                — Operational continuity
              </div>
              <div style={{position:'relative', display:'flex', alignItems:'center', gap:0, fontFamily:'var(--font-mono, ui-monospace, monospace)', fontSize:11, letterSpacing:'0.14em', color:'rgba(245,243,238,0.65)'}}>
                <span style={{flexShrink:0}}>2008</span>
                <span style={{flex:'1 1 auto', height:1, margin:'0 14px', background:'linear-gradient(90deg, rgba(201,168,107,0.55) 0%, rgba(201,168,107,0.18) 100%)'}}></span>
                <span style={{flexShrink:0, color:'rgba(245,243,238,0.42)'}}>2014</span>
                <span style={{flex:'1 1 auto', height:1, margin:'0 14px', background:'rgba(201,168,107,0.2)'}}></span>
                <span style={{flexShrink:0, color:'rgba(245,243,238,0.42)'}}>2020</span>
                <span style={{flex:'1 1 auto', height:1, margin:'0 14px', background:'rgba(201,168,107,0.2)'}}></span>
                <span style={{flexShrink:0, display:'inline-flex', alignItems:'center', gap:8, color:'rgba(255,235,180,1)'}}>
                  <span style={{width:7, height:7, borderRadius:'50%', background:'rgba(255,235,180,1)', boxShadow:'0 0 10px rgba(255,235,180,0.7)'}}></span>
                  PRESENT
                </span>
              </div>
            </div>
          </div>
        </div>

        {/* Lifestyle carousel */}
        <div className="gb-her2__carousel-wrap">
          <div className="gb-her2__carousel-head">
            <span className="gb-her2__eyebrow">— Lifestyle &amp; Luxury</span>
            <h3 className="gb-her2__sub">
              The categories we curate, move, and place across Asia-Pacific.
            </h3>
          </div>

          <div className="gb-cat-carousel">
            <div className="gb-cat-viewport">
              <div className="gb-cat-track">
                {loop.map((c, i) => (
                  <figure key={`${c.id}-${i}`} className="gb-cat-card" aria-hidden={i >= CATEGORIES.length ? 'true' : undefined}>
                    <div className="gb-cat-card__bg" style={{
                      backgroundImage: `url('${c.image}')`,
                      backgroundSize: 'cover',
                      backgroundPosition: 'center',
                    }}></div>
                    <figcaption className="gb-cat-card__cap">
                      {c.label}
                    </figcaption>
                  </figure>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.Heritage = Heritage;