const FEATURED = {
  date: "Apr 21, 2026",
  title: "Parental Controls After Thirteen",
  excerpt: "My child removed Google Family Link the day she turned thirteen. Here's what I found when I went looking for what comes next, including the operator-level controls already built into European mobile contracts.",
  category: "Digital ethics · Long read",
  readingTime: "12 min",
  tone: "sand",
  motif: "arc",
  src: "assets/article-parental-controls.jpg",
};

const SECONDARY = [
  {
    date: "Apr 4, 2026",
    title: "Cloudflare Workers Changed How I Think About Protecting Digital Products",
    excerpt: "I needed to protect a paid web app from link sharing without building a login system or paying for a platform.",
    category: "Tooling",
    readingTime: "8 min",
    tone: "teal",
    motif: "grid",
    src: "assets/article-cloudflare.jpg",
  },
  {
    date: "Apr 2, 2026",
    title: "Why I Switched to Simple Analytics",
    excerpt: "Google Analytics was sitting on my websites while I wrote about data sovereignty. The account of moving first to Fathom, then to Simple Analytics.",
    category: "Privacy",
    readingTime: "6 min",
    tone: "cream",
    motif: "lines",
    src: "assets/article-analytics.jpg",
  },
  {
    date: "Apr 1, 2026",
    title: "How a Free Tool Became a Paid Product",
    excerpt: "A free binaural beats generator became a paid skincare product. How it happened, what AI made possible, and what it couldn't do without me.",
    category: "AI in practice",
    readingTime: "9 min",
    tone: "gold",
    motif: "object",
    src: "assets/article-binaural.webp",
  },
  {
    date: "Mar 28, 2026",
    title: "The Attention Economy Wants Your Creativity Next",
    excerpt: "Social media hollowed out our attention. Now AI is arriving into what's left.",
    category: "Essay",
    readingTime: "7 min",
    tone: "sand",
    motif: "lines",
    src: "assets/article-attention-economy.png",
  },
];

function Articles() {
  return (
    <section id="articles" className="section">
      <div className="shell">
        <div className="section-head">
          <div className="num">(08)</div>
          <div className="head-body">
            <div className="eyebrow" style={{ marginBottom: 18 }}>Behind the Work · Journal</div>
            <h2 className="h-section">Ethical tech, in practice.</h2>
            <p className="body" style={{ maxWidth: 640, marginTop: 24, color: "var(--ink-60)" }}>
              Notes from running a privacy-first practice — what's working, what changed,
              what's worth your attention.
            </p>
          </div>
        </div>

        {/* Featured */}
        <a href="articles.html" className="article-featured" style={{
          display: "grid",
          gridTemplateColumns: "1.2fr 1fr",
          gap: 48,
          paddingTop: 24,
          paddingBottom: 56,
          borderTop: "1px solid var(--accent)",
          alignItems: "stretch",
        }}>
          <EditorialPlaceholder label={FEATURED.category} tone={FEATURED.tone} motif={FEATURED.motif} aspect="4/3" src={FEATURED.src}/>
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", paddingTop: 8 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 18, color: "var(--gold)" }}>Featured · {FEATURED.category}</div>
              <h3 className="serif" style={{
                fontSize: 44,
                lineHeight: 1.05,
                fontWeight: 500,
                letterSpacing: "-0.012em",
                margin: "0 0 24px",
              }}>{FEATURED.title}</h3>
              <p className="body-lg" style={{ color: "var(--ink-60)", margin: 0 }}>{FEATURED.excerpt}</p>
            </div>
            <div style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              marginTop: 32,
              paddingTop: 20,
              borderTop: "1px solid var(--ink-15)",
            }}>
              <div className="mono" style={{ fontSize: 11, color: "var(--ink-60)", letterSpacing: ".08em" }}>
                {FEATURED.date} · {FEATURED.readingTime} read
              </div>
              <span style={{
                fontSize: 14,
                fontWeight: 500,
                display: "inline-flex",
                alignItems: "center",
                gap: 8,
                borderBottom: "1px solid var(--accent)",
                paddingBottom: 2,
                color: "var(--accent-deep)",
              }}>
                Read article <ArrowRight size={12}/>
              </span>
            </div>
          </div>
        </a>

        {/* Secondary articles */}
        <div className="article-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 24,
          paddingTop: 32,
          borderTop: "1px solid var(--ink-15)",
        }}>
          {SECONDARY.map((a, i) => (
            <a key={i} href="articles.html" style={{
              display: "flex",
              flexDirection: "column",
              gap: 16,
              paddingTop: 16,
            }}>
              <EditorialPlaceholder label={a.category} tone={a.tone} motif={a.motif} aspect="4/3" src={a.src}/>
              <div className="mono" style={{ fontSize: 10, letterSpacing: ".12em", color: "var(--ink-60)", textTransform: "uppercase" }}>
                {a.date} · {a.readingTime}
              </div>
              <h4 className="serif" style={{
                fontSize: 20,
                lineHeight: 1.18,
                fontWeight: 500,
                margin: 0,
                letterSpacing: "-0.005em",
              }}>{a.title}</h4>
              <p className="body-sm" style={{ margin: 0 }}>{a.excerpt}</p>
            </a>
          ))}
        </div>

        <div style={{
          display: "flex",
          justifyContent: "flex-end",
          marginTop: 48,
        }}>
          <a href="articles.html" className="btn btn-ghost">
            Browse the full archive <ArrowRight size={12}/>
          </a>
        </div>
      </div>
    </section>
  );
}

window.Articles = Articles;