// Landing page for the {{projectName}} project. Pre-rendered at build time
// by `voltro build` (renderMode='static'), then served straight from the
// file system by `voltro start`. `interactive='none'` strips ALL framework
// JS from the wire — each locale is plain, pre-rendered HTML + CSS.
//
// Bilingual (Strategy B): mounted at `/` (default locale) and mirrored at
// `/de` by src/pages/[locale]/index.tsx. `meta` is a FUNCTION of `{ locale }`
// so each variant's <title> / <description> is localised in the emitted HTML.

import type { ReactNode } from 'react'
import type { PageMeta } from '@voltro/web'
import { T } from '@voltro/i18n'
import { getCatalog } from '../lib/locale'

// Pre-render at build time. Removes the runtime dependency entirely
// for plain-content pages — no rpc client, no react hydration. If you
// later add a sign-up form or anything interactive, switch to
// `interactive: 'islands'` and mark the form component as an island.
export const renderMode = 'static' as const
export const interactive = 'none' as const

export const meta = ({ locale }: { locale: string }): PageMeta => {
  const c = getCatalog(locale)
  return {
    title: c['meta.home.title'],
    description: c['meta.home.description'],
  }
}

// Rich-text tag handlers — each `<tag>` used inside a message needs a
// matching value function so react-intl injects the real element.
const strong = (chunks: ReactNode): ReactNode => <strong>{chunks}</strong>
const code = (chunks: ReactNode): ReactNode => <code>{chunks}</code>

export default function Index(): ReactNode {
  return (
    <main>
      <section>
        <h1>{{capProjectName}}</h1>
        <p>
          <T id="hero.tagline" />
        </p>
        <a href="#features">
          <T id="hero.cta" />
        </a>
      </section>

      <section id="features">
        <h2>
          <T id="features.heading" />
        </h2>
        <ul>
          <li>
            <T id="features.reactive" values={{ strong }} />
          </li>
          <li>
            <T id="features.tenant" values={{ strong }} />
          </li>
          <li>
            <T id="features.conventions" values={{ strong, code }} />
          </li>
        </ul>
      </section>

      <section>
        <h2>
          <T id="cta.heading" />
        </h2>
        <p>
          <T id="cta.body" values={{ code }} />
        </p>
      </section>
    </main>
  )
}