import React, { useEffect, useState, useRef } from "react";
import styled from 'styled-components';
export default function EngineeringHeroFlowbite() {
const defaultConfig = {
main_title: "شريكك الهندسي لتنفيذ وإدارة المشاريع باحتراف",
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);
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(() => {
// slight delay to ensure mount then trigger animations
const t = setTimeout(() => setIsMounted(true), 60);
return () => clearTimeout(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;
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;
main.style.fontSize = `${baseSize * 3.8}px`;
main.style.color = config.text_color || defaultConfig.text_color;
main.style.fontWeight = 800;
main.style.textAlign = "right";
}
if (sub) {
sub.innerHTML = (config.subtitle || defaultConfig.subtitle)
.split("\n")
.map((s) => `${s.trim()}
`)
.join("");
sub.style.fontFamily = font;
sub.style.fontSize = `${baseSize * 1.1}px`;
sub.style.color = config.text_color || defaultConfig.text_color;
sub.style.textAlign = "right";
sub.style.maxWidth = "800px";
}
const root = document.documentElement;
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);
}, [config]);
useEffect(() => {
const element = {
defaultConfig,
onConfigChange: async (newCfg) => {
setConfig((c) => ({ ...c, ...newCfg }));
},
mapToCapabilities: (cfg) => ({
recolorables: [
{
get: () => cfg.background_color || defaultConfig.background_color,
set: (value) => {
cfg.background_color = value;
window?.elementSdk?.setConfig?.({ background_color: value });
setConfig({ ...cfg });
},
},
{
get: () => cfg.secondary_surface || defaultConfig.secondary_surface,
set: (value) => {
cfg.secondary_surface = value;
window?.elementSdk?.setConfig?.({ secondary_surface: value });
setConfig({ ...cfg });
},
},
{
get: () => cfg.text_color || defaultConfig.text_color,
set: (value) => {
cfg.text_color = value;
window?.elementSdk?.setConfig?.({ text_color: value });
setConfig({ ...cfg });
},
},
{
get: () => cfg.primary_color || defaultConfig.primary_color,
set: (value) => {
cfg.primary_color = value;
window?.elementSdk?.setConfig?.({ primary_color: value });
setConfig({ ...cfg });
},
},
{
get: () => cfg.secondary_action || defaultConfig.secondary_action,
set: (value) => {
cfg.secondary_action = value;
window?.elementSdk?.setConfig?.({ secondary_action: value });
setConfig({ ...cfg });
},
},
],
borderables: [],
fontEditable: {
get: () => cfg.font_family || defaultConfig.font_family,
set: (value) => {
cfg.font_family = value;
window?.elementSdk?.setConfig?.({ font_family: value });
setConfig({ ...cfg });
},
},
fontSizeable: {
get: () => cfg.font_size || defaultConfig.font_size,
set: (value) => {
cfg.font_size = value;
window?.elementSdk?.setConfig?.({ font_size: value });
setConfig({ ...cfg });
},
},
}),
mapToEditPanelValues: (cfg) =>
new Map([
["main_title", cfg.main_title || defaultConfig.main_title],
["subtitle", cfg.subtitle || defaultConfig.subtitle],
]),
};
if (window?.elementSdk?.init) {
try {
window.elementSdk.init(element);
} catch (e) {}
}
}, []);
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, children }) => {
return (
);
};
return (
// خلفية الحاوية شفافة حتى يظهر الـ BackgroundCanvas في مستوى التطبيق
);
}
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%; }
}
`;
