# Technical Plan

## Stack
- Framework: Next.js (App Router, TypeScript)
- Styling: Tailwind CSS
- Internationalization: next-intl (or equivalent App Router i18n solution)
- Content: Payload CMS
- Deployment: Vercel or equivalent edge-capable host
- Images: Next.js Image + remote CDN loader
- Analytics: Plausible or GA4, to be decided

## Rendering Strategy
- Marketing pages (Home, Products, About, Support landing, FAQ, Warranty, Contact, Dealers): static generation with on-demand revalidation from the CMS.
- Product detail routes: static generation with on-demand revalidation from the CMS. The route chooses either the default system-rendered layout or a project-local HTML template from `webroot/Products/<template-id>/<locale>/index.html`.
- Product detail routes must also render CMS-managed product relationships below the template region, including firmware / downloads, product videos, and product reviews when present.
- News: static generation with incremental revalidation.
- Downloads: static generation; file metadata served from CMS.
- Any dynamic form submission (Contact) uses a server action or serverless API route.

## Internationalization
- URL structure: `/en/...` and `/zh/...`
- Each locale has independent CMS content, not a flat translation key map.
- Shared structured fields (specs, downloads, dealer data) are localized per field, not per document.
- Default locale resolution: first visit uses Accept-Language, with manual override persisted.

## CMS Decision
Payload CMS is the selected content platform.

Rationale:
- TypeScript-native schema definitions align well with a Next.js codebase.
- Full control over bilingual content modeling without SaaS lock-in.
- Self-hosted or managed deployment options provide flexibility across regions.
- Better long-term control for product, support, dealer, and download content.

Implementation direction:
- Define localized collections and globals directly in Payload config.
- Keep structured content, media, redirects, and product template selection in the same CMS.
- Enumerate valid product templates from this project's `webroot/Products/` directory.
- Use Payload preview integration for draft review in Next.js.
- Use Payload roles for editorial review and publishing.

## SEO
- Server-rendered HTML with full metadata
- `hreflang` tags across every localized page
- Canonical URLs per locale
- `sitemap.xml` per locale, plus a combined index
- `robots.txt` with environment-aware rules
- Structured data: `Organization`, `Product`, `FAQPage`, `BreadcrumbList`
- 301 redirect map for legacy URLs, enforced at the edge

## Performance Targets
- Lighthouse Performance ≥ 90 on mobile for Home, Products, Product Detail.
- LCP < 2.5s on 4G for homepage.
- CLS < 0.1 across all primary pages.
- Largest hero image served as AVIF/WebP with responsive sources.
- Video on hero is optional and must have a static poster fallback.

## Mobile
- Mobile is treated as a primary layout, not an afterthought.
- Touch targets at least 44px.
- Product card grid collapses to single column on small screens.
- Navigation collapses to a drawer with clear language switch.

## Accessibility
- WCAG 2.1 AA as baseline.
- All interactive elements keyboard reachable.
- Visible focus rings.
- Sufficient contrast ratios validated in design tokens.

## Forms
- Contact form with server-side validation and spam protection.
- Warranty / support forms, if added later, follow the same pattern.

## 301 Redirect Strategy
- Collect legacy URL inventory before migration.
- Map each legacy path to the closest new page.
- Implement redirects in `next.config.js` or at the hosting edge.
- Monitor 404s post-launch and patch gaps.

## Environments
- Local development
- Preview (per-branch) for editorial and stakeholder review
- Production

## Seed Data
- Pre-launch environments use seed data scraped from the current Eversolo site (EN and ZH) so that staging reflects real product imagery and copy.
- Images, specs, support content, news, and dealer info are imported from the legacy site instead of using placeholder content.
- Product videos and external reviews are also imported from the legacy site and linked back to the related product entries so they can be rendered on product detail pages.
- Detailed rules live in `SEED-DATA-POLICY.md`.

## Monitoring
- Uptime monitoring
- Error tracking (Sentry or equivalent)
- Core Web Vitals monitoring
- 404 and redirect monitoring post-launch