const { SectionHeading, NumberCard } = window.NicolaiSafaiDesignSystem_dfb31c;
const FeaturedCard = window.NicolaiSafaiDesignSystem_dfb31c.AceCard;
const Reveal = window.NicolaiSafaiDesignSystem_dfb31c.Reveal || (({ children }) => children);
const Doodle = window.NicolaiSafaiDesignSystem_dfb31c.Doodle || (() => null);

/*
 * Rows run Play, Finds, Life to match the nav and the hero hand; Work follows
 * as its own deck. Every card here links to something real. Finds and Play
 * point at the published lists and recipes under /recommendations and /recipes, which the
 * Next.js app renders from content/. Hearts has no published pieces yet, so
 * it keeps its heading and blurb and shows no cards rather than placeholders.
 */
const ROWS = [
  {
    id: 'play', suit: 'club',
    doodle: { name: 'headphones', color: 'var(--club-300)', rotate: 6 },
    deco: [{ name: 'arc', color: 'var(--heart-300)', size: 76, rotate: 196, style: { left: -58, bottom: '22%' } }],
    label: 'Clubs, for the play', title: 'Mixes, games, magic, recipes',
    blurb: 'Things I make that do not always need a business case. The recipes are up first.',
    more: { href: '/recipes', label: 'All the recipes' },
    cards: [
      { title: 'Banana chocolate chip muffins', meta: 'Recipe, 40 min', href: '/recipes/banana-chocolate-chip-muffins' },
    ],
  },
  {
    id: 'finds', suit: 'diamond',
    doodle: { name: 'magnify', color: 'var(--club-300)', rotate: -9 },
    deco: [{ name: 'spark', color: 'var(--diamond-500)', size: 60, rotate: 12, style: { right: -44, bottom: '18%' } }],
    label: 'Diamonds, for the gear', title: 'Researched far too thoroughly',
    blurb: 'I’m a gearhead. I love cool stuff and research everything way too thoroughly before I buy it. My friends are always asking what I recommend, so I figured I’d start sharing my picks here.',
    more: { href: '/recommendations', label: 'All the finds' },
    cards: [
      {
        featured: true, kicker: 'The big one',
        title: 'Building a baby registry',
        blurb: '91 picks, with the reasoning attached to each.',
        href: '/recommendations/baby-registry',
      },
    ],
  },
  {
    id: 'life', suit: 'heart',
    doodle: { name: 'cup', color: 'var(--diamond-300)', rotate: 7 },
    deco: [{ name: 'pac', color: 'var(--heart-500)', size: 88, rotate: 26, style: { left: 18, top: -74, zIndex: 1 } }],
    label: 'Hearts, for the people', title: 'People, places, animals, ideas',
    blurb: 'I studied biopsychology and still love learning about the brain, behavior, and why people do what they do. I travel whenever I can, live with mini poodles, and regularly bring home foster kittens.',
    cards: [],
  },
];

function ArticleCard({ row, article }) {
  if (article.featured) {
    return <FeaturedCard suit={row.suit} size="var(--hand-card-w)" kicker={article.kicker}
      title={article.title} blurb={article.blurb || article.meta} href={article.href} />;
  }
  return <NumberCard suit={row.suit} title={article.title} meta={article.meta} size="var(--hand-card-w)"
    style={{ aspectRatio: 'var(--card-aspect)' }} href={article.href} />;
}

function SuitRow({ row }) {
  return (
    <section className="section" id={row.id}>
      <SectionHeading suit={row.suit} label={row.label} title={row.title} blurb={row.blurb} />
      {row.doodle && (
        <Doodle name={row.doodle.name} size={row.doodle.size || 112} color={row.doodle.color}
          rotate={row.doodle.rotate} className="deco deco-obj" />
      )}
      {(row.deco || []).map((d) => (
        <Doodle key={d.name} name={d.name} size={d.size} color={d.color} rotate={d.rotate}
          className="deco" style={{ position: 'absolute', ...d.style }} />
      ))}
      {row.cards.length > 0 && (
        <div className="minigrid minigrid-4">{row.cards.map((article, index) => (
          <Reveal key={article.href} from="left" shift={84} tilt={3} delay={index * 80}>
            <ArticleCard row={row} article={article} />
          </Reveal>
        ))}</div>
      )}
      {row.more && (
        <p className="suit-more">
          <a href={row.more.href}>{row.more.label}</a>
        </p>
      )}
    </section>
  );
}

function TheRest() {
  return (
    <div>
      {ROWS.map((row) => <SuitRow key={row.id} row={row} />)}
    </div>
  );
}

Object.assign(window, { TheRest, SuitRow, ROWS });