// Blog — WordPress article copy + matching Instagram post cards pulled for ZinCuTec on 2026-05-05

const BLOG_POSTS = [
  {
    "id": 25278,
    "date": "2026-04-07T12:41:01",
    "slug": "alpen-trip",
    "link": "https://www.zincutec.eu/alpen-trip/",
    "title": "Alpen Trip",
    "excerpt": "Stell dir eine Hütte in den österreichischen Alpen vor, mitten in der Stille der Berge. Ein kristallklarer See spiegelt den Vollmond, der jede Nacht hinter den Gipfeln aufsteigt. Kein steriler Konferenzraum, kein Neonlicht. Stattdessen Natur, die atmet. Gemeinschaft, die wächst. Das war unsere ZinCuTec Workation im August 2025. Ein Moment, in dem wir als Team […]",
    "paragraphs": [
      "Stell dir eine Hütte in den österreichischen Alpen vor, mitten in der Stille der Berge. Ein kristallklarer See spiegelt den Vollmond, der jede Nacht hinter den Gipfeln aufsteigt. Kein steriler Konferenzraum, kein Neonlicht. Stattdessen Natur, die atmet. Gemeinschaft, die wächst. Das war unsere ZinCuTec Workation im August 2025. Ein Moment, in dem wir als Team nicht nur Ideen, sondern eine Vision geschmiedet haben.",
      "Dawid, unser Gründer, überraschte uns mit einer Hütte, die mehr war als ein Ort. Ein Penthouse in den Bergen, erreichbar per Fahrstuhl, mit riesigen Balkonen und einer Aussicht, die dich die Welt vergessen lässt. Jeder hatte einen Rückzugsort mit Dusche, mit Ruhe, mit Inspiration. Doch die wahre Magie? Die Momente, in denen wir zusammen waren. Produktionsteam, Marketing Crew, Models, Fotograf, alle kreativen Köpfe von ZinCuTec vereint in einer Mission. Design als Lebensstil nach außen tragen.",
      "Jeden Morgen starteten wir mit Yoga, geleitet von einem unserer Marketing-Mavericks, der zufällig auch angehender Yoga Lehrer ist. Sonnengrüße mit Blick auf die Berge, Breathwork, das die Lunge weitet und den Kopf klärt. Danach gemeinsames Training, kein Fitnessstudio, sondern die Natur als unser Gym. Diese Rituale waren kein Wellness Programm, sie waren der Puls unserer Workation. Sie schweißten uns zusammen, bevor wir uns an die Arbeit machten.",
      "Tagsüber wurde die Hütte zum Kreativ Hub. Wir trugen die Möbel die Berge hoch, steile Pfade, keine Gnade. Oben posierten die Models, der Fotograf fing das Alpenlicht auf der Patina ein. Minimalistisch, langlebig, lebendig. Parallel saßen wir in Brainstorm Sessions, die alles andere als steif waren. Wie pushen wir ZinCuTec Design Bereich? Wie tragen wir die Leidenschaft unserer Crew nach außen, die morgens um acht Vollgas in der Werkstatt gibt, nachmittags zusammen durchatmet und abends in der Sauna philosophiert? Ideen flogen, neue Kampagnen, die unsere Werte Neugier, Präzision, Freundschaft atmen. Content Strategien, die zeigen, dass unsere Möbel keine Produkte, sondern Geschichten sind.",
      "Die Abende waren pure Magie. Zusammen kochen, Frühstück, Mittag, Abendessen. Von frischen Omelettes bis zu herzhaften Eintöpfen, die wir unter Lachen und tiefen Gesprächen zubereiteten. Wir tanzten, redeten bis Mitternacht, sahen den Vollmond aufgehen, jeden Abend zusammen. Wir sind mehr als ein Team, wir sind eine Community. Diese Nächte waren der Kern unserer Vision. Design ist nicht nur Form. Es ist das Gefühl, wenn Menschen zusammenkommen, teilen und wachsen.",
      "Unsere Workation war kein Retreat, sondern ein Aufbruch. Wir sind keine Firma, die Möbel baut und dann Feierabend macht. Wir sind eine Crew, die lebt, was sie schafft. In der Werkstatt geben wir Vollgas, hämmern Messing, polieren Patinas. Nach der Arbeit trainieren wir, entspannen in der Sauna, führen Gespräche, die unter die Haut gehen. Diese Energie, diese Mischung aus Präzision und Leidenschaft, haben wir in den Alpen destilliert. Und genau das tragen wir jetzt nach außen – in unseren Designs, Kampagnen und unserer Online Präsenz.",
      "Die Möbel, die wir erschaffen, von Zen Dining Tables bis zu Trinitáe Kerzenständern , sind nicht nur Objekte. Sie sind Ausdruck eines Lebensstils. Minimalistisch, rebellisch gegen die Holz Monotonie, warm durch Patina, die Geschichten erzählt. Wir erfinden Design Möbel neu. Die Workation hat uns gezeigt: Unsere Vision lebt nicht nur in Messing und Bronze, sondern in der Gemeinschaft, die sie formt.",
      "Die Alpen haben uns nicht nur inspiriert, sie haben uns zusammengeschweißt. Zurück in der Werkstatt pushen wir jetzt mit frischem Wind. Neue Designs, die unsere Werte spiegeln. Kampagnen, die unsere Story erzählen. Eine Community, die wächst, von Kunden, die unsere Möbel lieben, bis zu Partnern, die mit uns gestalten. We design the future. Wir machen dein Leben zum Kunstwerk."
    ],
    "instagram": {
      "permalink": "https://www.instagram.com/zincutec/reel/DOeCgv0gpqM/",
      "shortcode": "DOeCgv0gpqM",
      "image": "assets/blog/alpen-trip-instagram.jpg",
      "ratio": 0.5625,
      "caption": "🏔️ Work. Create. Recharge.\nAt ZinCuTec, design isn’t just our craft – it’s our lifestyle.\nWe believe that inspiration flows when the mind is clear and the team is connected.\nFrom the workshop to the mountains, we bring the same energy: passion, precision, and presence.\nBecause true design is born where people love what they do.\n\nFollow the journey behind ZinCuTec and discover the people shaping timeless design.\n\n#ZinCuTec #DesignWithIntention #WorkWithPassion #MinimalLuxury",
      "kind": "REEL",
      "like_count": 67,
      "comments_count": 5
    }
  },
  {
    "id": 25177,
    "date": "2025-11-10T12:05:56",
    "slug": "founder-story",
    "link": "https://www.zincutec.eu/founder-story/",
    "title": "Founder Story",
    "excerpt": "Ich habe nie verstanden, warum man immer „sicher“ spielen soll. Sicher ist langweilig. Sicher ist Holz von der Stange. Ich wollte Risiko. Ich wollte Möbel und Räume, die man fühlt, die echt sind. Ich wollte nicht warten, bis ich alt bin und „weiß, wie es geht“. Ich wollte jetzt. Mit 22 Jahren übernahm ich die […]",
    "paragraphs": [
      "Ich habe nie verstanden, warum man immer „sicher“ spielen soll. Sicher ist langweilig. Sicher ist Holz von der Stange. Ich wollte Risiko. Ich wollte Möbel und Räume, die man fühlt, die echt sind. Ich wollte nicht warten, bis ich alt bin und „weiß, wie es geht“. Ich wollte jetzt.",
      "Mit 22 Jahren übernahm ich die Firma. Kein glatter Einstieg, kein Erbe aus dem Lehrbuch. Es war ein Sprung ins Unbekannte, getrieben von dieser inneren Unruhe, die sagt: „Probier es aus.“ Aus einem reinen Architekturbetrieb machte ich mein größtes Lebensprojekt mit meinem persönlichen Touch Design. Denn Räume sind mehr als Wände und Böden. Sie sind Spiegel. Sie zeigen, wer wir sind, noch bevor ein Wort fällt. Ein Raum empfängt stumm, lädt ein, schafft Harmonie.",
      "Mit dieser Neugier baute ich den Bereich Design aus. Die Belohnung? Türen, die sich von allein öffneten. Patek Philippe, Rolex – Marken, die ihre Stores mit Messing ausbauen, als wäre es ihr Markenzeichen. Mit meinem Know-how hatte ich Lösungen parat. Patinieren, Brünieren, Oxidieren. Handwerk, das Tiefe schafft und Räume zu Kunstwerken macht. Architektur und Interior gingen nun Hand in Hand. Projekte weltweit, von Museen bis zu privaten Luxusgaragen. Messing und Kupfer wurden meine Nische, mein Rückhalt, meine Design Veredelung als Game Changer. Zu der Zeit saß ich in meiner noch leeren Wohnung. Was hat ein 23-Jähriger schon an Möbeln? Ikea? Nie im Leben. Für jemanden, dem Raum und Design alles bedeuten, musste etwas Besonderes her, etwas, das atmet, lebt, Geschichten erzählt. Kurzerhand begann ich, Designmöbel zu entwerfen aus Messing Kupfer und Edelstahl. Deutschlandweit gab es keinen Markt dafür, weil sich keiner an so heikles Material herantraute. Ich fand in meiner Nische eine weitere Nische. Rebellisch? Vielleicht. Aber es fühlte sich richtig an, gegen den Strom zu schwimmen.Die Jahre vergingen langsam bewusst. Die Architektur hielt mich beschäftigt, öffentliche Gebäude, private Visionen. Ich ließ alles wachsen ohne zu hetzen.",
      "Dann 2024 wurde alles auf den Kopf gestellt. Eine Anfrage aus Saudi-Arabien in einer Dimension, die den Atem raubt – über 60 000 gegossene Bronze Elemente. Unfassbar? Ja. Machbar? Ja, mit Freunden. Ich stellte fünf meiner engsten Mitarbeiter ein, Leute, die die Vision verstanden. Gemeinsam packten wir es. Plötzlich gab es Budget für die Design Serie, ein Team, das mitdachte. Wir legten los.",
      "2025: We design the future.",
      "Für mich ist Design mehr als Form. Es ist der Moment, wenn Menschen zusammenkommen und sich wohlfühlen. Ich baue keine Möbel für mich allein, sondern für die Menschen, die sie nutzen, darin leben, Geschichten weben. Inspiration finde ich in Freundschaft, Austausch, in den unsichtbaren Fäden, die entstehen, wenn man teilt. Am Ende ist Design eine Community, ein verbindendes Element zwischen Menschen und Raum.",
      "Unsere Möbel? Gibt es nirgends sonst. Materialien, die die Ägypter schon kannten, entdecken wir neu. Warme, einladende Farbgebungen, minimalistische Formen, die Tiefe atmen. Die Zeit, in der nur Holz in der Wohnung thront, ist vorbei. Wir brechen das Monopol, mit Patina, die altert wie Wein, mit Linien, die flüstern statt zu schreien. Jedes Stück ein Unikat, handgefertigt in Deutschland, langlebig wie die Geschichten, die es trägt.",
      "ZinCuTec ist mehr als ein Unternehmen. Es ist eine Haltung. Neugier als Treiber, Präzision als Werkzeug, Leidenschaft als Finish. Wir machen dein Leben zum Kunstwerk. Denn Räume existieren nicht nur, sie leben."
    ],
    "instagram": {
      "permalink": "https://www.instagram.com/zincutec/p/DVLDi6HAkew/",
      "shortcode": "DVLDi6HAkew",
      "image": "assets/blog/founder-story-instagram.jpg",
      "ratio": 1,
      "caption": "It began with a love for creation. For alchemy. For the quiet transformation of something raw into something lasting.\n\nWe fell in love with the process - with patience, handwork, and the moment when an idea becomes real. What started as curiosity and play slowly turned into intention, and intention into ZinCuTec.\n\nToday, we create not only furniture, but presence. Pieces shaped by time, material, and care - designed to bring a sense of calm, adaptability, and quiet strength into the spaces they live in.\n\nThis is why we do what we do at ZinCuTec.\n\n#zincutec #interiordesign #designthefuture #designfurniture #moderninteriordesign",
      "kind": "CAROUSEL_ALBUM",
      "like_count": 57,
      "comments_count": 1
    }
  }
];

const blogDate = (date, lang) => {
  try {
    return new Intl.DateTimeFormat(lang === 'en' ? 'en-GB' : 'de-DE', { day:'2-digit', month:'long', year:'numeric' }).format(new Date(date));
  } catch(e) { return date; }
};

const blogReadTime = (post, t) => {
  const words = (post.paragraphs || []).join(' ').trim().split(/\s+/).filter(Boolean).length;
  const minutes = Math.max(1, Math.ceil(words / 220));
  return minutes + ' ' + t('Min. Lesezeit');
};

const firstCaptionLine = (caption, fallback) => {
  const line = (caption || '').split(/\n+/).map(x => x.trim()).find(Boolean) || fallback || '';
  return line.replace(/#\S+/g, '').replace(/\s+/g, ' ').replace(/[.…]+$/,'').trim();
};

const BlogInstagramCard = ({ post, variant='overview', go, lang, t }) => {
  const ig = post.instagram || {};
  const captionPreview = variant === 'overview'
    ? `${post.title} · ${blogDate(post.date, lang)} · ${blogReadTime(post, t)}`
    : firstCaptionLine(ig.caption, t('Auf Instagram ansehen')) + '...';
  const ratio = ig.ratio || 1;
  const cardWidth = Math.round(Math.max(250, Math.min(430, 390 * ratio)));
  const href = variant === 'overview' ? null : ig.permalink;
  const openArticle = (e) => {
    if (variant !== 'overview') return;
    e.preventDefault();
    go && go({page:'blog', slug:post.slug});
  };
  const Wrapper = variant === 'overview' ? 'button' : 'a';
  const wrapperProps = variant === 'overview'
    ? { type:'button', onClick:openArticle, 'aria-label':post.title }
    : { href: href || 'https://www.instagram.com/zincutec/', target:'_blank', rel:'noopener noreferrer' };

  return (
    <Wrapper className={`ig-card blog-native-card ${variant === 'inline' ? 'blog-native-card-inline' : 'blog-native-card-overview'}`} style={{'--ig-card-w': variant === 'overview' ? `${cardWidth}px` : '100%'}} {...wrapperProps}>
      <div className="ig-top">
        <img className="ig-avatar" src="assets/logo-white.png" alt="zincutec profile" loading="lazy"/>
        <span className="ig-user"><b>zincutec</b><small>Instagram Feed</small></span>
        <span className="ig-menu" aria-hidden="true">•••</span>
      </div>
      <div className="ig-media-frame">
        <img className="ig-media" src={ig.image} alt={`${post.title} Instagram`} loading="lazy"/>
        {ig.kind === 'REEL' && (
          <span className="ig-type">
            <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5,3 19,12 5,21"/></svg>
          </span>
        )}
        {ig.kind === 'CAROUSEL_ALBUM' && (
          <span className="ig-type">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="2" width="16" height="16" rx="2"/><path d="M6 22h12a4 4 0 004-4V6"/></svg>
          </span>
        )}
      </div>
      <div className="ig-actions" aria-hidden="true">
        <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M20.8 4.6a5.5 5.5 0 00-7.8 0L12 5.6l-1-1a5.5 5.5 0 00-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 000-7.8z"/></svg></span>
        <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M21 11.5a8.4 8.4 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.4 8.4 0 01-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.4 8.4 0 013.8-.9h.5a8.5 8.5 0 018 8v.5z"/></svg></span>
        <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg></span>
        <span className="ig-save"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg></span>
      </div>
      {ig.like_count > 0 && (
        <div className="ig-likes">
          {lang === 'en'
            ? <><b>{ig.like_count.toLocaleString('en')}</b> {ig.like_count === 1 ? 'like' : 'likes'}</>
            : <>Gefällt <b>{ig.like_count.toLocaleString('de-DE')}</b> {ig.like_count === 1 ? 'Person' : 'Personen'}</>}
        </div>
      )}
      <div className="ig-caption"><b>zincutec</b><span className="ig-caption-text">{captionPreview}</span></div>
      {variant === 'overview' && (
        <div className="blog-native-read">
          <span>{t('Artikel lesen')}</span><Icon name="arrow"/>
        </div>
      )}
    </Wrapper>
  );
};

const Blog = () => {
  const { route, go, lang, t } = useApp();
  const active = BLOG_POSTS.find(p => p.slug === route.slug);

  if (active) return <BlogArticle post={active} go={go} lang={lang} t={t} />;

  return (
    <section className="blog-page">
      <div className="blog-hero">
        <div className="eyebrow">{t('Blog')}</div>
        <h1>{t('Metall, Räume,')} <span className="accent-word">{t('Momente.')}</span></h1>
        <p>{t('Einblicke in die Welt von ZinCuTec: Menschen, Orte und die Ideen hinter unseren Pieces.')}</p>
      </div>

      <div className="blog-grid">
        {BLOG_POSTS.map((post) => (
          <article key={post.id} className="blog-card">
            <BlogInstagramCard post={post} variant="overview" go={go} lang={lang} t={t}/>
          </article>
        ))}
      </div>
    </section>
  );
};

const BlogArticle = ({ post, go, lang, t }) => (
  <section className="blog-page">
    <article className="blog-article">
      <button className="blog-back link-u" onClick={()=>go({page:'blog'})}><Icon name="arrow"/> {t('Zurück zum Blog')}</button>
      <div className="blog-article-head">
        <div className="eyebrow">{t('Blog')} · {blogDate(post.date, lang)} · {blogReadTime(post, t)}</div>
        <h1>{post.title}</h1>
      </div>
      <div className="blog-content">
        {post.paragraphs.map((paragraph, index) => (
          <React.Fragment key={index}>
            <p>{paragraph}</p>
            {index === 1 && (
              <div className="blog-inline-ig-wrap" style={{'--blog-inline-w': `${Math.round(Math.max(250, Math.min(430, 390 * (post.instagram.ratio || 1))))}px`}}>
                <BlogInstagramCard post={post} variant="inline" lang={lang} t={t}/>
              </div>
            )}
          </React.Fragment>
        ))}
      </div>
      <div className="blog-article-footer">
        <div>
          <span>{t('Quelle')}</span>
          <a href={post.link} target="_blank" rel="noopener">{t('Original auf zincutec.eu')}</a>
        </div>
        <button className="btn brass" onClick={()=>go({page:'shop'})}>{t('Kollektion entdecken')} <Icon name="arrow"/></button>
      </div>
    </article>
  </section>
);

Object.assign(window, { Blog, BLOG_POSTS, BlogInstagramCard });
