// scenes-1-3.jsx — Hook, Status Quo, Architektur

// Komprimierte Timeline — gesamt 3:50 (230s)
const SCENE = {
  s1: { start: 0,    end: 26 },   // Hook
  s2: { start: 26,   end: 50 },   // Status Quo
  s3: { start: 50,   end: 88 },   // Architektur
  s4: { start: 88,   end: 172 },  // Live Demo
  s5: { start: 172,  end: 194 },  // Beweis
  s6: { start: 194,  end: 214 },  // Abgrenzung
  s7: { start: 214,  end: 230 },  // CTA
};

// Caption: hochwertige Lower-Third Textkarte
// Optionales `accent` markiert ein Schlüsselwort in Akzent-Blau.
function Caption({ start, end, text, accent }) {
  const time = useTime();
  const visible = time >= start && time <= end;
  if (!visible) return null;
  const localT = time - start;
  const dur = end - start;
  const fadeIn = Math.min(1, localT / 0.6);
  const fadeOut = Math.min(1, (dur - localT) / 0.6);
  const op = Math.min(fadeIn, fadeOut);
  const ty = (1 - fadeIn) * 12;

  // Accent-Highlight: ersetzt vorkommendes accent-Wort mit blauer Hervorhebung
  let content = text;
  if (accent && typeof text === 'string' && text.includes(accent)) {
    const parts = text.split(accent);
    content = (
      <React.Fragment>
        {parts[0]}
        <span style={{ color: C.blue600, fontWeight: 600 }}>{accent}</span>
        {parts.slice(1).join(accent)}
      </React.Fragment>
    );
  }

  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 100,
      display: 'flex', justifyContent: 'center',
      pointerEvents: 'none',
    }}>
      <div style={{
        opacity: op, transform: `translateY(${ty}px)`,
        background: 'rgba(255,255,255,0.97)',
        border: `1px solid ${C.n200}`,
        borderRadius: 14,
        padding: '28px 56px',
        fontSize: 30,
        lineHeight: 1.45,
        color: C.n800,
        fontWeight: 500,
        letterSpacing: '-0.01em',
        maxWidth: 1280,
        textAlign: 'center',
        boxShadow: '0 8px 32px rgba(31,29,26,0.08), 0 2px 6px rgba(31,29,26,0.04)',
        position: 'relative',
      }}>
        {/* Dezenter Akzent-Strich links */}
        <div style={{
          position: 'absolute', left: 0, top: '22%', bottom: '22%',
          width: 3, background: C.blue600, borderRadius: 2,
        }}/>
        {content}
      </div>
    </div>
  );
}

// Section title chip (eyebrow) — appears in upper-left during a scene
function SceneEyebrow({ start, end, label, num }) {
  const time = useTime();
  const visible = time >= start && time <= end;
  if (!visible) return null;
  const localT = time - start;
  const fadeIn = Math.min(1, localT / 0.5);
  const fadeOut = Math.min(1, (end - time) / 0.5);
  return (
    <div style={{
      position: 'absolute', top: 32, left: 48,
      opacity: Math.min(fadeIn, fadeOut),
      display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <div style={{
        fontSize: 11, fontWeight: 600, letterSpacing: '0.12em',
        color: C.blue600, textTransform: 'uppercase',
        fontVariantNumeric: 'tabular-nums',
      }}>{num}</div>
      <div style={{ width: 24, height: 1, background: C.n300 }}/>
      <div style={{
        fontSize: 11, fontWeight: 600, letterSpacing: '0.12em',
        color: C.n500, textTransform: 'uppercase',
      }}>{label}</div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────
// SZENE 1 — HOOK / Inbox-Stau
// ────────────────────────────────────────────────────────────────────────
function Scene1Hook() {
  const { start, end } = SCENE.s1;
  const time = useTime();
  if (time < start - 0.5 || time > end + 0.5) return null;

  const localT = time - start;
  const fadeOut = Math.min(1, (end - time) / 1.0);

  // Subjects pool
  const subjects = [
    'Bescheid', 'Frist', 'Vorauszahlung', 'Termin', 'Beleg',
    'Rückfrage', 'Mahnung', 'Unterlagen', 'USt-VA', 'Zahlung',
    'Bescheid', 'Frist', 'Beleg', 'Rückfrage', 'USt-VA',
    'Termin', 'Mahnung', 'Vorauszahlung', 'Unterlagen', 'Zahlung',
    'Bescheid', 'Beleg', 'Frist', 'USt-VA', 'Rückfrage',
    'Termin', 'Mahnung', 'Vorauszahlung', 'Beleg', 'Bescheid',
  ];
  const senders = [
    'a.schmidt@…', 'office@trans-…', 'info@cafe-altona.de',
    'kontakt@yoga-studio…', 'buero@autoteile-…', 'h.schulz@…',
    'finanzamt-hh@…', 'info@jschmidt-design.de',
  ];
  const times = ['08:14', '08:22', '08:31', '08:47', '09:02', '09:18',
    '09:35', '09:51', '10:08', '10:23', '10:41', '10:55',
    '11:12', '11:28', '11:44', '12:01', '12:18', '12:33',
    '12:49', '13:04', '13:22', '13:38', '13:55', '14:11',
    '14:27', '14:43', '15:01', '15:18', '15:34', '15:50'];

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: C.n50,
      opacity: fadeOut,
    }}>
      <SceneEyebrow start={start} end={end} num="01" label="Ausgangslage" />

      {/* Stoppuhr Wasserzeichen */}
      <div style={{
        position: 'absolute', right: -120, top: 80,
        opacity: 0.06, pointerEvents: 'none',
      }}>
        <StopwatchSVG size={680} />
      </div>

      {/* Counter-Kachel */}
      <div style={{
        position: 'absolute', top: 100, left: 56,
        opacity: Math.min(1, localT / 0.8),
        transform: `translateY(${(1 - Math.min(1, localT/0.8)) * 12}px)`,
      }}>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.12em',
          color: C.n500, textTransform: 'uppercase' }}>Diese Woche</div>
        <div style={{
          fontSize: 64, fontWeight: 600, color: C.blue600,
          letterSpacing: '-0.03em', marginTop: 8, lineHeight: 1,
          fontVariantNumeric: 'tabular-nums',
        }}>27 <span style={{ fontSize: 28, color: C.n500, fontWeight: 500 }}>Stunden</span></div>
        <div style={{ fontSize: 16, color: C.n600, marginTop: 6, maxWidth: 320 }}>
          Mandantenkommunikation
        </div>
      </div>

      {/* Inbox list */}
      <div style={{
        position: 'absolute', top: 90, right: 80,
        width: 740, height: 880,
        background: C.n0, border: `1px solid ${C.n200}`,
        borderRadius: 10, overflow: 'hidden',
        opacity: Math.min(1, (localT - 0.3) / 0.8),
      }}>
        <div style={{
          padding: '14px 20px', borderBottom: `1px solid ${C.n200}`,
          display: 'flex', alignItems: 'center', gap: 10,
          background: C.n25,
        }}>
          <div style={{ width: 8, height: 8, borderRadius: '50%', background: C.danger }}/>
          <div style={{ fontSize: 13, fontWeight: 600, color: C.n800 }}>Posteingang Kanzlei</div>
          <div style={{ fontSize: 12, color: C.n500, marginLeft: 'auto', fontVariantNumeric: 'tabular-nums' }}>30 ungelesen</div>
        </div>
        <div>
          {subjects.slice(0, 30).map((s, i) => {
            const reveal = Math.min(1, Math.max(0, (localT - 0.5 - i * 0.06) / 0.3));
            return (
              <div key={i} style={{
                padding: '11px 20px',
                borderBottom: `1px solid ${C.n100}`,
                display: 'flex', alignItems: 'center', gap: 16,
                opacity: reveal,
                transform: `translateX(${(1 - reveal) * 12}px)`,
                background: i % 2 === 0 ? C.n0 : C.n25,
              }}>
                <div style={{ width: 6, height: 6, borderRadius: '50%',
                  background: C.blue600, flexShrink: 0 }}/>
                <div style={{ fontSize: 13, fontWeight: 600, color: C.n800,
                  width: 140 }}>{s}</div>
                <div style={{ fontSize: 12, color: C.n500,
                  flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {senders[i % senders.length]} — {dummyPreview(i)}
                </div>
                <div style={{ fontSize: 11, color: C.n400, fontVariantNumeric: 'tabular-nums' }}>
                  {times[i]}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <Caption start={start + 2}  end={start + 9}  text="In vielen Kanzleien entsteht täglich derselbe Engpass." />
      <Caption start={start + 10} end={start + 17} text="Mandantenmails müssen gelesen, eingeordnet und beantwortet werden." />
      <Caption start={start + 18} end={start + 25} text="Das kostet Zeit, Konzentration und blockiert Fachkräfte." accent="Zeit" />
    </div>
  );
}

function dummyPreview(i) {
  const previews = [
    'könnten Sie mir den aktuellen Stand mitteilen?',
    'beigefügt finden Sie die Unterlagen…',
    'Mahnung mit Säumniszuschlag erhalten.',
    'Frage zur USt-Voranmeldung März.',
    'Termin für nächste Woche möglich?',
    'Beleg bitte an die Akte hängen.',
    'Bescheid vom Finanzamt — bitte prüfen.',
    'Vorauszahlung — Höhe der nächsten Rate?',
  ];
  return previews[i % previews.length];
}

function StopwatchSVG({ size = 600 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 200 200">
      <circle cx="100" cy="105" r="80" stroke={C.n800} strokeWidth="2" fill="none"/>
      <circle cx="100" cy="105" r="74" stroke={C.n800} strokeWidth="0.5" fill="none"/>
      <rect x="92" y="20" width="16" height="10" stroke={C.n800} strokeWidth="2" fill="none"/>
      <line x1="100" y1="20" x2="100" y2="14" stroke={C.n800} strokeWidth="2"/>
      {/* Tick marks */}
      {Array.from({length: 12}).map((_, i) => {
        const a = (i * 30 - 90) * Math.PI / 180;
        const x1 = 100 + Math.cos(a) * 76;
        const y1 = 105 + Math.sin(a) * 76;
        const x2 = 100 + Math.cos(a) * 70;
        const y2 = 105 + Math.sin(a) * 70;
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}
          stroke={C.n800} strokeWidth="2"/>
      })}
      {/* Hands */}
      <line x1="100" y1="105" x2="100" y2="50" stroke={C.n800} strokeWidth="2.5"/>
      <line x1="100" y1="105" x2="140" y2="125" stroke={C.danger} strokeWidth="1.5"/>
      <circle cx="100" cy="105" r="4" fill={C.n800}/>
    </svg>
  );
}

// ────────────────────────────────────────────────────────────────────────
// SZENE 2 — STATUS QUO
// ────────────────────────────────────────────────────────────────────────
function Scene2StatusQuo() {
  const { start, end } = SCENE.s2;
  const time = useTime();
  if (time < start - 0.5 || time > end + 0.5) return null;
  const localT = time - start;
  const fadeIn = Math.min(1, localT / 0.6);
  const fadeOut = Math.min(1, (end - time) / 0.8);
  const op = Math.min(fadeIn, fadeOut);

  const steps = ['Mail öffnen', 'Lesen', 'Akte raussuchen', 'Antwort tippen', 'Freigeben'];

  return (
    <div style={{ position: 'absolute', inset: 0, background: C.n0, opacity: op }}>
      <SceneEyebrow start={start} end={end} num="02" label="Heutiger Ablauf" />

      {/* Vertical divider */}
      <div style={{ position: 'absolute', left: '50%', top: 140, bottom: 140,
        width: 1, background: C.n200 }}/>

      {/* Left column — Heute */}
      <div style={{ position: 'absolute', left: 80, top: 140, width: 820 }}>
        <div style={{ fontSize: 36, fontWeight: 600, color: C.n800,
          letterSpacing: '-0.01em' }}>Heute</div>
        <div style={{ fontSize: 14, color: C.n500, marginTop: 8 }}>
          Manueller Ablauf — Schritt für Schritt
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 56 }}>
          {steps.map((s, i) => {
            const t = Math.min(1, Math.max(0, (localT - 1 - i * 0.4) / 0.5));
            return (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 14,
                opacity: t,
                transform: `translateX(${(1 - t) * 16}px)`,
              }}>
                <div style={{
                  width: 30, height: 30, borderRadius: 6, background: C.blue50,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: C.blue600, fontWeight: 600, fontSize: 13,
                  fontVariantNumeric: 'tabular-nums', flexShrink: 0,
                }}>{i + 1}</div>
                <div style={{
                  flex: 1, padding: '14px 20px',
                  background: C.n0, border: `1px solid ${C.n200}`, borderRadius: 8,
                  fontSize: 16, fontWeight: 500, color: C.n800,
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                }}>
                  <span>{s}</span>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6,
                    fontSize: 12, color: C.n500, fontVariantNumeric: 'tabular-nums' }}>
                    <MiniClock/>
                    <span>~{[1, 1, 2, 1, 1][i]} Min</span>
                  </div>
                </div>
                {i < steps.length - 1 && (
                  <div style={{ position: 'absolute', left: 22, marginTop: 64,
                    width: 1, height: 16, background: C.n300 }}/>
                )}
              </div>
            );
          })}
        </div>

        {/* Sum */}
        <div style={{
          marginTop: 40, padding: '20px 24px',
          background: C.blue50, borderRadius: 10,
          opacity: Math.min(1, Math.max(0, (localT - 4) / 0.6)),
          transform: `translateY(${(1 - Math.min(1, Math.max(0, (localT - 4) / 0.6))) * 8}px)`,
        }}>
          <div style={{ fontSize: 13, color: C.blue700, fontWeight: 500 }}>
            6 Min/Mail × 30 Mails =
          </div>
          <div style={{ fontSize: 56, fontWeight: 600, color: C.blue600,
            letterSpacing: '-0.02em', lineHeight: 1, marginTop: 4,
            fontVariantNumeric: 'tabular-nums' }}>3 Stunden</div>
          <div style={{ fontSize: 13, color: C.n500, marginTop: 8 }}>
            pro Tag · nur für Mail-Bearbeitung
          </div>
        </div>
      </div>

      {/* Right column — Mit Triage (cliffhanger) */}
      <div style={{ position: 'absolute', right: 80, top: 140, width: 820 }}>
        <div style={{ fontSize: 36, fontWeight: 600, color: C.n400,
          letterSpacing: '-0.01em' }}>Mit Triage</div>
        <div style={{ fontSize: 14, color: C.n400, marginTop: 8 }}>
          Vorbereiteter Ablauf — gleich
        </div>

        <div style={{
          marginTop: 56, height: 380,
          border: `2px dashed ${C.n300}`, borderRadius: 12,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: C.n400, fontSize: 18, fontWeight: 500,
          opacity: Math.min(1, Math.max(0, (localT - 1.5) / 0.8)),
        }}>
          ?
        </div>
      </div>

      <Caption start={start + 2}  end={start + 9}  text="Der heutige Ablauf ist manuell und wiederholt sich täglich." />
      <Caption start={start + 10} end={start + 16} text="Schon wenige Minuten pro Mail summieren sich schnell." />
      <Caption start={start + 17} end={start + 23} text="Welche Schritte können vorbereitet werden, ohne die Kontrolle abzugeben?" accent="Kontrolle" />
    </div>
  );
}

function MiniClock() {
  return (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
      <circle cx="6" cy="6" r="4.5" stroke={C.n500} strokeWidth="1"/>
      <path d="M6 3.5V6L7.5 7.5" stroke={C.n500} strokeWidth="1" strokeLinecap="round"/>
    </svg>
  );
}

// ────────────────────────────────────────────────────────────────────────
// SZENE 3 — ARCHITEKTUR
// ────────────────────────────────────────────────────────────────────────
function Scene3Architecture() {
  const { start, end } = SCENE.s3;
  const time = useTime();
  if (time < start - 0.5 || time > end + 0.5) return null;
  const localT = time - start;
  const fadeIn = Math.min(1, localT / 0.6);
  const fadeOut = Math.min(1, (end - time) / 0.8);
  const op = Math.min(fadeIn, fadeOut);

  // Boxes: spaced across canvas
  // 5 main stages + 1 vorfilter on top
  // Canvas 1920 wide, leave 120 padding each side
  const boxW = 230, boxH = 100;
  const cy = 540;
  const xs = [120, 470, 820, 1170, 1570];
  const labels = ['Mail-Postfach', 'KI-Klassifikation', 'Routing', 'Mensch-im-Loop\nFreigabe', 'Versand'];
  const reveal = (i) => Math.min(1, Math.max(0, (localT - 1 - i * 0.6) / 0.5));

  // Vorfilter: above between box 0 and 1
  const vfReveal = Math.min(1, Math.max(0, (localT - 4) / 0.6));

  return (
    <div style={{ position: 'absolute', inset: 0, background: C.n50, opacity: op }}>
      <SceneEyebrow start={start} end={end} num="03" label="Architektur" />

      {/* Title */}
      <div style={{ position: 'absolute', top: 100, left: 80,
        opacity: Math.min(1, localT / 0.8) }}>
        <div style={{ fontSize: 32, fontWeight: 600, color: C.n800,
          letterSpacing: '-0.01em' }}>Verarbeitungskette einer Mail</div>
        <div style={{ fontSize: 14, color: C.n500, marginTop: 6 }}>
          Vorfilter vor KI · Mensch vor Versand
        </div>
      </div>

      {/* Connection lines */}
      <svg style={{ position: 'absolute', inset: 0 }} width="1920" height="1080">
        {[0, 1, 2, 3].map(i => {
          const x1 = xs[i] + boxW;
          const x2 = xs[i+1];
          const arrowReveal = Math.min(1, Math.max(0, (localT - 1.3 - i * 0.6) / 0.4));
          return (
            <g key={i} opacity={arrowReveal}>
              <line x1={x1} y1={cy + boxH/2} x2={x2} y2={cy + boxH/2}
                stroke={C.n400} strokeWidth="1.5"/>
              <polygon
                points={`${x2-8},${cy + boxH/2 - 5} ${x2},${cy + boxH/2} ${x2-8},${cy + boxH/2 + 5}`}
                fill={C.n400}/>
            </g>
          );
        })}
        {/* Vorfilter connector — diverts upward from postfach line */}
        <g opacity={vfReveal}>
          <path d={`M${xs[0] + boxW + 30} ${cy + boxH/2}
                    L${xs[0] + boxW + 30} ${cy - 90}
                    L${xs[1] - 30} ${cy - 90}
                    L${xs[1] - 30} ${cy + boxH/2}`}
                fill="none" stroke={C.danger} strokeWidth="1.5" strokeDasharray="4 3"/>
        </g>
      </svg>

      {/* Main boxes */}
      {labels.map((label, i) => {
        const r = reveal(i);
        const isHighlight = i === 3;
        return (
          <div key={i} style={{
            position: 'absolute', left: xs[i], top: cy,
            width: boxW, height: boxH,
            opacity: r,
            transform: `translateY(${(1 - r) * 12}px)`,
            background: C.n0,
            border: `${isHighlight ? 2 : 1}px solid ${isHighlight ? C.green500 : C.n200}`,
            borderRadius: 10,
            padding: '16px 18px',
            display: 'flex', flexDirection: 'column', justifyContent: 'center',
            boxShadow: isHighlight ? `0 0 0 4px ${C.green500}1A` : 'none',
          }}>
            <div style={{ fontSize: 11, color: C.n500, fontWeight: 600,
              letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6 }}>
              Schritt {i + 1}
            </div>
            <div style={{ fontSize: 18, fontWeight: 600, color: C.n800,
              whiteSpace: 'pre-line', lineHeight: 1.25 }}>{label}</div>
          </div>
        );
      })}

      {/* KI-Klassifikation labels (under box 1) */}
      <div style={{
        position: 'absolute', left: xs[1] - 20, top: cy + boxH + 24,
        width: boxW + 40,
        opacity: Math.min(1, Math.max(0, (localT - 6) / 0.6)),
      }}>
        <div style={{ fontSize: 10, color: C.n500, fontWeight: 600,
          letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 8 }}>7 Labels</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {['anfrage', 'frist', 'beleg', 'termin', 'sonstiges', 'eskalation', 'edge_case'].map(l => (
            <span key={l} style={{
              padding: '4px 10px', borderRadius: 999,
              background: C.blue50, color: C.blue700,
              fontSize: 11, fontWeight: 500,
              fontFamily: 'JetBrains Mono, monospace',
            }}>{l}</span>
          ))}
        </div>
      </div>

      {/* Routing targets (under box 2) */}
      <div style={{
        position: 'absolute', left: xs[2] - 30, top: cy + boxH + 24,
        width: boxW + 60,
        opacity: Math.min(1, Math.max(0, (localT - 8) / 0.6)),
      }}>
        <div style={{ fontSize: 10, color: C.n500, fontWeight: 600,
          letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 8 }}>4 Ziele</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {['Vorschlagsantwort', 'Berufsträger', 'Sachbearbeiter', 'Belegerfassung'].map(l => (
            <div key={l} style={{
              padding: '6px 10px', borderRadius: 6,
              background: C.n0, border: `1px solid ${C.n200}`,
              fontSize: 12, fontWeight: 500, color: C.n800,
            }}>{l}</div>
          ))}
        </div>
      </div>

      {/* Vorfilter box */}
      <div style={{
        position: 'absolute', left: xs[0] + 80, top: cy - 200,
        width: 480, opacity: vfReveal,
        transform: `translateY(${(1 - vfReveal) * 12}px)`,
        background: C.n0,
        border: `2px solid ${C.danger}`, borderRadius: 10,
        padding: '14px 18px',
      }}>
        <div style={{ fontSize: 11, fontWeight: 600, color: C.danger,
          letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>
          Vorfilter
        </div>
        <div style={{ fontSize: 18, fontWeight: 600, color: C.n800 }}>
          Eskalation vor KI
        </div>
        <div style={{ fontSize: 12, color: C.n500, marginTop: 6, lineHeight: 1.5 }}>
          Strafverfahren · Insolvenz · Betriebsprüfung · Erbschaft · Verrechnungspreise
        </div>
      </div>

      {/* Final tagline at end of scene */}
      <div style={{
        position: 'absolute', bottom: 320, left: 0, right: 0,
        textAlign: 'center',
        opacity: 0,
      }}>
        <div style={{ fontSize: 32, fontWeight: 600, color: C.blue600,
          letterSpacing: '-0.01em' }}>Vorfilter vor KI. Mensch vor Versand.</div>
      </div>

      <Caption start={start + 2}  end={start + 9}  text="Jede Mail durchläuft zuerst einen Vorfilter." accent="Vorfilter" />
      <Caption start={start + 10} end={start + 17} text="Kritische Fälle werden vor der KI erkannt und gesondert behandelt." />
      <Caption start={start + 18} end={start + 25} text="Die KI klassifiziert die Mail in klare Kategorien." />
      <Caption start={start + 26} end={start + 32} text="Antwort vorbereiten, weiterleiten oder Beleg erfassen." />
      <Caption start={start + 33} end={start + 37} text="Vorfilter vor KI. Mensch vor Versand." accent="Mensch" />
    </div>
  );
}

Object.assign(window, { SCENE, Caption, SceneEyebrow,
  Scene1Hook, Scene2StatusQuo, Scene3Architecture, StopwatchSVG, MiniClock });