// Communiqué — shared components. Rebuilt 2026-09-03 to Jo's CMQ-website.psd (see design-assets/cmq-psd-extract/).

const IMG_BASE = 'assets/images/psd';
const ICON_BASE = 'assets/icons';
const imgUrl = (name) => (window.__resources && window.__resources[`img_${name}`]) || `${IMG_BASE}/${name}`;
const iconUrl = (name) => (window.__resources && window.__resources[`icon_${name}`]) || `${ICON_BASE}/${name}.svg`;

const Icon = ({ name, size = 16, style }) => (
  <img src={iconUrl(name)} alt="" width={size} height={size} className="icon-img" style={style}/>
);

// Eye mark + wordmark, as placed in the PSD nav bar (eye 74 × 46, wordmark 185 × 48).
const Wordmark = ({ variant = 'cream' }) => (
  <a className="brand" href="index.html" aria-label="Communiqué — home">
    <img className="eye" src={imgUrl(`eye-${variant}.png`)} alt=""/>
    <img className="wordmark" src={imgUrl(`wordmark-${variant}.png`)} alt="Communiqué"/>
  </a>
);

const Button = ({ variant = 'primary', children, onClick, type, href }) => (
  href
    ? <a className={`btn btn-${variant}`} href={href}>{children}</a>
    : <button type={type} className={`btn btn-${variant}`} onClick={onClick}>{children}</button>
);

// Section title with a rule either side. ruleLeft / ruleRight are flex values for the two rules
// (the PSD fixes one rule's length and lets the other run to the gutter).
const SectionTitle = ({ children, ruleLeft, ruleRight, className = '', id }) => (
  <h2
    id={id}
    className={`section-title ${className}`.trim()}
    style={{ '--rule-l': ruleLeft, '--rule-r': ruleRight }}
  >
    {children}
  </h2>
);

// ───────── Themes (labels as drawn in the PSD, hover fills per button) ─────────
const THEMES = [
  { key: 'labor', label: 'Labor Struggles', hover: 'var(--t-labor)', ink: 'var(--ink)' },
  { key: 'militarization', label: 'Militarization', hover: 'var(--t-milit)', ink: 'var(--cream)' },
  { key: 'solidarity', label: 'International Solidarity', hover: 'var(--t-solid)', ink: 'var(--cream)' },
  { key: 'data-centers', label: 'Data Centers', hover: 'var(--t-data)', ink: 'var(--ink)' },
  { key: 'ports', label: 'The Ports', hover: 'var(--t-ports)', ink: 'var(--cream)' },
  { key: 'palestine', label: 'Palestine / West Asia', hover: 'var(--t-pal)', ink: 'var(--ink)' },
  { key: 'belgium', label: 'Belgium / Europe', hover: 'var(--t-bel)', ink: 'var(--ink)' },
  { key: 'us', label: 'United States', hover: 'var(--t-us)', ink: 'var(--ink)' },
];

// ───────── Navigation (PSD: WHAT WE DO · THEMES · IMPACT · ABOUT US · JOIN + search + language) ─────────
// The PSD draws the bar only; the dropdown contents come from the site copy's "Navigation Elements".
const NAV_DATA = [
  { key: 'what', label: 'What we do', href: 'index.html#latest', items: [
    ['News', 'index.html#latest'], ['Articles / Analysis', 'index.html#latest'], ['Investigations', 'index.html#investigations'],
    ['Reports', 'index.html#latest'], ['Campaigns', 'index.html#latest'], ['Training', 'about.html'],
    ['Media Support', 'about.html'], ['Newsletter', '#newsletter'],
  ]},
  { key: 'themes', label: 'Themes', href: 'index.html#themes', items: THEMES.map(t => [t.label, `index.html#themes`]) },
  { key: 'impact', label: 'Impact', href: 'impact.html' },
  { key: 'about', label: 'About us', href: 'about.html', items: [
    ['Mission & values', 'about.html'], ['Team', 'team.html'], ['Board of directors', 'team.html'],
    ['How we are funded', 'funding.html'], ['Methodologies', 'methodologies.html'], ['Partnerships', 'about.html'],
    ['Annual reports', 'about.html'], ['Pitch us / Careers', 'careers.html'], ['Contact & FAQ', 'faq.html'],
    ['Anonymous tips', 'whistleblowing.html'],
  ]},
  { key: 'join', label: 'Join', href: 'index.html#membership' },
];

const Nav = ({ onMember }) => {
  const [open, setOpen] = React.useState(null);
  const [menu, setMenu] = React.useState(false);
  return (
    <header className="nav" data-menu={menu ? 'open' : 'closed'}>
      <div className="nav-inner">
        <Wordmark variant="cream"/>
        <nav className="nav-links" aria-label="Main">
          {NAV_DATA.map(({ key, label, href, items }) => (
            <span
              key={key}
              className="nav-link"
              data-open={open === key}
              onMouseEnter={() => items && setOpen(key)}
              onMouseLeave={() => setOpen(null)}
            >
              <a href={href} onClick={key === 'join' && onMember ? (e) => { if (location.pathname.endsWith('index.html') || location.pathname.endsWith('/')) { e.preventDefault(); onMember(); } } : undefined}>{label}</a>
              {items && (
                <div className="dropdown" role="menu">
                  {items.map(([text, to]) => <a key={text} href={to} role="menuitem">{text}</a>)}
                </div>
              )}
            </span>
          ))}
        </nav>
        <button className="search-btn" aria-label="Search">
          <img src={imgUrl('search-pixel.png')} alt=""/>
        </button>
        <button className="lang" aria-label="Language: English">
          EN - English
          <img src={imgUrl('chevron-down.png')} alt=""/>
        </button>
        <button className="menu-btn" aria-expanded={menu} onClick={() => setMenu(m => !m)}>{menu ? 'Close' : 'Menu'}</button>
      </div>
    </header>
  );
};

// ───────── Scrolling banner (PSD: lime ticker under the nav) ─────────
const TICKER_ITEMS = [
  ['Appeal:', "Dockers' legal fund — 62% raised", 'index.html#membership'],
  ['Event:', 'Open newsroom, 28 August, Rue Locquenghien 41', 'faq.html#contact'],
  ['New:', 'Court orders release of nineteen withheld inspection reports', 'index.html#investigations'],
];
const Ticker = () => {
  const items = [...TICKER_ITEMS, ...TICKER_ITEMS];
  return (
    <div className="ticker" role="marquee" aria-label="Announcements">
      <div className="ticker-track">
        {items.map(([label, text, href], i) => (
          <a className="ticker-item" href={href} key={i} aria-hidden={i >= TICKER_ITEMS.length ? 'true' : undefined} tabIndex={i >= TICKER_ITEMS.length ? -1 : undefined}>
            <b>{label}</b><span>{text}</span><span className="star" aria-hidden="true" style={{ textDecoration: 'none' }}>★</span>
          </a>
        ))}
      </div>
    </div>
  );
};
const TopRibbon = Ticker; // inner pages still call <TopRibbon/>

// ───────── Hero (PSD: featured investigation over a full-bleed photo) ─────────
const Hero = () => (
  <section className="hero" aria-labelledby="hero-title">
    <div className="hero-inner">
      <p className="hero-eyebrow">Investigations - featured story</p>
      <h1 id="hero-title"><a href="#investigations">Logistics for Genocide: FedEx makes billions on war, shipping weapons to Israel</a></h1>
    </div>
  </section>
);

// ───────── Open investigations gallery (PSD: cream band, editorial collage + two buttons) ─────────
// Jo, note 8 (2026-09-08, revised the same evening): the band is a carousel now. The arrows the
// PSD drew as decoration page the track (behaviour: assets/js/home-extras.js) and the CENTRE
// IMAGE is what grows: the collage is 1.85x its PSD size (685 × 393 design px to 1267 × 727).
// The slide stacks the collage above the headline and the CTAs so the two buttons keep sitting
// side by side; the geometry and the arithmetic are in styles/site.css under .gallery.
const OPEN_INV = {
  image: 'editorial-fedex.png',
  alt: 'Collage: a FedEx cargo aircraft, fighter jets, bombs and US defence agency seals over an orange map',
  title: ["Exposing FedEx's role in", 'the genocide supply chain'],
  href: '#investigations',
  ctas: [['Read the latest report', '#investigations', 'dark'], ['Subscribe for updates', '#newsletter', 'light']],
};
// PLACEHOLDER (Jo: "same thing repeated for now"). Communiqué has one open investigation, so the
// one item is repeated to give the carousel something to page through. When there is a real list,
// replace OPEN_INV/INV_PLACEHOLDER_COPIES with that list and map over it.
const INV_PLACEHOLDER_COPIES = 4;

const InvestigationSlide = ({ item, index }) => (
  <div className="gallery-slide" role="group" aria-roledescription="slide" aria-label={`Investigation ${index + 1}`}>
    <figure className="gallery-figure"><img src={imgUrl(item.image)} alt={item.alt}/></figure>
    <div className="gallery-body">
      <h3><a href={item.href}>{item.title[0]}{' '}<br className="br-desktop"/>{item.title[1]}</a></h3>
      <div className="inv-buttons">
        {item.ctas.map(([label, href, kind]) => <a className={`btn-inv ${kind}`} href={href} key={label}>{label}</a>)}
      </div>
    </div>
  </div>
);

const OpenInvestigations = () => (
  <section className="open-inv" id="investigations" aria-labelledby="open-inv-title">
    <SectionTitle id="open-inv-title" ruleLeft="1 1 auto" ruleRight="0 0 calc(136 * var(--px))">Open Investigations</SectionTitle>
    <div className="gallery">
      <button className="gallery-arrow prev" type="button" aria-label="Previous investigation"><img src={imgUrl('arrow-left.png')} alt=""/></button>
      <div className="gallery-viewport" tabIndex={0} role="group" aria-roledescription="carousel" aria-label="Open investigations">
        <div className="gallery-track">
          {Array.from({ length: INV_PLACEHOLDER_COPIES }, (_, i) => <InvestigationSlide item={OPEN_INV} index={i} key={i}/>)}
        </div>
      </div>
      <button className="gallery-arrow next" type="button" aria-label="Next investigation"><img src={imgUrl('arrow-right.png')} alt=""/></button>
      <p className="gallery-status visually-hidden" role="status" aria-live="polite"></p>
    </div>
  </section>
);

// ───────── Themes (PSD: orange textured band with the torn cream header, hard-shadow buttons) ─────────
const Themes = () => (
  <section className="themes" id="themes" aria-labelledby="themes-title">
    {/* On desktop the word THEMES and its rule are part of the textured header artwork from the PSD;
        this heading is shown on small screens and read by assistive tech. */}
    <SectionTitle id="themes-title" className="themes-title" ruleLeft="0 0 24px" ruleRight="1 1 auto">Themes</SectionTitle>
    <ul className="themes-grid">
      {THEMES.map(t => (
        <li key={t.key}>
          <a className="theme-btn" href={`index.html#themes`} style={{ '--hover': t.hover, '--hover-ink': t.ink }}>{t.label}</a>
        </li>
      ))}
    </ul>
    <img className="themes-motion" src={imgUrl('themes-motion.png')} alt="" aria-hidden="true"/>
  </section>
);

// ───────── Al-bayan (PSD: purple textured band, plant, giant headline, hand-drawn buttons, stacked video card) ─────────
// Jo, note 11 (2026-09-08): clicking anywhere in this band goes to al-bayan.communique.press
// except the video box, which plays in place. The full-bleed .albayan-cover anchor does the
// linking and the CSS makes the content layer click-through over it.
const ALBAYAN_URL = 'https://al-bayan.communique.press';

const AlBayan = () => (
  <section className="albayan" id="al-bayan" aria-labelledby="albayan-title">
    <a className="albayan-cover" href={ALBAYAN_URL} target="_blank" rel="noopener" aria-label="The al-bayan project"></a>
    <SectionTitle ruleLeft="0 0 calc(303 * var(--px))" ruleRight="1 1 auto">Independent media lab</SectionTitle>
    <img className="albayan-plant" src={imgUrl('albayan-plant.png')} alt="" aria-hidden="true"/>
    <div className="albayan-grid">
      <div className="albayan-body">
        <h2 id="albayan-title">The al-bayan{' '}<br className="br-desktop"/>project</h2>
        <p>Over 270 local reporters have been killed during Israel's genocidal assault, and foreign reporters are still barred from entry. Gaza's people need to have their voices heard. Journalists need funding in order to live and to tell their stories.</p>
        <div className="albayan-buttons">
          {/* Notes 12/13: the two hrefs come from DONATE_URL and ALBAYAN_INSTAGRAM_URL at the top
              of assets/js/home-extras.js. Until a constant is filled in the button falls back to
              the al-bayan landing page, which is where both pointed before. */}
          <a data-cta="donate" href={ALBAYAN_URL} target="_blank" rel="noopener"><img src={imgUrl('btn-donate.png')} alt="Donate"/></a>
          <a data-cta="follow" href={ALBAYAN_URL} target="_blank" rel="noopener"><img src={imgUrl('btn-follow-albayan.png')} alt="Follow al-bayan"/></a>
        </div>
      </div>
      <article className="vbox">
        <div className="vbox-thumb">
          <img src={imgUrl('albayan-video.jpg')} alt="Video still: boys reading in a mosque in Gaza"/>
          <button type="button" className="vbox-play" aria-label="Play: a day in the life of a Sheik in Gaza"></button>
        </div>
        <h3>A day in the life of a Sheik in Gaza</h3>
        <p>Charter contracts, budget lines and the three brokers that move people out of Zaventem on public money.</p>
        <div className="card-meta">
          <span className="date">9 August 2026 — L. Mertens</span>
          <span className="langs"><span>EN</span><span>AR</span></span>
        </div>
      </article>
    </div>
  </section>
);

// ───────── Become a member (PSD: dark band, lime headline, two 774 × 98 buttons) ─────────
const Membership = () => (
  <section className="member" id="membership" aria-labelledby="member-title">
    <h2 id="member-title">Become a member</h2>
    <p>We take no advertising and no state money. Members fund the records requests, the translators and the legal defence — about €14 a month keeps one investigation moving.</p>
    <div className="member-buttons">
      <a className="btn-member fill" href="faq.html#donations">Set up a monthly donation</a>
      <a className="btn-member line" href="careers.html#volunteer">Volunteer with Communiqué</a>
    </div>
  </section>
);

// ───────── Footer (PSD: green, black type, sign-up, three columns, eye mark, legal row) ─────────
const FOOTER_COLS = [
  ['What we do', [['News', 'index.html#latest'], ['Analysis', 'index.html#latest'], ['Investigations', 'index.html#investigations'], ['Reports', 'index.html#latest'], ['Campaigns', 'index.html#latest']]],
  ['About', [['Mission & values', 'about.html'], ['Team', 'team.html'], ['Board of directors', 'team.html'], ['How we are funded', 'funding.html'], ['Annual reports', 'about.html']]],
  ['Get involved', [['Become a member', 'index.html#membership'], ['Donate', 'faq.html#donations'], ['Volunteer', 'careers.html#volunteer'], ['Pitch us', 'careers.html#pitches'], ['Anonymous tips', 'whistleblowing.html'], ['Contact & FAQ', 'faq.html']]],
];
const LEGAL = ['Privacy policy', 'Accessibility', 'Cookie statement', 'Permissions', 'Disclaimers', 'Copyright notice'];

const Footer = () => {
  const [email, setEmail] = React.useState('');
  const [done, setDone] = React.useState(false);
  return (
    <footer className="footer" id="newsletter">
      <div className="footer-grid">
        <div className="footer-brand">
          <img className="wordmark" src={imgUrl('wordmark-black.png')} alt="Communiqué"/>
          <p className="footer-blurb">Independent nonprofit media. Actionable resources for social movements, support for independent journalists, and critical reporting in the public interest.</p>
          <p className="footer-signup-label">Sign up to receive the next Communiqué</p>
          {done ? (
            <div className="footer-form done">Subscribed — check {email || 'your inbox'} for confirmation.</div>
          ) : (
            <form className="footer-form" onSubmit={e => { e.preventDefault(); setDone(true); }}>
              <label className="visually-hidden" htmlFor="footer-email">Email address</label>
              <input id="footer-email" type="email" placeholder="Email address" value={email} onChange={e => setEmail(e.target.value)} required/>
              <button type="submit">Subscribe</button>
            </form>
          )}
        </div>
        {FOOTER_COLS.map(([title, links]) => (
          <div className="footer-col" key={title}>
            <h4>{title}</h4>
            <ul>{links.map(([text, href]) => <li key={text}><a href={href}>{text}</a></li>)}</ul>
          </div>
        ))}
        <div className="footer-eye"><img src={imgUrl('eye-black.png')} alt=""/></div>
      </div>
      <div className="footer-bar">
        <nav className="footer-legal" aria-label="Legal">
          {LEGAL.map(t => <a key={t} href="faq.html">{t}</a>)}
        </nav>
        <span className="footer-address">Communiqué ASBL · BE 1025.174.291 · Rue Locquenghien 41, 1000 Brussels, Belgium</span>
      </div>
    </footer>
  );
};

// The PSD has a single fixed palette; the old light/dark toggle is retired but the export stays for the page shells.
const ThemeToggle = () => null;

Object.assign(window, { Icon, Wordmark, Button, SectionTitle, THEMES, Nav, Ticker, TopRibbon, Hero, OpenInvestigations, Themes, AlBayan, Membership, Footer, ThemeToggle, imgUrl });