/* global React, ReactDOM, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle, useTweaks */
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "cream",
  "accent": "#f0b429",
  "lang": "en",
  "showGrain": true,
  "showBinary": true
}/*EDITMODE-END*/;

// ───────────────────────────── Bean × Code Logo ─────────────────────────────
function BeanLogo({ size = 36, color = "var(--brand)", accent = "var(--accent)", binary = "#4ec3d6" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" aria-hidden="true">
      <defs>
        <clipPath id="beanClip">
          <ellipse cx="24" cy="24" rx="14" ry="19" />
        </clipPath>
      </defs>
      <g transform="rotate(15 24 24)">
        <ellipse cx="24" cy="24" rx="14" ry="19" fill={color} stroke={accent} strokeWidth="1.6" />
        <g clipPath="url(#beanClip)" fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontSize="3.4" fontWeight="700" fill={binary} opacity="0.7">
          <text x="14" y="13" textAnchor="middle">1010</text>
          <text x="14" y="17" textAnchor="middle">0101</text>
          <text x="14" y="35" textAnchor="middle">0101</text>
          <text x="14" y="39" textAnchor="middle">1010</text>
          <text x="34" y="13" textAnchor="middle">0101</text>
          <text x="34" y="17" textAnchor="middle">1010</text>
          <text x="34" y="35" textAnchor="middle">1010</text>
          <text x="34" y="39" textAnchor="middle">0101</text>
        </g>
        <path
          d="M 24 5 C 20 13, 28 22, 24 24 C 20 26, 28 35, 24 43"
          stroke={accent}
          strokeWidth="1.8"
          strokeLinecap="round"
          fill="none"
        />
      </g>
      <g fill="none" stroke={accent} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
        <polyline points="20,17 13.5,24 20,31" />
        <polyline points="28,17 34.5,24 28,31" />
      </g>
    </svg>
  );
}

function Wordmark({ size = 40, showTagline = true, lang = "en" }) {
  const tagline = lang === "ar" ? "نُحمِّص الكود" : "Brewing Code";
  return (
    <div className="wordmark">
      <BeanLogo size={size} />
      <div className="wordmark-stack">
        <span className="wordmark-text">Techiato</span>
        {showTagline && <span className="wordmark-tagline">{tagline}</span>}
      </div>
    </div>
  );
}

// ───────────────────────────── Mug SVG (about anchor) ─────────────────────────────
// Heavy ceramic Cairo cup, half full, steam tracing a code bracket as it rises.
// Uses brand stroke language: amber outline, navy fill, thick rounded line caps.
function MugSVG() {
  return (
    <svg
      className="about-mug-svg"
      viewBox="0 0 520 560"
      role="img"
      aria-label="A heavy ceramic coffee cup, full, with steam rising and a code-bracket bean emblem on the front."
    >
      <defs>
        <clipPath id="mugBody2">
          <path d="M 110 215 Q 110 200 130 200 L 350 200 Q 370 200 370 215 L 370 410 Q 370 472 310 478 L 170 478 Q 110 472 110 410 Z" />
        </clipPath>
      </defs>

      {/* Steam: three calm trails */}
      <g stroke="var(--terra)" strokeWidth="3.6" strokeLinecap="round" fill="none" opacity="0.9">
        <path className="steam s1" d="M 178 170 C 168 150, 196 132, 186 108 C 178 88, 200 70, 192 50" />
        <path className="steam s2" d="M 240 170 C 230 148, 264 130, 254 106 C 244 84, 268 68, 258 44" />
        <path className="steam s3" d="M 302 170 C 292 150, 320 132, 310 110 C 302 90, 322 72, 314 52" />
      </g>

      {/* Saucer: ellipse + lip */}
      <ellipse cx="240" cy="520" rx="180" ry="16" fill="var(--paper-2)" stroke="var(--accent)" strokeWidth="2.4" />
      <ellipse cx="240" cy="508" rx="158" ry="10" fill="var(--paper)" stroke="var(--accent)" strokeWidth="1.4" opacity="0.55" />

      {/* Mug body: navy fill, amber outline, gentle taper, rounded base */}
      <path
        d="M 110 215 Q 110 200 130 200 L 350 200 Q 370 200 370 215 L 370 410 Q 370 472 310 478 L 170 478 Q 110 472 110 410 Z"
        fill="var(--ink)"
        stroke="var(--accent)"
        strokeWidth="3"
        strokeLinejoin="round"
      />

      {/* Coffee fill: breathing roadmap-processing animation */}
      <g clipPath="url(#mugBody2)">
        <g className="mug-fill">
          <rect x="100" y="232" width="280" height="260" fill="#2a180c" />
          <ellipse cx="240" cy="234" rx="128" ry="10" fill="color-mix(in oklab, var(--accent) 55%, #5a3018)" opacity="0.85" />
          <ellipse className="mug-crema" cx="240" cy="232" rx="110" ry="4" fill="color-mix(in oklab, var(--accent) 80%, #6a3a18)" opacity="0.65" />
        </g>
        {/* Rising brew bubble that climbs and dissolves at the meniscus */}
        <g className="mug-bubbles">
          <circle className="mug-bubble b1" cx="184" cy="460" r="3" fill="color-mix(in oklab, var(--accent) 60%, #4a2814)" />
          <circle className="mug-bubble b2" cx="240" cy="460" r="2.4" fill="color-mix(in oklab, var(--accent) 50%, #4a2814)" />
          <circle className="mug-bubble b3" cx="298" cy="460" r="2.8" fill="color-mix(in oklab, var(--accent) 70%, #4a2814)" />
        </g>
      </g>

      {/* Rim — open top, thin amber ring, dark interior */}
      <ellipse cx="240" cy="208" rx="130" ry="18" fill="var(--paper)" stroke="var(--accent)" strokeWidth="2.6" />
      <ellipse cx="240" cy="208" rx="116" ry="10" fill="#0d0703" opacity="0.92" />
      <ellipse cx="240" cy="206" rx="116" ry="10" fill="none" stroke="var(--accent)" strokeWidth="1.2" opacity="0.5" />

      {/* Handle: chunky navy ring, amber outline */}
      <path
        d="M 370 256 C 444 256, 458 312, 442 350 C 426 388, 388 388, 370 376"
        fill="none"
        stroke="var(--ink)"
        strokeWidth="28"
        strokeLinecap="round"
      />
      <path
        d="M 370 256 C 444 256, 458 312, 442 350 C 426 388, 388 388, 370 376"
        fill="none"
        stroke="var(--accent)"
        strokeWidth="2.6"
        strokeLinecap="round"
      />
      {/* Handle inner highlight */}
      <path
        d="M 382 274 C 432 274, 442 314, 430 344 C 418 372, 392 372, 382 366"
        fill="none"
        stroke="var(--paper)"
        strokeWidth="3"
        strokeLinecap="round"
        opacity="0.22"
      />

      {/* Amber emblem on front: bean silhouette + code-bracket pair */}
      <g transform="translate(240 348)">
        {/* bean outline */}
        <g transform="rotate(14)">
          <ellipse cx="0" cy="0" rx="44" ry="62" fill="none" stroke="var(--accent)" strokeWidth="3" opacity="0.95" />
          <path
            d="M 0 -52 C -7 -28, 9 -8, 0 4 C -8 14, 9 36, 0 56"
            fill="none"
            stroke="var(--accent)"
            strokeWidth="2.4"
            strokeLinecap="round"
            opacity="0.9"
          />
        </g>
        {/* code brackets centered */}
        <g fill="none" stroke="var(--accent)" strokeWidth="5.4" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="-12,-14 -26,0 -12,14" />
          <polyline points="12,-14 26,0 12,14" />
        </g>
      </g>

      {/* base shadow under saucer */}
      <ellipse cx="240" cy="536" rx="142" ry="6" fill="color-mix(in oklab, var(--ink) 12%, transparent)" />
    </svg>
  );
}

// ───────────────────────────── Hero brand emblem (real logo image) ─────────────────────────────
function HeroBrandMark({ t }) {
  const alt = t.dir === "rtl" ? "تكياتو — برمجيات قوية ومُركّزة" : "Techiato — Powerful, focused software";
  return (
    <div className="hero-mark">
      <img
        className="hero-mark-img"
        src="./assets/techiato-logo.png"
        alt={alt}
        width="900"
        height="909"
        loading="eager"
        decoding="async"
      />
    </div>
  );
}

// ───────────────────────────── Service glyphs (terracotta line marks) ─────────────────────────────
// AR-safe: pure geometric, no Latin letters or `</>` glyphs.
function GlyphStrategy() {
  return (
    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="32" cy="32" r="22" />
      <circle cx="32" cy="32" r="11" />
      <line x1="32" y1="6" x2="32" y2="18" />
      <line x1="32" y1="46" x2="32" y2="58" />
      <line x1="6" y1="32" x2="18" y2="32" />
      <line x1="46" y1="32" x2="58" y2="32" />
      <circle cx="32" cy="32" r="2.4" fill="currentColor" />
    </svg>
  );
}
function GlyphBuild() {
  return (
    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="8" y="14" width="48" height="36" rx="3" />
      <line x1="8" y1="22" x2="56" y2="22" />
      <circle cx="14" cy="18" r="1.4" fill="currentColor" />
      <circle cx="20" cy="18" r="1.4" fill="currentColor" />
      <circle cx="26" cy="18" r="1.4" fill="currentColor" />
      <polyline points="18,30 14,36 18,42" />
      <polyline points="30,30 34,36 30,42" />
      <line x1="40" y1="29" x2="46" y2="43" />
    </svg>
  );
}
function GlyphQuality() {
  return (
    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M 32 6 L 54 16 V 30 C 54 44, 44 54, 32 58 C 20 54, 10 44, 10 30 V 16 Z" />
      <polyline points="22,32 30,40 44,24" />
    </svg>
  );
}
function GlyphAI() {
  return (
    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="14" cy="20" r="4" />
      <circle cx="50" cy="20" r="4" />
      <circle cx="32" cy="44" r="4" />
      <circle cx="14" cy="48" r="3" />
      <circle cx="50" cy="48" r="3" />
      <line x1="18" y1="20" x2="46" y2="20" />
      <line x1="14" y1="24" x2="32" y2="40" />
      <line x1="50" y1="24" x2="32" y2="40" />
      <line x1="14" y1="24" x2="14" y2="45" />
      <line x1="50" y1="24" x2="50" y2="45" />
      <line x1="32" y1="48" x2="14" y2="51" strokeDasharray="2 3" />
      <line x1="32" y1="48" x2="50" y2="51" strokeDasharray="2 3" />
    </svg>
  );
}
const SERVICE_GLYPHS = [GlyphStrategy, GlyphBuild, GlyphQuality, GlyphAI];

// ───────────────────────────── Copy ─────────────────────────────
const COPY = {
  en: {
    dir: "ltr",
    nav: [
      { label: "Work", href: "#work" },
      { label: "Services", href: "#services" },
      { label: "Process", href: "#process" },
      { label: "Product", href: "#product" },
      { label: "Contact", href: "#contact" },
    ],
    cta: "Get in touch",
    heroEyebrow: "Software studio · Cairo + MENA",
    heroTitle: "Brewing code,",
    heroTitle2: "shipping software.",
    heroLead:
      "We build serious software, fast. A lean Cairo studio shipping production-grade web and mobile products for MENA founders and teams, usually in weeks, not quarters.",
    heroPrimary: "See our services",
    heroSecondary: "How we work",
    marquee: ["Cairo", "Riyadh", "Dubai", "Amman", "Casablanca", "Beirut", "Doha"],
    aboutEyebrow: "01 — Studio",
    aboutTitle: "Small team. Sharp output.",
    aboutBody:
      "Techiato fuses technology and macchiato: strong, deliberate, finished with care. A founder-led team in Egypt that moves fast without cutting corners. Senior hands on every line of code, no agency layers, no hand-offs. You talk to the people building your product.",
    aboutStats: [
      { v: "2–6w", l: "Typical MVP timeline" },
      { v: "EN/AR", l: "Bilingual by default" },
      { v: "MENA", l: "Region we serve" },
    ],
    aboutStatus: "Roadmap brewing",
    aboutStatusNote: "Live: pricing, retainer, and a public roadmap are in production.",
    workEyebrow: "02 — Work",
    workTitle: "Built and running.",
    workLead:
      "A short look at what we have shipped across MENA in the last twelve months. Some names are blurred at the founder's request; every number is real and verifiable on call.",
    workRailLabel: "Recent projects",
    works: [
      {
        kind: "logistics",
        name: "Madda",
        sector: "Last-mile dispatch",
        region: "Riyadh",
        year: "2025",
        outcome: "Rebuilt the batching engine and dispatcher console; routing time on a 400-stop day dropped from 22 minutes to under 5.",
        metric: "4.3× faster routing",
        scope: "Web + iOS · 7 weeks",
      },
      {
        kind: "fintech",
        name: "Qahwah Lab",
        sector: "SME invoice factoring",
        region: "Cairo",
        year: "2024",
        outcome: "Bilingual onboarding flow with KYC, e-signature, and instant credit scoring. Twelve hundred SMEs through the door in the first quarter.",
        metric: "1.2k SMEs onboarded",
        scope: "Web + Android · 9 weeks",
      },
      {
        kind: "healthtech",
        name: "Bayan Health",
        sector: "Clinic booking",
        region: "Amman",
        year: "2025",
        outcome: "Patient booking and reminders across thirty clinics; replaced a WhatsApp-and-paper system. No-show rate halved in eight weeks.",
        metric: "60% fewer no-shows",
        scope: "Mobile-first web · 5 weeks",
      },
      {
        kind: "consumer",
        name: "Soura",
        sector: "Photo marketplace",
        region: "Dubai",
        year: "2024",
        outcome: "Two-sided iOS app from zero to App Store. Photographers list, brands license, payments settle in a working day.",
        metric: "Live in 6 weeks",
        scope: "iOS + admin · 6 weeks",
      },
      {
        kind: "ai",
        name: "Tala AI",
        sector: "Support agent",
        region: "Beirut",
        year: "2025",
        outcome: "Multilingual retrieval-backed agent answering EN, AR, and FR support tickets against a live knowledge base. Quiet handoff to humans when it shouldn't guess.",
        metric: "73% tickets auto-resolved",
        scope: "Web + API · 8 weeks",
      },
    ],
    servicesEyebrow: "03 — Services",
    servicesTitle: "What we ship.",
    servicesHint: "Pick a service",
    servicesDeliverables: "Deliverables",
    servicesTimeline: "Timeline",
    services: [
      {
        n: "01",
        t: "Product strategy",
        short: "Idea to scoped plan.",
        d: "From idea to a scoped, buildable plan. One week of discovery, a clear roadmap, a price you can sign off on. No grand decks — a working brief you'd hand a senior team.",
        deliverables: ["Discovery sprint", "Scoped roadmap", "Pricing + timeline"],
        timeline: "1 week",
      },
      {
        n: "02",
        t: "Design and engineering",
        short: "End-to-end web + mobile.",
        d: "Production-grade web and mobile builds. Bilingual EN/AR baked in, responsive, accessible, deployed. Senior designers and engineers on the same call, shipping weekly.",
        deliverables: ["Design system", "Web + mobile build", "Deploy + handover"],
        timeline: "4–10 weeks",
      },
      {
        n: "03",
        t: "QA and support",
        short: "Keep it running.",
        d: "Automated and manual QA, release testing, and on-call support as a service. Your team ships; we keep it running. Bug triage, incident response, quiet fixes.",
        deliverables: ["Test coverage", "Release QA", "On-call retainer"],
        timeline: "Monthly",
      },
      {
        n: "04",
        t: "AI integrations",
        short: "Agents wired into real work.",
        d: "Agents, retrieval, and AI tooling wired into real workflows. Evaluation harness from day one, measurable in production, falls back gracefully when it shouldn't guess.",
        deliverables: ["Agent design", "Retrieval + evals", "Production handoff"],
        timeline: "3–6 weeks",
      },
    ],
    processEyebrow: "04 — Process",
    processTitle: "How we move fast.",
    process: [
      { n: "I", t: "Brief", d: "One structured call. We pin down scope, budget, and deadline before we touch code.", g: "call" },
      { n: "II", t: "Shape", d: "Strategy and design in parallel. Working prototypes inside a week, no slideware.", g: "sketch" },
      { n: "III", t: "Build", d: "Engineering and design ship together. Weekly demos, real software in your hands.", g: "ship" },
      { n: "IV", t: "Pour", d: "Launch, measure, iterate. We stay on for the second cup: support and growth.", g: "pour" },
    ],
    productEyebrow: "05 — In development",
    productKicker: "First cup",
    productTitle: "Our first product is brewing.",
    productBody:
      "Built for how teams in the region actually work: fast, bilingual, opinionated. One quiet update when we pour.",
    productPlaceholder: "you@company.com",
    productCta: "Join the waitlist",
    productNote: "One quiet update when we ship.",
    productAside:
      "Drop a line and we will write to you when the first cup is poured.",
    waitlistSent: "On the list. We will write when it ships.",
    contactEyebrow: "06 — Contact",
    contactTitle: "Let's talk.",
    contactBody: "Tell us what you're building. We'll send a one-page response with scope, timeline, and a number you can plan around.",
    contactPromise: "Reply within three working days",
    contactEmail: "techiato2026@gmail.com",
    contactCta: "Send us a brief",
    footerTagline: "Strong software. Shipped fast.",
    footerLinks: ["Work", "Services", "Careers", "Privacy"],
    footerCity: "Cairo · Egypt",
    footerYear: "© 2026 Techiato Studio",
  },
  ar: {
    dir: "rtl",
    nav: [
      { label: "أعمالنا", href: "#work" },
      { label: "خدماتنا", href: "#services" },
      { label: "منهجيتنا", href: "#process" },
      { label: "المنتج", href: "#product" },
      { label: "تواصل", href: "#contact" },
    ],
    cta: "ابدأ مشروعك",
    heroEyebrow: "استوديو برمجيات · القاهرة ومنطقة الشرق الأوسط",
    heroTitle: "نُحمِّص الكود،",
    heroTitle2: "ونُطلق البرمجيات.",
    heroLead:
    "نبني برمجيات جادّة بسرعة. استوديو في القاهرة يطلق منتجات ويب وموبايل جاهزة للإنتاج لمؤسّسي وفرق المنطقة، بأسابيع لا أرباع سنة.",
    heroPrimary: "تعرّف على خدماتنا",
    heroSecondary: "كيف نعمل",
    marquee: ["القاهرة", "الرياض", "دبي", "عمّان", "الدار البيضاء", "بيروت", "الدوحة"],
    aboutEyebrow: "٠١ — الاستوديو",
    aboutTitle: "فريق صغير. مخرجات حادّة.",
    aboutBody:
    "تكياتو: دقة التكنولوجيا، بتركيز الماكياتو.:برمجيات قوية ومُركّزة. فريق مصري من المهندسين الخبراء يقدم لك منتجك بسرعة وبلا وسطاء. لا توجد طبقات إدارية؛ أنت تتواصل مباشرة مع من يكتب الكود ويبني رؤيتك",
    aboutStats: [
      { v: "٢–٦ أسابيع", l: "زمن إطلاق MVP المعتاد" },
      { v: "EN/AR", l: "ثنائي اللغة افتراضيًا" },
      { v: "MENA", l: "المنطقة التي نخدمها" },
    ],
    aboutStatus: "خارطة الطريق تتحمّص",
    aboutStatusNote: "حيّ: التسعير والعقد الشهري وخارطة طريق علنية قيد التحضير.",
    workEyebrow: "٠٢ — أعمالنا",
    workTitle: "بُني، ويعمل الآن.",
    workLead:
      "نظرة قصيرة على ما أطلقناه في المنطقة خلال آخر اثني عشر شهرًا. بعض الأسماء أُخفيت بطلب المؤسّسين؛ أمّا الأرقام فحقيقيّة وقابلة للتحقّق على المكالمة.",
    workRailLabel: "مشاريع حديثة",
    works: [
      {
        kind: "logistics",
        name: "Madda",
        sector: "إرسال الميل الأخير",
        region: "الرياض",
        year: "٢٠٢٥",
        outcome: "أعدنا بناء محرّك التجميع ولوحة المُرسِل؛ زمن توجيه ٤٠٠ نقطة هبط من ٢٢ دقيقة إلى أقلّ من ٥.",
        metric: "أسرع ٤٫٣×",
        scope: "ويب + iOS · ٧ أسابيع",
      },
      {
        kind: "fintech",
        name: "قهوة لاب",
        sector: "تخصيم فواتير المنشآت الصغيرة",
        region: "القاهرة",
        year: "٢٠٢٤",
        outcome: "تدفّق تسجيل ثنائي اللغة مع KYC وتوقيع إلكتروني وتسجيل ائتمان فوري. ١٢٠٠ منشأة دخلت في الربع الأول.",
        metric: "١٢٠٠ منشأة",
        scope: "ويب + أندرويد · ٩ أسابيع",
      },
      {
        kind: "healthtech",
        name: "بيان هيلث",
        sector: "حجوزات العيادات",
        region: "عمّان",
        year: "٢٠٢٥",
        outcome: "حجوزات وتذكيرات لثلاثين عيادة؛ بديل لنظام واتساب-وورق. الغياب انخفض إلى النصف خلال ثمانية أسابيع.",
        metric: "غياب أقلّ ٦٠٪",
        scope: "ويب موبايل-أوّلاً · ٥ أسابيع",
      },
      {
        kind: "consumer",
        name: "صورة",
        sector: "متجر صور",
        region: "دبي",
        year: "٢٠٢٤",
        outcome: "تطبيق iOS من الصفر إلى المتجر. مصوّرون يعرضون، علامات تُرخِّص، مدفوعات تُسوَّى في يوم عمل.",
        metric: "إطلاق خلال ٦ أسابيع",
        scope: "iOS + لوحة إدارة · ٦ أسابيع",
      },
      {
        kind: "ai",
        name: "تالا AI",
        sector: "وكيل دعم",
        region: "بيروت",
        year: "٢٠٢٥",
        outcome: "وكيل متعدّد اللغات بالاسترجاع يُجيب على تذاكر EN وAR وFR من قاعدة معرفة حيّة، ويُسلّم بهدوء حين لا ينبغي التخمين.",
        metric: "٧٣٪ تُحلّ تلقائيًّا",
        scope: "ويب + API · ٨ أسابيع",
      },
    ],
    servicesEyebrow: "٠٣ — الخدمات",
    servicesTitle: "ما الذي نُطلقه.",
    servicesHint: "اختر خدمة",
    servicesDeliverables: "ما نُسلِّمه",
    servicesTimeline: "المدّة",
    services: [
      {
        n: "٠١",
        t: "استراتيجية المنتج",
        short: "من الفكرة إلى خطّة.",
        d: "من الفكرة إلى خطّة قابلة للبناء. أسبوع اكتشاف، خارطة طريق واضحة، وسعر يمكنك توقيعه. لا عروض كبيرة — موجز عمل تُسلّمه لفريق كبير.",
        deliverables: ["جلسة اكتشاف", "خارطة طريق", "تسعير وزمن"],
        timeline: "أسبوع",
      },
      {
        n: "٠٢",
        t: "التصميم والهندسة",
        short: "بناء كامل للويب والموبايل.",
        d: "بناء جاهز للإنتاج. ثنائي اللغة EN/AR، متجاوب، سهل الوصول، منشور. مصمّمون ومهندسون كبار على نفس المكالمة، يُطلقون أسبوعيًّا.",
        deliverables: ["نظام تصميم", "بناء ويب + موبايل", "نشر وتسليم"],
        timeline: "٤–١٠ أسابيع",
      },
      {
        n: "٠٣",
        t: "ضمان الجودة والدعم",
        short: "نُبقيه يعمل.",
        d: "اختبارات آلية ويدوية، اختبار الإصدارات، ودعم تشغيلي كخدمة. فريقك يُطلق، ونحن نُبقي المنتج يعمل. فرز أخطاء، استجابة حوادث، إصلاحات هادئة.",
        deliverables: ["تغطية اختبارات", "اختبار إصدارات", "دعم بعقد شهري"],
        timeline: "شهري",
      },
      {
        n: "٠٤",
        t: "تكاملات الذكاء الاصطناعي",
        short: "وكلاء داخل عمل حقيقي.",
        d: "وكلاء واسترجاع وأدوات ذكاء اصطناعي داخل سير عمل حقيقي. منظومة تقييم من اليوم الأول، قابلة للقياس في الإنتاج، تتراجع بهدوء حين لا ينبغي التخمين.",
        deliverables: ["تصميم وكيل", "استرجاع وتقييم", "تسليم للإنتاج"],
        timeline: "٣–٦ أسابيع",
      },
    ],
    processEyebrow: "٠٤ — المنهجية",
    processTitle: "كيف نتحرّك بسرعة.",
    process: [
      { n: "I", t: "النشرة", d: "مكالمة واحدة مُرتَّبة. نُحدّد النطاق والميزانية والموعد قبل لمس الكود.", g: "call" },
      { n: "II", t: "التشكيل", d: "استراتيجية وتصميم بالتوازي. نماذج تفاعلية شغّالة خلال أسبوع، لا شرائح.", g: "sketch" },
      { n: "III", t: "البناء", d: "الهندسة والتصميم يُطلقان معًا. عروض أسبوعية، برمجيات حقيقية بين يديك.", g: "ship" },
      { n: "IV", t: "الصبّ", d: "إطلاق، قياس، تحسين. نبقى للفنجان الثاني: دعم ونمو.", g: "pour" },
    ],
    productEyebrow: "٠٥ — قيد التطوير",
    productKicker: "الفنجان الأوّل",
    productTitle: "منتجنا الأول قيد التحميص.",
    productBody: "مصمَّم لطريقة عمل فرق المنطقة فعلًا: سريع، ثنائي اللغة، صريح. تحديث هادئ واحد عند الصبّ.",
    productPlaceholder: "you@company.com",
    productCta: "انضم لقائمة الانتظار",
    productNote: "تحديث هادئ واحد عند الإطلاق.",
    productAside: "اكتب لنا، وسنرسل لك حين يُسكب الفنجان الأول.",
    waitlistSent: "أنت على القائمة. سنكتب لك عند الإطلاق.",
    contactEyebrow: "٠٦ — تواصل",
    contactTitle: "لنتحدث.",
    contactBody: "أخبرنا بما تبنيه. سنردّ بصفحة واحدة فيها النطاق والمدة ورقم تستطيع التخطيط حوله.",
    contactPromise: "ردّ خلال ثلاثة أيام عمل",
    contactEmail: "techiato2026@gmail.com",
    contactCta: "أرسل لنا ملخّصًا",
    footerTagline: "برمجيات قويّة. تُطلق بسرعة.",
    footerLinks: ["أعمالنا", "خدماتنا", "وظائف", "الخصوصية"],
    footerCity: "القاهرة · مصر",
    footerYear: "© ٢٠٢٦ استوديو تكياتو",
  },
};

// ───────────────────────────── Sections ─────────────────────────────
function LangToggle({ lang, onChange }) {
  return (
    <div className="lang-toggle" role="group" aria-label="Language">
      <button
        type="button"
        className={`lang-opt ${lang === "en" ? "is-active" : ""}`}
        aria-pressed={lang === "en"}
        onClick={() => onChange("en")}
      >
        EN
      </button>
      <span className="lang-sep" aria-hidden>/</span>
      <button
        type="button"
        className={`lang-opt ${lang === "ar" ? "is-active" : ""}`}
        aria-pressed={lang === "ar"}
        onClick={() => onChange("ar")}
      >
        ع
      </button>
    </div>
  );
}

function Nav({ t, onMenu, menuOpen, lang, onLangChange }) {
  return (
    <header className="nav" data-screen-label="Nav">
      <a className="nav-brand" href="#top" aria-label="Techiato — Brewing Code">
        <Wordmark size={44} lang={lang} />
      </a>
      <nav className="nav-links" aria-label="Primary">
        {t.nav.map((item, i) => (
          <a key={i} href={item.href}>{item.label}</a>
        ))}
      </nav>
      <div className="nav-tail">
        <LangToggle lang={lang} onChange={onLangChange} />
        <a href="#contact" className="nav-cta">{t.cta} <span aria-hidden>→</span></a>
      </div>
      <button
        className="nav-menu"
        aria-label="menu"
        aria-expanded={menuOpen}
        onClick={onMenu}
      >
        <span /><span /><span />
      </button>
    </header>
  );
}

function MobileMenu({ open, t, onClose, lang, onLangChange }) {
  return (
    <div className={`mobile-menu ${open ? "open" : ""}`} aria-hidden={!open}>
      <div className="mobile-menu-top">
        <Wordmark size={40} lang={lang} />
        <button className="mobile-close" aria-label="close" onClick={onClose}>×</button>
      </div>
      <nav className="mobile-links" aria-label="Mobile">
        {t.nav.map((item, i) => (
          <a key={i} href={item.href} onClick={onClose}>
            <span className="mobile-num">{String(i + 1).padStart(2, "0")}</span>
            {item.label}
          </a>
        ))}
      </nav>
      <div className="mobile-tail">
        <LangToggle lang={lang} onChange={onLangChange} />
        <a href="#contact" className="mobile-cta" onClick={onClose}>
          {t.cta} <span aria-hidden>→</span>
        </a>
      </div>
    </div>
  );
}

function Hero({ t }) {
  return (
    <section className="hero" id="top" data-screen-label="Hero">
      <div className="hero-eyebrow">
        <span className="dot" /> {t.heroEyebrow}
      </div>
      <h1 className="hero-title">
        <span className="hero-line">
          <span className="code-bracket">&lt;</span>
          {t.heroTitle}
        </span>
        <span className="hero-line italic">
          {t.heroTitle2}
          <span className="code-bracket">/&gt;</span>
        </span>
      </h1>
      <HeroBrandMark t={t} />
      <div className="hero-foot">
        <p className="hero-lead">{t.heroLead}</p>
        <div className="hero-ctas">
          <a href="#services" className="btn btn-primary">{t.heroPrimary} <span aria-hidden>→</span></a>
          <a href="#process" className="btn btn-ghost">{t.heroSecondary}</a>
        </div>
      </div>
    </section>
  );
}

function Marquee({ items }) {
  const row = [...items, ...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {row.map((c, i) => (
          <span key={i} className="marquee-item">
            <span className="marquee-bullet">●</span> {c}
          </span>
        ))}
      </div>
    </div>
  );
}

function About({ t }) {
  return (
    <section className="about" id="about" data-screen-label="About">
      <div className="about-mug">
        <MugSVG />
        <div className="mug-status" role="status" aria-live="polite">
          <span className="mug-status-dot" aria-hidden />
          <span className="mug-status-label">{t.aboutStatus}</span>
          <span className="mug-status-note">{t.aboutStatusNote}</span>
        </div>
      </div>
      <div className="about-text">
        <div className="section-eyebrow">{t.aboutEyebrow}</div>
        <h2 className="section-title">{t.aboutTitle}</h2>
        <p className="about-body">{t.aboutBody}</p>
        <div className="stats">
          {t.aboutStats.map((s, i) => (
            <div key={i} className="stat">
              <div className="stat-v">{s.v}</div>
              <div className="stat-l">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────── Work plates (CSS-painted SVG per project kind) ─────────────────────────────
function PlateLogistics() {
  return (
    <svg className="work-plate-svg" viewBox="0 0 600 360" preserveAspectRatio="none" aria-hidden="true">
      <defs>
        <pattern id="dotGrid" width="24" height="24" patternUnits="userSpaceOnUse">
          <circle cx="1.2" cy="1.2" r="1.2" fill="currentColor" opacity="0.18" />
        </pattern>
      </defs>
      <rect width="600" height="360" fill="url(#dotGrid)" />
      <g fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" opacity="0.95">
        <path d="M 40 280 Q 130 160, 240 200 T 420 120 T 560 60" />
        <path d="M 40 320 Q 160 240, 280 260 T 480 200 T 560 140" strokeDasharray="3 5" opacity="0.55" />
      </g>
      <g fill="currentColor">
        <circle cx="40" cy="280" r="5" />
        <circle cx="240" cy="200" r="3.5" opacity="0.7" />
        <circle cx="420" cy="120" r="3.5" opacity="0.7" />
        <circle cx="560" cy="60" r="5" />
      </g>
      <g stroke="currentColor" strokeWidth="1.2" opacity="0.5">
        <line x1="240" y1="200" x2="240" y2="220" />
        <line x1="420" y1="120" x2="420" y2="140" />
      </g>
    </svg>
  );
}
function PlateFintech() {
  const bars = [];
  for (let i = 0; i < 18; i++) {
    const x = 40 + i * 30;
    const open = 180 + Math.sin(i * 0.9) * 36;
    const close = 180 + Math.cos(i * 0.7) * 50;
    const high = Math.min(open, close) - 18 - (i % 3) * 4;
    const low = Math.max(open, close) + 16 + (i % 4) * 3;
    bars.push({ x, open, close, high, low });
  }
  return (
    <svg className="work-plate-svg" viewBox="0 0 600 360" preserveAspectRatio="none" aria-hidden="true">
      <g stroke="currentColor" strokeWidth="1" opacity="0.18">
        <line x1="0" y1="90" x2="600" y2="90" />
        <line x1="0" y1="180" x2="600" y2="180" />
        <line x1="0" y1="270" x2="600" y2="270" />
      </g>
      {bars.map((b, i) => (
        <g key={i}>
          <line x1={b.x} y1={b.high} x2={b.x} y2={b.low} stroke="currentColor" strokeWidth="1" opacity="0.7" />
          <rect
            x={b.x - 7}
            y={Math.min(b.open, b.close)}
            width="14"
            height={Math.abs(b.close - b.open) || 2}
            fill={b.close < b.open ? "currentColor" : "none"}
            stroke="currentColor"
            strokeWidth="1.4"
            opacity="0.92"
          />
        </g>
      ))}
    </svg>
  );
}
function PlateHealthtech() {
  const rows = [];
  for (let r = 0; r < 7; r++) {
    for (let c = 0; c < 11; c++) {
      const filled = (r * 11 + c) % 5 === 0 || (r === 3 && c < 6);
      rows.push({ r, c, filled });
    }
  }
  return (
    <svg className="work-plate-svg" viewBox="0 0 600 360" preserveAspectRatio="none" aria-hidden="true">
      <g stroke="currentColor" strokeWidth="1" opacity="0.6">
        <line x1="30" y1="60" x2="570" y2="60" />
        <line x1="30" y1="320" x2="570" y2="320" />
      </g>
      {rows.map(({ r, c, filled }, i) => {
        const x = 40 + c * 48;
        const y = 80 + r * 34;
        return (
          <g key={i}>
            <rect
              x={x}
              y={y}
              width="36"
              height="22"
              fill={filled ? "currentColor" : "none"}
              stroke="currentColor"
              strokeWidth="1.1"
              opacity={filled ? 0.85 : 0.32}
              rx="2"
            />
          </g>
        );
      })}
      <text x="40" y="55" fill="currentColor" fontFamily="ui-monospace, monospace" fontSize="11" opacity="0.55" letterSpacing="2">
        MON TUE WED THU FRI SAT SUN
      </text>
    </svg>
  );
}
function PlateConsumer() {
  const tiles = [];
  for (let r = 0; r < 4; r++) {
    for (let c = 0; c < 7; c++) {
      const span = (r + c) % 3 === 0 ? 2 : 1;
      tiles.push({ r, c, span, key: `${r}-${c}` });
    }
  }
  return (
    <svg className="work-plate-svg" viewBox="0 0 600 360" preserveAspectRatio="none" aria-hidden="true">
      {tiles.map(({ r, c, span, key }) => {
        const x = 30 + c * 82;
        const y = 30 + r * 80;
        const w = 78 - 6;
        const h = (span === 2 ? 156 : 76) - 6;
        const angle = ((r * 7 + c) % 3 - 1) * 2;
        return (
          <g key={key} transform={`translate(${x} ${y}) rotate(${angle} ${w / 2} ${h / 2})`}>
            <rect width={w} height={h} fill="none" stroke="currentColor" strokeWidth="1.2" opacity="0.7" />
            <line x1="0" y1="0" x2={w} y2={h} stroke="currentColor" strokeWidth="0.8" opacity="0.25" />
            <line x1={w} y1="0" x2="0" y2={h} stroke="currentColor" strokeWidth="0.8" opacity="0.25" />
          </g>
        );
      })}
    </svg>
  );
}
function PlateAI() {
  const nodes = [
    { x: 90, y: 100, r: 8 },
    { x: 200, y: 60, r: 5 },
    { x: 240, y: 180, r: 7 },
    { x: 130, y: 230, r: 5 },
    { x: 340, y: 110, r: 6 },
    { x: 400, y: 230, r: 8 },
    { x: 500, y: 90, r: 5 },
    { x: 520, y: 280, r: 6 },
  ];
  const edges = [
    [0, 1], [0, 2], [0, 3], [1, 4], [2, 4], [2, 5], [3, 5], [4, 6], [5, 7], [4, 5], [1, 2], [6, 7],
  ];
  return (
    <svg className="work-plate-svg" viewBox="0 0 600 360" preserveAspectRatio="none" aria-hidden="true">
      <g stroke="currentColor" strokeWidth="1" opacity="0.45">
        {edges.map(([a, b], i) => (
          <line key={i} x1={nodes[a].x} y1={nodes[a].y} x2={nodes[b].x} y2={nodes[b].y} />
        ))}
      </g>
      <g fill="currentColor">
        {nodes.map((n, i) => (
          <circle key={i} cx={n.x} cy={n.y} r={n.r} opacity={0.9 - (i % 3) * 0.15} />
        ))}
      </g>
      <g stroke="currentColor" strokeWidth="0.8" opacity="0.35" strokeDasharray="2 4">
        {nodes.map((n, i) => (
          <circle key={i} cx={n.x} cy={n.y} r={n.r + 8} fill="none" />
        ))}
      </g>
    </svg>
  );
}
const PLATES = {
  logistics: PlateLogistics,
  fintech: PlateFintech,
  healthtech: PlateHealthtech,
  consumer: PlateConsumer,
  ai: PlateAI,
};

function Work({ t }) {
  return (
    <section className="work" id="work" data-screen-label="Work">
      <div className="work-head">
        <div className="section-eyebrow">{t.workEyebrow}</div>
        <h2 className="section-title">{t.workTitle}</h2>
        <p className="work-lead">{t.workLead}</p>
      </div>
      <div
        className="work-rail"
        role="region"
        aria-label={t.workRailLabel}
        tabIndex="0"
      >
        <ol className="work-track">
          {t.works.map((w, i) => {
            const Plate = PLATES[w.kind] || PLATES.logistics;
            return (
              <li
                key={i}
                className={`work-card work-card--${w.kind}`}
                tabIndex="0"
              >
                <div className="work-plate">
                  <Plate />
                  <span className="work-plate-kind">{w.sector}</span>
                </div>
                <div className="work-body">
                  <div className="work-meta">
                    <span className="work-region">{w.region}</span>
                    <span className="work-dot" aria-hidden>·</span>
                    <span className="work-year">{w.year}</span>
                  </div>
                  <h3 className="work-name">{w.name}</h3>
                  <p className="work-outcome">{w.outcome}</p>
                  <div className="work-foot">
                    <span className="work-metric">{w.metric}</span>
                    <span className="work-scope">{w.scope}</span>
                  </div>
                </div>
              </li>
            );
          })}
        </ol>
      </div>
    </section>
  );
}

function Services({ t }) {
  const [active, setActive] = useState(0);
  const current = t.services[active];
  const Glyph = SERVICE_GLYPHS[active] || SERVICE_GLYPHS[0];
  return (
    <section className="services" id="services" data-screen-label="Services">
      <div className="services-head">
        <div className="section-eyebrow">{t.servicesEyebrow}</div>
        <h2 className="section-title">{t.servicesTitle}</h2>
      </div>
      <div className="services-split">
        <ol className="services-index" role="tablist" aria-label={t.servicesHint}>
          {t.services.map((s, i) => (
            <li key={i} className={`services-index-item ${i === active ? "is-active" : ""}`}>
              <button
                type="button"
                role="tab"
                aria-selected={i === active}
                aria-controls={`service-panel-${i}`}
                id={`service-tab-${i}`}
                className="services-index-btn"
                onClick={() => setActive(i)}
                onFocus={() => setActive(i)}
                onMouseEnter={() => setActive(i)}
              >
                <span className="services-index-n">{s.n}</span>
                <span className="services-index-t">{s.t}</span>
                <span className="services-index-short">{s.short}</span>
                <span className="services-index-mark" aria-hidden>→</span>
              </button>
            </li>
          ))}
        </ol>
        <div
          className="services-detail"
          role="tabpanel"
          id={`service-panel-${active}`}
          aria-labelledby={`service-tab-${active}`}
          key={active}
        >
          <div className="services-detail-glyph"><Glyph /></div>
          <h3 className="services-detail-t">{current.t}</h3>
          <p className="services-detail-d">{current.d}</p>
          <div className="services-detail-grid">
            <div>
              <div className="services-detail-label">{t.servicesDeliverables}</div>
              <ul className="services-detail-list">
                {current.deliverables.map((d, i) => (
                  <li key={i}>{d}</li>
                ))}
              </ul>
            </div>
            <div>
              <div className="services-detail-label">{t.servicesTimeline}</div>
              <div className="services-detail-value">{current.timeline}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Step glyphs for Process (call / sketch / ship / pour)
const PROCESS_GLYPHS = {
  call: (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M 10 14 Q 10 8, 16 8 L 20 8 L 24 16 L 20 20 Q 24 28, 32 32 L 36 28 L 44 32 L 44 36 Q 44 42, 38 42 Q 22 42, 10 30 Q 4 22, 10 14 Z" />
    </svg>
  ),
  sketch: (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M 8 38 L 14 32 L 30 16 L 36 22 L 20 38 Z" />
      <path d="M 30 16 L 34 12 L 40 18 L 36 22" />
      <line x1="8" y1="42" x2="40" y2="42" strokeDasharray="2 3" />
    </svg>
  ),
  ship: (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="8" y="14" width="32" height="20" rx="2" />
      <line x1="8" y1="20" x2="40" y2="20" />
      <circle cx="12" cy="17" r="1" fill="currentColor" />
      <circle cx="15" cy="17" r="1" fill="currentColor" />
      <polyline points="18,26 14,28.5 18,31" />
      <polyline points="26,26 30,28.5 26,31" />
      <line x1="34" y1="38" x2="40" y2="38" />
    </svg>
  ),
  pour: (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M 14 18 L 14 32 Q 14 38, 20 38 L 28 38 Q 34 38, 34 32 L 34 18 Z" />
      <ellipse cx="24" cy="18" rx="10" ry="2.4" />
      <path d="M 34 22 Q 40 22, 40 27 Q 40 32, 34 32" />
      <path d="M 22 8 Q 19 12, 22 14" strokeDasharray="1.5 2" opacity="0.7" />
      <path d="M 26 8 Q 29 12, 26 14" strokeDasharray="1.5 2" opacity="0.7" />
    </svg>
  ),
};

function Process({ t }) {
  return (
    <section className="process" id="process" data-screen-label="Process">
      <div className="section-eyebrow">{t.processEyebrow}</div>
      <h2 className="section-title">{t.processTitle}</h2>
      <ol className="process-list">
        {t.process.map((p, i) => (
          <li key={i} className="process-step">
            <div className="process-n">{p.n}</div>
            <div className="process-glyph">{PROCESS_GLYPHS[p.g] || PROCESS_GLYPHS.call}</div>
            <h3>{p.t}</h3>
            <p>{p.d}</p>
          </li>
        ))}
      </ol>
    </section>
  );
}

// Pour-trail decorative SVG for Product band: a continuous amber stream from kicker to capsule.
function PourTrail() {
  return (
    <svg className="product-pour" viewBox="0 0 800 480" fill="none" aria-hidden="true" preserveAspectRatio="none">
      <defs>
        <linearGradient id="pourFade" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0%" stopColor="currentColor" stopOpacity="0" />
          <stop offset="30%" stopColor="currentColor" stopOpacity="0.6" />
          <stop offset="100%" stopColor="currentColor" stopOpacity="0" />
        </linearGradient>
      </defs>
      <path
        d="M 60 80 Q 220 60, 340 160 T 600 280 T 760 400"
        stroke="url(#pourFade)"
        strokeWidth="1.4"
        strokeLinecap="round"
      />
      <path
        d="M 60 110 Q 240 100, 360 200 T 620 320 T 760 430"
        stroke="currentColor"
        strokeWidth="0.8"
        strokeLinecap="round"
        opacity="0.25"
        strokeDasharray="2 4"
      />
      <circle cx="60" cy="80" r="3" fill="currentColor" opacity="0.6" />
      <circle cx="760" cy="400" r="3" fill="currentColor" opacity="0.6" />
    </svg>
  );
}

function Product({ t }) {
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  return (
    <section className="product" id="product" data-screen-label="Product">
      <div className="product-band">
        <PourTrail />
        <div className="product-left">
          <div className="section-eyebrow light">{t.productEyebrow}</div>
          <div className="product-kicker">{t.productKicker}</div>
          <h2 className="product-title">{t.productTitle}</h2>
          <p className="product-body">{t.productBody}</p>
        </div>
        <div className="product-right">
          <div className="product-capsule">
            {sent ? (
              <div className="waitlist-success" role="status">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <polyline points="4,12 10,18 20,6" />
                </svg>
                {t.waitlistSent}
              </div>
            ) : (
              <form
                className="waitlist"
                onSubmit={(e) => {
                  e.preventDefault();
                  if (email) setSent(true);
                }}
              >
                <input
                  type="email"
                  required
                  placeholder={t.productPlaceholder}
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  aria-label={t.productCta}
                />
                <button type="submit">{t.productCta}</button>
              </form>
            )}
            {!sent && <div className="product-note">{t.productNote}</div>}
          </div>
          <p className="product-aside">{t.productAside}</p>
        </div>
      </div>
    </section>
  );
}

function Contact({ t }) {
  return (
    <section className="contact" id="contact" data-screen-label="Contact">
      <div className="section-eyebrow">{t.contactEyebrow}</div>
      <h2 className="contact-title">{t.contactTitle}</h2>
      <div className="contact-grid">
        <div>
          <p className="contact-body">{t.contactBody}</p>
          <div className="contact-promise">{t.contactPromise}</div>
        </div>
        <div className="contact-actions">
          <a className="contact-email" href={`mailto:${t.contactEmail}`}>{t.contactEmail}</a>
          <a className="btn btn-primary contact-cta" href={`mailto:${t.contactEmail}?subject=Brief%20from%20`}>
            {t.contactCta} <span aria-hidden>→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="footer-top">
        <Wordmark />
        <p className="footer-tagline">{t.footerTagline}</p>
      </div>
      <div className="footer-grid">
        <div className="footer-col">
          <ul>
            {t.footerLinks.map((l, i) => (
              <li key={i}><a href="#">{l}</a></li>
            ))}
          </ul>
        </div>
        <div className="footer-col">
          <div>{t.footerCity}</div>
          <a href="mailto:techiato2026@gmail.com">techiato2026@gmail.com</a>
        </div>
        <div className="footer-col">
          <div>{t.footerYear}</div>
        </div>
      </div>
    </footer>
  );
}

// ───────────────────────────── App ─────────────────────────────
function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [menuOpen, setMenuOpen] = useState(false);
  const t = COPY[tweaks.lang] || COPY.en;
  const accent = tweaks.accent;

  useEffect(() => {
    document.documentElement.dir = t.dir;
    document.documentElement.lang = tweaks.lang;
  }, [tweaks.lang, t.dir]);

  // Cross-fade body on language toggle to avoid layout-shift jump
  const prevLang = useRef(tweaks.lang);
  useEffect(() => {
    if (prevLang.current !== tweaks.lang) {
      document.body.classList.add("lang-fading");
      const id = window.setTimeout(() => {
        document.body.classList.remove("lang-fading");
      }, 160);
      prevLang.current = tweaks.lang;
      return () => window.clearTimeout(id);
    }
  }, [tweaks.lang]);

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", accent);
    document.documentElement.dataset.theme = tweaks.theme;
    document.documentElement.dataset.grain = tweaks.showGrain ? "on" : "off";
  }, [accent, tweaks.theme, tweaks.showGrain]);

  return (
    <div className="page">
      <Nav
        t={t}
        onMenu={() => setMenuOpen(true)}
        menuOpen={menuOpen}
        lang={tweaks.lang}
        onLangChange={(v) => setTweak("lang", v)}
      />
      <MobileMenu
        open={menuOpen}
        onClose={() => setMenuOpen(false)}
        t={t}
        lang={tweaks.lang}
        onLangChange={(v) => setTweak("lang", v)}
      />
      <main>
        <Hero t={t} />
        <Marquee items={t.marquee} />
        <About t={t} />
        <Work t={t} />
        <Services t={t} />
        <Process t={t} />
        <Product t={t} />
        <Contact t={t} />
      </main>
      <Footer t={t} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Theme">
          <TweakRadio
            label="Surface"
            value={tweaks.theme}
            options={[
              { value: "cream", label: "Cream" },
              { value: "paper", label: "Paper" },
              { value: "espresso", label: "Espresso" },
            ]}
            onChange={(v) => setTweak("theme", v)}
          />
          <TweakColor label="Accent" value={tweaks.accent} onChange={(v) => setTweak("accent", v)} />
          <TweakToggle label="Paper grain" value={tweaks.showGrain} onChange={(v) => setTweak("showGrain", v)} />
        </TweakSection>
        <TweakSection title="Language">
          <TweakRadio
            label="Direction"
            value={tweaks.lang}
            options={[
              { value: "en", label: "English" },
              { value: "ar", label: "العربية" },
            ]}
            onChange={(v) => setTweak("lang", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);