/* ============================================================
   Asher Encounters — shared website UI helpers (window.Asher.*)
   Built on the bound design-system bundle. No raw restyling of
   DS primitives — these are layout/scaffold helpers only.
   ============================================================ */
(function () {
  const DS = window.AsherEncountersDesignSystem_12251c;
  const { Eyebrow, Tag } = DS;
  const R = React;

  /* ---- Reveal-on-scroll wrapper ---------------------------- */
  function Reveal({ children, delay = 0, as = 'div', style = {}, className = '', ...rest }) {
    const ref = R.useRef(null);
    R.useEffect(() => {
      const el = ref.current;
      if (!el) return;
      const reveal = () => setTimeout(() => el.classList.add('is-in'), delay);
      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { el.classList.add('is-in'); return; }
      let done = false;
      const check = () => {
        if (done) return;
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight * 0.94 && r.bottom > 0) {
          done = true; reveal();
          window.removeEventListener('scroll', check);
          window.removeEventListener('resize', check);
        }
      };
      // run after first paint, then track scroll
      const raf = requestAnimationFrame(() => requestAnimationFrame(check));
      window.addEventListener('scroll', check, { passive: true });
      window.addEventListener('resize', check);
      // hard fallback: never leave content hidden
      const safety = setTimeout(() => { if (!done) { done = true; el.classList.add('is-in'); } }, 1600);
      return () => { cancelAnimationFrame(raf); clearTimeout(safety); window.removeEventListener('scroll', check); window.removeEventListener('resize', check); };
    }, [delay]);
    const Tagq = as;
    return R.createElement(Tagq, { ref, className: 'ae-reveal ' + className, style, ...rest }, children);
  }

  /* ---- Section shell --------------------------------------- */
  function Section({ children, id, bg, style = {}, inner = true, py = 'var(--section-y)' }) {
    const content = inner
      ? R.createElement('div', { className: 'ae-container', style: { paddingTop: py } }, children)
      : children;
    return R.createElement('section', { id, style: { background: bg || 'transparent', ...style } }, content);
  }

  /* ---- Section header (eyebrow + title + optional intro) --- */
  function SectionHeader({ eyebrow, title, intro, align = 'left', onDark = false, maxWidth = '40ch', titleSize = 'clamp(1.9rem, 3.2vw, 2.6rem)' }) {
    return R.createElement('div', { style: { textAlign: align, maxWidth: align === 'center' ? '60ch' : 'none', margin: align === 'center' ? '0 auto' : 0 } },
      eyebrow && R.createElement(Eyebrow, { color: onDark ? 'var(--lavender)' : 'var(--violet)' }, eyebrow),
      R.createElement('h2', { style: { fontSize: titleSize, margin: '12px 0 0', color: onDark ? 'var(--paper)' : 'var(--text-strong)', letterSpacing: '-0.02em', textWrap: 'balance' } }, title),
      intro && R.createElement('p', { style: { fontFamily: 'var(--font-sans)', fontSize: 'clamp(1rem,1.4vw,1.12rem)', lineHeight: 1.6, color: onDark ? 'rgba(243,242,239,0.74)' : 'var(--text-muted)', margin: '16px 0 0', maxWidth, ...(align === 'center' ? { marginLeft: 'auto', marginRight: 'auto' } : {}) } }, intro)
    );
  }

  /* ---- Branded image placeholder --------------------------- */
  const THEMES = {
    lavender: { wash: 'linear-gradient(135deg, #C9C1F4 0%, #B0A6EE 55%, #9286E6 100%)', fg: 'var(--ink)', mark: 'assets/mark-black.png' },
    ink:      { wash: 'linear-gradient(150deg, #2A2540 0%, #16141F 70%)', fg: 'var(--paper)', mark: 'assets/mark-cream.png' },
    violet:   { wash: 'linear-gradient(150deg, #5A4FC9 0%, #423699 100%)', fg: 'var(--paper)', mark: 'assets/mark-cream.png' },
    honey:    { wash: 'linear-gradient(135deg, #FBE6A6 0%, #F6C85F 60%, #E0A93B 100%)', fg: 'var(--honey-ink)', mark: 'assets/mark-black.png' },
    lilac:    { wash: 'linear-gradient(150deg, #FFFFFF 0%, #ECE9F8 60%, #D9D4F5 100%)', fg: 'var(--violet)', mark: 'assets/mark-lavender.png' },
    warm:     { wash: 'linear-gradient(135deg, #FBEECB 0%, #E9DEF6 55%, #D9D4F5 100%)', fg: 'var(--violet)', mark: 'assets/mark-lavender.png' },
  };

  function ImageFrame({ theme = 'lavender', label, icon = 'image', ratio, height, src, chip = 'Placeholder', radius = 'var(--radius-2xl)', style = {}, markRef }) {
    const t = THEMES[theme] || THEMES.lavender;
    const ratioStyle = ratio ? { aspectRatio: ratio } : (height ? { height } : { aspectRatio: '16 / 10' });
    const iconColor = t.fg;
    return R.createElement('div', { className: 'ae-imgframe', style: { ...ratioStyle, borderRadius: radius, ...style } },
      R.createElement('div', { className: 'ae-imgframe__wash', style: { background: t.wash } }),
      R.createElement('img', { className: 'ae-imgframe__mark', src: t.mark, alt: '', 'aria-hidden': 'true' }),
      src && R.createElement('img', { className: 'ae-imgframe__media', src, alt: label || '', loading: 'lazy', onError: (e) => { e.target.style.display = 'none'; } }),
      !src && R.createElement('div', { className: 'ae-imgframe__body' },
        R.createElement('i', { 'data-lucide': icon, style: { width: 30, height: 30, color: iconColor, opacity: 0.9 } }),
        label && R.createElement('div', { className: 'ae-imgframe__label', style: { color: iconColor } }, label)
      ),
      chip && !src && R.createElement('span', { className: 'ae-imgframe__chip' }, chip)
    );
  }

  /* ---- Unsplash placeholder photo URL (founder: swap for licensed) ---- */
  function img(id, w) { return 'https://images.unsplash.com/photo-' + id + '?auto=format&fit=crop&w=' + (w || 1400) + '&q=80'; }

  /* ---- Lucide refresh after render ------------------------- */
  function useLucide(dep) {
    R.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  }

  /* ---- Article / insight card ------------------------------ */
  function ArticleCard({ date, title, excerpt, theme = 'lilac', href = 'insights.html', src = null }) {
    const [hover, setHover] = R.useState(false);
    return R.createElement('a', {
      href, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false),
      style: { display: 'grid', gridTemplateColumns: '128px 1fr', gap: 22, alignItems: 'center', textDecoration: 'none',
        padding: '18px', borderRadius: 'var(--radius-lg)', background: hover ? 'var(--white)' : 'transparent',
        boxShadow: hover ? 'var(--shadow-md)' : 'none', transform: hover ? 'translateY(-2px)' : 'none',
        transition: 'all var(--dur-base) var(--ease-out)', border: '1px solid ' + (hover ? 'var(--border-soft)' : 'transparent') },
    },
      R.createElement(ImageFrame, { theme, height: 86, icon: 'newspaper', chip: null, radius: 'var(--radius-md)', label: null, src, style: { width: 128 } }),
      R.createElement('div', null,
        R.createElement('div', { style: { fontFamily: 'var(--font-mono)', fontSize: '0.68rem', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-faint)' } }, date),
        R.createElement('h3', { style: { fontSize: '1.08rem', lineHeight: 1.3, margin: '8px 0 6px', color: 'var(--text-strong)' } }, title),
        R.createElement('p', { style: { fontFamily: 'var(--font-sans)', fontSize: '0.9rem', lineHeight: 1.55, color: 'var(--text-muted)', margin: 0 } }, excerpt),
        R.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 5, marginTop: 10, fontFamily: 'var(--font-sans)', fontSize: '0.82rem', fontWeight: 600, color: 'var(--violet)', whiteSpace: 'nowrap' } }, 'Read more', R.createElement('i', { 'data-lucide': 'arrow-right', style: { width: 15, height: 15 } }))
      )
    );
  }

  /* ---- Feature / benefit block ----------------------------- */
  function FeatureBlock({ index, icon, title, body, accent = 'lavender' }) {
    const dot = { lavender: 'var(--lavender)', honey: 'var(--honey)', violet: 'var(--violet)' }[accent] || 'var(--lavender)';
    return R.createElement('div', { style: { display: 'flex', gap: 18 } },
      R.createElement('div', { style: { flex: 'none', width: 46, height: 46, borderRadius: 'var(--radius-md)', background: dot, display: 'grid', placeItems: 'center', color: accent === 'violet' ? 'var(--paper)' : 'var(--ink)' } },
        icon ? R.createElement('i', { 'data-lucide': icon, style: { width: 22, height: 22 } })
             : R.createElement('span', { style: { fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.2rem' } }, index)
      ),
      R.createElement('div', null,
        R.createElement('h3', { style: { fontSize: '1.18rem', margin: '4px 0 8px', color: 'var(--text-strong)' } }, title),
        R.createElement('p', { style: { fontFamily: 'var(--font-sans)', fontSize: '0.96rem', lineHeight: 1.6, color: 'var(--text-muted)', margin: 0 } }, body)
      )
    );
  }

  window.Asher = Object.assign(window.Asher || {}, { Reveal, Section, SectionHeader, ImageFrame, ArticleCard, FeatureBlock, useLucide, NewsletterForm, img });

  /* ---- Newsletter signup form (homepage + /newsletter) ----- */
  function NewsletterForm({ layout = 'row', onDark = false }) {
    const { Input, Button } = DS;
    const [sent, setSent] = R.useState(false);
    const [errors, setErrors] = R.useState({});
    function submit(e) {
      e.preventDefault();
      const f = new FormData(e.target);
      const errs = {};
      if (!f.get('first').trim()) errs.first = 'Required';
      if (!f.get('last').trim()) errs.last = 'Required';
      const email = f.get('email').trim();
      if (!email) errs.email = 'Required';
      else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) errs.email = 'Enter a valid email';
      setErrors(errs);
      if (Object.keys(errs).length) return;
      /* TODO(founder): POST to ConvertKit / Beehiiv / Mailchimp endpoint */
      setSent(true);
    }
    if (sent) {
      return R.createElement('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, padding: '8px 0' } },
        R.createElement('div', { style: { width: 52, height: 52, borderRadius: '50%', background: 'var(--success-tint)', color: 'var(--success)', display: 'grid', placeItems: 'center' } },
          R.createElement('i', { 'data-lucide': 'check', style: { width: 26, height: 26 } })),
        R.createElement('h3', { style: { fontSize: '1.3rem', color: onDark ? 'var(--paper)' : 'var(--text-strong)' } }, 'You’re subscribed'),
        R.createElement('p', { style: { color: onDark ? 'rgba(243,242,239,0.7)' : 'var(--text-muted)', margin: 0 } }, 'Watch your inbox — the next Asher AI Digest is on its way.')
      );
    }
    return R.createElement('form', { onSubmit: submit, noValidate: true, style: { width: '100%' } },
      R.createElement('div', { className: 'ae-form-row', style: { display: 'grid', gridTemplateColumns: layout === 'row' ? '1fr 1fr 1.4fr auto' : '1fr 1fr', gap: 12, alignItems: 'start' } },
        R.createElement(Input, { label: 'First name', name: 'first', placeholder: 'Jane', error: errors.first }),
        R.createElement(Input, { label: 'Last name', name: 'last', placeholder: 'Investor', error: errors.last }),
        R.createElement(Input, { label: 'Email address', name: 'email', type: 'email', placeholder: 'jane@fund.com', error: errors.email, style: layout === 'row' ? {} : { gridColumn: '1 / -1' } }),
        R.createElement('div', { style: { alignSelf: 'end', gridColumn: layout === 'row' ? 'auto' : '1 / -1' } },
          R.createElement(Button, { variant: 'violet', size: 'lg', type: 'submit', style: { width: layout === 'row' ? 'auto' : '100%' } }, 'Subscribe'))
      )
    );
  }
})();