# Simon's Guest House Rome — Redesign Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Rebuild the Simon's Guest House Rome website as a fast, bold, 15-language **static Astro** site (SEO/GEO-optimized) deployable to Aruba shared Apache.

**Architecture:** Astro static output with native i18n (`prefixDefaultLocale: true`, one `/{lang}/` tree per locale). A single `LOCALES` config module is the source of truth for languages, paths, hreflang codes, direction, and Amenitiz mapping. Pure logic (locale resolution, hreflang/canonical URL building, Amenitiz deep-link mapping) lives in tested helper modules; pages/components are thin presentational layers. Images optimized at build via `astro:assets`. Apache behavior (clean URLs, caching, compression, 404) via `.htaccess`. Root `/` is a JS bridge that detects/remembers language.

**Tech Stack:** Astro 5.x · `@astrojs/sitemap` · `astro:assets` (Sharp) · Vitest (unit) · Playwright `@playwright/test` (E2E) · Lighthouse CI · self-hosted variable fonts (Fraunces, Inter, Noto/IBM Plex for non-Latin scripts) · plain CSS with logical properties.

**Spec:** `docs/superpowers/specs/2026-06-24-simons-guest-house-redesign-design.md` (read it; room texts are frozen in §6).

## Global Constraints

- **Output 100% static** (`output: 'static'`). No PHP/MySQL, no server runtime, no contact form.
- **Host:** Aruba shared Apache. Deploy = upload `dist/` to `public_html`. All paths/filenames **lowercase** (case-sensitive FS).
- **Domain (canonical):** `https://www.simonsguesthouserome.com` (with `www`).
- **Room content is FROZEN** — Italian source texts in spec §6 must appear **verbatim**; other languages are faithful translations. Never edit/paraphrase the Italian.
- **15 locales**, paths lowercase, default + x-default = **English (`en`)**.
- **Booking** is external Amenitiz: `https://simonsguesthouserome.amenitiz.io/{amenitizLocale}/booking/room`. Never mirror live prices.
- **Legal (Italy):** show **CIN** + business data + Privacy/Cookie pages. Use placeholders `[[CIN]]`, `[[P.IVA]]`, `[[RAGIONE_SOCIALE]]` until client provides them (single source: `src/config/business.ts`).
- **Trailing slash policy:** `trailingSlash: 'never'` + `build.format: 'file'`. Astro, sitemap, `<head>` canonical/alternates, and `.htaccess` MUST all agree.
- **Motion** must honor `prefers-reduced-motion`. **A11y** target WCAG 2.2 AA. **Perf** target Lighthouse ≥ 95 (mobile) on Home & Camere.
- **Responsive, mobile-first:** must look and work great on **phone, tablet, desktop**. Verify at ~360 / 768 / 1024 / 1440px: no horizontal overflow, tap targets ≥44px, nav collapses to hamburger <900px, fluid type/spacing (`clamp`), responsive images with correct `sizes`.
- **Single source for locales:** `src/config/locales.ts` is the ONLY place the locale list/hreflang map is authored; `astro.config.ts` imports it. The static root bridge (`public/index.html`) must inline the codes but is guarded by a test that asserts it matches `LOCALE_CODES`.
- **No external Google Fonts call** (self-host). **Allow AI crawlers** in robots.txt.
- Commit after every task. Conventional Commits messages.

---

## File Structure (created across the plan)

```
/(root = Astro app)
  .gitignore  package.json  astro.config.mjs  tsconfig.json  vitest.config.ts  playwright.config.ts
  src/
    config/
      locales.ts           # LOCALES source of truth + helpers
      business.ts          # NAP, CIN, P.IVA, geo, socials, Amenitiz base
    lib/
      i18n.ts              # getLangFromUrl, useTranslations, resolveLocale
      urls.ts              # buildAlternates, canonicalFor, amenitizUrl
      i18n.test.ts  urls.test.ts
    i18n/
      ui.ts                # UI string dictionary (per locale)
      content/             # page content per locale (it.ts, en.ts, ... )
    layouts/Base.astro
    components/
      Head.astro  Hreflang.astro  JsonLd.astro  Header.astro  LangSwitcher.astro
      Footer.astro  Hero.astro  SectionDivider.astro  ScrollReveal.astro
      Gallery.astro  RoomSection.astro  Faq.astro  Reviews.astro  BookingCta.astro
    pages/
      [lang]/index.astro  [lang]/camere.astro  [lang]/chi-siamo.astro
      [lang]/contatti.astro  [lang]/privacy.astro  [lang]/cookie.astro
    assets/images/...       # curated source photos (optimized at build)
    styles/tokens.css  styles/global.css  styles/fonts.css
  public/
    index.html             # root language bridge
    .htaccess  robots.txt  llms.txt  404.html  favicon.svg
    fonts/...               # self-hosted subset fonts
  scripts/
    validate-hreflang.mjs  validate-schema.mjs
  _source-images/           # preserved source photos: originals/ (hi-res) + web/ (+ logo) → optimized at build
  docs/superpowers/{specs,plans}/...
```

---

# Phase 0 — Foundation

### Task 1: Initialize repo and Astro project

**Files:**
- Create: `package.json`, `.gitignore`, `astro.config.mjs`, `tsconfig.json`

> Legacy cleanup already DONE before execution: old Mobirise files removed; source photos preserved in `_source-images/{originals,web}`; folder contains only `docs/` + `_source-images/`.

- [ ] **Step 1: Init git**

```bash
cd "/Users/paolo/Server/Siti Web/Lavoro/Simons Guest House"
git init && ls -la
```
Expected: repo initialized; root has `docs/` and `_source-images/`.

- [ ] **Step 2: Scaffold Astro into a temp dir, then merge to root**

(`npm create astro .` refuses a non-empty dir, so scaffold in `.astro-init/` and move files in — `cp -a src/.` includes dotfiles like `.gitignore`, `tsconfig.json`.)
```bash
npm create astro@latest .astro-init -- --template minimal --no-install --no-git --typescript strict --yes
cp -a .astro-init/. ./
rm -rf .astro-init
npm install
npm install @astrojs/sitemap
npm install -D vitest @playwright/test @lhci/cli
```
Expected: `package.json`, `astro.config.mjs`, `src/`, `tsconfig.json` in root; `docs/` and `_source-images/` untouched.

- [ ] **Step 3: Add scripts to package.json**

Edit `package.json` `"scripts"` to:
```json
{
  "dev": "astro dev",
  "build": "NODE_OPTIONS=--max-old-space-size=4096 astro build",
  "preview": "astro preview",
  "test": "vitest run",
  "test:watch": "vitest",
  "e2e": "playwright test",
  "lhci": "lhci autorun"
}
```

- [ ] **Step 4: .gitignore**

Ensure `.gitignore` contains (merge with the scaffold's; do not drop these lines):
```
node_modules/
dist/
.astro/
.lighthouseci/
test-results/
playwright-report/
.superpowers/
_source-images/
.DS_Store
```

- [ ] **Step 5: Verify scaffold builds and commit**

```bash
npm run build
```
Expected: build succeeds, `dist/` created.
```bash
git add -A
git commit -m "chore: init Astro project; preserve legacy Mobirise site under _legacy/"
```

---

### Task 2: Locales config (source of truth)

**Files:**
- Create: `src/config/locales.ts`
- Create: `src/config/business.ts`

**Interfaces:**
- Produces: `LOCALES: Locale[]`, `DEFAULT_LOCALE='en'`, `LOCALE_CODES: string[]`, `localeByPath(path): Locale|undefined`, type `Locale = { path: string; hreflang: string; htmlLang: string; dir: 'ltr'|'rtl'; label: string; amenitiz: string }`.
- Produces: `BUSINESS` object (NAP, geo, CIN, socials, amenitizBase).

- [ ] **Step 1: Write `src/config/locales.ts`**

```ts
export type Locale = {
  path: string;       // URL segment, lowercase, e.g. 'pt', 'zh', 'pt-pt'
  hreflang: string;   // BCP-47 for hreflang/inLanguage, e.g. 'pt-BR'
  htmlLang: string;   // <html lang> value
  dir: 'ltr' | 'rtl';
  label: string;      // native name for the switcher
  amenitiz: string;   // locale segment for Amenitiz booking deep-link
};

// SINGLE SOURCE OF TRUTH. Add/swap a locale by editing this array only.
// 15th slot default = pt-PT (per spec §13); swap to e.g.
// { path:'uk', hreflang:'uk', htmlLang:'uk', dir:'ltr', label:'Українська', amenitiz:'en' }
// per the client's real guest mix.
export const LOCALES: Locale[] = [
  { path: 'en',    hreflang: 'en',    htmlLang: 'en',    dir: 'ltr', label: 'English',    amenitiz: 'en' },
  { path: 'it',    hreflang: 'it',    htmlLang: 'it',    dir: 'ltr', label: 'Italiano',   amenitiz: 'it' },
  { path: 'es',    hreflang: 'es',    htmlLang: 'es',    dir: 'ltr', label: 'Español',    amenitiz: 'es' },
  { path: 'de',    hreflang: 'de',    htmlLang: 'de',    dir: 'ltr', label: 'Deutsch',    amenitiz: 'de' },
  { path: 'fr',    hreflang: 'fr',    htmlLang: 'fr',    dir: 'ltr', label: 'Français',   amenitiz: 'fr' },
  { path: 'pt',    hreflang: 'pt-BR', htmlLang: 'pt-BR', dir: 'ltr', label: 'Português',  amenitiz: 'pt' },
  { path: 'zh',    hreflang: 'zh-Hans', htmlLang: 'zh-Hans', dir: 'ltr', label: '中文',   amenitiz: 'zh' },
  { path: 'ja',    hreflang: 'ja',    htmlLang: 'ja',    dir: 'ltr', label: '日本語',     amenitiz: 'ja' },
  { path: 'ko',    hreflang: 'ko',    htmlLang: 'ko',    dir: 'ltr', label: '한국어',     amenitiz: 'ko' },
  { path: 'ar',    hreflang: 'ar',    htmlLang: 'ar',    dir: 'rtl', label: 'العربية',   amenitiz: 'en' },
  { path: 'nl',    hreflang: 'nl',    htmlLang: 'nl',    dir: 'ltr', label: 'Nederlands', amenitiz: 'nl' },
  { path: 'pl',    hreflang: 'pl',    htmlLang: 'pl',    dir: 'ltr', label: 'Polski',     amenitiz: 'pl' },
  { path: 'ru',    hreflang: 'ru',    htmlLang: 'ru',    dir: 'ltr', label: 'Русский',    amenitiz: 'ru' },
  { path: 'he',    hreflang: 'he',    htmlLang: 'he',    dir: 'rtl', label: 'עברית',      amenitiz: 'en' },
  { path: 'pt-pt', hreflang: 'pt-PT', htmlLang: 'pt-PT', dir: 'ltr', label: 'Português (PT)', amenitiz: 'pt' },
];

export const DEFAULT_LOCALE = 'en';
export const LOCALE_CODES = LOCALES.map((l) => l.path);
export const localeByPath = (path: string): Locale | undefined =>
  LOCALES.find((l) => l.path === path);
```

> Note: `amenitiz` values are best-guesses; Task 14 verifies the real Amenitiz locale list and adjusts unsupported ones to a confirmed fallback.

- [ ] **Step 2: Write `src/config/business.ts`**

```ts
export const BUSINESS = {
  name: "Simon's Guest House Rome",
  legalName: '[[RAGIONE_SOCIALE]]',
  vat: '[[P.IVA]]',
  cin: '[[CIN]]',
  email: 'simonsguesthouse@gmail.com',
  phones: ['+390669408963', '+393517400964'],
  whatsapp: '390669408963',
  instagram: 'https://www.instagram.com/simonsguesthouse/',
  address: { street: 'Piazza Michele Sanmicheli, 10', locality: 'Roma', region: 'RM', postalCode: '00176', country: 'IT' },
  geo: { lat: 41.8896, lng: 12.5283 }, // PLACEHOLDER — verify exact coords in Task 21
  hours: 'Mo-Su 10:30-19:00',
  numberOfRooms: 5, // spec default; confirm with client
  amenitizBase: 'https://simonsguesthouserome.amenitiz.io',
  domain: 'https://www.simonsguesthouserome.com',
} as const;
```

- [ ] **Step 3: Typecheck and commit**

```bash
npx astro check || npx tsc --noEmit
git add -A && git commit -m "feat(config): add LOCALES source of truth and BUSINESS data"
```

---

### Task 3: Astro config — i18n, sitemap, images, trailing slash

**Files:**
- Modify: `astro.config.mjs`

- [ ] **Step 1: Replace scaffold config with `astro.config.ts` (single source: import LOCALES)**

Delete the scaffold's `astro.config.mjs` and create `astro.config.ts`. Importing the shared `src/config/locales.ts` keeps the locale list + hreflang map in ONE place (no duplication).
```bash
rm -f astro.config.mjs
```
```ts
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
import { LOCALES, DEFAULT_LOCALE } from './src/config/locales';

const localePaths = LOCALES.map((l) => l.path);
const hreflangMap = Object.fromEntries(LOCALES.map((l) => [l.path, l.hreflang]));

export default defineConfig({
  site: 'https://www.simonsguesthouserome.com',
  output: 'static',
  trailingSlash: 'never',
  build: { format: 'file' },
  i18n: {
    defaultLocale: DEFAULT_LOCALE,
    locales: localePaths,
    routing: { prefixDefaultLocale: true, redirectToDefaultLocale: false },
  },
  image: { layout: 'constrained', responsiveStyles: true },
  integrations: [
    sitemap({ i18n: { defaultLocale: DEFAULT_LOCALE, locales: hreflangMap } }),
  ],
});
```

- [ ] **Step 2: Verify build still works and commit**

```bash
npm run build
```
Expected: build succeeds (no pages yet beyond scaffold; that's fine).
```bash
git add -A && git commit -m "feat(config): astro i18n (15 locales), sitemap hreflang, static + clean URLs"
```

---

### Task 4: i18n helpers (TDD — pure functions)

**Files:**
- Create: `src/lib/i18n.ts`, `src/lib/i18n.test.ts`
- Create: `vitest.config.ts`

**Interfaces:**
- Produces: `getLangFromUrl(url: URL): string`, `stripLocale(pathname: string): string`, `resolveLocale(candidates: string[], supported: string[], fallback: string): string`.

- [ ] **Step 1: vitest.config.ts**

```ts
import { defineConfig } from 'vitest/config';
export default defineConfig({ test: { environment: 'node', include: ['src/**/*.test.ts'] } });
```

- [ ] **Step 2: Write failing tests `src/lib/i18n.test.ts`**

```ts
import { describe, it, expect } from 'vitest';
import { getLangFromUrl, stripLocale, resolveLocale } from './i18n';

describe('getLangFromUrl', () => {
  it('reads the locale segment', () => {
    expect(getLangFromUrl(new URL('https://x.com/it/camere'))).toBe('it');
  });
  it('falls back to en when first segment is not a known locale', () => {
    expect(getLangFromUrl(new URL('https://x.com/unknown/page'))).toBe('en');
  });
});

describe('stripLocale', () => {
  it('removes the locale prefix', () => {
    expect(stripLocale('/it/camere')).toBe('/camere');
  });
  it('returns / for a locale root', () => {
    expect(stripLocale('/it')).toBe('/');
  });
});

describe('resolveLocale', () => {
  const supported = ['en','it','fr','pt','zh'];
  it('matches exact', () => {
    expect(resolveLocale(['fr'], supported, 'en')).toBe('fr');
  });
  it('matches primary subtag (fr-CA -> fr)', () => {
    expect(resolveLocale(['fr-CA'], supported, 'en')).toBe('fr');
  });
  it('maps pt-BR to pt path', () => {
    expect(resolveLocale(['pt-BR'], supported, 'en')).toBe('pt');
  });
  it('falls back to default when unsupported', () => {
    expect(resolveLocale(['sv','da'], supported, 'en')).toBe('en');
  });
  it('respects candidate order (saved choice first)', () => {
    expect(resolveLocale(['de','it'], supported, 'en')).toBe('it');
  });
});
```

- [ ] **Step 3: Run tests, verify they FAIL**

Run: `npm test`
Expected: FAIL (module `./i18n` has no such exports).

- [ ] **Step 4: Implement `src/lib/i18n.ts`**

```ts
import { LOCALE_CODES, DEFAULT_LOCALE } from '../config/locales';

export function getLangFromUrl(url: URL): string {
  const seg = url.pathname.split('/')[1];
  return LOCALE_CODES.includes(seg) ? seg : DEFAULT_LOCALE;
}

export function stripLocale(pathname: string): string {
  const parts = pathname.split('/').filter(Boolean);
  if (parts.length && LOCALE_CODES.includes(parts[0])) parts.shift();
  return '/' + parts.join('/');
}

// candidates: ordered preference list (e.g. [savedChoice, ...navigator.languages])
export function resolveLocale(candidates: string[], supported: string[], fallback: string): string {
  for (const raw of candidates) {
    if (!raw) continue;
    const lc = raw.toLowerCase();
    if (supported.includes(lc)) return lc;             // exact path match
    const primary = lc.split('-')[0];
    if (supported.includes(primary)) return primary;   // primary subtag
  }
  return fallback;
}
```

- [ ] **Step 5: Run tests, verify PASS, commit**

Run: `npm test`
Expected: PASS (all).
```bash
git add -A && git commit -m "feat(i18n): locale helpers with unit tests"
```

---

### Task 5: URL/hreflang/Amenitiz helpers (TDD)

**Files:**
- Create: `src/lib/urls.ts`, `src/lib/urls.test.ts`

**Interfaces:**
- Produces: `buildAlternates(pathNoLocale: string): {hreflang:string, href:string}[]` (absolute, includes self + x-default), `canonicalFor(localePath: string, pathNoLocale: string): string`, `amenitizUrl(localePath: string): string`.

- [ ] **Step 1: Write failing tests `src/lib/urls.test.ts`**

```ts
import { describe, it, expect } from 'vitest';
import { buildAlternates, canonicalFor, amenitizUrl } from './urls';

describe('canonicalFor', () => {
  it('builds absolute canonical with locale, no trailing slash', () => {
    expect(canonicalFor('it', '/camere')).toBe('https://www.simonsguesthouserome.com/it/camere');
  });
  it('handles home (path /)', () => {
    expect(canonicalFor('en', '/')).toBe('https://www.simonsguesthouserome.com/en');
  });
});

describe('buildAlternates', () => {
  const alts = buildAlternates('/camere');
  it('includes one entry per locale + x-default', () => {
    expect(alts.length).toBe(16); // 15 locales + x-default
  });
  it('uses BCP-47 hreflang codes', () => {
    expect(alts.find(a => a.hreflang === 'pt-BR')?.href).toBe('https://www.simonsguesthouserome.com/pt/camere');
  });
  it('x-default points to english', () => {
    expect(alts.find(a => a.hreflang === 'x-default')?.href).toBe('https://www.simonsguesthouserome.com/en/camere');
  });
});

describe('amenitizUrl', () => {
  it('maps locale to amenitiz booking deep-link', () => {
    expect(amenitizUrl('fr')).toBe('https://simonsguesthouserome.amenitiz.io/fr/booking/room');
  });
  it('falls back for rtl/unsupported (ar -> en)', () => {
    expect(amenitizUrl('ar')).toBe('https://simonsguesthouserome.amenitiz.io/en/booking/room');
  });
});
```

- [ ] **Step 2: Run, verify FAIL**

Run: `npm test`
Expected: FAIL (no `./urls`).

- [ ] **Step 3: Implement `src/lib/urls.ts`**

```ts
import { LOCALES, DEFAULT_LOCALE, localeByPath } from '../config/locales';
import { BUSINESS } from '../config/business';

const SITE = BUSINESS.domain; // no trailing slash

function joinPath(localePath: string, pathNoLocale: string): string {
  const tail = pathNoLocale === '/' ? '' : pathNoLocale;
  return `${SITE}/${localePath}${tail}`;
}

export function canonicalFor(localePath: string, pathNoLocale: string): string {
  return joinPath(localePath, pathNoLocale);
}

export function buildAlternates(pathNoLocale: string): { hreflang: string; href: string }[] {
  const alts = LOCALES.map((l) => ({ hreflang: l.hreflang, href: joinPath(l.path, pathNoLocale) }));
  alts.push({ hreflang: 'x-default', href: joinPath(DEFAULT_LOCALE, pathNoLocale) });
  return alts;
}

export function amenitizUrl(localePath: string): string {
  const loc = localeByPath(localePath);
  const seg = loc?.amenitiz ?? 'en';
  return `${BUSINESS.amenitizBase}/${seg}/booking/room`;
}
```

- [ ] **Step 4: Run, verify PASS, commit**

Run: `npm test`
Expected: PASS.
```bash
git add -A && git commit -m "feat(i18n): hreflang/canonical/amenitiz URL helpers with tests"
```

---

### Task 6: Design tokens, global CSS (logical properties), fonts

**Files:**
- Create: `src/styles/tokens.css`, `src/styles/global.css`, `src/styles/fonts.css`
- Create: `public/fonts/` (subset woff2 files)

- [ ] **Step 1: `src/styles/tokens.css` (palette/type/space from spec §3)**

```css
:root {
  /* palette */
  --c-cream: #FBF8F2; --c-travertine: #F4EFE6; --c-ink: #1A1715;
  --c-coral: #F25C4D; --c-coral-700: #C9442F; --c-brass: #C9A24B;
  --c-muted: #6E665C; --c-line: #E2D9CA;
  /* type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --step--1: clamp(.83rem,.8rem + .2vw,.95rem);
  --step-0: clamp(1rem,.95rem + .3vw,1.15rem);
  --step-1: clamp(1.3rem,1.1rem + .8vw,1.6rem);
  --step-2: clamp(1.8rem,1.4rem + 1.6vw,2.6rem);
  --step-3: clamp(2.6rem,1.9rem + 3vw,4.5rem);
  --step-4: clamp(3.4rem,2.2rem + 5vw,7rem);
  /* space + misc */
  --space-s: .75rem; --space-m: 1.5rem; --space-l: 3rem; --space-xl: 6rem;
  --measure: 68ch; --radius: 14px; --ease: cubic-bezier(.2,.7,.2,1);
}
```

- [ ] **Step 2: `src/styles/global.css` (reset + logical properties + reduced motion)**

```css
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{ margin:0; font-family:var(--font-body); font-size:var(--step-0);
  color:var(--c-ink); background:var(--c-cream); line-height:1.6;
  text-rendering:optimizeLegibility }
h1,h2,h3{ font-family:var(--font-display); line-height:1.05; font-weight:600;
  text-wrap:balance; margin-block:0 var(--space-m) }
h1{font-size:var(--step-4)} h2{font-size:var(--step-3)} h3{font-size:var(--step-2)}
p{max-inline-size:var(--measure)}
a{color:inherit}
img{max-inline-size:100%;height:auto;display:block}
.container{ inline-size:min(100% - 2*var(--space-m), 1200px); margin-inline:auto }
.section{ padding-block:var(--space-xl) }
:focus-visible{ outline:3px solid var(--c-coral); outline-offset:2px }
/* RTL: only mirror directional chevrons/arrows */
[dir="rtl"] .icon-dir{ transform:scaleX(-1) }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important }
}
```

- [ ] **Step 3: Acquire + subset fonts → `public/fonts/`, write `src/styles/fonts.css`**

Download variable fonts (Fraunces, Inter) and required Noto/IBM Plex non-Latin families; subset to woff2. Latin via Inter/Fraunces; non-Latin scoped by `unicode-range` so Latin pages never download them.
```bash
# example tooling note (run once): use fonttools/glyphhanger to subset.
# pip install fonttools brotli  (then subset each family to woff2)
```
```css
@font-face{font-family:'Fraunces';src:url('/fonts/fraunces-var.woff2') format('woff2');
  font-weight:300 700;font-display:swap;font-style:normal}
@font-face{font-family:'Inter';src:url('/fonts/inter-var-latin.woff2') format('woff2');
  font-weight:100 900;font-display:swap;unicode-range:U+0000-024F,U+2000-206F}
@font-face{font-family:'Inter';src:url('/fonts/inter-var-cyrillic.woff2') format('woff2');
  font-weight:100 900;font-display:swap;unicode-range:U+0400-04FF}
@font-face{font-family:'NotoArabic';src:url('/fonts/noto-arabic.woff2') format('woff2');
  font-display:swap;unicode-range:U+0600-06FF}
@font-face{font-family:'NotoHebrew';src:url('/fonts/noto-hebrew.woff2') format('woff2');
  font-display:swap;unicode-range:U+0590-05FF}
@font-face{font-family:'NotoCJK';src:url('/fonts/noto-cjk-subset.woff2') format('woff2');
  font-display:swap;unicode-range:U+3000-9FFF,U+AC00-D7A3,U+3040-30FF}
/* Body stacks add the non-Latin families as fallbacks */
:root{ --font-body:'Inter','NotoArabic','NotoHebrew','NotoCJK',system-ui,sans-serif }
```

- [ ] **Step 4: Build, commit**

```bash
npm run build
git add -A && git commit -m "feat(design): tokens, global CSS (logical properties), self-hosted fonts"
```

---

# Phase 1 — Layout & chrome

### Task 7: UI dictionary + content scaffolding

**Files:**
- Create: `src/i18n/ui.ts`
- Create: `src/i18n/content/en.ts`, `src/i18n/content/it.ts`

**Interfaces:**
- Produces: `ui: Record<localePath, Record<string,string>>`, `useTranslations(lang): (key)=>string` (add to `src/lib/i18n.ts`), `getContent(lang): PageContent` from `src/i18n/content/*`.

- [ ] **Step 1: `src/i18n/ui.ts` (nav, buttons, labels — start en+it)**

```ts
export const ui = {
  en: { 'nav.about':'About', 'nav.rooms':'Rooms', 'nav.contact':'Contact',
        'cta.book':'Book now', 'lang.switch':'Language',
        'footer.address':'Address','footer.contacts':'Contacts','footer.hours':'Reception hours' },
  it: { 'nav.about':'Chi siamo', 'nav.rooms':'Le Camere', 'nav.contact':'Contatti',
        'cta.book':'Prenota ora', 'lang.switch':'Lingua',
        'footer.address':'Indirizzo','footer.contacts':'Contatti','footer.hours':'Orari reception' },
} as const;
export type UiKey = keyof (typeof ui)['en'];
```

- [ ] **Step 2: add `useTranslations` to `src/lib/i18n.ts`**

```ts
import { ui } from '../i18n/ui';
export function useTranslations(lang: string) {
  const dict = (ui as any)[lang] ?? ui.en;
  return (key: string): string => dict[key] ?? (ui.en as any)[key] ?? key;
}
```

- [ ] **Step 3: content type + en/it page content**

Create `src/i18n/content/_type.ts` defining `PageContent` (home hero title/sub, intro, highlights[], faq[], etc.; rooms array uses FROZEN it text). Create `en.ts` and `it.ts`. The **Italian room descriptions/services MUST be copied verbatim from spec §6**. (Full content authored in Phase 3 tasks; here create the typed skeleton + it/en home strings so the layout compiles.)

- [ ] **Step 4: build, commit**

```bash
npm run build
git add -A && git commit -m "feat(i18n): ui dictionary + content scaffolding (en, it)"
```

---

### Task 8: Hreflang + Head components

**Files:**
- Create: `src/components/Hreflang.astro`, `src/components/Head.astro`

**Interfaces:**
- Consumes: `buildAlternates`, `canonicalFor` (Task 5), `getLangFromUrl`, `stripLocale` (Task 4).
- Produces: `<Head title description image />` rendering meta + OG + canonical + hreflang set.

- [ ] **Step 1: `src/components/Hreflang.astro`**

```astro
---
import { buildAlternates } from '../lib/urls';
import { stripLocale } from '../lib/i18n';
const path = stripLocale(Astro.url.pathname);
const alts = buildAlternates(path);
---
{alts.map((a) => <link rel="alternate" hreflang={a.hreflang} href={a.href} />)}
```

- [ ] **Step 2: `src/components/Head.astro`**

```astro
---
import { canonicalFor } from '../lib/urls';
import { getLangFromUrl, stripLocale } from '../lib/i18n';
import Hreflang from './Hreflang.astro';
interface Props { title: string; description: string; image?: string; }
const { title, description, image = '/og-default.jpg' } = Astro.props;
const lang = getLangFromUrl(Astro.url);
const canonical = canonicalFor(lang, stripLocale(Astro.url.pathname));
const ogImage = new URL(image, Astro.site).href;
---
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonical} />
<meta property="og:type" content="website" />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={canonical} />
<meta property="og:image" content={ogImage} />
<meta name="twitter:card" content="summary_large_image" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<Hreflang />
```

- [ ] **Step 3: build, commit**

```bash
npm run build
git add -A && git commit -m "feat(seo): Head + Hreflang components (canonical, OG, alternates)"
```

---

### Task 9: Base layout (html lang/dir, View Transitions, JSON-LD slot)

**Files:**
- Create: `src/layouts/Base.astro`

**Interfaces:**
- Consumes: `localeByPath`, `getLangFromUrl`, styles, `Head`, `Header`, `Footer`.
- Produces: `<Base title description>` with named `slot="jsonld"` and default slot.

- [ ] **Step 1: `src/layouts/Base.astro`**

```astro
---
import { ClientRouter } from 'astro:transitions';
import { getLangFromUrl } from '../lib/i18n';
import { localeByPath, DEFAULT_LOCALE } from '../config/locales';
import Head from '../components/Head.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/tokens.css';
import '../styles/fonts.css';
import '../styles/global.css';
interface Props { title: string; description: string; image?: string; }
const { title, description, image } = Astro.props;
const lang = getLangFromUrl(Astro.url);
const loc = localeByPath(lang) ?? localeByPath(DEFAULT_LOCALE)!;
---
<!doctype html>
<html lang={loc.htmlLang} dir={loc.dir}>
  <head>
    <Head title={title} description={description} image={image} />
    <slot name="jsonld" />
    <ClientRouter />
  </head>
  <body>
    <a href="#main" class="skip-link">Skip to content</a>
    <Header />
    <main id="main"><slot /></main>
    <Footer />
  </body>
</html>
```

- [ ] **Step 2: build (will fail until Header/Footer exist — create stubs)**

Create minimal `Header.astro`/`Footer.astro` returning `<header></header>`/`<footer></footer>` so build passes; full versions in Tasks 10–11.
```bash
npm run build
```
Expected: PASS with stubs.

- [ ] **Step 3: commit**

```bash
git add -A && git commit -m "feat(layout): Base layout with html lang/dir, View Transitions, jsonld slot"
```

---

### Task 10: Header + Language switcher (remembers choice)

**Files:**
- Modify: `src/components/Header.astro`
- Create: `src/components/LangSwitcher.astro`

**Interfaces:**
- Consumes: `getRelativeLocaleUrlList` (astro:i18n), `useTranslations`, `amenitizUrl`, `LOCALES`.

- [ ] **Step 1: `src/components/LangSwitcher.astro`**

```astro
---
import { LOCALES } from '../config/locales';
import { stripLocale, getLangFromUrl } from '../lib/i18n';
import { getRelativeLocaleUrl } from 'astro:i18n';
const path = stripLocale(Astro.url.pathname);
const current = getLangFromUrl(Astro.url);
---
<details class="lang">
  <summary aria-label="Language">{LOCALES.find(l=>l.path===current)?.label}</summary>
  <ul>
    {LOCALES.map((l)=>(
      <li><a href={getRelativeLocaleUrl(l.path, path)} hreflang={l.hreflang}
             lang={l.htmlLang} data-lang={l.path}
             aria-current={l.path===current ? 'true' : undefined}>{l.label}</a></li>
    ))}
  </ul>
</details>
<script>
  // Remember the user's manual choice for the root bridge (public/index.html)
  document.querySelectorAll('.lang a[data-lang]').forEach((a) =>
    a.addEventListener('click', () =>
      localStorage.setItem('sgh-lang', a.getAttribute('data-lang'))));
</script>
```

- [ ] **Step 2: `src/components/Header.astro` (brand, nav, CTA, switcher; sticky)**

```astro
---
import { useTranslations, getLangFromUrl } from '../lib/i18n';
import { amenitizUrl } from '../lib/urls';
import { getRelativeLocaleUrl } from 'astro:i18n';
import LangSwitcher from './LangSwitcher.astro';
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
const link = (p: string) => getRelativeLocaleUrl(lang, p);
---
<header class="site-header">
  <div class="container bar">
    <a class="brand" href={link('/')}>Simon's Guest House <span>Rome</span></a>
    <nav aria-label="Primary">
      <a href={link('/camere')}>{t('nav.rooms')}</a>
      <a href={link('/chi-siamo')}>{t('nav.about')}</a>
      <a href={link('/contatti')}>{t('nav.contact')}</a>
    </nav>
    <div class="actions">
      <LangSwitcher />
      <a class="btn-book" href={amenitizUrl(lang)} target="_blank" rel="noopener">{t('cta.book')}</a>
    </div>
  </div>
</header>
<style>
  .site-header{position:sticky;inset-block-start:0;z-index:50;background:color-mix(in oklab,var(--c-cream) 88%, transparent);backdrop-filter:blur(8px);border-block-end:1px solid var(--c-line)}
  .bar{display:flex;align-items:center;gap:var(--space-m);padding-block:var(--space-s)}
  nav{margin-inline-start:auto;display:flex;gap:var(--space-m)}
  .actions{display:flex;align-items:center;gap:var(--space-s)}
  .btn-book{background:var(--c-coral);color:#fff;padding:.6em 1.1em;border-radius:999px;text-decoration:none;font-weight:600}
  /* mobile menu handled with a small JS island; collapse <900px */
</style>
```
(Add a responsive hamburger as a small island; collapse nav under 900px.)

- [ ] **Step 3: build, commit**

```bash
npm run build
git add -A && git commit -m "feat(nav): header + language switcher that remembers choice"
```

---

### Task 11: Footer

**Files:**
- Modify: `src/components/Footer.astro`

- [ ] **Step 1: `src/components/Footer.astro` (NAP, CIN, hours, social, legal, map)**

```astro
---
import { BUSINESS } from '../config/business';
import { useTranslations, getLangFromUrl } from '../lib/i18n';
import { getRelativeLocaleUrl } from 'astro:i18n';
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
const a = BUSINESS.address;
---
<footer class="site-footer">
  <div class="container grid">
    <section>
      <h2>{t('footer.address')}</h2>
      <p>{a.street}<br/>{a.postalCode} {a.locality} {a.region}<br/>Italia</p>
      <p>CIN: {BUSINESS.cin}</p>
    </section>
    <section>
      <h2>{t('footer.contacts')}</h2>
      <p>
        <a href={`tel:${BUSINESS.phones[0]}`}>{BUSINESS.phones[0]}</a><br/>
        <a href={`https://wa.me/${BUSINESS.whatsapp}`}>WhatsApp</a><br/>
        <a href={`mailto:${BUSINESS.email}`}>{BUSINESS.email}</a><br/>
        <a href={BUSINESS.instagram} target="_blank" rel="noopener">Instagram</a>
      </p>
    </section>
    <section>
      <h2>{t('footer.hours')}</h2>
      <p>10:30–19:00</p>
      <p><a href={getRelativeLocaleUrl(lang,'/privacy')}>Privacy</a> · <a href={getRelativeLocaleUrl(lang,'/cookie')}>Cookie</a></p>
    </section>
  </div>
  <div class="container legal"><small>© {BUSINESS.name} — {BUSINESS.legalName} — P.IVA {BUSINESS.vat}</small></div>
</footer>
```

- [ ] **Step 2: build, commit**

```bash
npm run build
git add -A && git commit -m "feat(footer): NAP, CIN, hours, social, legal links"
```

---

### Task 12: Root language bridge (`public/index.html`)

**Files:**
- Create: `public/index.html`

- [ ] **Step 1: Write `public/index.html` (saved → navigator → en; noscript links)**

```html
<!doctype html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Simon's Guest House Rome</title>
<link rel="canonical" href="https://www.simonsguesthouserome.com/en">
<meta name="robots" content="noindex,follow">
<script>
(function(){
  var SUP=['en','it','es','de','fr','pt','zh','ja','ko','ar','nl','pl','ru','he','pt-pt'];
  function pick(cands){for(var i=0;i<cands.length;i++){var r=(cands[i]||'').toLowerCase();
    if(SUP.indexOf(r)>=0)return r;var p=r.split('-')[0];if(SUP.indexOf(p)>=0)return p;}return 'en';}
  var saved=null;try{saved=localStorage.getItem('sgh-lang');}catch(e){}
  var langs=(navigator.languages&&navigator.languages.slice())||[navigator.language||'en'];
  var loc=pick([saved].concat(langs));
  location.replace('/'+loc);
})();
</script></head>
<body>
  <p>Choose your language / Scegli la lingua:</p>
  <noscript><ul>
    <li><a href="/en">English</a></li><li><a href="/it">Italiano</a></li>
    <li><a href="/es">Español</a></li><li><a href="/de">Deutsch</a></li>
    <li><a href="/fr">Français</a></li><li><a href="/pt">Português</a></li>
    <li><a href="/zh">中文</a></li><li><a href="/ja">日本語</a></li>
    <li><a href="/ko">한국어</a></li><li><a href="/ar">العربية</a></li>
    <li><a href="/nl">Nederlands</a></li><li><a href="/pl">Polski</a></li>
    <li><a href="/ru">Русский</a></li><li><a href="/he">עברית</a></li>
    <li><a href="/pt-pt">Português (PT)</a></li>
  </ul></noscript>
</body></html>
```

- [ ] **Step 2: Guard test — bridge SUP array matches LOCALE_CODES**

Create `src/lib/bridge.test.ts` (catches drift between the static bridge and the locale source of truth):
```ts
import { describe, it, expect } from 'vitest';
import { readFileSync } from 'node:fs';
import { LOCALE_CODES } from '../config/locales';

describe('root bridge', () => {
  it('SUP array matches LOCALE_CODES', () => {
    const html = readFileSync('public/index.html', 'utf8');
    const m = html.match(/var SUP=\[([^\]]*)\]/);
    expect(m).not.toBeNull();
    const sup = m![1].split(',').map((s) => s.trim().replace(/['"]/g, ''));
    expect(sup.sort()).toEqual([...LOCALE_CODES].sort());
  });
});
```
Run: `npm test` → PASS.

- [ ] **Step 3: build, verify `dist/index.html` present, commit**

```bash
npm run build && test -f dist/index.html && echo OK && npm test
git add -A && git commit -m "feat(i18n): root language bridge with detection + noscript fallback + guard test"
```

---

# Phase 2 — Reusable components

### Task 13: Hero, SectionDivider (brush), ScrollReveal

**Files:**
- Create: `src/components/Hero.astro`, `src/components/SectionDivider.astro`, `src/components/ScrollReveal.astro`

- [ ] **Step 1: `ScrollReveal.astro` (IntersectionObserver island, reduced-motion safe)**

```astro
<div class="reveal"><slot /></div>
<style>.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}</style>
<script>
const io=new IntersectionObserver((es)=>es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}}),{threshold:.15});
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
</script>
```

- [ ] **Step 2: `Hero.astro` (full-bleed image, parallax, title/sub/CTA)**

Accept props `{ image, title, subtitle, ctaHref, ctaLabel }`; use `<Picture>` with `loading="eager"` `fetchpriority="high"`; CSS parallax via `background-attachment`/scroll-driven where supported with static fallback.

- [ ] **Step 3: `SectionDivider.astro` (street-art brush SVG mask between sections)**

Inline SVG with a coral brush-stroke shape; `aria-hidden="true"`.

- [ ] **Step 4: build, commit**

```bash
npm run build
git add -A && git commit -m "feat(ui): Hero, brush SectionDivider, ScrollReveal island"
```

---

### Task 14: Gallery + Lightbox (accessible)

**Files:**
- Create: `src/components/Gallery.astro`

- [ ] **Step 1: `Gallery.astro`** — grid of `<Picture>` thumbnails (avif/webp, lazy) that open an accessible dialog (`<dialog>` element) with prev/next, focus trap, Escape to close, keyboard nav, `[dir=rtl]` arrow mirroring via `.icon-dir`.

- [ ] **Step 2: build, commit**

```bash
npm run build
git add -A && git commit -m "feat(ui): accessible gallery + lightbox dialog"
```

---

### Task 15: RoomSection, Faq, Reviews, BookingCta

**Files:**
- Create: `src/components/RoomSection.astro`, `Faq.astro`, `Reviews.astro`, `BookingCta.astro`

- [ ] **Step 1: `RoomSection.astro`** — props `{ name, description, included, extra, images, bookHref }`; renders name (display serif), verbatim description, "Servizi inclusi"/"Servizi Extra" lists, `<Gallery>`, and a `BookingCta`.
- [ ] **Step 2: `Faq.astro`** — props `{ items: {q,a}[] }`; renders visible `<h3>` question + answer (answer-first, 40–60 words). Used both on pages and by FAQPage JSON-LD (Task 22).
- [ ] **Step 3: `Reviews.astro`** — the 3 existing testimonials (Angelo I, Simone G, Marianna P) as cards. **No star rating markup.**
- [ ] **Step 4: `BookingCta.astro`** — prominent coral CTA → `amenitizUrl(lang)`.
- [ ] **Step 5: build, commit**

```bash
npm run build
git add -A && git commit -m "feat(ui): RoomSection, Faq, Reviews, BookingCta"
```

---

# Phase 3 — Pages (IT + EN source content)

> Write Italian source + English first; other locales added in Phase 6. Room texts (it) verbatim from spec §6.

### Task 16: Camere page (FROZEN room content)

**Files:**
- Create: `src/pages/[lang]/camere.astro`
- Modify: `src/i18n/content/it.ts`, `en.ts` (rooms array)

**Interfaces:**
- Consumes: `RoomSection`, room images (Task 25 will finalize imports; use placeholders now), `getStaticPaths` over `LOCALE_CODES`.

- [ ] **Step 1: Add `getStaticPaths` to emit one page per locale**

```astro
---
import { LOCALE_CODES } from '../../config/locales';
export function getStaticPaths(){ return LOCALE_CODES.map(lang => ({ params:{ lang } })); }
import Base from '../../layouts/Base.astro';
import RoomSection from '../../components/RoomSection.astro';
import { getLangFromUrl } from '../../lib/i18n';
import { getContent } from '../../i18n/content';
const lang = getLangFromUrl(Astro.url);
const c = getContent(lang);
---
<Base title={c.rooms.metaTitle} description={c.rooms.metaDesc}>
  <h1>{c.rooms.h1}</h1>
  {c.rooms.list.map(r => <RoomSection {...r} />)}
</Base>
```

- [ ] **Step 2: Put the 4 rooms in `it.ts` with VERBATIM text from spec §6**

Copy each room's `description`, `included`, `extra` **exactly**. English translations in `en.ts` (faithful). Order: Suite Deluxe, Deluxe, Standard, Economy.

- [ ] **Step 3: Verify verbatim with a test**

Create `src/i18n/content/rooms.test.ts` asserting the it Suite Deluxe description equals the exact spec string (guards against accidental edits):
```ts
import { describe, it, expect } from 'vitest';
import { it as itContent } from './it';
describe('room content frozen', () => {
  it('Suite Deluxe description is verbatim', () => {
    expect(itContent.rooms.list[0].description).toContain('idromassaggio Shiatsu capace di stimolare');
  });
});
```
Run: `npm test` → PASS.

- [ ] **Step 4: build, commit**

```bash
npm run build
git add -A && git commit -m "feat(pages): Camere page with verbatim room content (it/en)"
```

---

### Task 17: Home page

**Files:**
- Create: `src/pages/[lang]/index.astro`
- Modify: `it.ts`, `en.ts` (home content — improved copy, answer-first)

- [ ] **Step 1: Build the page** with sections from spec §4.1 (Hero, intro, rooms preview, highlights, neighborhood teaser, how-to-reach summary, Reviews, Faq, BookingCta), each wrapped in `ScrollReveal` and separated by `SectionDivider`.
- [ ] **Step 2: Improved IT/EN copy** in content files (answer-first, fact-dense; keep real facts: Piazza Michele Sanmicheli, Pigneto/Tor Pignattara street-art).
- [ ] **Step 3: build, Playwright smoke (page renders, CTA points to amenitiz), commit**

```bash
npm run build
git add -A && git commit -m "feat(pages): Home with improved copy and motion"
```

---

### Task 18: Chi siamo / Quartiere / Come arrivare page

**Files:**
- Create: `src/pages/[lang]/chi-siamo.astro`
- Modify: `it.ts`, `en.ts`

- [ ] **Step 1: Sections** (spec §4.3): owner story (E-E-A-T, byline + "aggiornato il"), the property (from existing About, improved, never contradicting facts), neighborhood guide (street-art), **Come arrivare** (answer-first per transport mode with verified minutes/€ — Fiumicino Leonardo Express ~30min ~€14, FL1, shuttle, taxi; Ciampino; Termini/Tiburtina → door; metro Malatesta MEC <10min walk; bus 105/409, tram Termini–Filarete; ZTL warning), things-to-do nearby with distances.
- [ ] **Step 2: Verify transport facts** before publishing (note source/date in content).
- [ ] **Step 3: build, commit**

```bash
npm run build
git add -A && git commit -m "feat(pages): About + neighborhood + how-to-reach (fact-dense, GEO)"
```

---

### Task 19: Contatti, Privacy, Cookie pages

**Files:**
- Create: `src/pages/[lang]/contatti.astro`, `privacy.astro`, `cookie.astro`

- [ ] **Step 1: Contatti** — WhatsApp/email/tel actions, Google Map embed (lazy/consent-aware), hours, address, CIN/business data, directions link.
- [ ] **Step 2: Privacy + Cookie** — standard IT-compliant policy text (placeholders for entity data; cookieless analytics note → minimal cookie usage).
- [ ] **Step 3: build, commit**

```bash
npm run build
git add -A && git commit -m "feat(pages): Contatti + Privacy + Cookie"
```

---

# Phase 4 — SEO / GEO / structured data

### Task 20: JSON-LD @graph component (localized)

**Files:**
- Create: `src/components/JsonLd.astro`
- Modify: pages to pass `slot="jsonld"`

**Interfaces:**
- Consumes: `BUSINESS`, `localeByPath`, `amenitizUrl`, page content.

- [ ] **Step 1: Verify exact GPS coordinates** for `BUSINESS.geo` (from address; confirm with client/Maps).
- [ ] **Step 2: `JsonLd.astro`** emits a single `@graph`: `LodgingBusiness` (switch to `BedAndBreakfast` if breakfast confirmed) with stable `@id` `${domain}/#lodging` (same across locales), `name`, localized `description`, `url` per-locale, `telephone` (E.164), `email`, `address`, `geo`, `image`, `priceRange`, `currenciesAccepted:'EUR'`, `checkinTime`/`checkoutTime`, `numberOfRooms`, `petsAllowed`, `amenityFeature` (real only), `availableLanguage` (hosts' languages), `sameAs` (GBP/Booking/TripAdvisor/Instagram); `containsPlace` rooms as `["HotelRoom","Product"]`; `potentialAction: ReserveAction` → `amenitizUrl(lang)`; plus `Organization`, `WebSite`, `BreadcrumbList`. Set `inLanguage` per page = locale hreflang. **No self-hosted aggregateRating/review.**
- [ ] **Step 3: Wire into each page** via `<Fragment slot="jsonld">`.
- [ ] **Step 4: build, commit**

```bash
npm run build
git add -A && git commit -m "feat(seo): localized JSON-LD @graph (LodgingBusiness, rooms, ReserveAction)"
```

---

### Task 21: FAQPage + robots.txt + llms.txt

**Files:**
- Modify: `JsonLd.astro` (add FAQPage where a page has FAQ)
- Create: `public/robots.txt`, `public/llms.txt`

- [ ] **Step 1: FAQPage JSON-LD** built from the same `Faq` items (visible on page; answers 40–60 words).
- [ ] **Step 2: `public/robots.txt`** — allow all incl. AI crawlers, link sitemap:
```
User-agent: *
Allow: /
User-agent: GPTBot
Allow: /
User-agent: OAI-SearchBot
Allow: /
User-agent: PerplexityBot
Allow: /
User-agent: ClaudeBot
Allow: /
User-agent: Google-Extended
Allow: /
Sitemap: https://www.simonsguesthouserome.com/sitemap-index.xml
```
- [ ] **Step 3: `public/llms.txt`** — concise property summary + key links (experimental, low cost).
- [ ] **Step 4: build, commit**

```bash
npm run build
git add -A && git commit -m "feat(geo): FAQPage schema, robots (allow AI), llms.txt"
```

---

### Task 22: Validation scripts (hreflang + schema)

**Files:**
- Create: `scripts/validate-hreflang.mjs`, `scripts/validate-schema.mjs`

- [ ] **Step 1: `validate-hreflang.mjs`** — parse `dist/**/*.html`, assert every page lists all 15 alternates + x-default, reciprocal & self-referential, absolute URLs matching the no-trailing-slash canonical.
- [ ] **Step 2: `validate-schema.mjs`** — extract JSON-LD from `dist`, `JSON.parse` each, assert one `@graph`, single `@id` for `#lodging` across locales, `inLanguage` matches the page locale.
- [ ] **Step 3: Run both against a build**

```bash
npm run build && node scripts/validate-hreflang.mjs && node scripts/validate-schema.mjs
```
Expected: both print PASS / exit 0.

- [ ] **Step 4: commit**

```bash
git add -A && git commit -m "test(seo): hreflang + schema validation scripts"
```

---

# Phase 5 — Images

### Task 23: Curate, import, optimize photos

**Files:**
- Create: `src/assets/images/...` (curated copies from `_source-images/web` and `_source-images/originals`)
- Modify: components/pages to import from `src/assets`

- [ ] **Step 1: Curate** best photos per room + hero + neighborhood; pre-downscale any >2000px source; copy into `src/assets/images/{rooms,hero,about}/` with lowercase descriptive names. Map (from spec §6): Suite Deluxe = img-3737/3807/3867/3758; Deluxe = img-3922/3903/3898; Standard = img-755/748/769; Economy = the 3 webp.
- [ ] **Step 2: Replace placeholder image refs** with `import` from `src/assets` + `<Picture formats={['avif','webp']} widths={[400,800,1200,1600]} sizes=... />`. Hero `eager`/`fetchpriority`. Write meaningful localized `alt`.
- [ ] **Step 3: Build, check output sizes**

```bash
npm run build
du -sh dist/_astro | cat   # optimized assets should be a fraction of originals
```
- [ ] **Step 4: commit**

```bash
git add -A && git commit -m "feat(media): curate + optimize photos (avif/webp responsive)"
```

---

# Phase 6 — 15 languages + RTL

### Task 24: Translate content to remaining 13 locales

**Files:**
- Create: `src/i18n/content/{es,de,fr,pt,zh,ja,ko,ar,nl,pl,ru,he,pt-pt}.ts`
- Modify: `src/i18n/ui.ts` (add all locales)

- [ ] **Step 1: Translate `ui.ts`** keys for all 15 locales (localized, native quality).
- [ ] **Step 2: Translate page content** for each locale from the it/en source — **localize** (adapt FAQ/keywords/examples per market), keep factual core; room descriptions = faithful translations of the frozen it text. *(May be produced via a translation workflow; each file reviewed for completeness.)*
- [ ] **Step 3: Build all locales, run hreflang validator**

```bash
npm run build && node scripts/validate-hreflang.mjs
```
Expected: PASS for all 15 locales.

- [ ] **Step 4: commit**

```bash
git add -A && git commit -m "feat(i18n): full content for all 15 locales"
```

---

### Task 25: RTL polish (Arabic, Hebrew)

- [ ] **Step 1:** Visually review `/ar` and `/he` (build + `astro preview`): layout mirrors correctly (logical properties), only chevrons/arrows mirrored (`.icon-dir`), numbers/brand latin wrapped with `<bdi>`, Arabic/Hebrew fonts load (line-height ok), gallery arrows correct.
- [ ] **Step 2:** Fix issues with `[dir="rtl"]` targeted rules only.
- [ ] **Step 3: commit**

```bash
git add -A && git commit -m "fix(rtl): Arabic + Hebrew layout polish"
```

---

# Phase 7 — Deploy & QA

### Task 26: `.htaccess` + 404

**Files:**
- Create: `public/.htaccess`, `public/404.html`

- [ ] **Step 1: `public/.htaccess`** (from spec §10): `Options -MultiViews`, `DirectorySlash Off`, clean-URL rewrite to `$1.html`, enforce no-trailing-slash 301, `ErrorDocument 404 /404.html`, brotli(if-module)+gzip, cache headers (assets immutable 1y, HTML no-cache).
- [ ] **Step 2: `public/404.html`** (default-locale, links home + language bridge).
- [ ] **Step 3: Build + local Apache check** (if available) or verify file present in `dist/`.
- [ ] **Step 4: commit**

```bash
npm run build && test -f dist/.htaccess && echo OK
git add -A && git commit -m "feat(deploy): .htaccess (clean URLs, cache, compression) + 404"
```

---

### Task 27: E2E (Playwright) + Lighthouse

**Files:**
- Create: `playwright.config.ts`, `tests/e2e/site.spec.ts`, `lighthouserc.json`

- [ ] **Step 1: Playwright tests** against `astro preview`: (a) `/en` & `/it` load with correct `<html lang>`; (b) `/ar` has `dir="rtl"`; (c) language switcher navigates and writes `localStorage.sgh-lang`; (d) every page's "Book" link points to an `amenitiz.io/.../booking/room` URL; (e) all internal nav links resolve (no 404); (f) Camere `/it` contains the exact frozen Suite Deluxe phrase; (g) **responsive**: at viewports 375×667, 768×1024, 1440×900 — `document.documentElement.scrollWidth <= window.innerWidth + 1` (no horizontal overflow) on Home & Camere, and the header nav is collapsed to a hamburger at 375 but expanded at 1440.
- [ ] **Step 2: Run E2E**

```bash
npm run build && npm run e2e
```
Expected: all pass.

- [ ] **Step 3: Lighthouse CI** on `/en` and `/en/camere`; assert performance/SEO/best-practices/a11y ≥ 0.95.

```bash
npm run lhci
```
Expected: scores ≥ 95.

- [ ] **Step 4: commit**

```bash
git add -A && git commit -m "test(qa): Playwright E2E + Lighthouse CI gates"
```

---

### Task 28: Deploy to Aruba

- [ ] **Step 1:** Final `npm run build`.
- [ ] **Step 2:** Upload **contents of `dist/`** (including `.htaccess`, `robots.txt`, `index.html`, `_astro/`, all `/{lang}/` html) into Aruba `public_html` via FTP/SFTP. *(Requires client FTP credentials; otherwise hand off `dist/` zip.)*
- [ ] **Step 3: Post-deploy verification** on live domain: clean URLs work, `/` redirects by language, 404 works, `content-encoding` gzip/brotli present, cache headers correct, hreflang live, JSON-LD passes Rich Results Test, mobile Lighthouse spot-check. Submit `sitemap-index.xml` in Search Console.

---

## Self-Review (performed)

**Spec coverage:** §2 vincoli → Tasks 1,3,26,28 + Global Constraints. §3 design → Tasks 6,13,14. §4 pages → Tasks 16–19. §5 i18n/RTL/auto-detect → Tasks 2–5,10,12,24,25. §6 frozen rooms → Task 16 (+verbatim test). §7 copy → Tasks 17,18. §8 SEO/GEO/schema → Tasks 8,20,21,22. §9 stack/images → Tasks 1,3,23. §10 deploy → Tasks 26,28. §11 perf/a11y/privacy → Tasks 6,27,19. §12/§13 client data/defaults → `business.ts` placeholders. §15 acceptance → Task 27 E2E + Task 22 validators. All sections mapped.

**Placeholder scan:** Remaining `[[CIN]]/[[P.IVA]]/[[RAGIONE_SOCIALE]]` and `BUSINESS.geo` are **intentional client-data placeholders** centralized in `business.ts` (Global Constraints), not plan gaps; Task 20/28 flag verification. No "TBD/implement later" logic steps.

**Type consistency:** `Locale` shape (Task 2) consumed unchanged by Tasks 4,5,10. `resolveLocale/getLangFromUrl/stripLocale` (Task 4) used by Tasks 5,8,9,10,12. `buildAlternates/canonicalFor/amenitizUrl` (Task 5) used by Tasks 8,10,15,20. `useTranslations`/`getContent` (Task 7) used by Tasks 10,11,16–19. Consistent.