// app/(public)/page.tsx
import { Suspense } from 'react';
import { HeroSection } from '@/components/homepage/hero-section';
import { FeaturedEvents } from '@/components/homepage/featured-events';
import { LatestNews } from '@/components/homepage/latest-news';

export default function HomePage() {
  return (
    <div className="flex flex-col gap-16">
      <HeroSection />
      <Suspense fallback={<EventsSkeleton />}>
        <FeaturedEvents />
      </Suspense>
      <Suspense fallback={<NewsSkeleton />}>
        <LatestNews />
      </Suspense>
    </div>
  );
}

// Event listing
// app/(public)/events/page.tsx
import { getEvents } from 'app/actions/events';

export default async function EventsPage() {
  const events = await getEvents();
  
  return (
    <div>
      <h1>Upcoming Events</h1>
      <EventsList events={events} />
    </div>
  );
}

// Event detail
// app/(public)/events/[id]/page.tsx
export default async function EventPage({ 
  params 
}: { 
  params: Promise<{ id: string }> 
}) {
  const { id } = await params;
  const event = await getEventById(id);
  
  return <EventDetail event={event} />;
}

// Product detail page
// app/(public)/shop/[slug]/page.tsx
import { getProductBySlug } from 'app/actions/products';
import { AddToCartButton } from '@/components/shop/add-to-cart-button';

export default async function ProductPage({
  params
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params;
  const product = await getProductBySlug(slug);
  
  return (
    <div className="grid md:grid-cols-2 gap-8">
      <ProductImages images={product.images} />
      <div>
        <h1>{product.name}</h1>
        <p className="text-2xl font-bold">{product.price} NOK</p>
        <AddToCartButton productId={product.$id} />
      </div>
    </div>
  );
}

// Department page
// app/(public)/units/[id]/page.tsx
import { getDepartmentById } from 'app/actions/campus';

export default async function DepartmentPage({
  params
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params;
  const department = await getDepartmentById(id);
  
  return (
    <div>
      <DepartmentHero department={department} />
      <DepartmentTabsClient department={department} />
    </div>
  );
}

// app/(public)/membership/membership-page-client.tsx
'use client';

import { MembershipForm } from '@/components/forms/membership-form';
import { BenefitsSection } from '@/components/membership/benefits';

export function MembershipPageClient() {
  return (
    <div className="container py-12">
      <h1>Become a Member</h1>
      <BenefitsSection />
      <MembershipForm />
    </div>
  );
}

// app/(protected)/profile/page.tsx
import { createSessionClient } from '@repo/api/server';
import { redirect } from 'next/navigation';

export default async function ProfilePage() {
  const { account } = await createSessionClient();
  
  try {
    const user = await account.get();
    return <UserProfile user={user} />;
  } catch {
    redirect('/auth/login');
  }
}

// app/(protected)/fs/page.tsx
import { getUserExpenses } from 'app/actions/expenses';

export default async function ExpensesPage() {
  const expenses = await getUserExpenses();
  
  return (
    <div className="container py-8">
      <h1>My Expenses</h1>
      <ExpenseList expenses={expenses} />
    </div>
  );
}

// Using translations in a component
import { useTranslations } from 'next-intl';

export function WelcomeMessage() {
  const t = useTranslations('home');
  
  return <h1>{t('welcome')}</h1>;
}

apps/web/messages/
├── en/
│   ├── common.json       # Shared translations
│   ├── home.json         # Homepage
│   ├── about.json        # About pages
│   ├── events.json       # Events
│   └── ...
└── no/
    └── ... (same structure)

interface PageParams {
  params: Promise<{
    id: string;
    slug?: string;
  }>;
  searchParams?: Promise<{
    page?: string;
    filter?: string;
  }>;
}

export default async function Page({ 
  params, 
  searchParams 
}: PageParams) {
  const { id } = await params;
  const query = await searchParams;
  // ...
}

export async function generateStaticParams() {
  const events = await getAllEvents();
  
  return events.map((event) => ({
    id: event.$id,
  }));
}

// middleware.ts
import { createServerClient } from '@repo/api/server';
import { NextResponse } from 'next/server';

export async function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;
  
  // Protected routes
  if (pathname.startsWith('/profile') || pathname.startsWith('/fs')) {
    const { account } = await createSessionClient();
    
    try {
      await account.get();
    } catch {
      return NextResponse.redirect(new URL('/auth/login', request.url));
    }
  }
  
  return NextResponse.next();
}