// =============================================================
// Reusable bits for sub-pages: hero (matches home-hero style),
// feature grid, stat strip, side-by-side. Mobile-friendly.
// =============================================================

// SubHero — same h1 style as the home hero.
// API:
//   eyebrow:  string                 — mono-uppercase pretitle
//   lines:    string[]               — h1 lines; last one rendered in forest green
//   lead:     string                 — paragraph below h1
//   visual:   JSX (optional)         — right-column mockup; if present, two columns
//   bg:       string (optional)      — section background, default mint
//   accent:   string (optional)      — eyebrow color, default forest
const SubHero = ({ eyebrow, lines = [], lead, visual, accent = '#2E5119', bg = '#E2F1D2' }) => {
  const last = lines[lines.length - 1];
  const top = lines.slice(0, -1);
  return (
    <section style={{ background: bg, position: 'relative', overflow: 'hidden' }}>
      <style>{`
        .rmh-sub-grid { display:grid; gap:48px; align-items:center; max-width: var(--max-w-wide); margin: 0 auto; padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 40px); position: relative; z-index: 1; }
        .rmh-sub-grid.with-visual { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
        .rmh-sub-grid.no-visual { grid-template-columns: 1fr; }
        .rmh-sub-h1 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.035em; margin: 14px 0 0; font-weight: 500; color: #111210; font-family: var(--font-display); }
        .rmh-sub-lead { margin-top: 20px; max-width: 540px; font-size: clamp(15px, 1.1vw, 18px); color: #353833; line-height: 1.5; }
        .rmh-sub-cta { display:flex; gap: 12px; margin-top: 24px; align-items:center; flex-wrap: wrap; }
        .rmh-sub-cta a { text-decoration:none; padding: 13px 22px; border-radius: 14px; font-weight: 500; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
        .rmh-sub-cta-primary { background: #2E5119; color: #FAFAF7; box-shadow: 0 16px 40px rgba(46,81,25,0.30); }
        .rmh-sub-cta-secondary { background: #FFFFFF; color: #2E5119; border: 1px solid #CDE8B0; box-shadow: 0 4px 14px rgba(46,81,25,0.06); }
        .rmh-sub-visual-wrap { transform: scale(0.62); transform-origin: top left; width: 161.3%; margin-bottom: -38%; }
        @media (max-width: 980px) {
          .rmh-sub-grid.with-visual { grid-template-columns: 1fr; padding: 56px 20px 56px; gap: 36px; }
          .rmh-sub-visual-wrap { transform: scale(0.7); transform-origin: top left; width: 143%; margin-bottom: -30%; }
          .rmh-sub-h1 { font-size: clamp(30px, 7vw, 44px); }
        }
        @media (max-width: 720px) {
          .rmh-sub-grid.with-visual > div:last-child { display: none; }
          .rmh-sub-grid { padding: 48px 16px 56px; }
        }
        @media (max-width: 600px) {
          .rmh-sub-grid { padding: 40px 16px 48px; }
          .rmh-sub-cta a { padding: 12px 20px; font-size: 14px; }
          .rmh-sub-h1 { font-size: clamp(28px, 8.5vw, 38px); }
        }
      `}</style>
      <svg viewBox="0 0 400 400" style={{ position: 'absolute', right: -100, top: 40, width: 480, height: 480, pointerEvents: 'none', opacity: 0.45 }}>
        <path d="M 280 60 C 360 100 380 220 300 320 C 220 380 110 340 100 240 C 90 140 200 20 280 60 Z" fill="#A4CC7C" />
        <path d="M 320 140 C 360 180 350 260 290 290 C 240 310 200 270 220 220 C 240 170 290 110 320 140 Z" fill="#FFD86B" opacity="0.7" />
      </svg>
      <span style={{ position: 'absolute', right: -120, top: -200, fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 900, color: 'rgba(46,81,25,0.07)', lineHeight: 1, pointerEvents: 'none', userSelect: 'none' }}>&amp;</span>
      <div className={`rmh-sub-grid ${visual ? 'with-visual' : 'no-visual'}`}>
        <div style={{ minWidth: 0 }}>
          <Eyebrow color={accent}>{eyebrow}</Eyebrow>
          <h1 className="rmh-sub-h1">
            {top.map((ln, i) => <React.Fragment key={i}>{ln}<br /></React.Fragment>)}
            <span style={{ color: '#2E5119' }}>{last}</span>
          </h1>
          {lead && <p className="rmh-sub-lead">{lead}</p>}
        </div>
        {visual && (
          <div style={{ minWidth: 0 }}>
            <div className="rmh-sub-visual-wrap">{visual}</div>
          </div>
        )}
      </div>
    </section>
  );
};

const FeatureGrid = ({ eyebrow, title, blurb, cols = 3, items, bg = '#FAFAF7' }) => (
  <section style={{ background: bg, padding: 'clamp(72px, 10vw, 120px) 0' }}>
    <style>{`
      .rmh-fg-grid { display: grid; grid-template-columns: repeat(${cols}, 1fr); gap: 16px; }
      @media (max-width: 980px) { .rmh-fg-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 560px) { .rmh-fg-grid { grid-template-columns: 1fr; } }
      .rmh-fg-h2 { font-size: clamp(30px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -0.035em; margin: 0; font-weight: 500; }
    `}</style>
    <div style={{ maxWidth: 'var(--max-w-wide)', margin: '0 auto', padding: '0 clamp(16px, 4vw, 40px)' }}>
      <div style={{ marginBottom: 40, maxWidth: 720 }}>
        <Eyebrow>{eyebrow}</Eyebrow>
        <h2 className="rmh-fg-h2" dangerouslySetInnerHTML={{ __html: title }} />
        {blurb && <p style={{ fontSize: 17, color: '#4A4D45', lineHeight: 1.55, marginTop: 18, maxWidth: 600 }}>{blurb}</p>}
      </div>
      <div className="rmh-fg-grid">
        {items.map((it, i) => (
          <article key={i} style={{ background: '#FFFFFF', border: '1px solid #E3E8DD', borderRadius: 18, padding: 28, display: 'flex', flexDirection: 'column' }}>
            {it.icon && <div style={{ width: 40, height: 40, borderRadius: 10, background: '#E2F1D2', color: '#2E5119', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}><i data-lucide={it.icon} style={{ width: 18, height: 18 }}></i></div>}
            <h3 style={{ fontSize: 21, fontWeight: 500, letterSpacing: '-0.02em', margin: '0 0 8px' }} dangerouslySetInnerHTML={{ __html: it.title }} />
            <p style={{ fontSize: 14, color: '#4A4D45', lineHeight: 1.55, margin: 0 }}>{it.desc}</p>
            {it.tags && (
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginTop: 16 }}>
                {it.tags.map(t => <span key={t} style={{ fontSize: 10.5, fontFamily: 'var(--font-mono)', padding: '4px 8px', background: '#F6F7F2', border: '1px solid #E3E8DD', borderRadius: 6, color: '#4A4D45' }}>{t}</span>)}
              </div>
            )}
          </article>
        ))}
      </div>
    </div>
  </section>
);

const StatStrip = ({ items, bg = '#F26B4A', color = '#FFF4DD', accent = '#FFD86B' }) => (
  <section style={{ background: bg, color, padding: 'clamp(56px, 8vw, 80px) 0', position: 'relative', overflow: 'hidden' }}>
    <style>{`
      .rmh-ss-grid { display: grid; grid-template-columns: repeat(${items.length}, 1fr); gap: 32px; max-width: var(--max-w-wide); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); position: relative; }
      @media (max-width: 900px) { .rmh-ss-grid { grid-template-columns: 1fr 1fr; gap: 24px; } .rmh-ss-cell { padding-left: 0 !important; border-left: none !important; } }
      @media (max-width: 480px) { .rmh-ss-grid { grid-template-columns: 1fr; } }
    `}</style>
    <span style={{ position: 'absolute', right: -80, bottom: -200, fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 600, color: 'rgba(255,255,255,0.10)', lineHeight: 1, pointerEvents: 'none', userSelect: 'none' }}>&amp;</span>
    <div className="rmh-ss-grid">
      {items.map((it, i) => (
        <div key={i} className="rmh-ss-cell" style={{ borderLeft: i === 0 ? 'none' : '1px solid rgba(255,244,221,0.22)', paddingLeft: i === 0 ? 0 : 32 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1, color: accent }}>{it.value}</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 10, opacity: 0.85 }}>{it.label}</div>
          {it.sub && <div style={{ fontSize: 13, marginTop: 10, opacity: 0.92, lineHeight: 1.45 }}>{it.sub}</div>}
        </div>
      ))}
    </div>
  </section>
);

const SplitFeature = ({ eyebrow, title, blurb, points, visual, reverse = false, accent = '#2E5119', bg = '#FAFAF7' }) => (
  <section style={{ background: bg, padding: 'clamp(72px, 10vw, 120px) 0' }}>
    <style>{`
      .rmh-split { display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; max-width: var(--max-w-wide); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
      @media (max-width: 880px) { .rmh-split { grid-template-columns: 1fr; gap: 32px; } .rmh-split-visual { order: 2 !important; } .rmh-split-copy { order: 1 !important; } }
    `}</style>
    <div className="rmh-split">
      <div className="rmh-split-copy" style={{ order: reverse ? 1 : 0 }}>
        <Eyebrow color={accent}>{eyebrow}</Eyebrow>
        <h2 style={{ fontSize: 'clamp(28px, 4vw, 48px)', lineHeight: 1.05, letterSpacing: '-0.03em', margin: 0, fontWeight: 500 }} dangerouslySetInnerHTML={{ __html: title }} />
        <p style={{ fontSize: 17, color: '#4A4D45', lineHeight: 1.55, margin: '20px 0 24px' }}>{blurb}</p>
        {points && (
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {points.map((p, i) => (
              <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <i data-lucide="check" style={{ width: 16, height: 16, color: accent, marginTop: 4, flexShrink: 0 }}></i>
                <div>
                  <div style={{ fontWeight: 500, fontSize: 15, marginBottom: 2 }}>{p.t}</div>
                  <div style={{ fontSize: 13, color: '#6B6F65', lineHeight: 1.5 }}>{p.d}</div>
                </div>
              </li>
            ))}
          </ul>
        )}
      </div>
      <div className="rmh-split-visual" style={{ order: reverse ? 0 : 1 }}>{visual}</div>
    </div>
  </section>
);

Object.assign(window, { SubHero, FeatureGrid, StatStrip, SplitFeature });