/* global React */
const { useState: useStateS } = React;

// ============================================================
// SECTIONS — composed of components.jsx primitives
// ============================================================

const RAWA_STUDIO_CONTACT_EMAIL = "info@rawagames.com";

function openContactInquiryMailto(formEl, lang) {
  const fd = new FormData(formEl);
  const val = (key) => String(fd.get(key) ?? "").trim();
  const name = val("name");
  const company = val("company");
  const email = val("email");
  const phone = val("phone");
  const country = val("country");
  const projectType = val("projectType");
  const budget = val("budget");
  const timeline = val("timeline");
  const brief = val("brief");

  const subject =
    lang === "ar"
      ? `استفسار من موقع Rawa Studios — ${name || "زائر"}`
      : `Rawa Studios website inquiry — ${name || "visitor"}`;

  const lines =
    lang === "ar"
      ? [
          `الاسم: ${name}`,
          `الشركة: ${company}`,
          `البريد الإلكتروني: ${email}`,
          `الجوال / واتساب: ${phone}`,
          `الدولة: ${country}`,
          `نوع المشروع: ${projectType}`,
          `نطاق الميزانية: ${budget}`,
          `الجدول الزمني: ${timeline}`,
          "",
          "نبذة عن المشروع:",
          brief || "—",
        ]
      : [
          `Name: ${name}`,
          `Company: ${company}`,
          `Email: ${email}`,
          `Phone / WhatsApp: ${phone}`,
          `Country: ${country}`,
          `Project type: ${projectType}`,
          `Budget range: ${budget}`,
          `Timeline: ${timeline}`,
          "",
          "Project brief:",
          brief || "—",
        ];

  window.location.href = `mailto:${RAWA_STUDIO_CONTACT_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(lines.join("\n"))}`;
}

// About snapshot
const AboutSnapshot = ({ lang }) => (
  <section id="about" style={{ position: "relative" }}>
    <div className="hud-corner tl" /><div className="hud-corner br" />
    <div className="container">
      <div className="section-head">
        <div className="left">
          <div className="sec-tag"><span className="num">01</span>{lang === "ar" ? "عن الاستوديو" : "About"}</div>
          <h2 className="h-display h-lg">
            {lang === "ar"
              ? "ليس فريق تعهيد. شريك إبداعي إقليمي."
              : <>NOT JUST AN<br/>OUTSOURCING TEAM.<br/><span style={{ color: "var(--orange)" }}>A REGIONAL CREATIVE PARTNER.</span></>}
          </h2>
        </div>
        <div className="right">
          <p>{lang === "ar"
            ? "روا ستوديوز هو ذراع الخدمات الإبداعية لشركة روا للألعاب، الفريق الذي يصنع ألعاب الأكشن والحرب على الجوال خصيصاً للسوق العربي. مهمتنا تقديم تجارب صعبة ومثيرة توقظ الجانب التنافسي للاعب، مع رؤية طويلة المدى للتحول إلى شركة ترفيه عالمية."
            : "Rawa Studios is built from the production experience of Rawa Games, a team creating action and war-themed mobile games tailored for the Arab market. Our mission is to deliver challenging and exciting experiences that awaken the player's competitive side, with the long-term vision of becoming a global entertainment company."}</p>
          <a href="#about-deep" className="btn-link" style={{ marginTop: 24, display: "inline-block" }}>
            {lang === "ar" ? "تعرّف على روا ستوديوز" : "Learn about Rawa Studios"}
          </a>
        </div>
      </div>
      <div className="stats-row" style={{ marginTop: 80 }}>
        <div className="stat"><div className="num">100%</div><div className="label">{lang === "ar" ? "فن أصلي يدوي" : "Original Handcrafted Art"}</div></div>
        <div className="stat"><div className="num">AR</div><div className="label">{lang === "ar" ? "تصميم عربي أولاً" : "Arabic-First by Default"}</div></div>
        <div className="stat"><div className="num">RTS</div><div className="label">{lang === "ar" ? "خبرة استراتيجية حقيقية" : "Real RTS Production"}</div></div>
        <div className="stat"><div className="num">GCC</div><div className="label">{lang === "ar" ? "تركيز السوق الخليجي" : "Saudi / GCC Focus"}</div></div>
      </div>
    </div>
  </section>
);

// Services preview (6 cards)
const services_en = [
  { kind: "ui", title: "Game UI/UX", copy: "Player flows, HUD systems, menus, wireframes, interface art, design systems, and mobile-first UX for games and interactive products." },
  { kind: "concept", title: "Concept Art", copy: "Characters, factions, buildings, props, environments, key visuals, and visual development for original game worlds." },
  { kind: "art2d", title: "2D Art Production", copy: "Production-ready icons, items, buildings, banners, character assets, live-ops visuals, and polished 2D game assets." },
  { kind: "arabic", title: "Arabic-First UX", copy: "RTL layouts, Arabic typography, bilingual UI systems, cultural review, and interface adaptation for GCC audiences." },
  { kind: "direction", title: "Creative Direction", copy: "Art bibles, visual guidelines, production workflows, asset review systems, and cross-team creative alignment." },
  { kind: "branding", title: "Branding & Marketing", copy: "App Store assets, key art, campaign visuals, pitch-deck graphics, social media creatives, and launch-ready marketing." }
];
const services_ar = [
  { kind: "ui", title: "تصميم الواجهات وتجربة المستخدم", copy: "تدفق اللاعب، أنظمة HUD، القوائم، النماذج الأولية، فن الواجهات، وأنظمة تصميم محمولة أولاً." },
  { kind: "concept", title: "التصميم التصوري", copy: "شخصيات، فصائل، مبانٍ، عناصر، بيئات، وتطوير بصري لعوالم الألعاب الأصلية." },
  { kind: "art2d", title: "إنتاج فن ثنائي الأبعاد", copy: "أيقونات، عناصر، مبانٍ، لافتات، أصول شخصيات، ومرئيات تشغيل مستمر جاهزة للإنتاج." },
  { kind: "arabic", title: "تجربة المستخدم العربية", copy: "تخطيطات RTL، طباعة عربية، أنظمة واجهات ثنائية اللغة، ومراجعة ثقافية." },
  { kind: "direction", title: "الإخراج الفني", copy: "كتب فنية، إرشادات بصرية، سير عمل إنتاجي، وأنظمة مراجعة الأصول." },
  { kind: "branding", title: "العلامة والتسويق", copy: "أصول متجر التطبيقات، فن مفتاحي، مرئيات الحملات، ومواد التسويق." }
];

const ServicesPreview = ({ lang }) => {
  const list = lang === "ar" ? services_ar : services_en;
  return (
    <section id="services" style={{ position: "relative", borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="sec-tag"><span className="num">02</span>{lang === "ar" ? "الخدمات" : "Services"}</div>
            <h2 className="h-display h-lg">
              {lang === "ar"
                ? "إنتاج إبداعي للألعاب والمنتجات المُلعَّبة."
                : <>CREATIVE PRODUCTION<br/>FOR GAMES AND<br/><span style={{color: "var(--orange)"}}>GAMIFIED PRODUCTS.</span></>}
            </h2>
          </div>
          <div className="right">
            <p>{lang === "ar"
              ? "من التطوير البصري المبكر إلى أصول الواجهة والفن الجاهزة للإنتاج، يدعم روا ستوديوز الفرق عبر سلسلة الإنتاج الإبداعية بأكملها."
              : "From early visual development to production-ready UI and art assets, Rawa Studios supports teams across the full creative pipeline."}</p>
          </div>
        </div>
        <div className="service-grid">
          {list.map((s, i) => (
            <div key={i} className="service-card">
              <ServiceIcon kind={s.kind} />
              <h3>{s.title}</h3>
              <p>{s.copy}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// Featured Work
const FeaturedWork = ({ lang }) => (
  <section id="work" style={{ position: "relative", borderTop: "1px solid var(--line)", background: "linear-gradient(180deg, #050505 0%, #0a0606 100%)" }}>
    <div className="container">
      <div className="section-head">
        <div className="left">
          <div className="sec-tag"><span className="num">03</span>{lang === "ar" ? "أعمالنا" : "Featured Work"}</div>
          <h2 className="h-display h-lg">
            {lang === "ar" ? "مبني على خبرة حقيقية في الألعاب." : <>BUILT ON REAL<br/><span style={{ color: "var(--orange)" }}>GAME EXPERIENCE.</span></>}
          </h2>
        </div>
        <div className="right">
          <p>{lang === "ar"
            ? "ألعاب حقيقية، فن أصلي، وخبرة إنتاج عربية أولاً. كل مشروع نشاركه أدناه قمنا ببنائه — لا قوالب جاهزة، ولا حزم أصول."
            : "Real games, original art, and Arabic-first production experience. Every project below we built ourselves — no templates, no asset packs."}</p>
        </div>
      </div>

      <div style={{ marginTop: 64 }}>
        <article className="case-card">
          <div className="case-visual case-visual--square">
            <ImageSlot
              className="image-slot--logo-square"
              src="assets/case-sword-of-rule-logo.png"
              alt="Sword of Rule logo"
              caption="SWORD OF RULE"
            />
            <span className="corner tl" /><span className="corner tr" />
            <span className="corner bl" /><span className="corner br" />
          </div>
          <div className="case-meta">
            <div className="case-sub">{lang === "ar" ? "استراتيجية في الوقت الحقيقي" : "Real-time strategy / live service"}</div>
            <h3>SWORD OF RULE</h3>
            <p>{lang === "ar"
              ? "لعبة استراتيجية ملحمية في الوقت الحقيقي تتنافس فيها خمس قبائل تاريخية — العرب والألمان والرومان واليونانيون والتتار — للسيطرة على العالم. بناء إمبراطوريات، قيادة جيوش، وتحالفات."
              : "An epic real-time strategy game where five historical tribes — Arabs, Germans, Romans, Greeks, and Tatars — battle for control of the world. Players build empires, lead armies, form alliances, and fight to control the Wonder building."}</p>
            <div className="case-tags">
              {(lang === "ar"
                ? ["استراتيجية","عربية أولاً","جوال","خدمة حية","تحالفات","فن أصلي"]
                : ["Strategy","Arabic-first","Mobile","Live service","Empire building","Alliances","Original art"]
              ).map(t => <span key={t} className="case-tag">{t}</span>)}
            </div>
            <div style={{ marginTop: 12, display: "flex", gap: 16 }}>
              <a href="#" className="btn btn-ghost" style={{ fontSize: 12 }}>{lang === "ar" ? "دراسة الحالة" : "View Case Study"} <ArrowR /></a>
              <a href="https://www.swordofrule.com/" target="_blank" rel="noreferrer" className="btn-link">{lang === "ar" ? "موقع اللعبة" : "Game Site"}</a>
            </div>
          </div>
        </article>

        <article className="case-card reverse">
          <div className="case-meta">
            <div className="case-sub">{lang === "ar" ? "ألغاز محمولة" : "Mobile puzzle / casual"}</div>
            <h3>NAJLA</h3>
            <p>{lang === "ar"
              ? "نجلاء عنوان ألغاز شبه عرضي للجوال، مصمم للتفاعل المتاح، والتأهيل البسيط، والجاذبية الواسعة لجمهور السوق العربي."
              : "Najla is a semi-casual mobile puzzle title designed for accessible engagement, simple onboarding, and broad appeal across Arabic-speaking audiences."}</p>
            <div className="case-tags">
              {(lang === "ar"
                ? ["ألغاز","جوال","شبه عرضي","سوق عربي"]
                : ["Puzzle","Mobile","Semi-casual","Arabic Market"]
              ).map(t => <span key={t} className="case-tag">{t}</span>)}
            </div>
            <div style={{ marginTop: 12 }}>
              <a href="#" className="btn-link">{lang === "ar" ? "اعرف المزيد" : "Learn More"} <ArrowR /></a>
            </div>
          </div>
          <div className="case-visual">
            <ImageSlot
              src="assets/case-najla-logo.png"
              alt="Najla logo"
              caption="NAJLA"
            />
            <span className="corner tl" /><span className="corner tr" />
            <span className="corner bl" /><span className="corner br" />
          </div>
        </article>

        <article className="case-card">
          <div className="case-visual">
            <video
              className="case-visual-video"
              src="assets/case-all-original-timelapse.mp4"
              muted
              playsInline
              loop
              autoPlay
              preload="metadata"
              aria-label={lang === "ar" ? "فيديو مسرّع لعملية الفن الأصلي وشخصيات اللعبة" : "Timelapse video of original art and character lineup"}
            />
            <span className="corner tl" /><span className="corner tr" />
            <span className="corner bl" /><span className="corner br" />
          </div>
          <div className="case-meta">
            <div className="case-sub">{lang === "ar" ? "إخراج فني أصلي" : "Original art direction"}</div>
            <h3>ALL ORIGINAL ART</h3>
            <p>{lang === "ar"
              ? "هوية روا البصرية مبنية على فن أصلي يدوي الصنع من فنانين بشر. هذا الالتزام يمنح كل لعبة مظهراً مميزاً ويتجنب الاعتماد على حزم الأصول العامة."
              : "Rawa's visual identity is built around original, handcrafted art created by human artists. This commitment gives each game a distinctive look and avoids generic asset-pack dependence."}</p>
            <div className="case-tags">
              {(lang === "ar"
                ? ["إخراج فني","شخصيات","كتاب فني","نظام بصري"]
                : ["Art direction","Characters","Art bible","Visual system"]
              ).map(t => <span key={t} className="case-tag">{t}</span>)}
            </div>
          </div>
        </article>
      </div>
    </div>
  </section>
);

// Why Arabic-First
const WhyArabic = ({ lang }) => (
  <section style={{ position: "relative", overflow: "hidden", background: "#080404" }}>
    <div style={{ position: "absolute", inset: 0, opacity: 0.4, background:
      "radial-gradient(ellipse 50% 40% at 80% 50%, rgba(255,106,0,0.18), transparent 70%)" }} />
    <div className="container" style={{ position: "relative" }}>
      <div className="section-head">
        <div className="left">
          <div className="sec-tag"><span className="num">04</span>{lang === "ar" ? "لماذا عربية أولاً" : "Why Arabic-First"}</div>
          <h2 className="h-display h-lg">
            {lang === "ar" ? "العربية ليست فكرة لاحقة." : <>ARABIC IS<br/><span style={{ color: "var(--orange)" }}>NOT AN AFTERTHOUGHT.</span></>}
          </h2>
        </div>
        <div className="right">
          <p>{lang === "ar"
            ? "تعتمد العديد من ألعاب الاستراتيجية على التواصل والتحالفات والتفاعل الاجتماعي. عندما تهيمن واجهات اللغة الإنجليزية على هذه التجارب، يُترك الكثير من اللاعبين العرب خارج الطبقة الاجتماعية الكاملة. روا ستوديوز يصمم للجمهور الناطق بالعربية من البداية — وليس كمرحلة ترجمة نهائية."
            : "Many strategy and base-building games depend on communication, alliances, social interaction, and long-term community building. When these experiences are dominated by English-language interfaces, many Arabic-speaking players are left outside the full social layer of the game. Rawa Studios designs for Arabic-speaking audiences from the beginning — not as a final translation pass."}</p>
        </div>
      </div>
      <div className="pillars">
        {(lang === "ar" ? [
          { n: "01", t: "وصول لغوي", c: "واجهة عربية أولاً تُزيل الاحتكاك وتزيد ثقة اللاعب." },
          { n: "02", t: "ملاءمة ثقافية", c: "النبرة البصرية، النص، تجربة المستخدم، وأنظمة اللعبة يجب أن تشعر بطبيعتها للجمهور الإقليمي." },
          { n: "03", t: "بناء المجتمع", c: "تجارب اللعب الجماعي تصبح أقوى عندما يستطيع اللاعبون التواصل والتنظيم بشكل طبيعي." }
        ] : [
          { n: "01", t: "Language Access", c: "Arabic-first UI removes friction and increases player confidence." },
          { n: "02", t: "Cultural Relevance", c: "Visual tone, copy, UX, and game systems should feel natural to regional audiences." },
          { n: "03", t: "Community Building", c: "Multiplayer and cooperative experiences become stronger when players can communicate and organize naturally." }
        ]).map(p => (
          <div key={p.n} className="pillar">
            <div className="pillar-num">{p.n}</div>
            <h4>{p.t}</h4>
            <p>{p.c}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// Process timeline
const ProcessSection = ({ lang }) => {
  const steps_en = [
    { t: "Discovery", c: "We understand the product, player, market, genre, and constraints." },
    { t: "Strategy", c: "We define visual direction, references, UX goals, and cultural requirements." },
    { t: "Exploration", c: "User flows, wireframes, moodboards, sketches, and visual routes." },
    { t: "Production", c: "UI screens, 2D assets, concept art, icons, marketing visuals, art systems." },
    { t: "Iteration", c: "Structured review cycles to improve quality without losing momentum." },
    { t: "Delivery", c: "Organized source files, export-ready assets, implementation notes." },
    { t: "Live Support", c: "Updates, events, campaigns, and new features for live products." }
  ];
  const steps_ar = [
    { t: "الاكتشاف", c: "نفهم المنتج واللاعب والسوق والنوع والقيود." },
    { t: "الاستراتيجية", c: "نحدد الاتجاه البصري، المراجع، أهداف UX، والمتطلبات الثقافية." },
    { t: "الاستكشاف", c: "تدفقات المستخدم، النماذج الأولية، لوحات المزاج، والمسارات البصرية." },
    { t: "الإنتاج", c: "شاشات الواجهة، أصول 2D، فن تصوري، أيقونات، ومرئيات التسويق." },
    { t: "التكرار", c: "دورات مراجعة منظمة لتحسين الجودة دون فقدان الزخم." },
    { t: "التسليم", c: "ملفات مصدر منظمة، أصول جاهزة للتصدير، وملاحظات التنفيذ." },
    { t: "الدعم المباشر", c: "تحديثات، أحداث، حملات، وميزات جديدة للمنتجات المباشرة." }
  ];
  const steps = lang === "ar" ? steps_ar : steps_en;
  return (
    <section id="process" style={{ borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="sec-tag"><span className="num">05</span>{lang === "ar" ? "عملية العمل" : "Process"}</div>
            <h2 className="h-display h-lg">
              {lang === "ar" ? "خط أنابيب إنتاجي منظم." : <>A STRUCTURED<br/>CREATIVE <span style={{ color: "var(--orange)" }}>PIPELINE.</span></>}
            </h2>
          </div>
          <div className="right">
            <p>{lang === "ar"
              ? "من الاستراتيجية إلى الأصول الجاهزة للإنتاج. الفن والتصميم لا يجب أن يكونا فوضويين — نجمع بين الجودة الإبداعية وانضباط الإنتاج."
              : "From strategy to production-ready assets. Art and design don't have to be chaotic — we combine creative quality with production discipline."}</p>
          </div>
        </div>
        <div className="process">
          {steps.map((s, i) => (
            <div key={i} className="process-step">
              <div className="step-num">0{i+1}</div>
              <h4>{s.t}</h4>
              <p>{s.c}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// GCC fit
const GCCSection = ({ lang }) => {
  const countries = lang === "ar"
    ? [{n: "السعودية", flag: true}, {n: "الإمارات"}, {n: "الكويت"}, {n: "قطر"}, {n: "البحرين"}, {n: "عُمان"}]
    : [{n: "Saudi Arabia", flag: true}, {n: "UAE"}, {n: "Kuwait"}, {n: "Qatar"}, {n: "Bahrain"}, {n: "Oman"}];
  return (
    <section id="gcc" style={{ position: "relative", borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <div className="gcc-block">
          <div>
            <div className="sec-tag"><span className="num">06</span>{lang === "ar" ? "ملاءمة الخليج" : "GCC Fit"}</div>
            <h2 className="h-display h-lg" style={{ marginTop: 24 }}>
              {lang === "ar" ? "مصمم للسعودية. جاهز للخليج." : <>DESIGNED FOR<br/>SAUDI ARABIA.<br/><span style={{ color: "var(--orange)" }}>READY FOR THE GCC.</span></>}
            </h2>
            <p className="body-lg" style={{ marginTop: 24 }}>
              {lang === "ar"
                ? "روا ستوديوز يفهم التوقعات الإبداعية والثقافية للاعبين الناطقين بالعربية. نساعد العملاء على بناء مرئيات الألعاب والواجهات وتجارب المنتج التي تشعر بمصداقيتها في السعودية، الخليج، والسوق العربي الأوسع."
                : "Rawa Studios understands the creative and cultural expectations of Arabic-speaking players. We help clients build game visuals, interfaces, and product experiences that feel credible in Saudi Arabia, the Gulf, and the broader Arab market."}
            </p>
            <div style={{ marginTop: 32, padding: "24px 28px", border: "1px solid var(--line-strong)", borderLeft: "2px solid var(--orange)" }}>
              <div style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--orange)", fontWeight: 600, marginBottom: 8 }}>
                {lang === "ar" ? "متوافق مع رؤية 2030" : "Aligned with Vision 2030"}
              </div>
              <div style={{ fontSize: 15, color: "var(--text-2)" }}>
                {lang === "ar"
                  ? "ندعم نمو صناعة الألعاب السعودية المتسارع وأهداف الترفيه الرقمي للمملكة."
                  : "Supporting Saudi Arabia's accelerating games industry and digital entertainment ambitions."}
              </div>
            </div>
            <div className="gcc-list">
              {countries.map(c => (
                <div key={c.n} className="gcc-pill">
                  <span className="pin" />
                  <span className={c.flag ? "ksa" : ""}>{c.n}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="gcc-map">
            <img
              className="gcc-map-img"
              src="assets/gcc-character-render.png"
              alt={lang === "ar" ? "لوحة بصرية لمنطقة الخليج واللاعب العربي" : "GCC region and Arabic player creative visual"}
              loading="lazy"
            />
          </div>
        </div>
      </div>
    </section>
  );
};

// Services deep page (anchor: services-deep)
const services_full = [
  { num: "01", title: "Game UI/UX Design", sub: "Interfaces players understand. Systems they want to return to.",
    copy: "We design game interfaces that make complex systems easier to read, navigate, and enjoy. From menus and HUDs to store flows and live-ops screens.",
    deliv: ["UX audits","Player flow maps","Wireframes","Figma prototypes","HUD design","Main menus","Store interfaces","Inventory systems","Battle UI","Mobile-first systems","AR/EN adaptation","Developer handoff"]},
  { num: "02", title: "2D Game Art", sub: "Readable, polished, production-ready 2D assets.",
    copy: "We create 2D assets that are visually appealing, clear at gameplay scale, and consistent with your product's world and interface.",
    deliv: ["Icons","Ability art","Item art","Resource art","Building art","Character portraits","Props","UI frames","Event banners","Store visuals","Live-ops assets","Reward visuals"]},
  { num: "03", title: "Concept Art & Visual Dev", sub: "Define the world before production begins.",
    copy: "We help teams discover and define the look of their game world through exploratory art, visual research, and structured creative direction.",
    deliv: ["Character concepts","Faction design","Environment concepts","Building concepts","Prop concepts","Creature concepts","Key art","Moodboards","Style exploration","Art bible starter","Visual development decks","Pitch visuals"]},
  { num: "04", title: "Creative Direction", sub: "Keep your game visually coherent from pitch to launch.",
    copy: "Rawa Studios provides art direction systems that align teams, protect quality, and make production more predictable.",
    deliv: ["Art direction docs","Visual style guides","Asset standards","Review systems","Production pipelines","Outsourcing supervision","Cross-dept alignment","Brand consistency"]},
  { num: "05", title: "Arabic-First UX & Localization", sub: "Arabic is not just translation. It is product design.",
    copy: "We help teams adapt products for Arabic-speaking users through RTL interface logic, Arabic typography, and bilingual design systems.",
    deliv: ["RTL layout strategy","Arabic typography review","AR/EN UI systems","Localization UX audit","Cultural visual review","Interface copy review","Bilingual Figma components","GCC market adaptation"]},
  { num: "06", title: "Branding & Marketing Assets", sub: "Make the product look launch-ready.",
    copy: "We create the visual assets needed to present, pitch, market, and launch games and gamified products.",
    deliv: ["App Store screenshots","Google Play assets","Key art","Social templates","Launch banners","Trailer graphics","Pitch deck visuals","Campaign creatives"]},
  { num: "07", title: "Dedicated Art & UI Pod", sub: "Your flexible creative team without long hiring cycles.",
    copy: "For studios that need ongoing support, Rawa Studios can operate as an external art and UI/UX pod with weekly reviews and production management.",
    deliv: ["Art Director","UI/UX Designer","2D Artist","Concept Artist","Producer","Weekly reviews","Sprint planning","Live-service support"]}
];

const ServicesDeep = ({ lang }) => (
  <section id="services-deep" style={{ borderTop: "1px solid var(--line)", background: "#070404" }}>
    <div className="container">
      <div className="section-head">
        <div className="left">
          <div className="sec-tag"><span className="num">07</span>Services / Detail</div>
          <h2 className="h-display h-lg">FULL SERVICE<br/><span style={{ color: "var(--orange)" }}>CAPABILITIES.</span></h2>
        </div>
        <div className="right">
          <p>From early visual development to production-ready UI and art assets, Rawa Studios supports teams across the full creative pipeline. Engagements range from one-off art sprints to dedicated live-service art pods.</p>
        </div>
      </div>
      {services_full.map(s => (
        <div key={s.num} className="service-detail">
          <div className="meta">
            <div className="num">{s.num}</div>
            <h3>{s.title}</h3>
            <div className="sub">{s.sub}</div>
            <p style={{ marginTop: 16, color: "var(--text-2)", fontSize: 14 }}>{s.copy}</p>
          </div>
          <div>
            <div style={{ fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", color: "var(--text-3)", fontWeight: 600 }}>Deliverables</div>
            <ul className="deliverables">
              {s.deliv.map(d => <li key={d}>{d}</li>)}
            </ul>
          </div>
        </div>
      ))}
    </div>
  </section>
);

// Final CTA + Contact
const ContactSection = ({ lang }) => (
  <section id="contact" style={{ borderTop: "1px solid var(--line)", background: "linear-gradient(180deg, #050505, #0a0606)" }}>
    <div className="container">
      <div className="section-head" style={{ marginBottom: 64 }}>
        <div className="left">
          <div className="sec-tag"><span className="num">08</span>{lang === "ar" ? "ابدأ مشروعك" : "Start a Project"}</div>
          <h2 className="h-display h-lg">
            {lang === "ar" ? "تبني لعبة لجمهور عربي؟" : <>BUILDING A GAME FOR<br/><span style={{ color: "var(--orange)" }}>ARABIC PLAYERS?</span></>}
          </h2>
        </div>
        <div className="right">
          <p>{lang === "ar"
            ? "أخبرنا بما تبنيه. سنساعد في تحديد الاتجاه البصري والواجهة وخطة الإنتاج معاً."
            : "Tell us what you're building. We'll help define the visual direction, interface, and production plan together."}</p>
        </div>
      </div>
      <div className="contact-grid">
        <div className="contact-info">
          <div className="info-row">
            <div className="label">Email</div>
            <a href={`mailto:${RAWA_STUDIO_CONTACT_EMAIL}`} className="val">{RAWA_STUDIO_CONTACT_EMAIL}</a>
          </div>
          <div className="info-row">
            <div className="label">Web</div>
            <a href="https://rwaa.sa/games" className="val">rwaa.sa/games</a>
          </div>
          <div className="info-row">
            <div className="label">TikTok</div>
            <a href="#" className="val">@sword.of.rule</a>
          </div>
          <div className="info-row">
            <div className="label">Studio</div>
            <div className="val">RIYADH, KSA</div>
          </div>
          <div style={{ marginTop: 32 }}>
            <a href="#" className="btn btn-primary">{lang === "ar" ? "حجز مكالمة" : "Book a Studio Call"} <ArrowR /></a>
          </div>
        </div>
        <form
          className="form"
          onSubmit={(e) => {
            e.preventDefault();
            openContactInquiryMailto(e.currentTarget, lang);
          }}
        >
          <div className="field"><label>Name</label><input name="name" autoComplete="name" placeholder="Your full name" /></div>
          <div className="field"><label>Company</label><input name="company" autoComplete="organization" placeholder="Studio / company" /></div>
          <div className="field"><label>Email</label><input name="email" type="email" autoComplete="email" required placeholder="you@company.com" /></div>
          <div className="field"><label>Phone / WhatsApp</label><input name="phone" type="tel" autoComplete="tel" placeholder="+966 ..." /></div>
          <div className="field"><label>Country</label><input name="country" autoComplete="country-name" placeholder="Saudi Arabia" /></div>
          <div className="field"><label>Project Type</label>
            <select name="projectType" defaultValue="Game UI/UX">
              <option>Game UI/UX</option><option>2D Art</option><option>Concept Art</option>
              <option>Creative Direction</option><option>Arabic Localization</option>
              <option>Game Branding</option><option>Live-Ops Art Support</option>
              <option>Dedicated Art/UI Pod</option><option>Other</option>
            </select>
          </div>
          <div className="field"><label>Budget Range</label>
            <select name="budget" defaultValue="$10k – $30k"><option>$10k – $30k</option><option>$30k – $80k</option><option>$80k – $200k</option><option>$200k+</option><option>Discuss</option></select>
          </div>
          <div className="field"><label>Timeline</label>
            <select name="timeline" defaultValue="1–3 months"><option>1–3 months</option><option>3–6 months</option><option>6–12 months</option><option>Ongoing</option></select>
          </div>
          <div className="field full"><label>Project Brief</label>
            <textarea name="brief" rows={4} placeholder="Tell us about the game, the audience, the visual direction, and what you need from us..." />
          </div>
          <div className="submit-row">
            <span style={{ fontSize: 12, color: "var(--text-3)", letterSpacing: "0.12em" }}>
              {lang === "ar" ? "نرد خلال 48 ساعة" : "We respond within 48 hours"}
            </span>
            <button type="submit" className="btn btn-primary">{lang === "ar" ? "إرسال الطلب" : "Send Inquiry"} <ArrowR /></button>
          </div>
        </form>
      </div>
    </div>
  </section>
);

// Footer
const Footer = ({ lang }) => (
  <footer className="footer">
    <div className="container">
      <div className="footer-mega">RAWA STUDIOS</div>
      <div className="footer-cols">
        <div className="footer-col">
          <h5>{lang === "ar" ? "الاستوديو" : "Studio"}</h5>
          <p style={{ color: "var(--text-2)", fontSize: 14, lineHeight: 1.6, margin: 0 }}>
            {lang === "ar"
              ? "فن ألعاب، تصميم واجهات، وتجارب عربية أولاً للسوق الخليجي."
              : "Game art, UI design, and Arabic-first experiences for the GCC market. Built from the production experience of Rawa Games."}
          </p>
          <div style={{ marginTop: 24, fontFamily: "var(--font-display)", fontSize: 16, color: "var(--orange)", letterSpacing: "0.04em" }}>
            MAKING GAMES WORTH PLAYING
          </div>
        </div>
        <div className="footer-col">
          <h5>{lang === "ar" ? "الخدمات" : "Services"}</h5>
          <ul>
            <li>Game UI/UX</li><li>2D Art</li><li>Concept Art</li>
            <li>Arabic-First UX</li><li>Creative Direction</li><li>Branding</li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>{lang === "ar" ? "الاستوديو" : "Studio"}</h5>
          <ul>
            <li>About</li><li>Work</li><li>Process</li>
            <li>The Future</li><li>Insights</li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>{lang === "ar" ? "تواصل" : "Contact"}</h5>
          <ul>
            <li><a href={`mailto:${RAWA_STUDIO_CONTACT_EMAIL}`} style={{ color: "inherit", textDecoration: "none" }}>{RAWA_STUDIO_CONTACT_EMAIL}</a></li><li>rwaa.sa/games</li>
            <li>Riyadh, KSA</li><li>@sword.of.rule</li>
          </ul>
        </div>
      </div>
      <div className="footer-base">
        <span>© 2026 RAWA STUDIOS / RAWA GAMES</span>
        <span>{lang === "ar" ? "صنع في الرياض" : "MADE IN RIYADH · KSA"}</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { AboutSnapshot, ServicesPreview, FeaturedWork, WhyArabic, ProcessSection, GCCSection, ServicesDeep, ContactSection, Footer });