// Looks, Articles, Categories, Community, CTA, Techniques
// SECTION 2: horizontal scroll hijack (Looks)
// SECTION 3: accordion image slider (Articles)

const LOOKS = [
  { n: "01", kind: "Skin",    title: "Glass Skin",        line: "The five-step cycle that made it a movement.", href: "/en/skin/routine/looks/glass-skin",         img: "https://images.unsplash.com/photo-1596462502278-27bfdc403348?w=1400&q=80&auto=format&fit=crop" },
  { n: "02", kind: "Makeup",  title: "Strawberry Girl",   line: "Flushed cheeks, freckled nose, glossed lip.",   href: "/en/makeup/face/looks/strawberry-girl",     img: "https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=1400&q=80&auto=format&fit=crop" },
  { n: "03", kind: "Eyes",    title: "Smudged Liner",     line: "Soft kohl, slept-in, never sharp.",             href: "/en/makeup/eyes/looks/smudged-liner",       img: "https://images.unsplash.com/photo-1512496015851-a90fb38ba796?w=1400&q=80&auto=format&fit=crop" },
  { n: "04", kind: "Lips",    title: "High-Shine Lip",    line: "A wet look, built in three coats.",             href: "/en/makeup/lips/looks/high-shine-lip",      img: "https://images.unsplash.com/photo-1503236823255-94609f598e71?w=1400&q=80&auto=format&fit=crop" },
  { n: "05", kind: "Hair",    title: "Air-Dry Waves",     line: "Twist, scrunch, leave alone for an hour.",      href: "/en/hair/technique/looks/air-dry-waves",    img: "https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=1400&q=80&auto=format&fit=crop" },
  { n: "06", kind: "Brows",   title: "Laminated Brow",    line: "Brushed up, set once, lived in all day.",       href: "/en/makeup/eyes/looks/laminated-brow",      img: "https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=1400&q=80&auto=format&fit=crop" },
];

function Looks() {
  const trackRef = React.useRef(null);
  const wrapRef = React.useRef(null);
  const [paused, setPaused] = React.useState(false);
  const [focused, setFocused] = React.useState(null);
  const offsetRef = React.useRef(0);
  const rafRef = React.useRef(0);
  const lastTRef = React.useRef(0);

  // Duplicate the list so the marquee loops seamlessly
  const loop = [...LOOKS, ...LOOKS];

  React.useEffect(() => {
    const track = trackRef.current;
    if (!track) return;

    const SPEED = 28; // px per second — slow, ambient drift
    const step = (t) => {
      if (!lastTRef.current) lastTRef.current = t;
      const dt = (t - lastTRef.current) / 1000;
      lastTRef.current = t;
      if (!paused && focused === null) {
        offsetRef.current += SPEED * dt;
        const half = track.scrollWidth / 2;
        if (offsetRef.current >= half) offsetRef.current -= half;
        track.style.transform = "translate3d(" + (-offsetRef.current) + "px,0,0)";
      }
      rafRef.current = requestAnimationFrame(step);
    };
    rafRef.current = requestAnimationFrame(step);
    return () => cancelAnimationFrame(rafRef.current);
  }, [paused, focused]);

  // ESC closes focus
  React.useEffect(() => {
    if (focused === null) return;
    const onKey = (e) => { if (e.key === "Escape") setFocused(null); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [focused]);

  return (
    <section className="section looks-mq" aria-labelledby="looks-h">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <div className="eyebrow">The Index / 001</div>
            <h2 id="looks-h">The looks <em>everyone</em><br />is talking about.</h2>
          </div>
          <p className="lede">Drifting past, slowly. Hover to pause, click any card to read.</p>
        </div>
      </div>

      <div
        ref={wrapRef}
        className="mq-wrap"
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
      >
        <div ref={trackRef} className="mq-track">
          {loop.map((l, i) => (
            <a
              key={i}
              href={l.href}
              className="mq-card"
              aria-label={`Read ${l.title}`}
            >
              <img src={l.img} alt="" />
              <div className="mq-over" />
              <div className="mq-top">
                <span className="mq-n">{l.n}</span>
                <span className="mq-kind">{l.kind}</span>
              </div>
              <div className="mq-cap">
                <h3>{l.title}</h3>
                <p>{l.line}</p>
              </div>
            </a>
          ))}
        </div>
        <div className="mq-fade mq-fade-l" />
        <div className="mq-fade mq-fade-r" />
        <div className="mq-hint">
          <span className={`mq-dot ${paused ? "paused" : ""}`} aria-hidden="true" />
          {paused ? "Paused" : "Drifting"} · Click a card to read
        </div>
      </div>

      {focused !== null && (
        <div className="mq-modal" onClick={() => setFocused(null)}>
          <div className="mq-modal-inner" onClick={(e) => e.stopPropagation()}>
            <button className="mq-close" onClick={() => setFocused(null)} aria-label="Close">✕</button>
            <img src={LOOKS[focused].img} alt="" />
            <div className="mq-modal-meta">
              <div className="mq-modal-top">
                <span className="mq-n">{LOOKS[focused].n}</span>
                <span className="mq-kind">{LOOKS[focused].kind}</span>
              </div>
              <h3>{LOOKS[focused].title}</h3>
              <p className="mq-modal-line">{LOOKS[focused].line}</p>
              <a className="btn btn-primary" href={LOOKS[focused].href}>Read the how-to <span aria-hidden="true">→</span></a>
              <div className="mq-modal-nav">
                <button onClick={() => setFocused((f) => (f - 1 + LOOKS.length) % LOOKS.length)} aria-label="Previous">←</button>
                <span>{String(focused + 1).padStart(2, "0")} / {String(LOOKS.length).padStart(2, "0")}</span>
                <button onClick={() => setFocused((f) => (f + 1) % LOOKS.length)} aria-label="Next">→</button>
              </div>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

// ──────────────────────────────────────────────────────
// Articles — Accordion image slider (6 expanding panels)
// ──────────────────────────────────────────────────────

const ARTICLES = [
  { cat: "Skin",   title: "A Flawless Base",        by: "Elena M.",   read: "6 min", tease: "The three-product base that looks like skin, not makeup.", img: "https://images.unsplash.com/photo-1487412947147-5cebf100ffc2?w=1200&q=80&auto=format&fit=crop", href: "/en/skin/moisturising/oily/apply-flawless-base" },
  { cat: "Skin",   title: "Glass Skin at Home",     by: "Yuna K.",    read: "8 min", tease: "Why the Korean ten-step works — and the four steps you actually need.", img: "https://images.unsplash.com/photo-1619451334792-150fd785ee74?w=1200&q=80&auto=format&fit=crop", href: "/en/skin/routine/looks/glass-skin" },
  { cat: "Makeup", title: "Five-Minute Everyday Eye", by: "Nelly",    read: "4 min", tease: "One pencil, one shadow, one mascara. The formula Nelly has used for a decade.", img: "https://images.unsplash.com/photo-1512496015851-a90fb38ba796?w=1200&q=80&auto=format&fit=crop", href: "/en/contributors/nelly/everyday-eye" },
  { cat: "Brows",  title: "Shape Your Brows",       by: "Nelly",      read: "7 min", tease: "Measure the inner corner, find the arch, and — this is the part people skip — stop.", img: "https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=1200&q=80&auto=format&fit=crop", href: "/en/contributors/nelly/shape-your-brows" },
  { cat: "Skin",   title: "On Slugging",            by: "Rae T.",     read: "5 min", tease: "When it works, when it doesn't, and the twelve-dollar alternative.", img: "https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?w=1200&q=80&auto=format&fit=crop", href: "/en/skin/moisturising/oily/do-slugging" },
  { cat: "Skin",   title: "Fade Dark Spots",        by: "Priya N.",   read: "9 min", tease: "The patient, unglamorous, genuinely effective protocol.", img: "https://images.unsplash.com/photo-1620916566398-39f1143ab7be?w=1200&q=80&auto=format&fit=crop", href: "/en/skin/moisturising/oily/fade-dark-spots" },
];

function Articles() {
  const [active, setActive] = React.useState(2); // Nelly's panel opens by default

  return (
    <section className="section accord-sec" aria-labelledby="art-h">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <div className="eyebrow">The Index / 002</div>
            <h2 id="art-h">How-to's worth <em>bookmarking.</em></h2>
          </div>
          <p className="lede">Six essays to save for later. Hover — or tap — a strip to read.</p>
        </div>
      </div>

      <div className="container">
        <div className="accord">
          {ARTICLES.map((a, i) => (
            <a
              key={a.title}
              href={a.href || "#"}
              className={`accord-p ${i === active ? "active" : ""}`}
              onMouseEnter={() => setActive(i)}
              onFocus={() => setActive(i)}
            >
              <img className="accord-bg" src={a.img} alt="" loading="lazy" />
              <div className="accord-over" />
              <div className="accord-label">
                <span className="accord-n">{String(i+1).padStart(2, "0")}</span>
                <span className="accord-cat">{a.cat}</span>
                <span className="accord-vt">{a.title}</span>
              </div>
              <div className="accord-expanded">
                <div className="accord-meta">
                  <span>{a.cat}</span>
                  <span>·</span>
                  <span>{a.read}</span>
                  <span>·</span>
                  <span>By {a.by}</span>
                </div>
                <h3>{a.title}</h3>
                <p>{a.tease}</p>
                <span className="accord-cta">Read the how-to <span aria-hidden="true">→</span></span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────
// Categories, Community, CTA, Techniques (unchanged)
// ──────────────────────────────────────────────────────

const CATS = [
  { name: "Skin",      href: "/en/skin/",      count: "2,140", img: "https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?w=1400&q=80&auto=format&fit=crop", kick: "Rituals & routines" },
  { name: "Makeup",    href: "/en/makeup/",    count: "1,820", img: "https://images.unsplash.com/photo-1596704017254-9b121068fb31?w=1000&q=80&auto=format&fit=crop" },
  { name: "Hair",      href: "/en/hair/",      count: "1,510", img: "https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=1000&q=80&auto=format&fit=crop" },
  { name: "Fragrance", href: "/en/fragrance/", count: "640",   img: "https://images.unsplash.com/photo-1541643600914-78b084683601?w=1000&q=80&auto=format&fit=crop" },
  { name: "Body",      href: "/en/body/",      count: "1,260", img: "https://images.unsplash.com/photo-1591343395082-e120087004b4?w=1000&q=80&auto=format&fit=crop" },
  { name: "Nails",     href: "/en/nails/",     count: "890",   img: "https://images.unsplash.com/photo-1604654894610-df63bc536371?w=1000&q=80&auto=format&fit=crop" },
  { name: "Wellness x Beauty", count: "1,040", img: "https://images.unsplash.com/photo-1540555700478-4be289fbecef?w=1000&q=80&auto=format&fit=crop" },
];

function Arrow() {
  return (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
      <path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" strokeWidth="1" strokeLinecap="round"/>
    </svg>
  );
}

function Categories() {
  return (
    <section className="section section-dark" aria-labelledby="cat-h">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <div className="eyebrow">Browse by Category</div>
            <h2 id="cat-h">What are you <em>working on?</em></h2>
          </div>
          <p className="lede">Ten thousand how-to's, grouped the way you'd actually ask for them. Pick the corner of beauty you're in today.</p>
        </div>
        <div className="cats">
          <a className="cat hero-cat reveal" href={CATS[0].href}>
            <img src={CATS[0].img} alt="" loading="lazy" />
            <span className="cat-count">{CATS[0].count} techniques</span>
            <span className="cat-arrow"><Arrow /></span>
            <div className="cat-body">
              {CATS[0].kick && <div className="cat-kick">{CATS[0].kick}</div>}
              <h4>{CATS[0].name}</h4>
            </div>
          </a>
          <a className="cat reveal reveal-delay-1" href={CATS[1].href}>
            <img src={CATS[1].img} alt="" loading="lazy" />
            <span className="cat-count">{CATS[1].count}</span>
            <span className="cat-arrow"><Arrow /></span>
            <div className="cat-body"><h4>{CATS[1].name}</h4></div>
          </a>
          <a className="cat reveal reveal-delay-2" href={CATS[2].href}>
            <img src={CATS[2].img} alt="" loading="lazy" />
            <span className="cat-count">{CATS[2].count}</span>
            <span className="cat-arrow"><Arrow /></span>
            <div className="cat-body"><h4>{CATS[2].name}</h4></div>
          </a>
        </div>
        <div className="cats" style={{marginTop: 20, gridTemplateColumns: "1fr 1fr 1fr 1fr"}}>
          {CATS.slice(3).map((c, i) => (
            <a key={c.name} className={`cat reveal reveal-delay-${(i%4)+1}`} href={c.href} style={{aspectRatio: "4 / 5"}}>
              <img src={c.img} alt="" loading="lazy" />
              <span className="cat-count">{c.count}</span>
              <span className="cat-arrow"><Arrow /></span>
              <div className="cat-body"><h4 style={{fontSize: 30}}>{c.name}</h4></div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Community() {
  const items = [
    {
      who: "Maya R.",
      handle: "@mayaroutine",
      tag: "Glass Skin · 6 weeks",
      caption: "Barrier rebuild, 4% niacinamide, SPF every morning. That's the whole list.",
      before: "/redesign/results/maya-before.jpg",
      after: "/redesign/results/maya-after.jpg",
    },
    {
      who: "Jules P.",
      handle: "@jules.does.brows",
      tag: "Laminated Brow · Same day",
      caption: "Brushed up, set with clear gel, trimmed the strays that were still standing at attention.",
      before: "/redesign/results/jules-before.jpg",
      after: "/redesign/results/jules-after.jpg",
    },
    {
      who: "Anika S.",
      handle: "@anika.daily",
      tag: "Air-Dry Waves · Overnight",
      caption: "Damp hair, two twists, silk scarf, bed. Undone in the morning. That's the technique.",
      before: "/redesign/results/anika-before.jpg",
      after: "/redesign/results/anika-after.jpg",
    },
  ];

  const [pos, setPos] = React.useState(items.map(() => 50));

  return (
    <section className="section-ink ba-sec" aria-labelledby="ba-h">
      <div className="container">
        <div className="section-head reveal" style={{marginBottom: 48}}>
          <div>
            <div className="eyebrow">Community</div>
            <h2 id="ba-h">Real people. <em>Real results.</em></h2>
          </div>
          <p className="lede">Drag the line. See the technique do its work. Every result here was submitted by someone who followed the how-to.</p>
        </div>

        <div className="ba-grid">
          {items.map((it, i) => (
            <div key={it.who} className="ba-card reveal">
              <div
                className="ba-frame"
                onMouseMove={(e) => {
                  const r = e.currentTarget.getBoundingClientRect();
                  const x = ((e.clientX - r.left) / r.width) * 100;
                  setPos((p) => p.map((v, j) => (j === i ? Math.max(2, Math.min(98, x)) : v)));
                }}
                onTouchMove={(e) => {
                  const t = e.touches[0]; if (!t) return;
                  const r = e.currentTarget.getBoundingClientRect();
                  const x = ((t.clientX - r.left) / r.width) * 100;
                  setPos((p) => p.map((v, j) => (j === i ? Math.max(2, Math.min(98, x)) : v)));
                }}
              >
                <img className="ba-img ba-after" src={it.after} alt={`${it.who} after`} loading="lazy" />
                <div className="ba-clip" style={{width: pos[i] + "%"}}>
                  <img className="ba-img ba-before" src={it.before} alt={`${it.who} before`} loading="lazy" style={{width: `calc(100% * (100 / ${pos[i]}))`}} />
                </div>
                <div className="ba-line" style={{left: pos[i] + "%"}}>
                  <div className="ba-handle">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
                      <path d="M7 4L3 9l4 5M11 4l4 5-4 5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </div>
                </div>
                <span className="ba-tag ba-tag-l">Before</span>
                <span className="ba-tag ba-tag-r">After</span>
              </div>
              <div className="ba-meta">
                <div className="ba-top">
                  <span className="ba-who">{it.who}</span>
                  <span className="ba-handle-txt">{it.handle}</span>
                </div>
                <div className="ba-kicker">{it.tag}</div>
                <p className="ba-cap">"{it.caption}"</p>
              </div>
            </div>
          ))}
        </div>

        <div className="ba-foot reveal">
          <a className="head-link" href="/en/contact" style={{color: "inherit"}}>Submit your result <span aria-hidden="true">→</span></a>
        </div>
      </div>
    </section>
  );
}

function CtaNext() {
  return (
    <section className="cta-next">
      <div className="container reveal">
        <h2>Ready for your <em>next look?</em></h2>
        <a className="btn btn-primary" href="/en/contact">Join the community <span aria-hidden="true">→</span></a>
      </div>
    </section>
  );
}

const TECH_LEFT = [
  { t: "Glass Skin",                          href: "/en/skin/routine/looks/glass-skin",                                                  cat: "Skin" },
  { t: "Without the Mid-Day Slick",           href: "/en/skin/moisturising/oily/without-the-mid-day-slick/",                              cat: "Skin" },
  { t: "Layer Rosehip Oil Over a Hyaluronic Serum", href: "/en/skin/moisturising/oily/layer-rosehip-oil-over-a-hyaluronic-serum",         cat: "Skin" },
  { t: "Strawberry Girl",                     href: "/en/makeup/face/looks/strawberry-girl",                                              cat: "Makeup" },
  { t: "Smudged Liner",                       href: "/en/makeup/eyes/looks/smudged-liner",                                                cat: "Eyes" },
  { t: "High-Shine Lip",                      href: "/en/makeup/lips/looks/high-shine-lip",                                               cat: "Lips" },
];
const TECH_RIGHT = [
  { t: "Laminated Brow",                      href: "/en/makeup/eyes/looks/laminated-brow",                                               cat: "Brows" },
  { t: "The Five-Minute Eye With Two Products", href: "/en/skin/moisturising/oily/do-an-everyday-five-minute-eye-with-one-pencil-and-one-shado", cat: "Eyes" },
  { t: "Sixties Eye Makeup",                  href: "/en/skin/moisturising/oily/maquiagem-anos-60",                                       cat: "Eyes" },
  { t: "Air-Dry Waves",                       href: "/en/hair/technique/looks/air-dry-waves",                                             cat: "Hair" },
  { t: "A Flawless Base",                     href: "/en/skin/moisturising/oily/apply-flawless-base",                                     cat: "Skin" },
  { t: "On Slugging",                         href: "/en/skin/moisturising/oily/do-slugging",                                             cat: "Skin" },
];

function Techniques() {
  return (
    <section className="section section-tight">
      <div className="container">
        <div className="section-head reveal" style={{marginBottom: 36}}>
          <div>
            <div className="eyebrow">Featured Techniques</div>
            <h2>Twelve to try <em>this week.</em></h2>
          </div>
          <a className="head-link" href="/en/body/">Full index <span aria-hidden="true">→</span></a>
        </div>
        <div className="techs">
          <div>
            {TECH_LEFT.map((item, i) => (
              <a key={item.href} className="tech" href={item.href}>
                <span className="tn">{String(i+1).padStart(2, "0")}</span>
                <span className="tlabel">{item.t}</span>
                <span className="tcat">{item.cat}</span>
              </a>
            ))}
          </div>
          <div>
            {TECH_RIGHT.map((item, i) => (
              <a key={item.href} className="tech" href={item.href}>
                <span className="tn">{String(i+7).padStart(2, "0")}</span>
                <span className="tlabel">{item.t}</span>
                <span className="tcat">{item.cat}</span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function EditorialDisclaimer({ topic }) {
  const t = topic || "beauty and self-care";
  return (
    <aside className="editorial-disclaimer" role="note" aria-label="Editorial notice">
      <strong>Editorial, not medical advice.</strong> This is general {t} guidance from our editors, not a diagnosis or treatment plan. If you have a skin, scalp, hair, or body concern — or are unsure whether a product or routine is right for you — speak with a licensed dermatologist or doctor.
    </aside>
  );
}

Object.assign(window, { Looks, Articles, Categories, Community, CtaNext, Techniques, EditorialDisclaimer });