+ {strings.gpsFallback.title} +
+
+
+
+
+ {about.history}
+{text.values}
+-
+ {about.values.map((value) => (
+
- {value} + ))} +
-
+
- {text.phone} +
- + + {contact.phone} + + +
- {text.email} +
- + + {contact.email} + + +
- {text.website} +
- + + {contact.website.replace(/^https?:\/\//, '')} + + +
{text.fullAddress(contact.address, contact.city)}
+ + + ); +} + +/** + * Frequently asked questions as expandable rows. + * @returns {import('react').ReactElement} Section body. + */ +function FaqBody() { + return about.faq.map(({ question, answer }) => ( +
+
+ ));
+}
+
+/**
+ * Open positions.
+ * @returns {import('react').ReactElement} Section body.
+ */
+function CareersBody() {
+ return (
+ {question}
+{answer}
+-
+ {about.careers.map(({ title, note }) => (
+
-
+ {title}
+
{note}
+
+ ))}
+
{text.galleryEmpty}
; + return ( +
+ {ASSETS.gallery.map(({ src, alt }) => (
+ 
+ ))}
+
+ );
+}
+
+/**
+ * Social network links.
+ * @returns {import('react').ReactElement} Section body.
+ */
+function SocialBody() {
+ return (
+
+ {contact.socials.map(({ id, label, url }) => (
+
+ {label}
+
+ ))}
+
+ );
+}
+
+// Body component for each section key used by InfoSheet.
+export const SECTION_BODIES = {
+ about: AboutBody,
+ contact: ContactBody,
+ address: AddressBody,
+ faq: FaqBody,
+ careers: CareersBody,
+ gallery: GalleryBody,
+ social: SocialBody,
+};
diff --git a/src/pages/game/startScreen/InfoSheet.jsx b/src/pages/game/startScreen/InfoSheet.jsx
new file mode 100644
index 0000000..b4f641d
--- /dev/null
+++ b/src/pages/game/startScreen/InfoSheet.jsx
@@ -0,0 +1,49 @@
+import { useEffect, useRef } from 'react';
+import { strings } from '@/i18n/fa.js';
+import { StartIcon } from './StartIcon.jsx';
+import { SECTION_BODIES } from './InfoSectionContent.jsx';
+
+/** @typedef {{section: string | null, onClose: function}} InfoSheetProps */
+/**
+ * Shows one company information section in a modal sheet (bottom sheet on phones).
+ * @param {InfoSheetProps} props - Open section key, or null when closed, and the close callback.
+ * @returns {import('react').ReactElement} Native dialog.
+ */
+export function InfoSheet({ section, onClose }) {
+ const dialog = useRef(null);
+ const Body = SECTION_BODIES[section];
+ const title = section === 'about' ? strings.landing.history : strings.landing.sections[section];
+
+ // The native dialog gives focus trapping and Escape handling; keep it in step with `section`.
+ useEffect(() => {
+ const element = dialog.current;
+ if (!element) return;
+ if (section && !element.open) element.showModal();
+ if (!section && element.open) element.close();
+ }, [section]);
+
+ return (
+ }
+
+ );
+}
diff --git a/src/pages/game/startScreen/StartIcon.jsx b/src/pages/game/startScreen/StartIcon.jsx
new file mode 100644
index 0000000..1be993e
--- /dev/null
+++ b/src/pages/game/startScreen/StartIcon.jsx
@@ -0,0 +1,40 @@
+// Simple line icons (24 × 24, stroke drawn in currentColor) for the start screen.
+const PATHS = {
+ pin: 'M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21zm0-9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z',
+ play: 'M7 5l12 7-12 7z',
+ building: 'M4 21V8l8-4 8 4v13M9 21v-6h6v6M8 10h.01M12 10h.01M16 10h.01',
+ grid: 'M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z',
+ phone:
+ 'M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z',
+ map: 'M9 4l6 2 5-2v16l-5 2-6-2-5 2V6zM9 4v16M15 6v16',
+ help: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6V14M12 17h.01',
+ briefcase: 'M4 8h16v11H4zM9 8V5h6v3M4 13h16',
+ image: 'M4 5h16v14H4zM4 16l5-5 4 4 3-3 4 4M15 9h.01',
+ share:
+ 'M18 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM18 22a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM8.6 13.5l6.8 4M15.4 6.5l-6.8 4',
+ close: 'M6 6l12 12M18 6L6 18',
+ download: 'M12 4v11M7 10l5 5 5-5M5 20h14',
+};
+
+/** @typedef {{name: keyof typeof PATHS, className?: string}} StartIconProps */
+/**
+ * Draws one start-screen icon; decorative, so hidden from screen readers.
+ * @param {StartIconProps} props - Icon name and classes.
+ * @returns {import('react').ReactElement} SVG icon.
+ */
+export function StartIcon({ name, className = 'h-6 w-6' }) {
+ return (
+
+ );
+}
diff --git a/src/pages/game/startScreen/StartOptions.jsx b/src/pages/game/startScreen/StartOptions.jsx
new file mode 100644
index 0000000..106a736
--- /dev/null
+++ b/src/pages/game/startScreen/StartOptions.jsx
@@ -0,0 +1,47 @@
+import { strings } from '@/i18n/fa.js';
+import { StartIcon } from './StartIcon.jsx';
+
+// The four ways into the game, in display order, with their icons.
+const OPTIONS = [
+ { mode: 'real', icon: 'pin' },
+ { mode: 'offline', icon: 'play' },
+ { mode: 'about', icon: 'building' },
+ { mode: 'products', icon: 'grid' },
+];
+
+/** @typedef {{actions: object}} StartOptionsProps */
+/**
+ * Shows the main start buttons. Real-world play goes through the safety notice first.
+ * @param {StartOptionsProps} props - Interface actions.
+ * @returns {import('react').ReactElement} Button grid.
+ */
+export function StartOptions({ actions }) {
+ /**
+ * Starts the game in a mode.
+ * @param {string} mode - Start mode.
+ */
+ const handleStart = (mode) =>
+ mode === 'real' ? actions.emit('real-mode') : actions.emit('start', mode);
+
+ return (
+
+ );
+}
diff --git a/src/pages/game/startScreen/StartScreen.jsx b/src/pages/game/startScreen/StartScreen.jsx
new file mode 100644
index 0000000..5c217cf
--- /dev/null
+++ b/src/pages/game/startScreen/StartScreen.jsx
@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import { GameNode } from '@/components/shared/GameNode.jsx';
+import { COMPANY } from '@/config/company.js';
+import { ASSETS } from '@/config/assets.js';
+import { strings } from '@/i18n/fa.js';
+import { StartIcon } from './StartIcon.jsx';
+import { StartOptions } from './StartOptions.jsx';
+import { InfoSheet } from './InfoSheet.jsx';
+
+// Company information links under the start buttons, with their icons.
+const SECTIONS = [
+ ['about', 'building'],
+ ['contact', 'phone'],
+ ['address', 'map'],
+ ['faq', 'help'],
+ ['careers', 'briefcase'],
+ ['gallery', 'image'],
+ ['social', 'share'],
+];
+
+/** @typedef {{nodes: object, actions: object}} StartScreenProps */
+/**
+ * Landing-page style start screen over the slowly orbiting 3D factory: brand, the four ways
+ * into the game, and the company information a website would normally show.
+ * @param {StartScreenProps} props - Interface snapshots and actions.
+ * @returns {import('react').ReactElement} Start screen.
+ */
+export function StartScreen({ nodes, actions }) {
+ const [section, setSection] = useState(null);
+ const text = strings.landing;
+
+ return (
+
+
+ 
+
+
+
+
+ {COMPANY.shortName}
+{COMPANY.tagline}
+
+
+ + {text.heading} +
+{text.intro}
+{text.keys}
+