@jjlmoya/utils-audiovisual 1.2.0

package/src/tool/timelapseCalculator/style.css

@@ -0,0 +1,285 @@
+.tlc-root {
+  width: 100%;
+  max-width: 64rem;
+  margin: 0 auto;
+}
+
+.tlc-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border-radius: 1.5rem;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
+}
+
+.theme-dark .tlc-grid {
+  border-color: #334155;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+}
+
+@media (max-width: 768px) {
+  .tlc-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ── Panel izquierdo ── */
+.tlc-inputs-panel {
+  padding: 2rem 3rem;
+  background: #f8fafc;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.theme-dark .tlc-inputs-panel {
+  background: rgba(15, 23, 42, 0.5);
+}
+
+@media (max-width: 768px) {
+  .tlc-inputs-panel {
+    padding: 2rem;
+  }
+}
+
+.tlc-panel-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1.25rem;
+  font-weight: 900;
+  color: #1e293b;
+  margin: 0;
+}
+
+.theme-dark .tlc-panel-title {
+  color: #f8fafc;
+}
+
+.tlc-panel-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: #6366f1;
+}
+
+.tlc-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.tlc-field-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.tlc-group-label {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #64748b;
+}
+
+.tlc-row {
+  display: flex;
+  gap: 1rem;
+}
+
+.tlc-field {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.tlc-sub-label {
+  font-size: 0.7rem;
+  color: #94a3b8;
+  margin-left: 0.25rem;
+}
+
+.tlc-input {
+  width: 100%;
+  background: #fff;
+  border: 2px solid #e2e8f0;
+  border-radius: 0.75rem;
+  padding: 0.75rem 1rem;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #334155;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  box-sizing: border-box;
+}
+
+.theme-dark .tlc-input {
+  background: #1e293b;
+  border-color: #334155;
+  color: #f8fafc;
+}
+
+.tlc-input-indigo:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
+}
+
+.theme-dark .tlc-input-indigo:focus {
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
+}
+
+.tlc-input-pink:focus {
+  border-color: #ec4899;
+  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15);
+}
+
+.theme-dark .tlc-input-pink:focus {
+  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.25);
+}
+
+.tlc-select-wrapper {
+  position: relative;
+}
+
+.tlc-select {
+  appearance: none;
+  cursor: pointer;
+  width: 100%;
+}
+
+.tlc-select-arrow {
+  position: absolute;
+  right: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.25rem;
+  height: 1.25rem;
+  color: #94a3b8;
+  pointer-events: none;
+}
+
+/* ── Panel derecho: gradiente ── */
+.tlc-results-panel {
+  padding: 2rem 3rem;
+  background: linear-gradient(135deg, #4f46e5, #7c3aed);
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 2rem;
+}
+
+@media (max-width: 768px) {
+  .tlc-results-panel {
+    padding: 2rem;
+  }
+}
+
+.tlc-results-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1.25rem;
+  font-weight: 900;
+  color: #c7d2fe;
+  margin: 0;
+}
+
+.tlc-results-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: #a5b4fc;
+}
+
+.tlc-interval-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.tlc-interval-label {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: #c7d2fe;
+  margin: 0;
+}
+
+.tlc-interval-value {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+}
+
+.tlc-big-number {
+  font-size: clamp(3.5rem, 8vw, 5rem);
+  font-weight: 900;
+  letter-spacing: -0.03em;
+  line-height: 1;
+}
+
+.tlc-big-unit {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #a5b4fc;
+}
+
+.tlc-stats-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem 2rem;
+}
+
+.tlc-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.tlc-stat-label {
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: #c7d2fe;
+  margin: 0;
+}
+
+.tlc-stat-value {
+  font-size: 1.875rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  margin: 0;
+  line-height: 1.1;
+}
+
+.tlc-stat-value-sm {
+  font-size: 1.25rem;
+  color: #e0e7ff;
+}
+
+.tlc-rule-info {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid rgba(165, 180, 252, 0.3);
+}
+
+.tlc-info-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  color: #a5b4fc;
+  flex-shrink: 0;
+  margin-top: 0.1rem;
+}
+
+.tlc-info-text {
+  font-size: 0.8rem;
+  line-height: 1.5;
+  color: #c7d2fe;
+  margin: 0;
+}

package/src/tool/tvDistance/bibliography.astro

@@ -0,0 +1,17 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { tvDistance } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await tvDistance.i18n[locale]?.();
+if (!content || !content.bibliography || content.bibliography.length === 0) return null;
+
+const { bibliography, bibliographyTitle = 'Bibliografía' } = content;
+---
+
+<SharedBibliography title={bibliographyTitle} links={bibliography} />

package/src/tool/tvDistance/component.astro

@@ -0,0 +1,178 @@
+---
+import type { TvDistanceUI } from './index';
+import './style.css';
+
+interface Props {
+  ui: TvDistanceUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="tvd-root" id="tv-distance-root" data-ui={JSON.stringify(ui)}>
+  <div class="tvd-card">
+
+    <div class="tvd-body">
+
+      <div class="tvd-left">
+
+        <div class="tvd-specs-block">
+          <h3 class="tvd-specs-title">
+            <svg viewBox="0 0 24 24" class="tvd-tv-icon" aria-hidden="true">
+              <path d="M8.16 3L6.75 4.41L9.34 7H4c-1.11 0-2 .89-2 2v10c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V9c0-1.11-.89-2-2-2h-5.34l2.59-2.59L15.84 3L12 6.84zM4 9h13v10H4zm15.5 0a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1m0 3a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1"/>
+            </svg>
+            {ui.specTitle}
+          </h3>
+
+          <div class="tvd-field">
+            <div class="tvd-field-row">
+              <span class="tvd-label">{ui.diagonalLabel}</span>
+              <span id="tvd-diagonal-display" class="tvd-diagonal-val">55"</span>
+            </div>
+            <input type="range" id="tvd-diagonal" min="32" max="100" value="55" class="tvd-slider" />
+          </div>
+
+          <div class="tvd-field">
+            <span class="tvd-label">{ui.resolutionLabel}</span>
+            <div class="tvd-res-grid">
+              <button class="tvd-res-btn" data-res="1080p">1080p</button>
+              <button class="tvd-res-btn tvd-res-btn-active" data-res="4k">4K</button>
+              <button class="tvd-res-btn" data-res="8k">8K</button>
+            </div>
+          </div>
+        </div>
+
+        <div class="tvd-thx-block">
+          <div class="tvd-thx-header">
+            <svg viewBox="0 0 24 24" class="tvd-thx-icon" aria-hidden="true">
+              <path d="M11 9h2V7h-2m1 13c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m-1 15h2v-6h-2z"/>
+            </svg>
+            <span class="tvd-thx-title">{ui.thxRecommendation}</span>
+          </div>
+          <p class="tvd-thx-desc">{ui.thxDescription}</p>
+        </div>
+
+      </div>
+
+      <div class="tvd-right">
+
+        <div class="tvd-sim-badge">
+          <span class="tvd-sim-dot"></span>
+          <span class="tvd-sim-badge-text">{ui.simulationBadge}</span>
+        </div>
+
+        <div class="tvd-sim-area">
+
+          <div id="tvd-tv-visual" class="tvd-tv-visual">
+            <div class="tvd-tv-screen">
+              <div class="tvd-screen-gradient"></div>
+              <svg viewBox="0 0 24 24" class="tvd-screen-ghost" aria-hidden="true">
+                <path d="M21 3H3c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h5v2h8v-2h5a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m0 14H3V5h18m-5 6l-7 4V7"/>
+              </svg>
+              <div class="tvd-screen-inset"></div>
+            </div>
+            <div class="tvd-stand-neck"></div>
+            <div class="tvd-stand-base"></div>
+            <div class="tvd-tv-tooltip">
+              <span id="tvd-width-display">—</span> {ui.tvWidthLabel}
+            </div>
+          </div>
+
+          <div id="tvd-line" class="tvd-distance-line">
+            <div class="tvd-line-dashed"></div>
+          </div>
+
+          <div class="tvd-person">
+            <div class="tvd-person-inner">
+              <div class="tvd-person-head"></div>
+              <div class="tvd-person-body"></div>
+            </div>
+            <div class="tvd-location-card">
+              <span class="tvd-location-label">{ui.userLocationLabel}</span>
+              <span id="tvd-distance-display" class="tvd-location-val">—</span>
+            </div>
+          </div>
+
+        </div>
+
+        <div class="tvd-stats">
+          <div class="tvd-stat">
+            <span class="tvd-stat-label">{ui.minLimitLabel}</span>
+            <span id="tvd-min" class="tvd-stat-val">—</span>
+          </div>
+          <div class="tvd-stat tvd-stat-opt">
+            <span class="tvd-stat-label">{ui.optimalLimitLabel}</span>
+            <span id="tvd-opt" class="tvd-stat-val">—</span>
+          </div>
+          <div class="tvd-stat">
+            <span class="tvd-stat-label">{ui.maxLimitLabel}</span>
+            <span id="tvd-max" class="tvd-stat-val">—</span>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+</div>
+
+<script>
+  import { calculateViewingDistance, getDimensionsFromDiagonal } from './logic';
+  import type { TVSpecs } from './logic';
+  import type { TvDistanceUI } from './index';
+
+  function init() {
+    const root = document.getElementById('tv-distance-root');
+    if (!root) return;
+
+    const labels = JSON.parse(root.dataset.ui ?? '{}') as TvDistanceUI;
+
+    const diagonalInput = root.querySelector('#tvd-diagonal') as HTMLInputElement;
+    const diagonalDisplay = root.querySelector('#tvd-diagonal-display') as HTMLElement;
+    const resBtns = root.querySelectorAll('.tvd-res-btn') as NodeListOf<HTMLButtonElement>;
+    const tvVisual = root.querySelector('#tvd-tv-visual') as HTMLElement;
+    const widthDisplay = root.querySelector('#tvd-width-display') as HTMLElement;
+    const lineEl = root.querySelector('#tvd-line') as HTMLElement;
+    const distanceDisplay = root.querySelector('#tvd-distance-display') as HTMLElement;
+    const minEl = root.querySelector('#tvd-min') as HTMLElement;
+    const optEl = root.querySelector('#tvd-opt') as HTMLElement;
+    const maxEl = root.querySelector('#tvd-max') as HTMLElement;
+
+    let currentRes: TVSpecs['resolution'] = '4k';
+
+    function update() {
+      const diagonal = parseInt(diagonalInput.value);
+      diagonalDisplay.textContent = `${diagonal}"`;
+
+      const specs: TVSpecs = { diagonalInches: diagonal, resolution: currentRes, aspectRatio: 16 / 9 };
+      const dist = calculateViewingDistance(specs);
+      const dims = getDimensionsFromDiagonal(diagonal);
+
+      minEl.textContent = `${dist.min.toFixed(2)}${labels.unitMeters}`;
+      optEl.textContent = `${dist.optimal.toFixed(2)}${labels.unitMeters}`;
+      maxEl.textContent = `${dist.max.toFixed(2)}${labels.unitMeters}`;
+      distanceDisplay.textContent = `${dist.optimal.toFixed(2)}${labels.unitMeters}`;
+      widthDisplay.textContent = String(Math.round(dims.width));
+
+      const scale = 1.8;
+      tvVisual.style.width = `${Math.round(dims.width * scale)}px`;
+
+      const lineH = Math.max(60, dist.optimal * 80);
+      lineEl.style.height = `${lineH}px`;
+
+      resBtns.forEach(b => b.classList.toggle('tvd-res-btn-active', b.dataset.res === currentRes));
+    }
+
+    diagonalInput.addEventListener('input', update);
+    resBtns.forEach(b => b.addEventListener('click', () => {
+      currentRes = b.dataset.res as TVSpecs['resolution'];
+      update();
+    }));
+
+    update();
+  }
+
+  init();
+  document.addEventListener('astro:page-load', init);
+</script>

package/src/tool/tvDistance/i18n/en.ts

@@ -0,0 +1,223 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { TvDistanceUI, TvDistanceLocaleContent } from '../index';
+
+const slug = 'tv-viewing-distance-calculator-thx-4k-optimal-screen';
+const title = 'TV Distance Calculator - THX and 4K Optimal Screen';
+const description = 'Calculate the ideal distance to watch your television based on its size and resolution. Optimize your Home Cinema with THX and SMPTE standards.';
+
+const ui: TvDistanceUI = {
+    specTitle: "Specifications",
+    diagonalLabel: "Diagonal Size",
+    resolutionLabel: "Resolution",
+    thxRecommendation: "THX Recommendation",
+    thxDescription: "THX recommends a distance that covers a 40-degree viewing angle for an immersive cinematic experience.",
+    simulationBadge: "Real-Time Simulation",
+    tvWidthLabel: "cm wide",
+    userLocationLabel: "Your Location",
+    minLimitLabel: "Minimum Limit",
+    optimalLimitLabel: "Optimal Distance",
+    maxLimitLabel: "Maximum Limit",
+    unitMeters: "m",
+    unitCm: "cm"
+};
+
+const faq: TvDistanceLocaleContent['faq'] = [
+    {
+        question: "Why does resolution matter when calculating distance?",
+        answer: "At higher resolutions (like 4K or 8K), pixels are smaller. This allows you to sit closer without perceiving the pixel grid, increasing immersion without losing sharpness.",
+    },
+    {
+        question: "What is the 40-degree viewing angle?",
+        answer: "It is the standard recommended by THX so that the screen occupies a large part of your peripheral vision, similar to the experience of a professional cinema hall.",
+    },
+    {
+        question: "Can I sit further away than recommended?",
+        answer: "Yes, but you will lose the benefit of high resolutions. If you sit too far from a 4K TV, your eye won't be able to distinguish the extra details and you'll see it as if it were 1080p.",
+    },
+];
+
+const howTo: TvDistanceLocaleContent['howTo'] = [
+    {
+        name: "Indicate inches",
+        text: "Move the slider to select the size of your current television or the one you plan to buy.",
+    },
+    {
+        name: "Select resolution",
+        text: "Choose between 1080p, 4K, or 8K to adjust the visual acuity limits.",
+    },
+    {
+        name: "Visualize simulation",
+        text: "Observe in the diagram how the size relationship between you and the screen changes.",
+    },
+    {
+        name: "Adjust your sofa",
+        text: "Place your seat within the 'Optimal Distance' range to maximize cinematic immersion.",
+    },
+];
+
+const bibliography: TvDistanceLocaleContent['bibliography'] = [
+    {
+        name: "THX - HDTV Set Up Guide",
+        url: "https://www.thx.com/questions/what-is-the-best-viewing-distance-for-my-tv/",
+    },
+    {
+        name: "SMPTE - Standards Documentation",
+        url: "https://www.smpte.org/",
+    },
+];
+
+const seo: TvDistanceLocaleContent['seo'] = [
+    {
+        type: 'summary',
+        title: 'Optimal TV Distance by Resolution and Size',
+        items: [
+            'THX standards (40°) for immersive cinematic experience',
+            'Calculations for 1080p, 4K, and 8K with maximum precision',
+            'Real-time visual simulation of your setup',
+            'Avoid eye fatigue and maximize content immersion'
+        ]
+    },
+    { type: 'title', text: 'Science of Immersion: Optimal TV Distance', level: 2 },
+    { type: 'paragraph', html: 'It\'s not just about comfort, but about human visual physiology. The eye has a resolution acuity limit; if you sit too far from a 4K screen, you are wasting money on pixels your vision cannot exploit. And if you sit too close, it causes eye fatigue.' },
+
+    { type: 'stats', items: [
+        { value: '40°', label: 'Ideal THX Angle', icon: 'mdi:eye' },
+        { value: '100%', label: 'Exploited Pixels', icon: 'mdi:video-high-definition' },
+        { value: 'Zero', label: 'Visual Fatigue', icon: 'mdi:heart-pulse' }
+    ], columns: 3 },
+
+    { type: 'title', text: 'Two Professional Standards: THX vs SMPTE', level: 3 },
+    { type: 'paragraph', html: 'There are two main authorities in the audiovisual industry that define how to optimize your viewing experience:' },
+    { type: 'comparative', items: [
+        {
+            title: 'THX Standard',
+            description: '40° viewing angle - More immersive',
+            icon: 'mdi:filmstrip',
+            points: [
+                'Screen occupies more of your peripheral vision',
+                'Immersive cinematic experience',
+                'Ideal for action movies, live sports',
+                'Requires more room space'
+            ],
+            highlight: true
+        },
+        {
+            title: 'SMPTE Standard',
+            description: '30° viewing angle - More relaxed',
+            icon: 'mdi:television',
+            points: [
+                'More comfortable sitting distance',
+                'Conservative professional recommendation',
+                'Ideal for varied content (news, series)',
+                'Better for smaller rooms'
+            ]
+        }
+    ], columns: 2 },
+
+    { type: 'title', text: 'How Resolution Changes the Equation', level: 3 },
+    { type: 'table', headers: ['Resolution', '55" TV Size', 'Minimum Distance (no visible pixels)', 'Optimal THX Distance'], rows: [
+        ['1080p (Full HD)', '55 inches', '2.0 m', '2.3 m'],
+        ['4K (Ultra HD)', '55 inches', '1.2 m', '1.5 m'],
+        ['8K', '55 inches', '0.8 m', '1.0 m']
+    ] },
+
+    { type: 'paragraph', html: 'As you see, higher resolution allows sitting closer without perceiving the pixel structure. A 4K TV can be appreciated from 1.2 meters away; a 1080p needs at least 2 meters.' },
+
+    { type: 'card', title: 'The Human Visual Acuity Limit', html: 'The human eye has a resolution limit capacity (visual acuity). Beyond a certain distance, you cannot distinguish more details even if the screen has 8K. Our calculations position you exactly in the "optimal zone" where you exploit 100% of the pixels without wasting unnecessary ocular energy.' },
+
+    { type: 'diagnostic', variant: 'info', title: 'Eye Fatigue and Distance', icon: 'mdi:information', badge: 'Visual Health', html: 'Being too close causes fatigue because your eyes need to constantly accommodate to extreme angles. Being too far causes strain to distinguish details. Our calculator positions you in the "sweet spot" where the screen fills your natural vision (40° for THX) without causing ocular stress.' },
+
+    { type: 'proscons', items: [
+        {
+            pro: 'THX 40° creates true cinematic immersion - like a professional cinema hall',
+            con: 'Requires more available space in the room'
+        },
+        {
+            pro: '4K allows sitting closer than 1080p - useful in small spaces',
+            con: 'You must be at minimum distance to exploit extra pixels'
+        },
+        {
+            pro: 'Avoid eye fatigue by positioning yourself correctly from the start',
+            con: 'Most home rooms DO NOT follow these standards (hence the fatigue)'
+        },
+        {
+            pro: 'You can validate if your current TV is well positioned',
+            con: 'If it is wrong, it requires moving furniture (not a software issue)'
+        }
+    ], proTitle: 'Advantages', conTitle: 'Limitations' },
+
+    { type: 'glossary', items: [
+        {
+            term: 'Viewing Angle (in degrees)',
+            definition: 'Visual angle the screen covers from your position. 40° = very immersive (peripheral covered); 20° = background content (not immersive).'
+        },
+        {
+            term: 'THX (Tomlinson Holman Experiment)',
+            definition: 'Audiovisual quality certification created by Lucasfilm. Defines standards for cinemas, home theater, and audio equipment. 40° is its primary recommendation.'
+        },
+        {
+            term: 'SMPTE (Society of Motion Picture Technical Engineers)',
+            definition: 'Technical standards organization for film and video. Recommends 30° as a conservative professional distance.'
+        },
+        {
+            term: 'Human Visual Acuity',
+            definition: 'Capability of the eye to distinguish fine details. An individual pixel is imperceptible past a certain distance (depends on resolution).'
+        },
+        {
+            term: '4K (Ultra HD)',
+            definition: 'Resolution of ~3840x2160 pixels. 4 times more pixels than 1080p. Allows getting closer without perceiving pixel structure.'
+        }
+    ] },
+
+    { type: 'message', title: 'Professional Audiovisual Room Optimization', ariaLabel: 'Information about TV setup standards', html: 'Professional cinemas spend millions ensuring distance, angle, and lighting are perfect. Our calculator brings those same principles to your home. It\'s not luxury: it\'s an investment in visual comfort and maximum exploitation of your equipment.' },
+
+    { type: 'title', text: 'Set Up Your Home Cinema Professionally', level: 3 },
+    { type: 'paragraph', html: 'Distance is JUST AS important as screen size and resolution. Follow these standards to transform your living room into an authentic cinematic hall. You\'ll see movies, series, and sports content with the immersion they were designed for.' }
+];
+
+const faqSchema: WithContext<FAQPage> = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faq.map((item) => ({
+        '@type': 'Question',
+        name: item.question,
+        acceptedAnswer: { '@type': 'Answer', text: item.answer },
+    })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    name: title,
+    description,
+    step: howTo.map((step) => ({
+        '@type': 'HowToStep',
+        name: step.name,
+        text: step.text,
+    })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: title,
+    description,
+    applicationCategory: 'UtilitiesApplication',
+    operatingSystem: 'Web',
+    offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+    inLanguage: 'en',
+};
+
+export const content: TvDistanceLocaleContent = {
+    slug,
+    title,
+    description,
+    ui,
+    seo,
+    faq,
+    faqTitle: 'Frequently Asked Questions about TV Viewing Distance',
+    bibliography,
+    bibliographyTitle: 'Professional Standards for Television Setup',
+    howTo,
+    schemas: [faqSchema as any, howToSchema as any, appSchema],
+};