// components.jsx - shared atoms for InfraredSaunaSpot templates
// Each template imports from window.* globals at bottom.

const { useState, useEffect, useRef, useMemo } = React;

// ─── Placeholder ─────────────────────────────────────────────
function Ph({ label = 'IMAGE', dark = false, h, w, style, className = '', children }) {
  return (
    <div className={`ph ${dark ? 'dark' : ''} ${className}`}
      style={{ width: w, height: h, ...style }}>
      <div className="ph-corner" />
      <div className="ph-label">{label}</div>
      {children}
    </div>
  );
}

// ─── Stars (4-pt diamond aesthetic, not slop stars) ────────
function Stars({ value = 5, max = 5 }) {
  const filled = Math.round(value);
  return (
    <span className="stars" aria-label={`${value} out of ${max}`}>
      {Array.from({ length: max }).map((_, i) => (
        <i key={i} className={i < filled ? '' : 'empty'} />
      ))}
    </span>
  );
}

// ─── Affiliate disclosure pill ──────────────────────────────
function Disclose({ children = 'Affiliate disclosure' }) {
  return (
    <span className="disclose"><span className="dot" />{children}</span>
  );
}

// ─── Header (desktop nav) ───────────────────────────────────
function SiteHeader({ compact = false }) {
  return (
    <header style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: compact ? '14px 28px' : '20px 40px',
      borderBottom: '1px solid var(--line)',
      background: 'var(--paper)',
      position: 'sticky', top: 0, zIndex: 20,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
        <a href="#" style={{ display: 'flex', alignItems: 'center', gap: 9, textDecoration: 'none', color: 'var(--text)' }}>
          <span style={{
            width: 24, height: 24, borderRadius: 6,
            background: 'radial-gradient(circle at 32% 32%, var(--ember) 0%, rgba(245,158,11,0) 65%), var(--ink)',
            border: '1px solid var(--ink-3)',
          }} />
          <span style={{ fontFamily: 'var(--serif)', fontSize: 19, letterSpacing: '-0.012em' }}>
            InfraredSauna<em style={{ color: 'var(--ember-deep)', fontStyle: 'italic' }}>spot</em>
          </span>
        </a>
        <nav style={{ display: 'flex', gap: 26 }}>
          {['Reviews', 'Best Of', 'Guides', 'Compare', 'The Heat Lab'].map(x => (

            <a key={x} href="#" style={{
              fontFamily: 'var(--sans)', fontSize: 13, color: 'var(--text-2)',
              textDecoration: 'none', letterSpacing: '-0.003em',
            }}>{x}</a>
          ))}
        </nav>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <button aria-label="Search" style={{
          width: 36, height: 36, borderRadius: 999, border: '1px solid var(--line)',
          background: 'var(--paper)', display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer',
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <circle cx="6" cy="6" r="4.5" stroke="var(--text)" strokeWidth="1.3" />
            <path d="M9.5 9.5L12.5 12.5" stroke="var(--text)" strokeWidth="1.3" strokeLinecap="round" />
          </svg>
        </button>
        <a href="#" className="btn btn-primary" style={{ padding: '9px 16px', fontSize: 12.5 }}>
          Newsletter →
        </a>
      </div>
    </header>
  );
}

// ─── Mobile header ──────────────────────────────────────────
function MobHeader({ dark = false }) {
  return (
    <header style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '12px 18px',
      borderBottom: dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid var(--line)',
      background: dark ? 'var(--ink)' : 'var(--paper)',
      color: dark ? 'var(--text-on-dark)' : 'var(--text)',
      position: 'sticky', top: 0, zIndex: 20,
    }}>
      <button aria-label="Menu" style={{ background: 'transparent', border: 0, padding: 0, cursor: 'pointer', display: 'flex' }}>
        <svg width="18" height="14" viewBox="0 0 18 14">
          <path d="M0 1.5h18M0 7h12M0 12.5h18" stroke={dark ? '#e8eef2' : '#0a1620'} strokeWidth="1.3" />
        </svg>
      </button>
      <span style={{ fontFamily: 'var(--serif)', fontSize: 17, letterSpacing: '-0.012em' }}>
        InfraredSauna<em style={{ color: 'var(--ember-deep)', fontStyle: 'italic' }}>spot</em>
      </span>
      <svg width="15" height="15" viewBox="0 0 14 14" fill="none">
        <circle cx="6" cy="6" r="4.5" stroke={dark ? '#e8eef2' : '#0a1620'} strokeWidth="1.3" />
        <path d="M9.5 9.5L12.5 12.5" stroke={dark ? '#e8eef2' : '#0a1620'} strokeWidth="1.3" strokeLinecap="round" />
      </svg>
    </header>
  );
}

// ─── Author trust box ───────────────────────────────────────
function AuthorBox({ inline = false, dark = false }) {
  const wrap = inline ? { padding: 0, border: 0, background: 'transparent' } : {
    padding: 22,
    border: dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid var(--line)',
    background: dark ? 'var(--ink-2)' : 'var(--paper-2)',
    borderRadius: 12,
  };
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start', ...wrap }}>
      <Ph w={56} h={56} label="DR" dark={dark} style={{ borderRadius: 999, flexShrink: 0 }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em',
          textTransform: 'uppercase', color: dark ? 'var(--text-on-dark-2)' : 'var(--text-3)',
          marginBottom: 4,
        }}>Reviewed by</div>
        <div style={{
          fontFamily: 'var(--serif)', fontSize: 17,
          color: dark ? 'var(--text-on-dark)' : 'var(--text)',
        }}>Dr. Mira Brandt, PhD</div>
        <div style={{
          fontSize: 12.5, color: dark ? 'var(--text-on-dark-2)' : 'var(--text-2)',
          marginTop: 3, lineHeight: 1.5,
        }}>
          Integrative medicine researcher. 11 years studying heat shock proteins and
          thermal therapy at Charit&eacute; Berlin. Author of <em>The Heat Protocol</em> (Penguin, 2024).
        </div>
        <div style={{ display: 'flex', gap: 14, marginTop: 8, flexWrap: 'wrap' }}>
          <span className="chip" style={dark ? { background: 'rgba(255,255,255,0.06)', borderColor: 'rgba(255,255,255,0.1)', color: 'var(--text-on-dark-2)' } : {}}>
            <Dot color={'var(--plus)'} />Verified Expert
          </span>
          <span className="chip" style={dark ? { background: 'rgba(255,255,255,0.06)', borderColor: 'rgba(255,255,255,0.1)', color: 'var(--text-on-dark-2)' } : {}}>
            42 articles
          </span>
        </div>
      </div>
    </div>
  );
}

function Dot({ color }) {
  return <span style={{ width: 6, height: 6, borderRadius: 999, background: color, display: 'inline-block' }} />;
}

// ─── Methodology callout ────────────────────────────────────
function MethodologyBox({ dark = false }) {
  const stats = [
    ['168', 'days tested'],
    ['12', 'units measured'],
    ['145°F', 'avg session temp'],
    ['42', 'data points'],
  ];
  return (
    <div style={{
      borderRadius: 14,
      padding: 24,
      background: dark ? 'var(--ink-2)' : 'var(--paper-2)',
      border: dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid var(--line)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 16 }}>
        <div>
          <div className="eyebrow" style={{ color: dark ? 'var(--text-on-dark-2)' : 'var(--text-3)' }}>How we tested</div>
          <h3 style={{ margin: '4px 0 0', color: dark ? 'var(--text-on-dark)' : 'var(--text)', fontSize: 22 }}>
            168 days inside real heat
          </h3>
        </div>
        <a href="#" style={{
          fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.12em',
          textTransform: 'uppercase', color: 'var(--ember-deep)',
          textDecoration: 'none', borderBottom: '1px solid var(--ember-deep)',
          paddingBottom: 1,
        }}>Methodology →</a>
      </div>
      <p style={{ margin: '0 0 18px', fontSize: 13.5, color: dark ? 'var(--text-on-dark-2)' : 'var(--text-2)' }}>
        Every unit ran daily sessions in a controlled 22°C ambient room in Berlin. We logged
        EMF at three positions, heat-up curves, surface temperature uniformity, and energy draw on calibrated meters.
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
        {stats.map(([n, l]) => (
          <div key={l} style={{ borderTop: dark ? '1px solid rgba(255,255,255,0.1)' : '1px solid var(--line)', paddingTop: 12 }}>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 30, lineHeight: 1, color: dark ? 'var(--text-on-dark)' : 'var(--text)', letterSpacing: '-0.02em' }}>{n}</div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: dark ? 'var(--text-on-dark-2)' : 'var(--text-3)', marginTop: 4 }}>{l}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── CTA Block (in-article) ─────────────────────────────────
function CTABlock({ product = 'Lumen Heritage 4', price = '$5,990', score = '9.4', best = 'Best overall', merchant = 'Lumen Direct', dark = false }) {
  return (
    <div style={{
      borderRadius: 14,
      padding: 22,
      background: dark ? 'var(--ink-2)' : 'var(--paper-2)',
      border: dark ? '1px solid rgba(125,211,252,0.18)' : '1px solid var(--line)',
      display: 'grid',
      gridTemplateColumns: '120px 1fr 180px',
      gap: 22,
      alignItems: 'center',
    }}>
      <Ph w={120} h={120} label="PRODUCT" dark={dark} />
      <div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
          <span className="chip ember">★ {best}</span>
          <span className="chip" style={dark ? { background: 'rgba(255,255,255,0.05)', borderColor: 'rgba(255,255,255,0.08)', color: 'var(--text-on-dark-2)' } : {}}>
            Score {score}/10
          </span>
        </div>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 22, color: dark ? 'var(--text-on-dark)' : 'var(--text)', letterSpacing: '-0.015em' }}>{product}</div>
        <p style={{ margin: '4px 0 0', fontSize: 13, color: dark ? 'var(--text-on-dark-2)' : 'var(--text-2)' }}>
          Full-spectrum, ultra-low EMF (&lt;0.2 mG), Canadian cedar build. Our top pick after 24 weeks of testing.
        </p>
      </div>
      <div style={{ textAlign: 'right' }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: dark ? 'var(--text-on-dark-2)' : 'var(--text-3)' }}>
          from {merchant}
        </div>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 30, color: dark ? 'var(--text-on-dark)' : 'var(--text)', marginTop: 2, letterSpacing: '-0.02em' }}>
          {price}
        </div>
        <a href="#" className="btn btn-ember" style={{ marginTop: 10, width: '100%', justifyContent: 'center' }}>
          Check price →
        </a>
      </div>
    </div>
  );
}

// ─── Pros / Cons split ──────────────────────────────────────
function ProsCons({ pros, cons, dark = false }) {
  const color = dark ? 'var(--text-on-dark-2)' : 'var(--text-2)';
  const tColor = dark ? 'var(--text-on-dark)' : 'var(--text)';
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
      border: dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid var(--line)',
      borderRadius: 14, overflow: 'hidden',
    }}>
      {[['Pros', pros, 'var(--plus)', '+'], ['Cons', cons, 'var(--minus)', '−']].map(([title, items, c, glyph], i) => (
        <div key={title} style={{
          padding: 22,
          background: dark ? 'var(--ink-2)' : 'var(--paper-2)',
          borderRight: i === 0 ? (dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid var(--line)') : 0,
        }}>
          <div className="eyebrow" style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14, color: dark ? 'var(--text-on-dark-2)' : 'var(--text-3)' }}>
            <Dot color={c} />{title}
          </div>
          <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
            {items.map((x, j) => (
              <li key={j} style={{ display: 'flex', gap: 10, padding: '8px 0', fontSize: 13.5, color: tColor, borderTop: j === 0 ? 0 : (dark ? '1px solid rgba(255,255,255,0.06)' : '1px solid var(--line-2)'), lineHeight: 1.5 }}>
                <span style={{ color: c, flexShrink: 0, fontFamily: 'var(--mono)', fontSize: 12, width: 12, marginTop: 1 }}>{glyph}</span>
                <span>{x}</span>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

// ─── Scorecard (numeric scoring grid for review) ─────────────
function ScoreCard({ scores, dark = false }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
      borderRadius: 14, overflow: 'hidden',
      border: dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid var(--line)',
    }}>
      {scores.map(([label, val, sub], i) => (
        <div key={label} style={{
          padding: '20px 14px',
          background: dark ? 'var(--ink-2)' : 'var(--paper-2)',
          borderRight: i < scores.length - 1 ? (dark ? '1px solid rgba(255,255,255,0.06)' : '1px solid var(--line)') : 0,
          textAlign: 'center',
        }}>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 28, color: dark ? 'var(--text-on-dark)' : 'var(--text)', letterSpacing: '-0.02em' }}>
            {val}<span style={{ fontSize: 14, color: dark ? 'var(--text-on-dark-2)' : 'var(--text-3)' }}>/10</span>
          </div>
          <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: dark ? 'var(--text-on-dark-2)' : 'var(--text-3)', marginTop: 6 }}>{label}</div>
          {sub && <div style={{ fontSize: 11, color: dark ? 'var(--text-on-dark-2)' : 'var(--text-3)', marginTop: 4, lineHeight: 1.3 }}>{sub}</div>}
        </div>
      ))}
    </div>
  );
}

// ─── FAQ ────────────────────────────────────────────────────
function FAQ({ items, dark = false }) {
  return (
    <div>
      {items.map((q, i) => (
        <details className="faq-item" key={i} open={i === 0}>
          <summary>
            <span>{q.q}</span>
            <span className="plus">+</span>
          </summary>
          <div className="faq-body">{q.a}</div>
        </details>
      ))}
    </div>
  );
}

// ─── Table of Contents (sticky for desktop) ─────────────────
function TOC({ items, active = 0 }) {
  return (
    <nav style={{
      position: 'sticky', top: 80,
      padding: '20px 0',
      borderTop: '1px solid var(--line)',
      borderBottom: '1px solid var(--line)',
    }}>
      <div className="eyebrow" style={{ marginBottom: 14 }}>On this page</div>
      <ol style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((x, i) => (
          <li key={i} style={{ display: 'flex', gap: 10, fontSize: 13 }}>
            <span className="mono" style={{
              color: i === active ? 'var(--ember-deep)' : 'var(--text-3)',
              fontSize: 10, paddingTop: 2,
            }}>{String(i + 1).padStart(2, '0')}</span>
            <a href="#" style={{
              textDecoration: 'none',
              color: i === active ? 'var(--text)' : 'var(--text-2)',
              fontWeight: i === active ? 500 : 400,
              borderLeft: i === active ? '2px solid var(--ember-deep)' : '2px solid transparent',
              paddingLeft: 10,
              lineHeight: 1.35,
            }}>{x}</a>
          </li>
        ))}
      </ol>
    </nav>
  );
}

// ─── Related articles ───────────────────────────────────────
function Related({ items, title = 'Continue reading' }) {
  return (
    <section style={{ marginTop: 40, padding: '36px 0 0', borderTop: '1px solid var(--line)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 22 }}>
        <h3 style={{ margin: 0, fontSize: 26 }}>{title}</h3>
        <a href="#" className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ember-deep)', textDecoration: 'none' }}>All guides →</a>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
        {items.map((a, i) => (
          <a href="#" key={i} style={{
            textDecoration: 'none', color: 'inherit',
            display: 'flex', flexDirection: 'column', gap: 12,
          }}>
            <Ph w="100%" h={150} label={a.label} />
            <div>
              <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ember-deep)' }}>{a.cat}</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 19, marginTop: 4, lineHeight: 1.2, letterSpacing: '-0.012em' }}>{a.title}</div>
              <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 8, fontFamily: 'var(--mono)', letterSpacing: '0.04em' }}>
                {a.read} · {a.date}
              </div>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

// ─── Footer ─────────────────────────────────────────────────
function SiteFooter() {
  const cols = [
    ['Reviews', ['4-person saunas', '2-person saunas', '1-person saunas', 'Sauna blankets', 'Red light panels', 'Outdoor saunas']],
    ['Guides', ['Beginner infrared guide', 'EMF and your sauna', 'Full spectrum vs far IR', 'Heat shock protein science', 'DIY sauna setups', 'Sauna maintenance']],
    ['The Heat Lab', ['Our methodology', 'How we test', 'Editorial standards', 'Meet the team', 'Research index', 'Get in touch']],
  ];
  return (
    <footer style={{ background: 'var(--ink)', color: 'var(--text-on-dark)', padding: '60px 40px 28px', marginTop: 60 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40, paddingBottom: 40, borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
            <span style={{
              width: 26, height: 26, borderRadius: 7,
              background: 'radial-gradient(circle at 32% 32%, var(--ember) 0%, rgba(245,158,11,0) 65%), var(--ink-3)',
              border: '1px solid rgba(245,158,11,0.35)',
            }} />
            <span style={{ fontFamily: 'var(--serif)', fontSize: 22 }}>
              InfraredSauna<em style={{ color: 'var(--ember)', fontStyle: 'italic' }}>spot</em>
            </span>
          </div>
          <p style={{ marginTop: 14, color: 'var(--text-on-dark-2)', fontSize: 13.5, maxWidth: 280, lineHeight: 1.6 }}>
            Independent infrared sauna reviews, heat-therapy science, and buying guides - tested in real homes, not a marketing studio.
          </p>
          <Disclose>Reader supported - we may earn a commission</Disclose>
        </div>
        {cols.map(([title, links]) => (
          <div key={title}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ember)', marginBottom: 14 }}>{title}</div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 9 }}>
              {links.map(l => <li key={l}><a href="#" style={{ color: 'var(--text-on-dark)', textDecoration: 'none', fontSize: 13.5, opacity: 0.85 }}>{l}</a></li>)}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 24, fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-on-dark-2)' }}>
        <span>© 2026 InfraredSaunaSpot · Berlin, DE</span>
        <span style={{ display: 'flex', gap: 18 }}>
          <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Editorial Policy</a>
          <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Privacy</a>
          <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Affiliate Disclosure</a>
        </span>
      </div>
    </footer>
  );
}

// ─── Comparison table ───────────────────────────────────────
function ComparisonTable({ rows }) {
  return (
    <table className="tbl">
      <thead>
        <tr>
          <th style={{ width: 36 }}>#</th>
          <th>Model</th>
          <th>Best for</th>
          <th>EMF</th>
          <th>Max temp</th>
          <th>Score</th>
          <th>Price</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {rows.map((r, i) => (
          <tr key={i} className={r.best ? 'best' : ''}>
            <td style={{ fontFamily: 'var(--serif)', fontSize: 18, color: r.best ? 'var(--ember-deep)' : 'var(--text)' }}>{String(i + 1).padStart(2, '0')}</td>
            <td>
              <div className="product-name">{r.name}</div>
              <div className="product-sub">{r.brand}</div>
            </td>
            <td style={{ color: 'var(--text-2)' }}>{r.bestFor}</td>
            <td className="mono" style={{ fontSize: 12, color: 'var(--text-2)' }}>{r.emf}</td>
            <td className="mono" style={{ fontSize: 12, color: 'var(--text-2)' }}>{r.maxTemp}</td>
            <td><span style={{ fontFamily: 'var(--serif)', fontSize: 20, color: 'var(--text)' }}>{r.score}</span><span style={{ color: 'var(--text-3)' }}>/10</span></td>
            <td className="mono" style={{ fontSize: 13, color: 'var(--text)' }}>{r.price}</td>
            <td><a href="#" className="btn btn-ember" style={{ padding: '6px 12px', fontSize: 12 }}>Check →</a></td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// expose to other Babel scripts
Object.assign(window, {
  Ph, Stars, Disclose, SiteHeader, MobHeader, AuthorBox, Dot,
  MethodologyBox, CTABlock, ProsCons, ScoreCard, FAQ, TOC,
  Related, SiteFooter, ComparisonTable,
});
