// proof-tweakable.jsx
// Tweakable proof section for the home page.
// Mounts into #proof-root; pulls all stats/testimonial from TWEAK_DEFAULTS.

const { useState, useEffect } = React;

function ProofApp() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  const stats = [
    { num: t.stat1Num, label: t.stat1Label },
    { num: t.stat2Num, label: t.stat2Label },
    { num: t.stat3Num, label: t.stat3Label },
    { num: t.stat4Num, label: t.stat4Label },
  ].filter(s => (s.num || '').trim() || (s.label || '').trim());

  const renderNum = (raw) => {
    // anything inside [...] gets italicised pink, e.g. "15[+]" -> 15 with a pink +
    const m = (raw || '').match(/^(.*?)\[(.*?)\](.*)$/);
    if (!m) return raw;
    return <>{m[1]}<em>{m[2]}</em>{m[3]}</>;
  };

  const showStats = t.showStats && stats.length > 0;
  const showTestimonial = t.showTestimonial && (t.testimonialText || '').trim();

  if (!showStats && !showTestimonial) return (
    <TweaksUI t={t} setTweak={setTweak} />
  );

  const gridStyle = (showStats && showTestimonial)
    ? { gridTemplateColumns: '1.1fr 1fr' }
    : { gridTemplateColumns: '1fr' };

  const statsCols = stats.length >= 4 ? 2 : (stats.length >= 2 ? 2 : 1);

  return (
    <>
      <section className="proof">
        <div className="proof-inner" style={gridStyle}>
          {showStats && (
            <div className="proof-stats reveal in-view" style={{ gridTemplateColumns: `repeat(${statsCols}, 1fr)` }}>
              {stats.map((s, i) => (
                <div className="proof-stat" key={i}>
                  <div className="proof-stat-num">{renderNum(s.num)}</div>
                  <div className="proof-stat-label">{s.label}</div>
                </div>
              ))}
            </div>
          )}
          {showTestimonial && (
            <div className="proof-testimonial reveal in-view">
              <p className="proof-testimonial-text">"{t.testimonialText}"</p>
              <div className="proof-testimonial-attr">
                {t.testimonialAttr && <strong>{t.testimonialAttr}</strong>}
                {t.testimonialLocation}
              </div>
            </div>
          )}
        </div>
      </section>
      <TweaksUI t={t} setTweak={setTweak} />
    </>
  );
}

function TweaksUI({ t, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Proof section" />
      <TweakToggle label="Show stats" value={t.showStats}
                   onChange={(v) => setTweak('showStats', v)} />
      <TweakToggle label="Show testimonial" value={t.showTestimonial}
                   onChange={(v) => setTweak('showTestimonial', v)} />

      <TweakSection label="Stat 01" />
      <TweakText  label="Number" value={t.stat1Num} placeholder='e.g. "15[+]"'
                  onChange={(v) => setTweak('stat1Num', v)} />
      <TweakText  label="Label"  value={t.stat1Label}
                  onChange={(v) => setTweak('stat1Label', v)} />

      <TweakSection label="Stat 02" />
      <TweakText  label="Number" value={t.stat2Num}
                  onChange={(v) => setTweak('stat2Num', v)} />
      <TweakText  label="Label"  value={t.stat2Label}
                  onChange={(v) => setTweak('stat2Label', v)} />

      <TweakSection label="Stat 03" />
      <TweakText  label="Number" value={t.stat3Num}
                  onChange={(v) => setTweak('stat3Num', v)} />
      <TweakText  label="Label"  value={t.stat3Label}
                  onChange={(v) => setTweak('stat3Label', v)} />

      <TweakSection label="Stat 04" />
      <TweakText  label="Number" value={t.stat4Num}
                  onChange={(v) => setTweak('stat4Num', v)} />
      <TweakText  label="Label"  value={t.stat4Label}
                  onChange={(v) => setTweak('stat4Label', v)} />

      <TweakSection label="Testimonial" />
      <TweakText  label="Quote" value={t.testimonialText}
                  onChange={(v) => setTweak('testimonialText', v)} />
      <TweakText  label="Attribution" value={t.testimonialAttr}
                  onChange={(v) => setTweak('testimonialAttr', v)} />
      <TweakText  label="Location" value={t.testimonialLocation}
                  onChange={(v) => setTweak('testimonialLocation', v)} />
    </TweaksPanel>
  );
}

const root = ReactDOM.createRoot(document.getElementById('proof-root'));
root.render(<ProofApp />);