/* Shared UI components, v1 visual language. */ const { useState, useEffect, useRef } = React; /* Hover preview for a YouTube reel embed. Toggling autoplay in the src reliably starts a muted preview on hover and resets to YouTube's own thumbnail on mouse-out. While the clip is actually playing, YouTube hides its title/channel overlay, so the video stays clear. */ function reelPreview(card, on) { const iframe = card && card.querySelector("iframe"); if (!iframe) return; const base = iframe.dataset.base; if (!base) return; const next = on ? base + "&autoplay=1" : base; if (iframe.getAttribute("src") !== next) iframe.setAttribute("src", next); } /* ---------- Icons ---------- */ function Icon({ name, size = 22, stroke = 1.7, style, fill = "none" }) { const p = { width: size, height: size, viewBox: "0 0 24 24", fill, stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round", style }; const paths = { arrow: <>, chevronRight: , phone: , pin: <>, building: , calendar: <>, clock: <>, check: , plus: <>, close: <>, menu: , mail: <>, shield: <>, heart: , brain: , spine: , bolt: , play: , user: <>, home: <>, star: , award: <>, doc: <>, cap: , whatsapp: , youtube: <>, }; return ; } /* Latest platform logos — hard-coded brand fills (no opacity washout) */ function SocialBrandIcon({ brand, size = 18 }) { const s = { width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": true, focusable: "false" }; if (brand === "instagram") { return ( ); } if (brand === "linkedin") { return ( ); } if (brand === "youtube") { return ( ); } if (brand === "x") { return ( ); } return null; } function Stars({ n = 5 }) {return {"★".repeat(n)};} function StoryCard({ story, expanded, onToggle, readMoreLabel, onReadMore }) { const expandable = typeof onToggle === "function"; const clamped = expandable ? !expanded : true; const longQuote = story.quote.length > 280; return (

{story.treatment}

“{story.quote}”

{story.initial}

{story.name}{story.detail}

{expandable && longQuote && } {readMoreLabel && onReadMore && }

); } /* ---------- Placeholder image ---------- */ function Ph({ label, ratio = "4 / 3", round = 16, style, className = "" }) { return (

{label}

); } /* ---------- Button ---------- */ function Btn({ children, variant = "primary", onClick, icon, type = "button", block, href, newTab, disabled, contact }) { const cls = `btn${variant !== "primary" ? " btn-" + variant : ""}${block ? " btn-block" : ""}`; const ref = useRef(null); useMagnetic(ref); const inner = <>{children}{icon && }; // Text color follows the variant so light/ghost buttons aren't forced to white. // Primary sits on a dark fill -> white; light/ghost sit on pale fills -> deep teal. const txt = (variant === "light" || variant === "ghost") ? "var(--deep)" : "#fff"; if (contact) { return ( {inner} ); } if (href) return {inner}; return ; } /* ---------- Protected contact links (anti-scrape) ---------- */ function ContactText({ kind }) { return ContactProtect.label(kind === "email" ? "email" : "phone"); } function ContactLink({ kind, className, children, icon, iconSize = 16, newTab, onClick, style, role, "aria-label": ariaLabel, magRef, }) { const localRef = useRef(null); const ref = magRef || localRef; const [href, setHref] = useState(""); const arm = () => { const next = ContactProtect.href(kind); setHref(next); return next; }; const handleClick = (e) => { const next = href || arm(); if (onClick) onClick(e); if (!href) { e.preventDefault(); if (newTab) window.open(next, "_blank", "noopener,noreferrer"); else window.location.href = next; } }; return ( {icon ? : null} {children} ); } function Eyebrow({ children, light }) { return {children}; } /* ---------- Header ---------- */ function Header({ view, go }) { const [open, setOpen] = useState(false); const [scrolled, setScrolled] = useState(false); const [contactOpen, setContactOpen] = useState(false); const contactRef = useRef(null); const brandAlignRef = useRef(null); const brandTagRef = useRef(null); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); window.addEventListener("scroll", onScroll);onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); useEffect(() => { const fit = () => { const align = brandAlignRef.current; const tag = brandTagRef.current; if (!align || !tag) return; tag.style.letterSpacing = "0px"; tag.style.maxWidth = "none"; const alignW = align.getBoundingClientRect().width; const tagW = tag.getBoundingClientRect().width; const chars = Math.max(tag.textContent.length - 1, 1); if (tagW <= alignW) { const next = Math.max(0, (alignW - tagW) / chars); tag.style.letterSpacing = `${next.toFixed(3)}px`; tag.style.maxWidth = "none"; } else { tag.style.letterSpacing = "0px"; tag.style.maxWidth = `${alignW}px`; } }; fit(); window.addEventListener("resize", fit, { passive: true }); if (document.fonts) document.fonts.ready.then(fit); return () => window.removeEventListener("resize", fit); }, [scrolled, open]); useEffect(() => { if (!contactOpen) return; const onDoc = (e) => { if (contactRef.current && !contactRef.current.contains(e.target)) setContactOpen(false); }; const onKey = (e) => { if (e.key === "Escape") setContactOpen(false); }; document.addEventListener("mousedown", onDoc); document.addEventListener("keydown", onKey); return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onKey); }; }, [contactOpen]); useEffect(() => { setContactOpen(false); }, [view, open]); const links = [ ["home", "Home"], ["about", "About"], ["speciality", "Speciality"], ["why-us", "Why Us?"], ["media", "Social"], ["stories", "Patient Stories"]]; const nav = (id) => {go(id);setOpen(false);}; const mapsUrl = (query) => `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(query)}`; const mapKphb = mapsUrl(LOCATIONS[0].mapQuery); const mapHitech = mapsUrl(LOCATIONS[1].mapQuery); return (

{contactOpen && } KPHB Hi-tech city

{open &&

{links.map(([id, label]) => )}

nav("booking")} icon="calendar">Appointment

}

); } /* ---------- Reel carousel (shared by Home + Media) ---------- */ function ReelCarousel() { const trackRef = useRef(null); const base = (id) => `https://www.youtube.com/embed/${id}?playsinline=1&mute=1&rel=0&controls=0&modestbranding=1&iv_load_policy=3`; const scroll = (dir) => { const el = trackRef.current; if (!el) return; const card = el.querySelector(".reel-card"); const step = card ? (card.offsetWidth + 16) * 2 : 320; const max = el.scrollWidth - el.clientWidth; const target = Math.max(0, Math.min(max, el.scrollLeft + dir * step)); if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { el.scrollLeft = target; return; } const start = el.scrollLeft; const dist = target - start; const dur = 380; let t0 = null; const ease = (p) => 1 - Math.pow(1 - p, 3); const tick = (ts) => { if (t0 === null) t0 = ts; const p = Math.min(1, (ts - t0) / dur); el.scrollLeft = start + dist * ease(p); if (p < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); }; return (

{MEDIA_REELS.map(r => (

reelPreview(e.currentTarget, true)} onMouseLeave={(e) => reelPreview(e.currentTarget, false)} >

))}

); } /* ---------- Footer ---------- */ function Footer({ go }) { const year = new Date().getFullYear(); const brandAlignRef = useRef(null); const brandTagRef = useRef(null); useEffect(() => { const fit = () => { const align = brandAlignRef.current; const tag = brandTagRef.current; if (!align || !tag) return; tag.style.letterSpacing = "0px"; tag.style.maxWidth = "none"; const alignW = align.getBoundingClientRect().width; const tagW = tag.getBoundingClientRect().width; const chars = Math.max(tag.textContent.length - 1, 1); if (tagW <= alignW) { const next = Math.max(0, (alignW - tagW) / chars); tag.style.letterSpacing = `${next.toFixed(3)}px`; tag.style.maxWidth = "none"; } else { tag.style.letterSpacing = "0px"; tag.style.maxWidth = `${alignW}px`; } }; fit(); window.addEventListener("resize", fit, { passive: true }); if (document.fonts) document.fonts.ready.then(fit); return () => window.removeEventListener("resize", fit); }, []); return ( ); } /* ---------- Page hero ---------- */ function PageHero({ eyebrow, title, sub }) { return (

{eyebrow && {eyebrow}}

{title}

{sub &&

{sub}

}

); } /* ---------- Locations ---------- */ function LocationsSection({ go }) { return (

Where to find Dr. Reddy

Two trusted locations across the city.

{LOCATIONS.map(l => (

{l.name}

{l.line1}, {l.note.toLowerCase()}.

go("booking")}>Directions & hours