// Editorial primitives for the Examples page (v3).
//
// Direction:
//   - NO italics anywhere. NO em dashes in copy.
//   - Celestial Guardian is reserved for chapter titles ONLY (top of section).
//     Sub-spread headlines and everything else use La Villa.
//   - The recipe is shown as an EXPLICIT INGREDIENTS → OUTPUT layout.
//     Numbered ingredient list on the left, arrow, hero output on the right.
//   - Before/After is the secondary pattern, used where the same scene is
//     transformed (e.g. product placement).
//   - Each chapter is a distinct, titled section with alternating tones.

/* ------------------------------------------------------------------
   ExSection: chapter container.
   Tones: cream | deep | cocoa
   Renders the chapter title (Celestial Guardian) + a single calm
   intro paragraph (La Villa). No italics.
------------------------------------------------------------------ */
function ExSection({ id, chapter, title, kicker, tone = 'cream', children }) {
  const palettes = {
    cream: { bg: 'var(--cream)',      ink: 'var(--cocoa)', mute: 'var(--fg-2)', rule: 'var(--border-1)' },
    deep:  { bg: 'var(--cream-deep)', ink: 'var(--cocoa)', mute: 'var(--fg-2)', rule: 'var(--border-1)' },
    cocoa: { bg: '#2A2420',           ink: 'var(--cream)', mute: 'rgba(242,236,228,0.62)', rule: 'rgba(242,236,228,0.16)' },
  };
  const p = palettes[tone] || palettes.cream;
  return (
    <section id={id} className="ps-section ex-section" data-mobile-pad="true" data-mobile-y="md" style={{
      background: p.bg, color: p.ink, padding: '140px 48px',
      position: 'relative',
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <header className="ex-section-head" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64,
          alignItems: 'end', marginBottom: 88,
        }}>
          <div>
            <div style={{
              fontFamily: '"La Villa", sans-serif',
              fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
              color: p.mute, marginBottom: 22, fontWeight: 500,
            }}>
              {chapter}
            </div>
            <h2 className="celestial" style={{
              fontSize: 'clamp(48px,5.4vw,92px)', color: p.ink, margin: 0, lineHeight: 1,
              letterSpacing: '0.005em',
            }}>
              {title}
            </h2>
          </div>
          {kicker && (
            <p style={{
              fontFamily: '"La Villa", sans-serif', fontSize: 16, lineHeight: 1.65,
              color: p.mute, margin: 0, paddingBottom: 14, maxWidth: 460,
              justifySelf: 'end',
            }}>
              {kicker}
            </p>
          )}
        </header>
        {children}
      </div>
      <style>{`
        @media (max-width: 900px) {
          .ex-section-head { grid-template-columns: 1fr !important; gap: 24px !important; align-items: start !important; margin-bottom: 56px !important; }
          .ex-section-head p { justify-self: start !important; }
        }
      `}</style>
    </section>
  );
}

/* ------------------------------------------------------------------
   ExSpreadHead: smaller per-spread headline (La Villa, NOT Celestial).
   Optional eyebrow + headline.
------------------------------------------------------------------ */
function ExSpreadHead({ eyebrow, title, tone = 'cream' }) {
  const ink = tone === 'cocoa' ? 'var(--cream)' : 'var(--cocoa)';
  const mute = tone === 'cocoa' ? 'rgba(242,236,228,0.62)' : 'var(--fg-2)';
  return (
    <div style={{ marginBottom: 32 }}>
      {eyebrow && (
        <div style={{
          fontFamily: '"La Villa", sans-serif',
          fontSize: 10.5, letterSpacing: '0.28em', textTransform: 'uppercase',
          color: mute, marginBottom: 12, fontWeight: 500,
        }}>{eyebrow}</div>
      )}
      <h3 style={{
        fontFamily: '"La Villa", sans-serif',
        fontSize: 'clamp(22px,2.4vw,32px)', lineHeight: 1.18, fontWeight: 500,
        color: ink, margin: 0, letterSpacing: '-0.005em',
      }}>{title}</h3>
    </div>
  );
}

/* ------------------------------------------------------------------
   ExFrame: simple image frame. No chips, no labels.
------------------------------------------------------------------ */
function ExFrame({ src, alt = '', ratio = '3/4', tone = 'image', shadow = 'md', style = {} }) {
  const bg = tone === 'neutral' ? '#EAE0D2' : '#E8DFD2';
  const fit = tone === 'neutral' ? 'contain' : 'cover';
  const pad = tone === 'neutral' ? 14 : 0;
  const shadows = {
    none: 'none',
    sm: '0 6px 16px rgba(42,36,32,0.08)',
    md: '0 16px 32px rgba(42,36,32,0.12)',
    lg: '0 28px 52px rgba(42,36,32,0.16)',
  };
  return (
    <div style={{
      position: 'relative', aspectRatio: ratio, background: bg,
      overflow: 'hidden', padding: pad,
      boxShadow: shadows[shadow], ...style,
    }}>
      {src && (
        <img src={src} alt={alt} loading="lazy" style={{
          width: '100%', height: '100%', objectFit: fit, display: 'block',
        }} />
      )}
    </div>
  );
}

/* ------------------------------------------------------------------
   ExArrow: a thin horizontal arrow used between ingredient list and output.
------------------------------------------------------------------ */
function ExArrow({ tone = 'cream' }) {
  const c = tone === 'cocoa' ? 'rgba(242,236,228,0.55)' : 'var(--fg-2)';
  return (
    <div className="ex-arrow" aria-hidden="true" style={{
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: c, padding: '0 8px',
    }}>
      <svg width="44" height="14" viewBox="0 0 44 14" fill="none">
        <path d="M0 7H42M36 1L42 7L36 13" stroke="currentColor" strokeWidth="1" fill="none" strokeLinecap="square"/>
      </svg>
    </div>
  );
}

/* ------------------------------------------------------------------
   ExIngredients: explicit recipe block.
   Renders: numbered ingredient cards (image + label + small note) on left,
   arrow, then the OUTPUT slot on the right.
   Use as a wrapper around the output children — output sits inside.

   props:
     items: [{ src, label, note, tone? }, ...]
     tone: 'cream' | 'deep' | 'cocoa'
     ratio: aspectRatio applied to each ingredient thumb (default '3/4')
     children: the output element(s)
------------------------------------------------------------------ */
function ExIngredients({ items, tone = 'cream', ratio = '3/4', outputLabel = 'Output', children }) {
  const palettes = {
    cream: { ink: 'var(--cocoa)', mute: 'var(--fg-2)', rule: 'var(--border-1)', chip: '#EFE4D2' },
    deep:  { ink: 'var(--cocoa)', mute: 'var(--fg-2)', rule: 'var(--border-1)', chip: 'var(--cream)' },
    cocoa: { ink: 'var(--cream)', mute: 'rgba(242,236,228,0.62)', rule: 'rgba(242,236,228,0.16)', chip: 'rgba(242,236,228,0.06)' },
  };
  const p = palettes[tone] || palettes.cream;
  return (
    <div className="ex-recipe" style={{
      display: 'grid',
      gridTemplateColumns: 'minmax(240px, 0.7fr) auto minmax(0, 1.05fr)',
      gap: 28,
      alignItems: 'stretch',
    }}>
      {/* Ingredients column */}
      <div className="ex-recipe-ing" style={{
        display: 'flex', flexDirection: 'column', gap: 18,
        paddingTop: 4,
      }}>
        <div style={{
          fontFamily: '"La Villa", sans-serif',
          fontSize: 10.5, letterSpacing: '0.28em', textTransform: 'uppercase',
          color: p.mute, fontWeight: 500,
          paddingBottom: 14, borderBottom: `1px solid ${p.rule}`,
        }}>
          Ingredients
        </div>

        {items.map((it, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '28px 1fr', gap: 14, alignItems: 'start',
          }}>
            <div style={{
              fontFamily: '"La Villa", sans-serif',
              fontSize: 11, letterSpacing: '0.18em',
              color: p.mute, paddingTop: 6, fontWeight: 500,
            }}>
              {String(i + 1).padStart(2, '0')}
            </div>
            <div>
              <div style={{
                width: '100%', aspectRatio: ratio,
                background: it.tone === 'preset'
                  ? p.chip
                  : (it.tone === 'neutral' ? '#EAE0D2' : '#E8DFD2'),
                border: it.tone === 'preset' ? `1px dashed ${p.rule}` : 'none',
                overflow: 'hidden',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                padding: it.tone === 'neutral' ? 10 : 0,
              }}>
                {it.src ? (
                  <img src={it.src} alt={it.label || ''} loading="lazy" style={{
                    width: '100%', height: '100%',
                    objectFit: it.tone === 'neutral' ? 'contain' : 'cover',
                    display: 'block',
                  }} />
                ) : (
                  <span style={{
                    fontFamily: '"La Villa", sans-serif',
                    fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
                    color: p.ink, opacity: 0.78, textAlign: 'center', padding: 8,
                    fontWeight: 500, lineHeight: 1.3,
                  }}>{it.label}</span>
                )}
              </div>
              <div style={{
                marginTop: 8,
                fontFamily: '"La Villa", sans-serif',
                fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
                color: p.ink, fontWeight: 500,
              }}>{it.label}</div>
              {it.note && (
                <div style={{
                  marginTop: 4,
                  fontFamily: '"La Villa", sans-serif',
                  fontSize: 12.5, lineHeight: 1.5,
                  color: p.mute,
                }}>{it.note}</div>
              )}
            </div>
          </div>
        ))}
      </div>

      {/* Arrow */}
      <ExArrow tone={tone} />

      {/* Output column */}
      <div className="ex-recipe-out" style={{
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{
          fontFamily: '"La Villa", sans-serif',
          fontSize: 10.5, letterSpacing: '0.28em', textTransform: 'uppercase',
          color: p.ink, fontWeight: 600,
          paddingBottom: 14, borderBottom: `1px solid ${p.ink}`,
          marginBottom: 18,
        }}>
          {outputLabel}
        </div>
        <div style={{ flex: 1 }}>
          {children}
        </div>
      </div>

      <style>{`
        @media (max-width: 1000px) {
          .ex-recipe { grid-template-columns: 1fr !important; gap: 32px !important; }
          .ex-arrow { display: none !important; }
        }
      `}</style>
    </div>
  );
}

/* ------------------------------------------------------------------
   ExBeforeAfter: secondary pattern. Big BEFORE / AFTER pair.
   Optional small product chip overlay below the labels indicating
   what was added.
   props:
     before: { src, alt }
     after: { src, alt }
     productChip: { src, label }  — optional small ingredient chip
     tone
------------------------------------------------------------------ */
function ExBeforeAfter({ before, after, productChip, tone = 'cream', ratio = '3/4' }) {
  const palettes = {
    cream: { ink: 'var(--cocoa)', mute: 'var(--fg-2)', rule: 'var(--border-1)', chipBg: 'var(--cream-deep)' },
    deep:  { ink: 'var(--cocoa)', mute: 'var(--fg-2)', rule: 'var(--border-1)', chipBg: 'var(--cream)' },
    cocoa: { ink: 'var(--cream)', mute: 'rgba(242,236,228,0.62)', rule: 'rgba(242,236,228,0.16)', chipBg: 'rgba(242,236,228,0.06)' },
  };
  const p = palettes[tone] || palettes.cream;
  return (
    <div>
      <div className="ex-ba-row" style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, alignItems: 'start',
      }}>
        {/* BEFORE */}
        <div>
          <div style={{
            display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
            paddingBottom: 14, borderBottom: `1px solid ${p.rule}`, marginBottom: 18,
          }}>
            <span style={{
              fontFamily: '"La Villa", sans-serif',
              fontSize: 10.5, letterSpacing: '0.28em', textTransform: 'uppercase',
              color: p.mute, fontWeight: 500,
            }}>Before</span>
            <span style={{
              fontFamily: '"La Villa", sans-serif',
              fontSize: 10.5, letterSpacing: '0.18em',
              color: p.mute, fontWeight: 500,
            }}>{before.note || ''}</span>
          </div>
          <ExFrame src={before.src} alt={before.alt} ratio={ratio} shadow="md" />
        </div>

        {/* AFTER */}
        <div>
          <div style={{
            display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
            paddingBottom: 14, borderBottom: `1px solid ${p.ink}`, marginBottom: 18,
          }}>
            <span style={{
              fontFamily: '"La Villa", sans-serif',
              fontSize: 10.5, letterSpacing: '0.28em', textTransform: 'uppercase',
              color: p.ink, fontWeight: 600,
            }}>After</span>
            <span style={{
              fontFamily: '"La Villa", sans-serif',
              fontSize: 10.5, letterSpacing: '0.18em',
              color: p.mute, fontWeight: 500,
            }}>{after.note || ''}</span>
          </div>
          <ExFrame src={after.src} alt={after.alt} ratio={ratio} shadow="lg" />
        </div>
      </div>

      {/* Product chip — what got added */}
      {productChip && (
        <div className="ex-ba-chip" style={{
          marginTop: 24,
          display: 'inline-flex', alignItems: 'center', gap: 14,
          padding: 14, paddingRight: 20,
          background: p.chipBg,
        }}>
          <div style={{
            width: 56, height: 56, background: '#EAE0D2',
            display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 6,
          }}>
            {productChip.src && (
              <img src={productChip.src} alt={productChip.label || ''} loading="lazy" style={{
                width: '100%', height: '100%', objectFit: 'contain',
              }} />
            )}
          </div>
          <div>
            <div style={{
              fontFamily: '"La Villa", sans-serif',
              fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase',
              color: p.mute, fontWeight: 500, marginBottom: 4,
            }}>What got added</div>
            <div style={{
              fontFamily: '"La Villa", sans-serif',
              fontSize: 14, color: p.ink, fontWeight: 500,
            }}>{productChip.label}</div>
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 760px) {
          .ex-ba-row { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, {
  ExSection, ExSpreadHead, ExFrame, ExArrow, ExIngredients, ExBeforeAfter,
});