// Journal section — horizontal pill cards
const JOURNAL = [
  {
    title: "How micro-interactions improve user experience and website conversions",
    img: "https://images.unsplash.com/photo-1517292987719-0369a794ec0f?auto=format&fit=crop&w=600&q=80",
    read: "6 min read",
    date: "Apr 22, 2026",
  },
  {
    title: "Scalable design systems for modern brands and digital products",
    img: "https://images.unsplash.com/photo-1545239351-1141bd82e8a6?auto=format&fit=crop&w=600&q=80",
    read: "8 min read",
    date: "Mar 14, 2026",
  },
  {
    title: "Web typography best practices for brand identity, UX and SEO",
    img: "https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?auto=format&fit=crop&w=600&q=80",
    read: "5 min read",
    date: "Feb 09, 2026",
  },
  {
    title: "Minimal web design for faster websites, better UX and stronger engagement",
    img: "https://images.unsplash.com/photo-1506765515384-028b60a970df?auto=format&fit=crop&w=600&q=80",
    read: "4 min read",
    date: "Jan 18, 2026",
  },
];

function JournalCard({ entry }) {
  return (
    <a
      href="#"
      className="group flex items-center gap-4 sm:gap-6 p-4 bg-surface/30 hover:bg-surface border border-stroke rounded-[40px] sm:rounded-full transition-colors"
    >
      <div className="relative w-16 h-16 sm:w-20 sm:h-20 rounded-full overflow-hidden flex-shrink-0">
        <img
          src={entry.img}
          alt=""
          loading="lazy"
          className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
        />
      </div>
      <div className="flex-1 min-w-0">
        <div className="text-base md:text-lg text-text-primary truncate group-hover:text-text-primary transition-colors">
          {entry.title}
        </div>
        <div className="text-xs text-muted mt-1 flex items-center gap-2">
          <span>{entry.read}</span>
          <span className="opacity-40">•</span>
          <span>{entry.date}</span>
        </div>
      </div>
      <div className="hidden sm:flex w-10 h-10 rounded-full border border-stroke items-center justify-center text-text-primary group-hover:border-transparent group-hover:bg-text-primary group-hover:text-bg transition-all flex-shrink-0">
        ↗
      </div>
    </a>
  );
}

function Journal() {
  return (
    <section id="journal" className="bg-bg py-16 md:py-24">
      <div className="max-w-[1200px] mx-auto px-6 md:px-10 lg:px-16">
        <SectionHeader
          eyebrow="Insights"
          title="Latest"
          italic="articles"
          subtext="Insights on web design, SEO, digital strategy, user experience, creative production and emerging technologies for modern brands."
        />
        <div className="grid grid-cols-1 gap-3 md:gap-4">
          {JOURNAL.map((j) => (
            <JournalCard key={j.title} entry={j} />
          ))}
        </div>
      </div>
    </section>
  );
}

window.Journal = Journal;