/* global React */
const { useState, useEffect, useRef } = React;
/* ============================================================
Atoms
============================================================ */
const Eyebrow = ({ children }) => ({children}
);
const Rule = ({ width = 64 }) => (
◆
);
const SectionHeader = ({ eyebrow, title, align = "center" }) => (
{eyebrow && {eyebrow}}
{eyebrow && }
{title && (
{title.split('\n').map((l, i) => {l}
)}
)}
);
const Btn = ({ variant = "primary", icon, children, href = "#", type, onClick }) => {
const klass = `btn btn--${variant}`;
const inner = (
<>
{icon && {icon}}
{children}
);
if (type === "submit" || type === "button") {
return ;
}
return {inner};
};
/* ============================================================
Iconography
============================================================ */
const Icon = ({ name, size = 20, stroke = 1.5 }) => {
const props = {
width: size, height: size, viewBox: "0 0 24 24",
fill: "none", stroke: "currentColor",
strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round",
};
switch (name) {
case "instagram":
return ;
case "whatsapp":
return ;
case "youtube":
return ;
case "pin":
case "location":
return ;
case "menu":
return ;
case "ring":
return ;
case "bands":
return ;
case "diamond":
return ;
case "sparkle":
return ;
case "play":
return ;
case "arrow":
return ;
case "heart":
return ;
case "user":
return ;
case "calendar":
return ;
case "globe":
return ;
case "tiktok":
return ;
case "pinterest":
return ;
case "scrollDot":
return ;
case "check":
return ;
default: return null;
}
};
/* ============================================================
Photo placeholders
============================================================ */
const PhotoPlaceholder = ({ tone = "ring", aspect = "1/1", className = "", caption }) => {
const renderJewel = () => {
if (tone === "ring") return (
);
if (tone === "bands") return (
);
if (tone === "pendant") return (
);
if (tone === "emerald") return (
);
if (tone === "store") return (
VENTA
JEWELRY
);
if (tone === "interior") return (
);
if (tone === "workshop") return (
);
return null;
};
return (
{caption && ◆ {caption}}
);
};
const Wordmark = ({ size = "sm" }) => (
);
/* ============================================================
STICKY TOPBAR (separate from hero so it can stick)
============================================================ */
const TopBar = ({ brand }) => (
);
/* ============================================================
1. HERO (no topbar inside anymore)
============================================================ */
const Hero = ({ data }) => (
{data.title.split('\n').map((l,i)=>({l}
))}
{data.sub}
{data.primaryCta.label}
{data.secondaryCta.label}
KAYDIR
);
/* ============================================================
2. QUICK ACCESS
============================================================ */
const QuickAccess = ({ items }) => (
);
/* ============================================================
3. FEATURED PIECES (now before collections)
============================================================ */
const FeaturedCard = ({ p }) => (
{p.name}
{p.price}
);
const Featured = ({ header, items }) => {
const [page, setPage] = useState(0);
return (
{header.eyebrow}
{items.map(p => )}
{[0,1,2].map(i => setPage(i)}/>)}
TÜM KOLEKSİYONLAR
);
};
/* ============================================================
4. COLLECTIONS
============================================================ */
const CollectionCard = ({ c }) => (
{c.title}
Keşfet
);
const Collections = ({ header, items }) => {
const railRef = useRef(null);
const [page, setPage] = useState(0);
const onScroll = () => {
const el = railRef.current; if (!el) return;
const w = el.clientWidth * 0.85;
setPage(Math.round(el.scrollLeft / w));
};
return (
{items.map(c => )}
{items.map((_,i) => )}
);
};
/* ============================================================
5. BESPOKE VIDEO
============================================================ */
const BespokeVideo = ({ data }) => (
{data.eyebrow}
{data.title.split('\n').map((l,i)=>{l}
)}
{data.sub}
{data.cta.label}
◆
);
/* ============================================================
6. APPOINTMENT FORM
============================================================ */
const FieldLabel = ({ children }) => (
);
const Appointment = ({ data }) => {
const [interest, setInterest] = useState(data.interests[0]);
const [submitted, setSubmitted] = useState(false);
const onSubmit = (e) => { e.preventDefault(); setSubmitted(true); };
return (
{data.eyebrow}
{data.title.split('\n').map((l,i)=>{l}
)}
{data.sub}
{submitted ? (
Talebiniz Alındı
{data.foot}
) : (
)}
);
};
/* ============================================================
7. STORE (Mağazamız) — single photo placeholder + CTA
============================================================ */
const Store = ({ data }) => (
{data.eyebrow}
◆
Mağaza fotoğrafı buraya gelecek
);
/* ============================================================
8. WORLDWIDE
============================================================ */
const WorldDots = () => {
const dots = [];
for (let r = 0; r < 18; r++) {
for (let c = 0; c < 36; c++) {
const seed = (Math.sin(r*7.3 + c*1.7) + 1) / 2;
if (seed > 0.55) {
dots.push();
}
}
}
return ;
};
const Worldwide = ({ data }) => (
◆
{data.eyebrow}
{data.sub.split('\n').map((l,i)=>{l}
)}
{data.signature}
);
/* ============================================================
9. CONNECT
============================================================ */
const Connect = ({ data, socials, brand, copyright }) => (
{data.eyebrow}
{data.title}
{data.sub.split('\n').map((l,i)=>{l}
)}
} href={brand.whatsapp}>
{data.primary.label}
} href={brand.website}>
{data.secondary.label}
} href={brand.location}>
YOL TARİFİ AL
{copyright}
);
/* ============================================================
APP — new section order (no Promise)
============================================================ */
const App = () => {
const D = window.VENTA_DATA;
return (
);
};
window.App = App;