/* global React */
const { useState, useEffect, useRef } = React;
// ---------- Logo ----------
function DMLogo() {
return (
DictaMedic.ai
);
}
// ---------- Lang toggle ----------
function LangToggle({ lang, setLang }) {
return (
);
}
// ---------- Nav ----------
function Nav({ t, lang, setLang }) {
return (
);
}
// ---------- Phone mockup with report ----------
function PhoneReport({ t, recording = false }) {
const r = t.product.report;
return (
{/* Status bar */}
11:24
{/* App header */}
{/* Sections */}
{r.sections.map((s, i) => (
))}
{/* Bottom action */}
);
}
// ---------- Recording phone state (for hero/preview) ----------
function PhoneRecording({ t }) {
return (
11:24
Consulta general
Nueva grabación
GRABANDO
04:38
{Array.from({ length: 18 }).map((_, i) => (
))}
El audio se procesa en la UE y se elimina tras la transcripción.
);
}
// ---------- Onboarding carousel (slidable iOS frame) ----------
function OnboardingCarousel({ width = 320 }) {
const slides = [
"onboarding-screenshoot-image/Onboarding_1_Dictation_v2.png",
"onboarding-screenshoot-image/Onboarding_2_Records_v2.png",
"onboarding-screenshoot-image/Onboarding_3_Anywhere_v2.png"
];
const labels = ["Dictation", "Records", "Anywhere"];
const [idx, setIdx] = useState(0);
const [drag, setDrag] = useState(0);
const [dragging, setDragging] = useState(false);
const startX = useRef(null);
const height = Math.round(width * (874 / 402));
useEffect(() => {
if (dragging) return;
const id = setTimeout(() => setIdx((i) => (i + 1) % slides.length), 5200);
return () => clearTimeout(id);
}, [idx, dragging]);
const begin = (x) => { startX.current = x; setDrag(0); setDragging(true); };
const move = (x) => { if (startX.current != null) setDrag(x - startX.current); };
const end = () => {
if (startX.current == null) return;
const threshold = width * 0.18;
if (drag < -threshold) setIdx((i) => Math.min(slides.length - 1, i + 1));
else if (drag > threshold) setIdx((i) => Math.max(0, i - 1));
startX.current = null;
setDrag(0);
setDragging(false);
};
const offset = -idx * 100 + (drag / width) * 100;
const surface = (
begin(e.clientX)}
onMouseMove={(e) => startX.current != null && move(e.clientX)}
onMouseUp={end}
onMouseLeave={end}
onTouchStart={(e) => begin(e.touches[0].clientX)}
onTouchMove={(e) => move(e.touches[0].clientX)}
onTouchEnd={end}
style={{ width: "100%", height: "100%", position: "relative", overflow: "hidden", userSelect: "none", cursor: dragging ? "grabbing" : "grab", touchAction: "pan-y" }}
>
{slides.map((src, i) => (
))}
{surface}
{slides.map((_, i) => (
);
}
// ---------- Footer ----------
function Footer({ t }) {
return (
);
}
// ---------- FAQ ----------
function FAQSection({ t }) {
return (
{t.sectionLabels.faq}
{t.faq.title}
{t.faq.items.map((item, i) => (
{String(i + 1).padStart(2, "0")}
{item.q}
+
{item.a}
))}
);
}
// ---------- CTA ----------
function CTASection({ t }) {
const [email, setEmail] = useState("");
const [status, setStatus] = useState("idle"); // idle | sending | sent | error
const [errorMsg, setErrorMsg] = useState("");
async function handleSubmit(e) {
e.preventDefault();
if (!email || status === "sending") return;
setStatus("sending");
setErrorMsg("");
try {
const res = await fetch("/api/subscribe", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email }),
});
if (!res.ok) {
const data = await res.json().catch(() => ({}));
throw new Error(data.error || "Send failed");
}
setStatus("sent");
} catch (err) {
setStatus("error");
setErrorMsg(err.message || "Send failed");
}
}
return (
{t.cta.eyebrow}
{t.cta.title}
{t.cta.sub}
{status === "sent" ? (
{t.cta.successEyebrow}
{t.cta.successMessage}
) : (
)}
{status === "error" && (
{errorMsg || t.cta.errorFallback}
)}
{t.cta.note}
);
}
Object.assign(window, { DMLogo, LangToggle, Nav, PhoneReport, PhoneRecording, OnboardingCarousel, Footer, FAQSection, CTASection });
![{labels[i]}]({src})
))}