// Main feature sections: CRM individualizado, Publicación en portales, IA Dual

// ════════════════════════════════════════════
// FEATURE 1: CRM Individualizado — el lead correcto al corredor correcto
// ════════════════════════════════════════════
function FeatureInbox() {
	return (
		<Section id="crm" bg={T.bg} py={120}>
			<div
				style={{
					display: "grid",
					gridTemplateColumns: "500px 1fr",
					gap: 80,
					alignItems: "center",
					maxWidth: 1280,
					margin: "0 auto",
				}}
			>
				<div>
					<SectionEyebrow>01 · CRM Individualizado</SectionEyebrow>
					<SectionTitle>
						El lead correcto, <GradientText>al corredor correcto.</GradientText>
					</SectionTitle>
					<SectionLead>
						Cada consulta —venga de cualquier portal inmobiliario conectado, de
						tu web propia o de WhatsApp— se enruta automáticamente al CRM
						personal del corredor que tomó la captación. Sin Excel paralelo, sin
						grupos de WhatsApp, sin leads perdidos.
					</SectionLead>

					<div
						style={{
							display: "flex",
							flexDirection: "column",
							gap: 18,
							marginTop: 36,
						}}
					>
						{[
							{
								ic: "📥",
								t: "Bandeja por corredor",
								d: "Cada corredor solo ve los leads de sus propiedades. Privacidad y foco asegurados.",
							},
							{
								ic: "⚡",
								t: "Asignación automática",
								d: "Reglas por comuna, tipo de propiedad, operación o turnos. Los leads no quedan huérfanos.",
							},
							{
								ic: "📊",
								t: "Historial completo del cliente",
								d: "Toda la conversación de todos los canales en un solo timeline. Incluye correos, llamadas y visitas.",
							},
						].map((f, i) => (
							<div
								key={i}
								style={{ display: "flex", gap: 16, alignItems: "flex-start" }}
							>
								<div
									style={{
										width: 40,
										height: 40,
										borderRadius: 10,
										background: T.bg3,
										display: "flex",
										alignItems: "center",
										justifyContent: "center",
										fontSize: 18,
										border: `1px solid ${T.rule}`,
										flexShrink: 0,
									}}
								>
									{f.ic}
								</div>
								<div>
									<div
										style={{
											fontSize: 15.5,
											fontWeight: 700,
											color: T.ink,
											letterSpacing: "-0.01em",
											marginBottom: 4,
										}}
									>
										{f.t}
									</div>
									<p
										style={{
											margin: 0,
											fontSize: 13.5,
											color: T.ink2,
											lineHeight: 1.55,
										}}
									>
										{f.d}
									</p>
								</div>
							</div>
						))}
					</div>

					<div
						style={{
							marginTop: 36,
							display: "flex",
							alignItems: "center",
							gap: 14,
						}}
					>
						<a
							href="mailto:venta@ia-prop.com"
							style={{
								fontSize: 14.5,
								fontWeight: 600,
								color: T.ink,
								display: "inline-flex",
								alignItems: "center",
								gap: 6,
								borderBottom: `2px solid ${T.ink}`,
								paddingBottom: 2,
								textDecoration: "none",
							}}
						>
							Ver módulo CRM →
						</a>
					</div>
				</div>

				{/* Right: lead routing visualization */}
				<FeatureInboxVisual />
			</div>
		</Section>
	);
}
window.FeatureInbox = FeatureInbox;

function FeatureInboxVisual() {
	const portals = [
		{ n: "Portal Inmob.", c: T.blue, x: 0, y: 0 },
		{ n: "Yapo.cl", c: T.pink, x: 0, y: 70 },
		{ n: "Toctoc", c: T.purple, x: 0, y: 140 },
		{ n: "Mercado Libre", c: T.orange, x: 0, y: 210 },
		{ n: "Web propia", c: T.green, x: 0, y: 280 },
	];

	const brokers = [
		{
			n: "Ana C.",
			com: "Centro · Comuna A",
			leads: 14,
			init: "AC",
			c: "#3b6cf5",
		},
		{
			n: "Luis B.",
			com: "Norte · Comuna B",
			leads: 9,
			init: "LB",
			c: "#e63d8a",
		},
		{
			n: "Sara V.",
			com: "Sur · Comuna C",
			leads: 11,
			init: "SV",
			c: "#ff7a30",
		},
		{
			n: "Sin asignar",
			com: "Auto-asignación",
			leads: 3,
			init: "+",
			c: T.muted,
			dim: true,
		},
	];

	return (
		<div
			style={{
				position: "relative",
				height: 520,
				background: T.bg3,
				borderRadius: 24,
				padding: 32,
				border: `1px solid ${T.rule}`,
				overflow: "hidden",
			}}
		>
			<div
				style={{
					display: "grid",
					gridTemplateColumns: "180px 1fr 220px",
					gap: 20,
					height: "100%",
					alignItems: "center",
				}}
			>
				{/* Sources */}
				<div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
					<div
						style={{
							fontSize: 10.5,
							color: T.muted,
							fontFamily: "JetBrains Mono, monospace",
							letterSpacing: "0.08em",
							fontWeight: 700,
							marginBottom: 4,
						}}
					>
						FUENTES
					</div>
					{portals.map((p, i) => (
						<div
							key={i}
							style={{
								padding: "10px 14px",
								background: "#fff",
								borderRadius: 10,
								border: `1px solid ${T.rule}`,
								display: "flex",
								alignItems: "center",
								gap: 10,
								position: "relative",
								boxShadow: "0 2px 6px rgba(0,0,0,0.04)",
							}}
						>
							<span
								style={{
									width: 8,
									height: 8,
									borderRadius: 99,
									background: p.c,
									animation: "pulse-dot 2.5s infinite",
								}}
							></span>
							<span style={{ fontSize: 12, fontWeight: 600, color: T.ink }}>
								{p.n}
							</span>
						</div>
					))}
				</div>

				{/* Middle: routing engine */}
				<div
					style={{
						position: "relative",
						height: "100%",
						display: "flex",
						alignItems: "center",
						justifyContent: "center",
					}}
				>
					{/* SVG flow lines */}
					<svg
						width="100%"
						height="100%"
						viewBox="0 0 240 360"
						style={{ position: "absolute", inset: 0 }}
						preserveAspectRatio="none"
					>
						<defs>
							<linearGradient id="flow-grad" x1="0" y1="0" x2="1" y2="0">
								<stop offset="0%" stopColor="#3b6cf5" stopOpacity="0.6" />
								<stop offset="50%" stopColor="#e63d8a" stopOpacity="0.7" />
								<stop offset="100%" stopColor="#ff7a30" stopOpacity="0.6" />
							</linearGradient>
						</defs>
						{[40, 110, 180, 250, 320].map((y, i) => (
							<path
								key={i}
								d={`M 0 ${y} C 80 ${y}, 80 180, 120 180`}
								stroke="url(#flow-grad)"
								strokeWidth="1.5"
								fill="none"
								strokeDasharray="3 4"
								style={{ animation: "arrow-flow 1.5s linear infinite" }}
							/>
						))}
						{[60, 180, 300].map((y, i) => (
							<path
								key={i}
								d={`M 120 180 C 160 180, 160 ${y}, 240 ${y}`}
								stroke="url(#flow-grad)"
								strokeWidth="1.5"
								fill="none"
								strokeDasharray="3 4"
								style={{ animation: "arrow-flow 1.5s linear infinite" }}
							/>
						))}
					</svg>

					{/* Engine badge */}
					<div
						style={{
							position: "relative",
							background: "#fff",
							borderRadius: 16,
							padding: "18px 14px",
							textAlign: "center",
							width: 130,
							boxShadow:
								"0 10px 30px rgba(176,60,214,0.18), 0 0 0 1px rgba(176,60,214,0.2)",
						}}
					>
						<div
							style={{
								width: 36,
								height: 36,
								borderRadius: 9,
								background: GRAD,
								margin: "0 auto 10px",
							}}
						></div>
						<div
							style={{
								fontSize: 12,
								fontWeight: 800,
								color: T.ink,
								letterSpacing: "-0.01em",
								marginBottom: 3,
							}}
						>
							Motor de ruteo
						</div>
						<div
							style={{
								fontSize: 10,
								color: T.muted,
								fontFamily: "JetBrains Mono, monospace",
								lineHeight: 1.4,
							}}
						>
							+ Lead scoring IA
							<br />+ Reglas por comuna
						</div>
						<div
							style={{
								marginTop: 10,
								padding: "4px 8px",
								background: T.bg3,
								borderRadius: 99,
								fontSize: 9.5,
								color: T.muted,
								fontFamily: "JetBrains Mono, monospace",
								letterSpacing: "0.06em",
							}}
						>
							RUTEO AUTOMÁTICO
						</div>
					</div>
				</div>

				{/* Brokers */}
				<div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
					<div
						style={{
							fontSize: 10.5,
							color: T.muted,
							fontFamily: "JetBrains Mono, monospace",
							letterSpacing: "0.08em",
							fontWeight: 700,
							marginBottom: 4,
						}}
					>
						CORREDORES
					</div>
					{brokers.map((b, i) => (
						<div
							key={i}
							style={{
								padding: "12px 14px",
								background: "#fff",
								borderRadius: 10,
								border: `1px solid ${b.dim ? T.ruleSoft : T.rule}`,
								boxShadow: b.dim ? "none" : "0 4px 14px rgba(0,0,0,0.04)",
								opacity: b.dim ? 0.6 : 1,
								display: "flex",
								alignItems: "center",
								gap: 10,
							}}
						>
							<div
								style={{
									width: 30,
									height: 30,
									borderRadius: 99,
									background: b.c,
									color: "#fff",
									display: "flex",
									alignItems: "center",
									justifyContent: "center",
									fontSize: 11,
									fontWeight: 700,
									flexShrink: 0,
								}}
							>
								{b.init}
							</div>
							<div style={{ flex: 1, minWidth: 0 }}>
								<div
									style={{
										fontSize: 12,
										fontWeight: 700,
										color: T.ink,
										letterSpacing: "-0.01em",
									}}
								>
									{b.n}
								</div>
								<div
									style={{
										fontSize: 10,
										color: T.muted,
										marginTop: 1,
										whiteSpace: "nowrap",
										overflow: "hidden",
										textOverflow: "ellipsis",
									}}
								>
									{b.com}
								</div>
							</div>
							<div
								style={{
									fontSize: 11,
									fontWeight: 700,
									color: T.ink,
									fontFamily: "JetBrains Mono, monospace",
								}}
							>
								{b.leads}
							</div>
						</div>
					))}
				</div>
			</div>
		</div>
	);
}

// ════════════════════════════════════════════
// FEATURE 2: Publicación 1 → 4 portales
// ════════════════════════════════════════════
function FeaturePortals() {
	return (
		<Section id="portales" bg={T.bg2} py={120}>
			<div
				style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 64px" }}
			>
				<SectionEyebrow>02 · Publicación multi-portal</SectionEyebrow>
				<SectionTitle>
					Una propiedad. Todos los portales.
					<br />
					<GradientText>Un solo click.</GradientText>
				</SectionTitle>
				<SectionLead style={{ margin: "20px auto 0" }}>
					Conectores nativos con los principales portales inmobiliarios.
					Sincronización bidireccional: tú publicas, los leads vuelven al CRM en
					segundos.
				</SectionLead>
			</div>

			<PortalFlow />

			<div
				style={{
					display: "grid",
					gridTemplateColumns: "repeat(4, 1fr)",
					gap: 16,
					maxWidth: 1280,
					margin: "64px auto 0",
				}}
			>
				{[
					{
						n: "Portal Inmobiliario",
						sub: "Conector nativo",
						feat: [
							"OAuth + Webhooks",
							"Sync de leads",
							"Estadísticas en tiempo real",
						],
						c: T.blue,
					},
					{
						n: "Yapo.cl",
						sub: "Avisos destacados",
						feat: [
							"XML cnImport",
							"Silver / Gold / Platinum",
							"Impresiones · llamadas",
						],
						c: T.pink,
					},
					{
						n: "Toctoc",
						sub: "Premium residencial",
						feat: ["REST JSON", "Leads por polling", "Favoritos + visitas"],
						c: T.purple,
					},
					{
						n: "Mercado Libre",
						sub: "Multi-país",
						feat: [
							"OAuth2 + Webhooks",
							"Respuestas automáticas",
							"Cobertura regional",
						],
						c: T.orange,
					},
				].map((p, i) => (
					<div
						key={i}
						style={{
							background: "#fff",
							borderRadius: 14,
							padding: 22,
							border: `1px solid ${T.rule}`,
							position: "relative",
							boxShadow: "0 1px 2px rgba(0,0,0,0.02)",
						}}
					>
						<div
							style={{
								display: "flex",
								alignItems: "center",
								gap: 10,
								marginBottom: 14,
							}}
						>
							<div
								style={{
									width: 36,
									height: 36,
									borderRadius: 8,
									background: p.c,
									color: "#fff",
									display: "flex",
									alignItems: "center",
									justifyContent: "center",
									fontSize: 16,
									fontWeight: 800,
									flexShrink: 0,
								}}
							>
								{p.n[0]}
							</div>
							<div style={{ minWidth: 0, flex: 1 }}>
								<div
									style={{
										fontSize: 14,
										fontWeight: 700,
										color: T.ink,
										letterSpacing: "-0.015em",
										whiteSpace: "nowrap",
										overflow: "hidden",
										textOverflow: "ellipsis",
									}}
								>
									{p.n}
								</div>
								<div
									style={{ fontSize: 11, color: T.muted, whiteSpace: "nowrap" }}
								>
									{p.sub}
								</div>
							</div>
						</div>
						<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
							{p.feat.map((f, j) => (
								<div
									key={j}
									style={{
										fontSize: 12.5,
										color: T.ink2,
										display: "flex",
										alignItems: "center",
										gap: 8,
									}}
								>
									<span style={{ color: T.green, fontWeight: 700 }}>✓</span>
									{f}
								</div>
							))}
						</div>
						<div
							style={{
								position: "absolute",
								top: 14,
								right: 14,
								fontSize: 9.5,
								color: T.green,
								fontFamily: "JetBrains Mono, monospace",
								display: "flex",
								alignItems: "center",
								gap: 4,
								whiteSpace: "nowrap",
							}}
						>
							<span
								style={{
									width: 5,
									height: 5,
									borderRadius: 99,
									background: T.green,
								}}
							></span>
							CONECTADO
						</div>
					</div>
				))}
			</div>
		</Section>
	);
}
window.FeaturePortals = FeaturePortals;

function PortalFlow() {
	const portals = [
		{
			n: "Portal Inmobiliario",
			c: T.blue,
			status: "Publicado · 1.247 vistas",
			time: "+ 38 leads",
		},
		{
			n: "Yapo.cl",
			c: T.pink,
			status: "Publicado · destacado Gold",
			time: "+ 22 leads",
		},
		{
			n: "Toctoc",
			c: T.purple,
			status: "Publicado · 12 favoritos",
			time: "+ 9 leads",
		},
		{
			n: "Mercado Libre",
			c: T.orange,
			status: "Publicado · CL + AR",
			time: "+ 14 leads",
		},
	];

	return (
		<div
			style={{
				display: "grid",
				gridTemplateColumns: "340px 1fr 360px",
				gap: 40,
				alignItems: "center",
				maxWidth: 1280,
				margin: "0 auto",
				position: "relative",
			}}
		>
			{/* Source property card */}
			<div
				style={{
					background: "#fff",
					borderRadius: 16,
					overflow: "hidden",
					border: `1px solid ${T.rule}`,
					boxShadow: "0 20px 50px -10px rgba(15,20,25,0.12)",
					position: "relative",
				}}
			>
				<div
					style={{
						height: 180,
						background: "linear-gradient(135deg, #94a3b8 0%, #475569 100%)",
						position: "relative",
					}}
				>
					<div
						style={{
							position: "absolute",
							inset: 0,
							backgroundImage:
								"repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 12px, transparent 12px 24px)",
						}}
					></div>
					<div
						style={{
							position: "absolute",
							top: 12,
							left: 12,
							padding: "4px 10px",
							background: "rgba(0,0,0,0.65)",
							color: "#fff",
							fontSize: 10.5,
							fontWeight: 600,
							borderRadius: 4,
							fontFamily: "JetBrains Mono, monospace",
						}}
					>
						📷 24 fotos · WebP
					</div>
					<div
						style={{
							position: "absolute",
							top: 12,
							right: 12,
							padding: "4px 10px",
							background: "#fff",
							color: T.ink,
							fontSize: 10.5,
							fontWeight: 700,
							borderRadius: 4,
						}}
					>
						VENTA · UF 12.300
					</div>
					<div
						style={{
							position: "absolute",
							bottom: 12,
							left: 12,
							padding: "4px 10px",
							background: "rgba(0,0,0,0.65)",
							color: "#fff",
							fontSize: 10.5,
							fontWeight: 600,
							borderRadius: 4,
							display: "flex",
							alignItems: "center",
							gap: 5,
						}}
					>
						<span>📍</span>Apoquindo 4445
					</div>
				</div>
				<div style={{ padding: 16 }}>
					<div
						style={{
							display: "flex",
							justifyContent: "space-between",
							alignItems: "flex-start",
							marginBottom: 8,
						}}
					>
						<div>
							<div
								style={{
									fontSize: 15,
									fontWeight: 700,
									color: T.ink,
									letterSpacing: "-0.01em",
								}}
							>
								Depto. Apoquindo 4445
							</div>
							<div style={{ fontSize: 12, color: T.muted, marginTop: 2 }}>
								4 dorm. · 3 baños · 142 m²
							</div>
						</div>
						<span
							style={{
								padding: "3px 8px",
								background: "#dcfce7",
								color: "#15803d",
								fontSize: 10,
								fontWeight: 700,
								borderRadius: 4,
							}}
						>
							ACTIVA
						</span>
					</div>
					<div
						style={{
							padding: 10,
							background: T.bg3,
							borderRadius: 8,
							fontSize: 11,
							color: T.ink2,
							lineHeight: 1.5,
							fontFamily: "JetBrains Mono, monospace",
						}}
					>
						<span style={{ color: T.muted }}>Código:</span> RE-2310-A
						<br />
						<span style={{ color: T.muted }}>Captado por:</span> Ana C.
						<br />
						<span style={{ color: T.muted }}>Geolocalizada:</span> ✓ Google Maps
					</div>
				</div>
			</div>

			{/* Middle: publish action + flow lines */}
			<div
				style={{
					position: "relative",
					height: 360,
					display: "flex",
					alignItems: "center",
					justifyContent: "center",
				}}
			>
				<svg
					width="100%"
					height="100%"
					viewBox="0 0 360 360"
					style={{ position: "absolute", inset: 0 }}
					preserveAspectRatio="none"
				>
					<defs>
						<linearGradient id="flow2" x1="0" y1="0" x2="1" y2="0">
							<stop offset="0%" stopColor="#3b6cf5" />
							<stop offset="33%" stopColor="#b03cd6" />
							<stop offset="66%" stopColor="#e63d8a" />
							<stop offset="100%" stopColor="#ff7a30" />
						</linearGradient>
					</defs>
					{[40, 130, 230, 320].map((y, i) => (
						<g key={i}>
							<path
								d={`M 0 180 C 100 180, 180 ${y}, 360 ${y}`}
								stroke="url(#flow2)"
								strokeWidth="2"
								fill="none"
								strokeDasharray="4 4"
								style={{ animation: "arrow-flow 1.2s linear infinite" }}
							/>
						</g>
					))}
				</svg>

				<div
					style={{
						position: "relative",
						textAlign: "center",
						background: "#fff",
						borderRadius: 18,
						padding: "20px 18px",
						width: 200,
						boxShadow:
							"0 20px 50px -10px rgba(230,61,138,0.25), 0 0 0 1px rgba(230,61,138,0.15)",
					}}
				>
					<div
						style={{
							width: 48,
							height: 48,
							borderRadius: 12,
							background: GRAD,
							margin: "0 auto 12px",
							display: "flex",
							alignItems: "center",
							justifyContent: "center",
							fontSize: 22,
							animation: "glow 2s infinite",
						}}
					>
						⚡
					</div>
					<div
						style={{
							fontSize: 14,
							fontWeight: 800,
							color: T.ink,
							letterSpacing: "-0.01em",
							marginBottom: 4,
						}}
					>
						Publicar en portales
					</div>
					<div
						style={{
							fontSize: 11,
							color: T.muted,
							marginBottom: 14,
							lineHeight: 1.5,
						}}
					>
						Mapeo automático de atributos y categorías por portal
					</div>
					<a
						href="mailto:venta@ia-prop.com"
						style={{
							display: "block",
							width: "100%",
							padding: "9px",
							background: T.ink,
							color: "#fff",
							border: "none",
							borderRadius: 8,
							fontSize: 12,
							fontWeight: 700,
							cursor: "pointer",
							fontFamily: "inherit",
							textDecoration: "none",
							textAlign: "center",
							boxSizing: "border-box",
						}}
					>
						Publicar ahora →
					</a>
				</div>
			</div>

			{/* Destinations */}
			<div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
				{portals.map((p, i) => (
					<div
						key={i}
						style={{
							background: "#fff",
							borderRadius: 12,
							padding: "12px 14px",
							border: `1px solid ${T.rule}`,
							display: "flex",
							alignItems: "center",
							gap: 12,
							boxShadow: "0 4px 14px rgba(0,0,0,0.04)",
							animation: `float-soft ${4 + i * 0.4}s ease-in-out infinite`,
						}}
					>
						<div
							style={{
								width: 32,
								height: 32,
								borderRadius: 8,
								background: p.c,
								color: "#fff",
								display: "flex",
								alignItems: "center",
								justifyContent: "center",
								fontSize: 13,
								fontWeight: 800,
								flexShrink: 0,
							}}
						>
							{p.n[0]}
						</div>
						<div style={{ flex: 1, minWidth: 0 }}>
							<div
								style={{
									fontSize: 12.5,
									fontWeight: 700,
									color: T.ink,
									letterSpacing: "-0.01em",
								}}
							>
								{p.n}
							</div>
							<div style={{ fontSize: 10.5, color: T.muted }}>{p.status}</div>
						</div>
						<div
							style={{
								fontSize: 10.5,
								color: T.green,
								fontWeight: 700,
								fontFamily: "JetBrains Mono, monospace",
								textAlign: "right",
							}}
						>
							{p.time}
						</div>
					</div>
				))}
			</div>
		</div>
	);
}

// ════════════════════════════════════════════
// FEATURE 3: IA Dual — Inmobiliario + Tributario
// ════════════════════════════════════════════
function FeatureAIDual() {
	return (
		<section
			id="ia"
			style={{
				padding: "120px 56px",
				background: T.bgInk,
				color: "#fff",
				position: "relative",
				overflow: "hidden",
				scrollMarginTop: 100,
			}}
		>
			{/* Ambient gradients */}
			<div
				style={{
					position: "absolute",
					top: -200,
					left: "20%",
					width: 600,
					height: 600,
					borderRadius: 999,
					background:
						"radial-gradient(circle, rgba(59,108,245,0.2), transparent 60%)",
					filter: "blur(80px)",
				}}
			></div>
			<div
				style={{
					position: "absolute",
					bottom: -200,
					right: "15%",
					width: 700,
					height: 700,
					borderRadius: 999,
					background:
						"radial-gradient(circle, rgba(255,122,48,0.18), transparent 60%)",
					filter: "blur(80px)",
				}}
			></div>

			<div
				style={{
					position: "relative",
					textAlign: "center",
					maxWidth: 760,
					margin: "0 auto 64px",
				}}
			>
				<SectionEyebrow color={T.mutedHi}>
					03 · Inteligencia artificial
				</SectionEyebrow>
				<SectionTitle dark>
					Dos asistentes{" "}
					<GradientText>entrenados con la normativa local vigente</GradientText>
					, dentro del sistema.
				</SectionTitle>
				<SectionLead dark style={{ margin: "20px auto 0" }}>
					Respuestas inmobiliarias y cálculos tributarios en segundos, alineados
					con la regulación local de cada país donde operes. Sin cambiar de
					pestaña, sin copy-paste a ChatGPT, sin perder contexto del cliente.
				</SectionLead>
			</div>

			<div
				style={{
					position: "relative",
					display: "grid",
					gridTemplateColumns: "1fr 1fr",
					gap: 20,
					maxWidth: 1280,
					margin: "0 auto",
				}}
			>
				<AIChatCard
					variant="inmobiliario"
					title="IA Prop Inmobiliario"
					subtitle="Tasaciones · Redacción · Cláusulas legales"
					messages={[
						{
							role: "user",
							text: "Tengo cliente interesado en arriendo de oficina sector financiero, 120m². ¿Cuánto pediría yo?",
						},
						{
							role: "ai",
							text: "Para oficinas comerciales del sector financiero (120 m²) el rango actual de mercado es **UF 35–48 mensual**, con valores top en torres premium. Considerando piso medio y estado regular, te recomiendo **UF 38–42** con gasto común incluido. ¿Quieres que arme la ficha de captación?",
						},
					]}
					actions={[
						"Crear ficha",
						"Buscar comparables",
						"Generar email cliente",
					]}
					color={T.blue}
				/>

				<AIChatCard
					variant="tributario"
					title="IA Prop Tributario"
					subtitle="Impuestos · Liquidaciones · Conversión de monedas"
					messages={[
						{
							role: "user",
							text: "Cliente vendió parcela heredada de su abuelo, en zona rural. Precio $ 180 M. ¿Cuánto paga de impuestos según la normativa local?",
						},
						{
							role: "ai",
							text: "Cálculo referencial. Tributa sobre la utilidad entre precio de venta y avalúo fiscal, según la normativa local aplicable. Estimado:",
							table: [
								["Costo (avalúo)", "$ 42.000.000"],
								["Precio venta", "$ 180.000.000"],
								["Utilidad", "$ 138.000.000"],
								["Impuesto estimado", "$ 33.120.000", true],
							],
						},
					]}
					actions={[
						"Generar correo al cliente",
						"Ver detalle normativo",
						"Adjuntar al expediente",
					]}
					color={T.orange}
				/>
			</div>

			<div style={{ position: "relative", textAlign: "center", marginTop: 56 }}>
				<div
					style={{
						display: "inline-flex",
						gap: 14,
						alignItems: "center",
						padding: "14px 20px",
						background: "rgba(255,255,255,0.04)",
						border: "1px solid rgba(255,255,255,0.1)",
						borderRadius: 99,
						backdropFilter: "blur(20px)",
						flexWrap: "wrap",
						justifyContent: "center",
						maxWidth: "100%",
					}}
				>
					<span style={{ fontSize: 13, color: "#fff", fontWeight: 600 }}>
						Las respuestas quedan vinculadas al lead, al expediente y al
						historial del cliente.
					</span>
					<span
						style={{
							padding: "4px 10px",
							background: GRAD,
							color: "#fff",
							fontSize: 11,
							fontWeight: 700,
							borderRadius: 99,
							whiteSpace: "nowrap",
							flexShrink: 0,
						}}
					>
						Auditoría 100%
					</span>
				</div>
			</div>
		</section>
	);
}
window.FeatureAIDual = FeatureAIDual;

function AIChatCard({ variant, title, subtitle, messages, actions, color }) {
	return (
		<div
			style={{
				background: "rgba(20,23,40,0.6)",
				backdropFilter: "blur(20px)",
				border: "1px solid rgba(255,255,255,0.08)",
				borderRadius: 20,
				padding: 24,
				position: "relative",
				overflow: "hidden",
			}}
		>
			{/* Variant accent */}
			<div
				style={{
					position: "absolute",
					top: -60,
					right: -60,
					width: 240,
					height: 240,
					borderRadius: 999,
					background: `radial-gradient(circle, ${color}40, transparent 60%)`,
					filter: "blur(40px)",
				}}
			></div>

			<div style={{ position: "relative" }}>
				{/* Header */}
				<div
					style={{
						display: "flex",
						alignItems: "center",
						gap: 12,
						marginBottom: 6,
					}}
				>
					<div
						style={{
							width: 40,
							height: 40,
							borderRadius: 10,
							background:
								variant === "inmobiliario"
									? `linear-gradient(135deg, ${T.blue}, ${T.purple})`
									: `linear-gradient(135deg, ${T.pink}, ${T.orange})`,
							display: "flex",
							alignItems: "center",
							justifyContent: "center",
							fontSize: 18,
						}}
					>
						{variant === "inmobiliario" ? "🏠" : "📊"}
					</div>
					<div>
						<div
							style={{
								fontSize: 16,
								fontWeight: 800,
								color: "#fff",
								letterSpacing: "-0.015em",
							}}
						>
							{title}
						</div>
						<div style={{ fontSize: 11.5, color: T.mutedHi }}>{subtitle}</div>
					</div>
					<div
						style={{
							marginLeft: "auto",
							display: "flex",
							alignItems: "center",
							gap: 6,
							fontSize: 10.5,
							color: T.green,
							fontFamily: "JetBrains Mono, monospace",
						}}
					>
						<span
							style={{
								width: 6,
								height: 6,
								borderRadius: 99,
								background: T.green,
								boxShadow: `0 0 8px ${T.green}`,
							}}
						></span>
						ONLINE
					</div>
				</div>

				<div
					style={{
						height: 1,
						background: "rgba(255,255,255,0.06)",
						margin: "18px 0",
					}}
				></div>

				{/* Messages */}
				<div
					style={{
						display: "flex",
						flexDirection: "column",
						gap: 12,
						minHeight: 280,
					}}
				>
					{messages.map((m, i) => (
						<div
							key={i}
							style={{
								display: "flex",
								flexDirection: "column",
								alignItems: m.role === "user" ? "flex-end" : "flex-start",
							}}
						>
							{m.role === "user" ? (
								<div
									style={{
										maxWidth: "85%",
										background: "rgba(255,255,255,0.06)",
										color: "#e3e8ed",
										padding: "10px 14px",
										borderRadius: "14px 14px 4px 14px",
										fontSize: 13,
										lineHeight: 1.55,
									}}
								>
									{m.text}
								</div>
							) : (
								<div
									style={{
										maxWidth: "90%",
										background: "rgba(255,255,255,0.02)",
										border: "1px solid rgba(255,255,255,0.06)",
										padding: "12px 16px",
										borderRadius: "14px 14px 14px 4px",
									}}
								>
									<div
										style={{
											fontSize: 10,
											color: T.mutedHi,
											fontFamily: "JetBrains Mono, monospace",
											marginBottom: 6,
											display: "flex",
											alignItems: "center",
											gap: 6,
											letterSpacing: "0.06em",
										}}
									>
										<span
											style={{
												width: 8,
												height: 8,
												borderRadius: 99,
												background: GRAD,
											}}
										></span>
										IA PROP ·{" "}
										{variant === "tributario"
											? "NORMATIVA LOCAL"
											: variant.toUpperCase()}
									</div>
									<div
										style={{ fontSize: 13, color: "#e3e8ed", lineHeight: 1.6 }}
										dangerouslySetInnerHTML={{
											__html: m.text.replace(
												/\*\*(.+?)\*\*/g,
												'<strong style="color:#fff">$1</strong>',
											),
										}}
									></div>
									{m.table && (
										<div
											style={{
												marginTop: 10,
												background: "rgba(255,255,255,0.04)",
												borderRadius: 8,
												padding: "10px 12px",
												fontFamily: "JetBrains Mono, monospace",
												fontSize: 11.5,
											}}
										>
											{m.table.map((row, j) => (
												<div
													key={j}
													style={{
														display: "flex",
														justifyContent: "space-between",
														padding: "4px 0",
														color: row[2] ? "#fbbf24" : T.mutedHi,
														borderTop:
															j > 0 && row[2]
																? "1px solid rgba(255,255,255,0.08)"
																: "none",
														paddingTop: j > 0 && row[2] ? 8 : 4,
														marginTop: row[2] ? 4 : 0,
														fontWeight: row[2] ? 700 : 500,
														whiteSpace: "nowrap",
														gap: 12,
													}}
												>
													<span style={{ whiteSpace: "nowrap" }}>{row[0]}</span>
													<span style={{ whiteSpace: "nowrap" }}>{row[1]}</span>
												</div>
											))}
										</div>
									)}
								</div>
							)}
						</div>
					))}
				</div>

				{/* Actions */}
				<div
					style={{ display: "flex", gap: 6, marginTop: 18, flexWrap: "wrap" }}
				>
					{actions.map((a, i) => (
						<button
							key={i}
							style={{
								padding: "8px 14px",
								fontSize: 11.5,
								fontWeight: 600,
								whiteSpace: "nowrap",
								background: "rgba(255,255,255,0.04)",
								color: "#fff",
								border: "1px solid rgba(255,255,255,0.1)",
								borderRadius: 99,
								cursor: "pointer",
								fontFamily: "inherit",
							}}
						>
							{a}
						</button>
					))}
				</div>
			</div>
		</div>
	);
}