// Static marketing page with a serverless contact form.
//
// `renderMode = 'static'` → pre-rendered HTML, servable from a CDN.
// `interactive = 'islands'` → only the <ContactForm> island hydrates; the
// headline + copy ship as plain HTML with no React lifecycle.
//
// 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 pre-rendered variant gets a localised <title>/<description>.
//
// The island can't read <T>/useT (it hydrates WITHOUT the layout's URL
// provider). This page IS inside that provider, so it resolves the island's
// strings here (useTFn) and hands them down as a fully-translated `labels`
// prop — the framework serialises them into the island's HTML.

import type { ReactNode } from 'react'
import type { PageMeta } from '@voltro/web'
import { T, useTFn } from '@voltro/i18n'
import { getCatalog } from '../lib/locale'
import ContactForm from '../components/ContactForm.island'

export const renderMode = 'static' as const
export const interactive = 'islands' as const

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

export default function Index(): ReactNode {
  const t = useTFn()
  return (
    <main>
      <section className="hero">
        <h1>{{capProjectName}}</h1>
        <p className="lead">
          <T id="hero.lead" />
        </p>
      </section>

      <section className="contact">
        <h2>
          <T id="contact.heading" />
        </h2>
        <ContactForm
          labels={{
            name: t('form.name'),
            email: t('form.email'),
            message: t('form.message'),
            send: t('form.send'),
            sending: t('form.sending'),
            sentNotice: t('form.sent'),
            errorPrefix: t('form.errorPrefix'),
            networkError: t('form.networkError'),
          }}
        />
      </section>
    </main>
  )
}