/* TischTap sales one-pager — shared primitive components */

const Icon = ({ name, size = 22, color, style }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = '';
      const el = document.createElement('i');
      el.setAttribute('data-lucide', name);
      ref.current.appendChild(el);
      window.lucide.createIcons({ attrs: { width: size, height: size } });
    }
  }, [name, size]);
  return <span ref={ref} style={{ display: 'inline-flex', color, ...style }} />;
};

/* The brand eyebrow, top-right of every content page */
const Eyebrow = () => <span className="tt-eyebrow">Tischtap</span>;

/* Standard content-page shell: eyebrow + rule top, rule bottom */
const PageFrame = ({ children, label }) => (
  <section className="page" data-screen-label={label}>
    <div className="page-top"><Eyebrow /></div>
    <div className="rule" />
    <div style={{ flex: 1, paddingTop: 8 }}>{children}</div>
    <div className="page-bottom"><div className="rule" /></div>
  </section>
);

/* Tap-target motif — ring + center dot. size in px, ring thickness scales */
const TapTarget = ({ size = 80, thickness, style }) => {
  const t = thickness || Math.round(size * 0.09);
  const inset = Math.round(size * 0.3);
  return (
    <span className="target" style={{ width: size, height: size, display: 'inline-block', ...style }}>
      <span className="ring" style={{ borderWidth: t }} />
      <span className="dot" style={{ inset }} />
    </span>
  );
};

/* Concentric ripple variant that can bleed off a corner */
const Ripple = ({ size = 120, style }) => (
  <span className="target" style={{ width: size, height: size, display: 'inline-block', ...style }}>
    <span className="ring" style={{ inset: 0, borderWidth: size * 0.06 }} />
    <span className="ring" style={{ inset: size * 0.2, borderWidth: size * 0.06 }} />
    <span className="dot" style={{ inset: size * 0.38 }} />
  </span>
);

const FeatureChip = ({ label, sub }) => (
  <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-start' }}>
    <span className="chip">{label}</span>
    {sub && <span className="chip-sub">{sub}</span>}
  </div>
);

const CheckItem = ({ children }) => (
  <li><span className="ic" style={{ display: 'inline-flex', flex: 'none', marginTop: 1 }}><Icon name="circle-check" size={21} color="var(--tt-red)" /></span><span>{children}</span></li>
);

const ArrowRow = ({ title, meta, price }) => (
  <div className="arow">
    <span className="arr"><Icon name="arrow-right" size={20} /></span>
    <div>
      <span className="h">{title}</span>
      {meta && <div className="meta">{meta}</div>}
    </div>
    <span className="price">{price}</span>
  </div>
);

const Callout = ({ title, children, style }) => (
  <div className="callout" style={style}>
    {title && <div className="ct">{title}</div>}
    {children}
  </div>
);

/* image placeholder; pass src to fill with a real photo */
const ImageSlot = ({ src, alt, style }) => (
  <div className="imgslot" style={style}>
    {src ? <img src={src} alt={alt || ''} /> : null}
  </div>
);

Object.assign(window, { Icon, Eyebrow, PageFrame, TapTarget, Ripple, FeatureChip, CheckItem, ArrowRow, Callout, ImageSlot });