/* sections.jsx — all page sections for Sukatukang */ const WHATSAPP = "60123456789"; // placeholder — swap for Sukatukang's real number before launch // ===================== HEADER ===================== function Header({ lang }) { const [scrolled, setScrolled] = React.useState(false); const mobile = useIsMobile(); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return (
Sukatukang {pri(COPY.hero.ctaPrimary, lang)} →
); } // ===================== HERO ===================== function Hero({ lang, headlineIdx }) { const h = COPY.hero; const headline = h.headlines[headlineIdx] || h.headlines[0]; return (
{/* full-bleed image */}
Booth mudah alih terbesar tersuai oleh Sukatukang {/* legibility scrim */}
{/* content */}
{pri(h.eyebrow, lang)} {sec(h.eyebrow, lang)}

{pri(headline, lang).split("\n").map((ln, i) => {ln})}

{sec(headline, lang)}

{pri(h.sub, lang)}

{pri(h.ctaPrimary, lang)} → { e.currentTarget.style.background = "rgba(245,239,228,0.1)"; e.currentTarget.style.borderColor = "var(--bone)"; }} onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.borderColor = "rgba(245,239,228,0.4)"; }}> {pri(h.ctaSecondary, lang)}
); } // ===================== TRUST STRIP ===================== function Trust({ lang }) { const t = COPY.trust; return (
{pri(t.line, lang)}
{sec(t.line, lang)}
{/* logo placeholders — real client logos only after permission (D'Herbs etc.) */}
{[0,1,2,3].map((i) => (
{pri(t.logosNote, lang)}
))}
{/* stats */}
{t.stats.map((s, i) => (
{s.value}
{pri(s.label, lang)}
))}
); } // ===================== SECTION HEADER ===================== function SectionHead({ obj, title, intro, lang, align = "left", light }) { return (

{pri(title, lang).split("\n").map((ln, i) => {ln})}

{intro ?

{pri(intro, lang)}

: null}
); } // ===================== PORTFOLIO ===================== function Portfolio({ lang, onOpen }) { const w = COPY.work; const [filter, setFilter] = React.useState("all"); const ref = useReveal(); const mobile = useIsMobile(); const shown = BUILDS.filter((b) => filter === "all" || b.cat === filter); return (
{/* filter chips */}
{w.filters.map((f) => { const active = filter === f.id; return ( ); })}
{/* grid */}
{shown.map((b, i) => { const big = b.feature && filter === "all"; const span = big ? 12 : (mobile ? 6 : 4); return (
onOpen(b)}>
); })}
); } function BuildCard({ b, lang, big }) { const [hover, setHover] = React.useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ cursor: "pointer", display: big ? "grid" : "block", gridTemplateColumns: big ? "1.4fr 1fr" : undefined, gap: big ? 0 : undefined, border: "1px solid var(--line)", borderRadius: "var(--r-lg)", overflow: "hidden", background: "var(--cream)", transition: "transform .25s ease, box-shadow .25s ease, border-color .25s ease", transform: hover ? "translateY(-4px)" : "none", boxShadow: hover ? "0 18px 40px -22px rgba(39,28,18,0.5)" : "0 1px 0 rgba(0,0,0,0.02)", borderColor: hover ? "var(--oak)" : "var(--line)" }}>
{pri(b.use, lang)}
{big ?
★ {lang === "en" ? "Signature" : "Binaan utama"}
: null}

{pri(b.name, lang)}

{pri(b.cap, lang)}

{sec(b.name, lang)}
{lang === "en" ? "View build" : "Lihat binaan"} →
); } // ===================== BUILD DETAIL MODAL ===================== function BuildModal({ build, lang, onClose }) { React.useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); }; document.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, [onClose]); if (!build) return null; const b = build; return (
e.stopPropagation()} style={{ background: "var(--bone)", borderRadius: "var(--r-lg)", maxWidth: 960, width: "100%", overflow: "hidden", boxShadow: "0 40px 90px -30px rgba(0,0,0,0.6)", animation: "modalIn .3s ease" }}> {/* hero image */}
{pri(b.use, lang)}

{pri(b.name, lang)}

{sec(b.name, lang)}

{pri(b.cap, lang)}.

{/* thumbnail strip */}
{[1,2,3].map((n) => ( ))}
{lang === "en" ? "Use case" : "Kegunaan"}
{pri(b.use, lang)}
{lang === "en" ? "Category" : "Kategori"}
{pri(COPY.work.filters.find((f) => f.id === b.cat), lang)}
{lang === "en" ? "Build something like this" : "Bina yang seperti ini"} →
); } // ===================== PROCESS ===================== function Process({ lang }) { const p = COPY.process; const ref = useReveal(); return (
{p.steps.map((s, i) => (
{s.n}

{pri(s, lang)}

{sec(s, lang)}

{pri(s.body, lang)}

))}
); } // ===================== WHY ===================== function Why({ lang }) { const w = COPY.why; const ref = useReveal(); const mobile = useIsMobile(); return (
{w.pillars.map((p, i) => (
0{i + 1}

{pri(p, lang)}

{sec(p, lang)}

{pri(p.body, lang)}

))}
); } // ===================== SOUVENIR TEASER ===================== function Souvenir({ lang }) { const s = COPY.souvenir; const ref = useReveal(); return (
{pri(s.cta, lang)} → {pri(s.phase, lang)}
{s.items.map((it, i) => (
{pri(it, lang)}
{sec(it, lang)}
))}
); } Object.assign(window, { WHATSAPP, Header, Hero, Trust, SectionHead, Portfolio, BuildCard, BuildModal, Process, Why, Souvenir });