// Shared chrome: header, CTA band, footer, and small helpers.
// Globals: Header, Footer, CallToAction, Brand, BrandMark, Icon, NAV_ITEMS, getLang, setLang, formatRp, formatRpFull,
//          getJSON, getSettings, fmtDate, waLink, igHandle, Progress, ProgramCard, sortPrograms, CATEGORY_ID

function formatRp(n) {
  n = Number(n) || 0;
  if (n >= 1e9) return 'Rp ' + (n/1e9).toFixed(n % 1e9 === 0 ? 0 : 1).replace('.', ',') + ' M';
  if (n >= 1e6) return 'Rp ' + (n/1e6).toFixed(n % 1e6 === 0 ? 0 : 1).replace('.', ',') + ' jt';
  if (n >= 1e3) return 'Rp ' + Math.round(n/1e3) + ' rb';
  return 'Rp ' + n;
}
function formatRpFull(n) {
  return 'Rp ' + Math.round(Number(n) || 0).toLocaleString('id-ID');
}

const NAV_ITEMS = [
  { id: 'home',    href: 'index.html',   label: { en: 'Home',    id: 'Beranda' } },
  { id: 'causes',  href: 'causes.html',  label: { en: 'Causes',  id: 'Program' } },
  { id: 'events',  href: 'events.html',  label: { en: 'Events',  id: 'Acara' } },
  { id: 'blog',    href: 'blog.html',    label: { en: 'Blog',    id: 'Cerita' } },
  { id: 'contact', href: 'contact.html', label: { en: 'Contact', id: 'Kontak' } },
];

const I18N_LANG_KEY = 'duatangan_lang';
function getLang() { return 'id'; }
function setLang(l) {
  try { localStorage.setItem(I18N_LANG_KEY, l); } catch {}
  window.dispatchEvent(new CustomEvent('lang-change', { detail: l }));
}

// One request per URL per page load; several sections share settings/stats.
const _jsonCache = {};
function getJSON(url) {
  if (!_jsonCache[url]) {
    _jsonCache[url] = fetch(url).then(r => { if (!r.ok) throw new Error(r.status); return r.json(); });
  }
  return _jsonCache[url];
}
function getSettings() { return getJSON('/api/settings.php').catch(() => ({})); }

function fmtDate(s, opts = { day: 'numeric', month: 'short', year: 'numeric' }) {
  if (!s) return '';
  const d = new Date(String(s).replace(' ', 'T'));
  return isNaN(d) ? s : d.toLocaleDateString('id-ID', opts);
}

// WhatsApp number from settings ("0812…", "+62 812…") → wa.me link
function waLink(num) {
  let digits = String(num || '').replace(/\D/g, '');
  if (!digits) return '';
  if (digits.startsWith('0')) digits = '62' + digits.slice(1);
  return 'https://wa.me/' + digits;
}
function igHandle(url) {
  const m = String(url || '').match(/instagram\.com\/([^/?#]+)/i);
  return m ? '@' + m[1] : (url || '');
}

function Icon({ name, size = 18, stroke = 1.8, ...rest }) {
  const common = {
    viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: stroke,
    strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true,
    ...rest, style: { width: size, height: size, flex: 'none', ...rest.style },
  };
  switch (name) {
    case 'arrow-right': return <svg {...common}><path d="M5 12h14M13 5l7 7-7 7" /></svg>;
    case 'arrow-left':  return <svg {...common}><path d="M19 12H5M11 5l-7 7 7 7" /></svg>;
    case 'heart':       return <svg {...common}><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" /></svg>;
    case 'check':       return <svg {...common}><path d="M20 6 9 17l-5-5" /></svg>;
    case 'doc':         return <svg {...common}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h6"/></svg>;
    case 'pin':         return <svg {...common}><path d="M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></svg>;
    case 'phone':       return <svg {...common}><path d="M22 16.9V20a2 2 0 0 1-2.2 2A19.9 19.9 0 0 1 2 4.2 2 2 0 0 1 4 2h3.1a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 10a16 16 0 0 0 6 6l1.4-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z"/></svg>;
    case 'mail':        return <svg {...common}><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/></svg>;
    case 'instagram':   return <svg {...common}><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.6" fill="currentColor"/></svg>;
    case 'whatsapp':    return <svg {...common}><path d="M21 12a9 9 0 0 1-13.5 7.8L3 21l1.3-4.4A9 9 0 1 1 21 12z"/><path d="M8.5 9.5c0 3.5 2.5 6 6 6l1.3-1.3-1.8-1-1 .8c-1.2-.4-2.3-1.5-2.8-2.8l.8-1-1-1.8z"/></svg>;
    case 'tiktok':      return <svg {...common}><path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"/></svg>;
    case 'calendar':    return <svg {...common}><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>;
    case 'clock':       return <svg {...common}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>;
    case 'alert':       return <svg {...common}><circle cx="12" cy="12" r="10"/><path d="M12 7v6M12 17h.01"/></svg>;
    case 'download':    return <svg {...common}><path d="M12 3v12M7 10l5 5 5-5M4 21h16"/></svg>;
    default:            return <svg {...common}><circle cx="12" cy="12" r="10"/></svg>;
  }
}

function BrandMark({ size = 40 }) {
  return <img className="brand-mark" src="/assets/logo-mark.png" alt="" width={size} height={size} style={{ width: size, height: size }} />;
}

function Brand() {
  return <a href="index.html" className="brand"><BrandMark />Dua Tangan</a>;
}

function Header({ active = 'home' }) {
  return (
    <header className="site-header">
      <div className="container header-inner">
        <Brand />
        <nav className="nav" aria-label="Menu utama">
          {NAV_ITEMS.map(item => (
            <a key={item.id} href={item.href} aria-current={active === item.id ? 'page' : undefined}>{item.label.id}</a>
          ))}
        </nav>
        {/* DONATE BUTTON HIDDEN — restore as <a href="donate.html" className="btn btn-primary btn-sm header-cta">Donasi</a> */}
        <a href="contact.html" className="btn btn-primary btn-sm header-cta">Hubungi kami</a>
      </div>
    </header>
  );
}

function CallToAction() {
  const [s, setS] = React.useState({});
  React.useEffect(() => { getSettings().then(setS); }, []);
  const wa = waLink(s.whatsapp);
  return (
    <section className="cta section">
      <div className="container cta-inner">
        <div>
          <h2>Ingin ikut <em>membantu?</em></h2>
          <p>Hubungi kami untuk berdonasi, mengirim barang, atau menjadi relawan. Setiap bantuan dicatat dan dilaporkan di halaman program.</p>
        </div>
        <div className="actions">
          {wa && <a className="btn btn-light" href={wa} target="_blank" rel="noopener"><Icon name="whatsapp" size={18}/>WhatsApp</a>}
          <a className={'btn ' + (wa ? 'btn-ghost-light' : 'btn-light')} href="contact.html">Hubungi kami</a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const [s, setS] = React.useState({});
  React.useEffect(() => { getSettings().then(setS); }, []);
  const wa = waLink(s.whatsapp);
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <Brand />
            <p>Organisasi sosial di Pekanbaru, Riau. Setiap donasi yang masuk dan setiap pembelian kami catat secara terbuka.</p>
          </div>
          <div>
            <h4>Halaman</h4>
            {NAV_ITEMS.map(i => <a key={i.id} href={i.href}>{i.label.id}</a>)}
          </div>
          <div>
            <h4>Kontak</h4>
            {wa && <a href={wa} target="_blank" rel="noopener">WhatsApp</a>}
            {s.phone && <a href={'tel:' + s.phone.replace(/[^\d+]/g, '')}>{s.phone}</a>}
            {s.contact_email && <a href={'mailto:' + s.contact_email}>{s.contact_email}</a>}
            {s.instagram && <a href={s.instagram} target="_blank" rel="noopener">Instagram</a>}
            {s.tiktok && <a href={s.tiktok} target="_blank" rel="noopener">TikTok</a>}
          </div>
        </div>
        <div className="footer-fine">© {new Date().getFullYear()} Dua Tangan · Pekanbaru, Riau</div>
      </div>
    </footer>
  );
}

// True once the element has scrolled into view (always true without IntersectionObserver)
function useInView(threshold = 0.25) {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el || !('IntersectionObserver' in window)) { setSeen(true); return; }
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } }, { threshold });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return [ref, seen];
}

const REDUCED_MOTION = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// Counts from 0 to value once visible
function CountUp({ value, format = n => n, duration = 1400 }) {
  const [ref, seen] = useInView(0.4);
  const [n, setN] = React.useState(REDUCED_MOTION ? value : 0);
  React.useEffect(() => {
    if (!seen || REDUCED_MOTION) { if (REDUCED_MOTION) setN(value); return; }
    let raf, start;
    const tick = t => {
      if (!start) start = t;
      const k = Math.min(1, (t - start) / duration);
      setN(Math.round(value * (1 - Math.pow(1 - k, 4))));
      if (k < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [seen, value]);
  return <span ref={ref}>{format(n)}</span>;
}

// Single-select filter pills. options: [{ value, label, count? }]
function Pills({ options, value, onChange, label }) {
  return (
    <div className="pills" role="radiogroup" aria-label={label}>
      {options.map(o => (
        <button key={o.value} type="button" role="radio" aria-checked={value === o.value} className="pill" onClick={() => onChange(o.value)}>
          {o.label}{o.count != null && <span className="pill-count">{o.count}</span>}
        </button>
      ))}
    </div>
  );
}

function Progress({ raised, goal }) {
  const pct = goal > 0 ? Math.min(100, Math.round((raised / goal) * 100)) : 0;
  const [ref, seen] = useInView(0.5);
  return (
    <div ref={ref}>
      <div className="bar" role="progressbar" aria-valuenow={pct} aria-valuemin="0" aria-valuemax="100" aria-label="Dana terkumpul">
        <span style={{ width: pct + '%', '--fill': seen || REDUCED_MOTION ? 1 : 0 }} />
      </div>
      <div className="funding-row">
        <span><strong className="num">{formatRpFull(raised)}</strong> dari {formatRpFull(goal)}</span>
        <span className="num">{pct}%</span>
      </div>
    </div>
  );
}

function StoryCard({ p }) {
  return (
    <article className="story card">
      {p.image && <div className="story-media"><img src={p.image} alt="" loading="lazy" /></div>}
      <div className="story-body">
        {p.category && <span className="badge">{p.category}</span>}
        <h3><a href={`post.html?slug=${encodeURIComponent(p.slug)}`}>{p.title}</a></h3>
        {p.excerpt && <p>{p.excerpt}</p>}
        <p className="by">{fmtDate(p.published_at, { day: 'numeric', month: 'long', year: 'numeric' })}</p>
      </div>
    </article>
  );
}

// Photo carousel: native scroll-snap (swipe / trackpad / shift-wheel), plus arrows, dots and ←/→ keys.
// One image renders as a plain picture with no controls.
function Carousel({ images, className = '', label = 'Foto' }) {
  const track = React.useRef(null);
  const [i, setI] = React.useState(0);
  const n = images.length;
  const go = k => {
    const el = track.current;
    const to = Math.max(0, Math.min(n - 1, k));
    el.scrollTo({ left: to * el.clientWidth, behavior: REDUCED_MOTION ? 'auto' : 'smooth' });
  };
  const onScroll = () => { const el = track.current; setI(Math.round(el.scrollLeft / el.clientWidth)); };
  const onKey = e => {
    if (e.key === 'ArrowLeft') { e.preventDefault(); go(i - 1); }
    if (e.key === 'ArrowRight') { e.preventDefault(); go(i + 1); }
  };
  if (!n) return null;
  if (n === 1) return <div className={'carousel ' + className}><img className="carousel-img" src={images[0]} alt="" /></div>;
  return (
    <div className={'carousel ' + className} role="region" aria-roledescription="carousel" aria-label={label}>
      <div className="carousel-track" ref={track} onScroll={onScroll} onKeyDown={onKey} tabIndex="0" aria-label={`${label}: geser untuk melihat foto lain`}>
        {images.map((src, k) => (
          <div className="carousel-slide" key={k} role="group" aria-roledescription="slide" aria-label={`${k + 1} dari ${n}`}>
            <img className="carousel-img" src={src} alt="" loading={k ? 'lazy' : undefined} draggable="false" />
          </div>
        ))}
      </div>
      <button type="button" className="carousel-btn prev" onClick={() => go(i - 1)} disabled={i === 0} aria-label="Foto sebelumnya"><Icon name="arrow-left" size={20} /></button>
      <button type="button" className="carousel-btn next" onClick={() => go(i + 1)} disabled={i === n - 1} aria-label="Foto berikutnya"><Icon name="arrow-right" size={20} /></button>
      <div className="carousel-dots">
        {images.map((_, k) => <button key={k} type="button" aria-label={`Foto ${k + 1}`} aria-current={k === i ? 'true' : undefined} onClick={() => go(k)} />)}
      </div>
      <span className="carousel-count" aria-live="polite">{i + 1} / {n}</span>
    </div>
  );
}

const EVENT_STATUS = { upcoming: 'Akan datang', ongoing: 'Sedang berlangsung', completed: 'Selesai', cancelled: 'Dibatalkan' };

// event_date is a DATETIME string; returns date/time labels or null when it is missing/invalid
function eventWhen(e) {
  const d = new Date(String(e.event_date || '').replace(' ', 'T'));
  if (isNaN(d)) return null;
  return {
    d,
    day: d.getDate(),
    month: d.toLocaleDateString('id-ID', { month: 'short' }),
    date: d.toLocaleDateString('id-ID', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }),
    time: d.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }),
  };
}

// One event in a list (events page, "acara lainnya"); the whole card opens event.html
function EventRow({ e }) {
  const w = eventWhen(e);
  return (
    <li className="event card">
      <div className="event-date" aria-hidden="true">
        {w && <><span className="d">{w.day}</span><span className="m">{w.month}</span></>}
      </div>
      <div>
        <h2><a href={`event.html?id=${e.id}`}>{e.title}</a></h2>
        <p className="when">
          {w && `${w.date}, ${w.time}`}
          {e.location && ` · ${e.location}`}
          {e.status !== 'upcoming' && ` · ${EVENT_STATUS[e.status] || e.status}`}
        </p>
        {e.description && <p className="excerpt">{e.description}</p>}
        <span className="program-cta" aria-hidden="true">Lihat detail acara<Icon name="arrow-right" size={15}/></span>
      </div>
      {e.image && <img src={e.image} alt="" loading="lazy" />}
    </li>
  );
}

const CATEGORY_ID = { Infrastructure: 'Infrastruktur', Education: 'Pendidikan', Emergency: 'Darurat', Recurring: 'Rutin', Other: 'Lainnya' };

// Running programs first, then past-deadline, then completed
function sortPrograms(list) {
  const rank = c => c.status === 'completed' ? 2 : (c.deadline && new Date(c.deadline) < new Date() ? 1 : 0);
  return [...list].sort((a, b) => rank(a) - rank(b) || (a.sort_order || 0) - (b.sort_order || 0));
}

function ProgramCard({ c }) {
  const raised = parseFloat(c.raised_amount) || 0;
  const goal = parseFloat(c.goal_amount) || 0;
  const done = c.status === 'completed';
  return (
    <article className="program card">
      {c.image
        ? <div className="program-media"><img className="program-img" src={c.image} alt="" loading="lazy" /></div>
        : <div className="program-figure"><span className="program-figure-value">{formatRp(raised)}</span><span className="program-figure-label">{goal > 0 ? `terkumpul dari ${formatRp(goal)}` : 'terkumpul'}</span></div>}
      <div className="program-body">
      <div className="program-meta">
        {done ? <span className="badge badge-done">Selesai</span> : <span className="badge">{CATEGORY_ID[c.category] || c.category}</span>}
        {c.location && <span>{c.location}</span>}
      </div>
      <h3><a href={`cause.html?id=${c.id}`}>{c.title}</a></h3>
      {c.description && <p className="desc">{c.description}</p>}
      <div className="funding">
        {goal > 0 ? <Progress raised={raised} goal={goal} /> : <p className="funding-row"><span><strong className="num">{formatRpFull(raised)}</strong> terkumpul</span></p>}
        <span className="program-cta" aria-hidden="true">Lihat catatan program<Icon name="arrow-right" size={15}/></span>
      </div>
      </div>
    </article>
  );
}

Object.assign(window, {
  Header, Footer, CallToAction, Brand, BrandMark, Icon, NAV_ITEMS, getLang, setLang, formatRp, formatRpFull,
  getJSON, getSettings, fmtDate, waLink, igHandle, Progress, ProgramCard, sortPrograms, CATEGORY_ID, useInView, CountUp, Pills, StoryCard, EventRow, EVENT_STATUS, eventWhen, Carousel,
});