import React, { useEffect, useState, useRef } from "react";
import styled from "styled-components";
import { useTranslation } from "react-i18next";
import REXNT from "../../../assets/Images/REXNT.png";
import TPSlogo from "../../../assets/Images/TPS-logo.png";
import NSC from "../../../assets/Images/NSC.png";
import LOGO from "../../../assets/Images/LOGO.png";
export default function EngineeringHeroFlowbite() {
const { t, i18n } = useTranslation();
const defaultConfig = {
main_title: "عندما تطلب الرؤية مستشارًا، ويحتاج المخطط منفذًا استراتيجيًا…\nنكون القرار بالقيادة من الرؤية حتى التسليم",
subtitle:
"حلول متكاملة تشمل التصميم، التنفيذ، التشغيل، والصيانة\nللمشاريع الصناعية والمدنية، وفق أحدث المعايير والتقنيات",
primary_color: "#e67e22",
background_color: "#000000",
text_color: "#ffffff",
secondary_surface: "#95a5a6",
secondary_action: "#34495e",
font_family: "Cairo",
font_size: 16,
};
const [config, setConfig] = useState({
...defaultConfig,
main_title: t ? t("hero.main_title") : defaultConfig.main_title,
subtitle: t ? t("hero.subtitle") : defaultConfig.subtitle,
});
const [isMounted, setIsMounted] = useState(false);
const mainTitleRef = useRef(null);
const subtitleRef = useRef(null);
useEffect(() => {
const id = "cairo-font-link";
if (!document.getElementById(id)) {
const link = document.createElement("link");
link.id = id;
link.rel = "stylesheet";
link.href =
"https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap";
document.head.appendChild(link);
}
}, []);
useEffect(() => {
const tId = setTimeout(() => setIsMounted(true), 60);
return () => clearTimeout(tId);
}, []);
useEffect(() => {
const updateFromI18n = () => {
const lang = i18n.language || "en";
let main = t("hero.main_title");
if (lang && lang.startsWith("en")) {
main = main.replace(/[—–]/g, " - ");
}
setConfig((c) => ({
...c,
main_title: main,
subtitle: t("hero.subtitle"),
}));
document.documentElement.lang = lang;
document.documentElement.dir = lang.startsWith("ar") ? "rtl" : "ltr";
};
updateFromI18n();
i18n.on && i18n.on("languageChanged", updateFromI18n);
return () => {
i18n.off && i18n.off("languageChanged", updateFromI18n);
};
}, [i18n, t]);
useEffect(() => {
const main = mainTitleRef.current;
const sub = subtitleRef.current;
const baseFontStack = "Arial, sans-serif";
const font =
(config.font_family || defaultConfig.font_family) + ", " + baseFontStack;
const baseSize = config.font_size || defaultConfig.font_size;
const applyStyles = () => {
const lang = i18n.language || "en";
const isArabic = lang.startsWith("ar");
const width = typeof window !== "undefined" ? window.innerWidth : 1024;
const responsiveBase =
width <= 400
? baseSize * 0.78
: width <= 640
? baseSize * 0.88
: width <= 1024
? baseSize * 0.96
: baseSize;
const headingMultiplier = width <= 640 ? 2.6 : 3.2;
const subtitleMultiplier = width <= 640 ? 0.95 : 1.1;
const mainText = (config.main_title || defaultConfig.main_title)
.replace(/\s+/g, " ")
.trim();
const mainTextLength = mainText.length;
const lengthFactor =
mainTextLength > 100 ? 0.78 : mainTextLength > 70 ? 0.86 : 1.0;
const maxFont = 68;
const minFont = Math.max(Math.round(responsiveBase * 1.6), 14);
const root = document.documentElement;
root.style.setProperty("--base", `${responsiveBase}px`);
if (main) {
const headingText = (config.main_title || defaultConfig.main_title)
.split("\n")
.map((s) => s.trim())
.filter(Boolean);
if (headingText.length === 1) {
main.textContent = headingText[0];
} else {
main.innerHTML = `${
headingText[0]
}${headingText
.slice(1)
.join("
")}`;
}
main.style.fontFamily = font;
const computedSize = Math.min(
Math.max(
Math.round(responsiveBase * headingMultiplier * lengthFactor),
minFont
),
maxFont
);
main.style.fontSize = `${computedSize}px`;
main.style.color = config.text_color || defaultConfig.text_color;
main.style.fontWeight = 800;
main.style.textAlign = isArabic ? "right" : "left";
main.style.whiteSpace = "normal";
main.style.wordBreak = "break-word";
main.style.overflowWrap = "anywhere";
main.style.direction = isArabic ? "rtl" : "ltr";
main.style.display = "block";
}
if (sub) {
sub.innerHTML = (config.subtitle || defaultConfig.subtitle)
.split("\n")
.map((s) => `${s.trim()}
`)
.join("");
sub.style.fontFamily = font;
const subSize = Math.round(responsiveBase * subtitleMultiplier);
sub.style.fontSize = `${subSize}px`;
sub.style.color = config.text_color || defaultConfig.text_color;
sub.style.textAlign = isArabic ? "right" : "left";
sub.style.maxWidth = "800px";
sub.style.whiteSpace = "normal";
sub.style.wordBreak = "break-word";
sub.style.overflowWrap = "anywhere";
sub.style.direction = isArabic ? "rtl" : "ltr";
sub.style.display = "block";
}
root.style.setProperty(
"--ehb-primary",
config.primary_color || defaultConfig.primary_color
);
root.style.setProperty(
"--ehb-background",
config.background_color || defaultConfig.background_color
);
root.style.setProperty(
"--ehb-surface",
config.secondary_surface || defaultConfig.secondary_surface
);
root.style.setProperty(
"--ehb-action",
config.secondary_action || defaultConfig.secondary_action
);
};
applyStyles();
window.addEventListener("resize", applyStyles);
return () => window.removeEventListener("resize", applyStyles);
}, [config, i18n.language]);
const goToDepartments = (e) => {
e && e.preventDefault && e.preventDefault();
const el = document.getElementById("departments");
if (el) {
el.scrollIntoView({ behavior: "smooth", block: "start" });
} else {
window.scrollTo({ top: 0, behavior: "smooth" });
}
};
const OrangeActionButton = ({ onClick }) => {
return (
);
};
const isArabic = i18n.language && i18n.language.startsWith("ar");
return (
);
}
const StyledWrapper = styled.div`
.button {
position: relative;
transition: all 0.3s ease-in-out;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
padding-block: 0.5rem;
padding-inline: 1.25rem;
background-color: var(--ehb-primary, #e67e22);
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
color: #ffff;
gap: 10px;
font-weight: bold;
border: 3px solid #ffffff4d;
outline: none;
overflow: hidden;
font-size: 15px;
cursor: pointer;
}
.icon {
width: 24px;
height: 24px;
transition: all 0.3s ease-in-out;
}
.button:hover {
transform: scale(1.05);
border-color: #fff9;
}
.button:hover .icon {
transform: translate(4px);
}
.button:hover::before {
animation: shine 1.5s ease-out infinite;
}
.button::before {
content: "";
position: absolute;
width: 100px;
height: 100%;
background-image: linear-gradient(
120deg,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0.8),
rgba(255, 255, 255, 0) 70%
);
top: 0;
left: -100px;
opacity: 0.6;
}
@keyframes shine {
0% {
left: -100px;
}
60% {
left: 100%;
}
to {
left: 100%;
}
}
`;