// Shared UI primitives

const Logo = ({ dark }) => (
  <a href="#top" className={`logo ${dark ? 'logo-dark' : 'logo-light'}`}>
    <span className="logo-mark">
      {/* Custom paper-plane mark, inlined for guaranteed render */}
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M21.5 3 L2.5 11.2 L9.5 13.5 L11.8 21 L21.5 3 Z" fill="#fff" />
        <path d="M9.5 13.5 L14.2 9.4 L11.8 21 L9.5 13.5 Z" fill="#FF6B35" />
      </svg>
    </span>
    <span className="logo-copy">
      <span className="logo-wordmark">Departures<span style={{ color: 'var(--brand-orange)' }}>.</span>pk</span>
      <span className="logo-sub">Departure Experts · Est. Lahore</span>
    </span>
  </a>
);

const Reveal = ({ children, delay = 0, as: As = 'div', ...rest }) => {
  const ref = React.useRef();
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setVisible(true); obs.disconnect(); }
    }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return <As ref={ref} className={`reveal ${visible ? 'in' : ''}`} style={{ transitionDelay: `${delay}ms` }} {...rest}>{children}</As>;
};

const SectionHead = ({ eyebrow, title, sub, align = 'center' }) => (
  <Reveal as="div" {...{ className: `section-head ${align !== 'center' ? 'text-left' : ''}` }}>
    {eyebrow && <div className="uppercase-label">— {eyebrow} —</div>}
    <h2>{title}</h2>
    {sub && <p>{sub}</p>}
  </Reveal>
);

const Stars = ({ n = 5, size = 14 }) => (
  <span style={{ display: 'inline-flex', gap: 1 }}>
    {Array.from({ length: 5 }).map((_, i) => (
      <svg key={i} width={size} height={size} viewBox="0 0 24 24" fill={i < n ? '#F59E0B' : 'none'} stroke={i < n ? '#F59E0B' : '#CBD5E1'} strokeWidth="1.5">
        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
      </svg>
    ))}
  </span>
);

// Resilient image — renders a styled fallback (striped pattern + label) if the remote
// image fails to load. Use `absolute` to make the image fill its positioned parent.
const SmartImg = ({ src, alt, label, className = '', absolute = false, style = {} }) => {
  const [failed, setFailed] = React.useState(false);
  const layerStyle = absolute
    ? { position: 'absolute', inset: 0, width: '100%', height: '100%', ...style }
    : { width: '100%', height: '100%', ...style };
  if (failed || !src) {
    return (
      <div className={`img-fallback ${className}`} style={layerStyle} aria-label={alt}>
        <span>{label || alt}</span>
      </div>
    );
  }
  return (
    <img
      src={src}
      alt={alt || ''}
      className={className}
      onError={() => setFailed(true)}
      style={{ objectFit: 'cover', ...layerStyle }}
      loading="lazy"
    />
  );
};

// Destination card with boarding-pass metadata
const DestCard = ({ ix, code, title, tag, price, img }) => {
  const handleInquiry = () => {
    openWhatsAppForIntent({
      action: "get details for this destination",
      source: "Destination card",
      packageName: title,
      destination: title,
      duration: ix,
      price: formatPKR(price),
    });
  };

  const onCardClick = () => handleInquiry();
  const onCardKeyDown = (e) => {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      handleInquiry();
    }
  };

  const onSlideClick = (e) => {
    e.preventDefault();
    e.stopPropagation();
    handleInquiry();
  };

  return (
  <Reveal
    as="article"
    {...{ className: 'dest-card' }}
    role="button"
    tabIndex={0}
    onClick={onCardClick}
    onKeyDown={onCardKeyDown}
  >
    <SmartImg src={img} alt={title} label={title} className="img" absolute />
    <div className="scrim" />
    <div className="meta-top">
      <span className="ix">{ix}</span>
      <span className="stamp"><span style={{ width: 5, height: 5, background: '#FF6B35', borderRadius: 99 }} />Dep · {code}</span>
    </div>
    <div className="body">
      <h3>{title}</h3>
      <div className="tag">{tag}</div>
      <div className="price-row">
        <span className="p-l">From</span>
        <span className="p-v">{formatPKR(price)}</span>
      </div>
    </div>
    <a href="#" className="cta-slide" onClick={onSlideClick}>View packages <IconArrowRight size={14} /></a>
  </Reveal>
  );
};

Object.assign(window, { Logo, Reveal, SectionHead, Stars, DestCard, SmartImg });