/* J&S FRG website — shared helpers + dark-theme primitives.
   Palette/fonts inherited from the design system (charcoal / red / bone,
   Source Sans 3 + Archivo Black). Layout language adapted from the
   provided dark landing-page template. Exposes helpers on window. */

/* Shared dark-theme constants */
const FRG = {
  bg: '#0E0F12',
  bg2: '#121317',
  card: 'linear-gradient(180deg, #191A1F 0%, #131418 100%)',
  cardBorder: '1px solid rgba(245,243,238,0.08)',
  moduleCard: 'linear-gradient(180deg, rgba(200,16,46,0.14) 0%, rgba(200,16,46,0.02) 34%, #141519 60%)',
  text: '#F6F4EF',
  muted: 'rgba(246,244,239,0.62)',
  faint: 'rgba(246,244,239,0.40)',
  red: '#D93840',
  redDeep: '#C8102E',
  redPill: 'linear-gradient(180deg, #E24A50 0%, #C8102E 100%)',
  gold: '#E5C063',
};
window.FRG = FRG;

/* Lucide icon */
function Icon({ name, size = 20, color = 'currentColor', style = {} }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (window.lucide && ref.current) {
      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, stroke: color, 'stroke-width': 1.75 } });
    }
  }, [name, size, color]);
  return <span ref={ref} style={{ display: 'inline-flex', lineHeight: 0, ...style }} />;
}

/* Photo placeholder — warm field-toned gradient + halftone dots */
function Photo({ label, ratio = '16/10', tone = 'field', radius = 10, style = {} }) {
  const tones = {
    field:  'linear-gradient(140deg, #2f3a20, #5f6e33 55%, #a99548)',
    soil:   'linear-gradient(140deg, #241a12, #4f3826 60%, #7d5f3f)',
    dusk:   'linear-gradient(140deg, #15161a, #331d24 55%, #6e1e2a)',
    sky:    'linear-gradient(140deg, #1d2730, #43606b 60%, #93a49c)',
    people: 'linear-gradient(140deg, #22242a, #3a3d45 60%, #6a6f7a)',
  };
  return (
    <div style={{ position: 'relative', width: '100%', aspectRatio: ratio, background: tones[tone] || tones.field, borderRadius: radius, overflow: 'hidden', ...style }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(rgba(0,0,0,0.42) 1.1px, transparent 1.5px)', backgroundSize: '7px 7px', mixBlendMode: 'multiply' }} />
      {label && <span style={{ position: 'absolute', left: 12, bottom: 10, zIndex: 2, font: '700 9px/1 var(--font-body)', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.72)' }}>{label}</span>}
    </div>
  );
}

function Container({ children, wide = false, style = {}, className = '' }) {
  return <div className={('frg-container ' + className).trim()} style={{ maxWidth: wide ? 1320 : 1180, margin: '0 auto', padding: '0 28px', ...style }}>{children}</div>;
}

/* Logo lockup (dark by default) */
function Wordmark({ onDeep = true, compact = true }) {
  return (
    <a href="#top" style={{ display: 'inline-flex', alignItems: 'center', textDecoration: 'none' }}>
      <img src="../../assets/logos/js-frg-logo-white.png" alt="J&S Field Research Group" style={{ height: 34, width: 'auto', objectFit: 'contain' }} />
    </a>
  );
}

/* Eyebrow pill (rounded chip label) */
function Pill({ children, style = {} }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 16px', borderRadius: 999, background: 'rgba(246,244,239,0.05)', border: '1px solid rgba(246,244,239,0.12)', font: '700 11px var(--font-body)', textTransform: 'uppercase', letterSpacing: '0.14em', color: FRG.muted, whiteSpace: 'nowrap', ...style }}>{children}</span>
  );
}

/* Rating pill (stars + label) */
function RatingPill({ children }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '7px 16px', borderRadius: 999, background: 'rgba(246,244,239,0.05)', border: '1px solid rgba(246,244,239,0.12)', whiteSpace: 'nowrap' }}>
      <span style={{ display: 'inline-flex', gap: 2 }}>
        {[0,1,2,3,4].map(i => <Icon key={i} name="star" size={13} color={FRG.gold} />)}
      </span>
      <span style={{ font: '600 13px var(--font-body)', color: FRG.text }}>{children}</span>
    </span>
  );
}

/* CTA — rounded red pill with glow (primary) or outlined (ghost) */
function CTAButton({ children, variant = 'primary', size = 'md', onClick, style = {} }) {
  const [hover, setHover] = React.useState(false);
  const sizes = { sm: '11px 22px', md: '15px 30px', lg: '18px 38px' };
  const fs = { sm: 13, md: 15, lg: 16 };
  const base = {
    display: 'inline-flex', alignItems: 'center', gap: 10, padding: sizes[size],
    borderRadius: 999, font: `700 ${fs[size]}px var(--font-body)`, letterSpacing: '0.02em',
    cursor: 'pointer', border: '1px solid transparent', transition: 'transform 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease)',
    transform: hover ? 'translateY(-1px)' : 'none',
  };
  const variants = {
    primary: { background: FRG.redPill, color: '#fff', boxShadow: hover ? '0 10px 30px rgba(200,16,46,0.5)' : '0 6px 20px rgba(200,16,46,0.32)' },
    ghost:   { background: 'rgba(246,244,239,0.04)', color: FRG.text, border: '1px solid rgba(246,244,239,0.22)', boxShadow: 'none' },
  };
  return (
    <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ ...base, ...variants[variant], ...style }}>{children}</button>
  );
}

/* Circle-check list item (white check) */
function CheckItem({ children }) {
  return (
    <li style={{ display: 'flex', alignItems: 'flex-start', gap: 11, marginBottom: 13, lineHeight: 1.4 }}>
      <span style={{ flex: '0 0 auto', width: 19, height: 19, marginTop: 1, borderRadius: 999, background: '#fff', display: 'grid', placeItems: 'center' }}>
        <Icon name="check" size={12} color="#0E0F12" />
      </span>
      <span style={{ color: FRG.text, fontSize: 15 }}>{children}</span>
    </li>
  );
}

/* Two-tone display heading: bright first part + muted trailing part.
   Pass highlight to color a word red instead. */
function Headline({ children, muted, highlight, size = 44, align = 'center', style = {} }) {
  return (
    <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', textTransform: 'uppercase', letterSpacing: '-0.01em', lineHeight: 0.98, fontSize: size, color: FRG.text, textAlign: align, ...style }}>
      {children}
      {highlight && <span style={{ color: FRG.red }}> {highlight}</span>}
      {muted && <span style={{ color: FRG.faint }}> {muted}</span>}
    </h2>
  );
}

/* Shared CTA action — every "trial / quote / inquiry" button on the site
   opens a new tab addressed to research@jsfarmsupply.com. Edit here to
   change all CTAs at once. */
function trialInquiry() {
  window.open('mailto:research@jsfarmsupply.com?subject=Trial%20Inquiry%20%E2%80%94%20J%26S%20FRG', '_blank');
}

Object.assign(window, { Icon, Photo, Container, Wordmark, Pill, RatingPill, CTAButton, CheckItem, Headline, trialInquiry });